@workos-inc/widgets 1.6.0 → 1.7.0-pre.0

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

@@ -85,8 +85,9 @@ const UserSessions = ({
             /* @__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,
+            import_elements.Button,
             {
+              variant: "secondary",
               onClick: () => {
                 setOpenLogoutAllSessionsDialog(true);
               },
@@ -159,16 +160,7 @@ const UserSession = ({
         ] })
       ] })
     ] }),
-    !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"
-      }
-    ) })
+    !isCurrentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { ml: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", onClick: () => onSignOut?.(session), children: "Sign out" }) })
   ] });
 };
 function getWidgetRootDomProps(state, domProps) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  getUserLocation,\n  parseUserAgent,\n  type WidgetRootDomProps,\n  type WidgetRootState,\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 extends WidgetRootDomProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nconst UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n  ...domProps\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      {...getWidgetRootDomProps(\"resolved\", domProps)}\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\ninterface UserSessionsLoadingProps extends WidgetRootDomProps {}\n\nconst UserSessionsLoading: React.FC<UserSessionsLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\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\ninterface UserSessionsErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSessionsError: React.FC<UserSessionsErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\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\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-sessions\",\n    widgetState: state,\n  });\n}\n\nexport type { UserSessionsLoadingProps, UserSessionsErrorProps };\nexport { UserSessions, UserSessionsLoading, UserSessionsError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, Button, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  getUserLocation,\n  parseUserAgent,\n  type WidgetRootDomProps,\n  type WidgetRootState,\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 extends WidgetRootDomProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nconst UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n  ...domProps\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      {...getWidgetRootDomProps(\"resolved\", domProps)}\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            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </Button>\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\ninterface UserSessionsLoadingProps extends WidgetRootDomProps {}\n\nconst UserSessionsLoading: React.FC<UserSessionsLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\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\ninterface UserSessionsErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSessionsError: React.FC<UserSessionsErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\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\">\n          <Button variant=\"secondary\" onClick={() => onSignOut?.(session)}>\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-sessions\",\n    widgetState: state,\n  });\n}\n\nexport type { UserSessionsLoadingProps, UserSessionsErrorProps };\nexport { UserSessions, UserSessionsLoading, UserSessionsError };\n"],"mappings":"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","names":[]}

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

@@ -1,6 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { WidgetRootDomProps } from './utils.cjs';
 import { ActiveSession } from '../api/endpoint.cjs';
+import './elements.cjs';
+import 'react';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.cjs';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.cjs';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.cjs';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.cjs';
+import '@radix-ui/themes/components/select';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
 

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

@@ -33,7 +33,6 @@ __export(users_filter_exports, {
 });
 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");
@@ -63,16 +62,16 @@ const UsersFilter = ({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_themes.Select.Root,
+    import_elements.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))
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: roles ? roleName : ALL_ROLES_NAME }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { 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.Select.Item, { value: role2.slug, children: role2.name }) }, role2.slug))
         ] })
       ]
     }

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../src/lib/users-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select } 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      <Select.Trigger>{roles ? roleName : ALL_ROLES_NAME}</Select.Trigger>\n      <Select.Content>\n        <Select.Item value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</Select.Item>\n        {roles?.map((role) => (\n          <React.Fragment key={role.slug}>\n            <Select.Item value={role.slug}>{role.name}</Select.Item>\n          </React.Fragment>\n        ))}\n      </Select.Content>\n    </Select.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDM;AA/CN,YAAuB;AACvB,sBAAuB;AACvB,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,uBAAO;AAAA,IAAP;AAAA,MACC,OAAO,QAAQ,eAAe;AAAA,MAC9B;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,uBAAO,SAAP,EAAgB,kBAAQ,WAAW,gBAAe;AAAA,QACnD,6CAAC,uBAAO,SAAP,EACC;AAAA,sDAAC,uBAAO,MAAP,EAAY,OAAO,iBAAkB,0BAAe;AAAA,UACpD,OAAO,IAAI,CAACA,UACX,4CAAC,MAAM,UAAN,EACC,sDAAC,uBAAO,MAAP,EAAY,OAAOA,MAAK,MAAO,UAAAA,MAAK,MAAK,KADvBA,MAAK,IAE1B,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["role"]}

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

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

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

@@ -48,6 +48,7 @@ var import_utils = require("./utils.js");
 var import_constants = require("./constants.js");
 var import_users_management_context = require("./users-management-context.js");
 var import_generic_error = require("./generic-error.js");
+var import_react_icons = require("@radix-ui/react-icons");
 const UsersManagement = ({
   userData,
   rolesData,
@@ -93,7 +94,7 @@ const UsersManagement = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
@@ -170,30 +171,14 @@ const UsersManagement = ({
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LastActive, { user, isHydrated }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_actions_dropdown.UserActionsDropdown, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.IconButton, { title: "User actions", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "User actions" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        width: "16",
-                        height: "16",
-                        strokeWidth: 1.5,
-                        stroke: "currentColor",
-                        "aria-hidden": true,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
-                          }
-                        )
-                      }
-                    )
-                  ] }) }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_actions_dropdown.UserActionsDropdown, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_elements.IconButton,
+                    {
+                      title: "User actions",
+                      "aria-label": "User actions",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
+                    }
+                  ) }) })
                 ] }, user.id);
               }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Row, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { colSpan: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsersManagementEmptyState, { isPending }) }) })
             }
@@ -201,8 +186,9 @@ const UsersManagement = ({
         ] }),
         showPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_elements.SecondaryButton,
+            import_elements.Button,
             {
+              variant: "secondary",
               size: "1",
               disabled: !pagination.after || isPending || void 0,
               loading: deferredLoading,
@@ -218,8 +204,9 @@ const UsersManagement = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_elements.SecondaryButton,
+            import_elements.Button,
             {
+              variant: "secondary",
               size: "1",
               disabled: !pagination.before || isPending || void 0,
               loading: deferredLoading,
@@ -250,12 +237,12 @@ const UsersManagementLoading = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "1fr auto", gap: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextField, {}) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Select.Root, { value: "all", onValueChange: () => void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectTrigger, { children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: "all", children: "All" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Root, { value: "all", onValueChange: () => void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: "All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { value: "all", children: "All" }) })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
@@ -286,8 +273,8 @@ const UsersManagementLoading = (props) => {
           ] }, index)) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Previous" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Next" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Previous" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Next" }) })
         ] })
       ]
     }
@@ -438,8 +425,9 @@ const UsersManagementEmptyState = ({ isPending }) => {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_elements.SecondaryButton,
+        import_elements.Button,
         {
+          variant: "secondary",
           size: "1",
           onClick: () => {
             setClearing({ isClearing: true, lastSearchQuery: searchQuery });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/users-management.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Flex,\n  Grid,\n  Select,\n  Separator,\n  Table,\n  Tooltip,\n  Text,\n  type TextProps,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n  Avatar,\n  Badge,\n  IconButton,\n  PrimaryButton,\n  SecondaryButton,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  Skeleton,\n  TextField,\n} from \"./elements.js\";\nimport { InviteUserDialog } from \"./invite-user-dialog.js\";\nimport { SearchProvider, useSearchContext } from \"./search-provider.js\";\nimport { useIsHydrated } from \"./use-is-hydrated.js\";\nimport { UserActionsDropdown } from \"./user-actions-dropdown.js\";\nimport { UsersFilter } from \"./users-filter.js\";\nimport { UsersSearch } from \"./users-search.js\";\nimport {\n  getBestName,\n  getComparativeReadableDate,\n  getDomProps,\n  pluralize,\n  WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { USER_ROW_LIMIT } from \"./constants.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { Member, MemberRole, MembersQueryResult } from \"../api/endpoint.js\";\nimport { GenericError } from \"./generic-error.js\";\n\ninterface UsersManagementProps extends WidgetRootDomProps {\n  rolesData: { roles: MemberRole[]; multipleRolesEnabled: boolean };\n  userData: MembersQueryResult;\n  disableRolesFilter?: boolean;\n  // When the users list is loading new users\n  isPending: boolean;\n}\n\nconst UsersManagement: React.FC<UsersManagementProps> = ({\n  userData,\n  rolesData,\n  isPending,\n  disableRolesFilter,\n  ...domProps\n}) => {\n  const users = userData?.data ?? [];\n  const usersCount = users?.length ?? 0;\n  const isHydrated = useIsHydrated();\n  const { listMetadata: pagination = {} } = userData;\n  const { dispatch } = useUsersManagementContext();\n  const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;\n\n  // we only want to show the loading indicator for some buttons if the request\n  // is still pending after 500ms. If the request is fast enough the indicator\n  // is a bit jarring.\n  const [deferredLoading, setDeferredLoading] = React.useState(false);\n  React.useEffect(() => {\n    if (isPending) {\n      const timeoutId = window.setTimeout(() => {\n        setDeferredLoading(true);\n      }, 500);\n      return () => {\n        window.clearTimeout(timeoutId);\n      };\n    } else {\n      setDeferredLoading(false);\n    }\n  }, [isPending]);\n\n  const showPagination = !!(pagination.before || pagination.after);\n\n  return (\n    <SearchProvider>\n      <Flex\n        direction=\"column\"\n        gap=\"3\"\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      >\n        <Grid columns=\"1fr auto\" gap=\"2\">\n          <Flex gap=\"2\" align=\"center\">\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <UsersSearch />\n            </Box>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <UsersFilter\n                roles={rolesData.roles}\n                disabled={disableRolesFilter}\n              />\n            </Box>\n          </Flex>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <InviteUserDialog>\n              <PrimaryButton>Invite user</PrimaryButton>\n            </InviteUserDialog>\n          </Box>\n        </Grid>\n        <Table.Root variant=\"ghost\" size=\"1\">\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeaderCell width=\"260px\">\n                User\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"100px\">\n                {`Role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"140px\">\n                Last active\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"28px\" />\n            </Table.Row>\n          </Table.Header>\n\n          <Table.Body\n            style={{\n              transition: `opacity 0.2s ease-out ${isPending ? \"0.2s\" : \"0s\"}`,\n              opacity: isPending && usersCount > 0 ? 0.5 : 1,\n            }}\n          >\n            {users.length > 0 ? (\n              users.map((user) => {\n                const userDisplayName = getBestName(user);\n                const dimText =\n                  user.status === \"InviteRevoked\" ||\n                  user.status === \"InviteExpired\";\n                return (\n                  <Table.Row key={user.id} align=\"center\">\n                    <Table.RowHeaderCell>\n                      <Flex\n                        align=\"center\"\n                        gap=\"3\"\n                        overflow=\"hidden\"\n                        height=\"var(--space-7)\"\n                      >\n                        <Avatar\n                          size=\"2\"\n                          fallback={<FallbackUserIcon />}\n                          src={user.profilePictureUrl ?? undefined}\n                          dim={dimText}\n                        />\n\n                        {userDisplayName ? (\n                          <Flex\n                            direction=\"column\"\n                            align=\"start\"\n                            height=\"var(--space-7)\"\n                            justify=\"center\"\n                            overflow=\"hidden\"\n                          >\n                            <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                              <TableCellText dim={dimText}>\n                                {userDisplayName}\n                              </TableCellText>\n                              <UserBadge user={user} />\n                            </Flex>\n                            <TableCellText\n                              level=\"secondary\"\n                              title={user.email}\n                              dim={dimText}\n                            >\n                              {user.email}\n                            </TableCellText>\n                          </Flex>\n                        ) : (\n                          <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                            <TableCellText dim={dimText} title={user.email}>\n                              {user.email}\n                            </TableCellText>\n                            <UserBadge user={user} />\n                          </Flex>\n                        )}\n                      </Flex>\n                    </Table.RowHeaderCell>\n                    <Table.Cell>\n                      <UserRolesCellContent\n                        user={user}\n                        isMultipleRolesEnabled={isMultipleRolesEnabled}\n                        dimText={dimText}\n                      />\n                    </Table.Cell>\n                    <Table.Cell>\n                      <LastActive user={user} isHydrated={isHydrated} />\n                    </Table.Cell>\n                    <Table.Cell justify=\"end\">\n                      <UserActionsDropdown user={user}>\n                        <IconButton title=\"User actions\">\n                          <VisuallyHidden>User actions</VisuallyHidden>\n                          <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            width=\"16\"\n                            height=\"16\"\n                            strokeWidth={1.5}\n                            stroke=\"currentColor\"\n                            aria-hidden\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              d=\"M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\"\n                            />\n                          </svg>\n                        </IconButton>\n                      </UserActionsDropdown>\n                    </Table.Cell>\n                  </Table.Row>\n                );\n              })\n            ) : (\n              <Table.Row align=\"center\">\n                <Table.Cell colSpan={4}>\n                  <UsersManagementEmptyState isPending={isPending} />\n                </Table.Cell>\n              </Table.Row>\n            )}\n          </Table.Body>\n        </Table.Root>\n\n        {showPagination ? (\n          <Flex gap=\"2\" justify=\"end\">\n            <SecondaryButton\n              size=\"1\"\n              disabled={!pagination.after || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.after) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: pagination.after },\n                  });\n                }\n              }}\n            >\n              Previous\n            </SecondaryButton>\n            <SecondaryButton\n              size=\"1\"\n              disabled={!pagination.before || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.before) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: pagination.before },\n                  });\n                }\n              }}\n            >\n              Next\n            </SecondaryButton>\n          </Flex>\n        ) : null}\n      </Flex>\n    </SearchProvider>\n  );\n};\n\ninterface UsersManagementLoadingProps extends WidgetRootDomProps {}\n\nconst UsersManagementLoading: React.FC<UsersManagementLoadingProps> = (\n  props,\n) => {\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\n    >\n      <Grid columns=\"1fr auto\" gap=\"2\">\n        <Flex gap=\"2\" align=\"center\">\n          <Skeleton loading>\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <TextField />\n            </Box>\n          </Skeleton>\n          <Skeleton loading>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <Select.Root value=\"all\" onValueChange={() => void 0}>\n                <SelectTrigger>All</SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All</SelectItem>\n                </SelectContent>\n              </Select.Root>\n            </Box>\n          </Skeleton>\n        </Flex>\n        <Skeleton loading>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <PrimaryButton>Invite user</PrimaryButton>\n          </Box>\n        </Skeleton>\n      </Grid>\n      <Table.Root variant=\"ghost\" size=\"1\">\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeaderCell width=\"260px\">\n              <Skeleton loading>User</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"100px\">\n              <Skeleton>Role</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"140px\">\n              <Skeleton>Last active</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"28px\" />\n          </Table.Row>\n        </Table.Header>\n\n        <Table.Body>\n          {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (\n            <Table.Row key={index} align=\"center\">\n              <Table.RowHeaderCell>\n                <Flex align=\"center\" gap=\"3\">\n                  <Skeleton>\n                    <Avatar size=\"2\" fallback=\"F\" />\n                  </Skeleton>\n\n                  <Flex\n                    direction=\"column\"\n                    height=\"var(--space-7)\"\n                    justify=\"center\"\n                  >\n                    <Skeleton width=\"180px\" height=\"var(--space-4)\" />\n                    <Skeleton width=\"90px\" height=\"var(--space-3)\" mt=\"1\" />\n                  </Flex>\n                </Flex>\n              </Table.RowHeaderCell>\n              <Table.Cell>\n                <Flex wrap=\"wrap\" gap=\"1\">\n                  <Skeleton width=\"75px\" height=\"var(--space-4)\" />\n                </Flex>\n              </Table.Cell>\n              <Table.Cell>\n                <Skeleton width=\"120px\" height=\"var(--space-4)\" />\n              </Table.Cell>\n              <Table.Cell justify=\"end\" />\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n\n      <Flex gap=\"2\" justify=\"end\">\n        <Skeleton loading>\n          <SecondaryButton size=\"1\">Previous</SecondaryButton>\n        </Skeleton>\n        <Skeleton loading>\n          <SecondaryButton size=\"1\">Next</SecondaryButton>\n        </Skeleton>\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface UsersManagementErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UsersManagementError: React.FC<UsersManagementErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <GenericError\n      error={error}\n      minHeight=\"676px\"\n      {...getWidgetRootDomProps(\"error\", domProps)}\n    />\n  );\n};\n\nfunction UserBadge({ user }: { user: Member }) {\n  // TODO: This is not yet available in the data. Update here after API is updated.\n  if (user.isLoggedInUser) {\n    return (\n      <Badge color=\"gray\" style={{ userSelect: \"none\" }}>\n        You\n      </Badge>\n    );\n  }\n  if (user.status === \"Invited\") {\n    return (\n      <Badge color=\"amber\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: </VisuallyHidden>Invited\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteExpired\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Expired\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteRevoked\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Revoked\n      </Badge>\n    );\n  }\n  return null;\n}\n\ninterface LastActiveProps {\n  user: Member;\n  isHydrated: boolean;\n  dim?: boolean;\n}\n\nfunction LastActive(props: LastActiveProps) {\n  if (!props.user.lastActivityAt) {\n    return (\n      <>\n        <VisuallyHidden>\n          {props.user.status === \"Active\" ? \"Never\" : \"Not active\"}\n        </VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n  return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;\n}\n\nfunction LastActiveImpl({\n  date,\n  isHydrated,\n  dim,\n}: LastActiveProps & { date: string }) {\n  const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {\n    const defaultTimeZone = \"America/Los_Angeles\";\n    const lastActiveDate = new Date(date);\n    const lastActiveDateTime = lastActiveDate.toLocaleTimeString(\"en-US\", {\n      // hard-coded timezone before hydration to prevent server/client mismatch\n      timeZone: isHydrated ? undefined : defaultTimeZone,\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n      hour: \"numeric\",\n      minute: \"numeric\",\n    });\n\n    // Server and client may produce a different 'now' date, so only\n    // show comparative date if the component is hydrated to prevent a\n    // server/client mismatch\n    const lastActiveDisplay = isHydrated\n      ? getComparativeReadableDate(new Date(), lastActiveDate)\n      : lastActiveDate.toLocaleDateString(\"en-US\", {\n          // hard-coded timezone to prevent server/client mismatch\n          timeZone: defaultTimeZone,\n          month: \"long\",\n          day: \"numeric\",\n          year: \"numeric\",\n        });\n\n    return { lastActiveDateTime, lastActiveDisplay };\n  }, [isHydrated, date]);\n\n  // handle cases where the DB might return an invalid date string\n  if (lastActiveDisplay === \"Invalid Date\") {\n    return (\n      <>\n        <VisuallyHidden>Unknown</VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n\n  return (\n    <TableCellText asChild dim={dim}>\n      <time dateTime={date} title={lastActiveDateTime}>\n        {lastActiveDisplay}\n      </time>\n    </TableCellText>\n  );\n}\n\nconst TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(\n  function TableCellText(\n    { children, dim, level = \"primary\", ...props },\n    forwardedRef,\n  ) {\n    return (\n      <Text\n        ref={forwardedRef}\n        color={level === \"secondary\" ? \"gray\" : undefined}\n        weight={level === \"secondary\" ? \"regular\" : \"medium\"}\n        size={level === \"secondary\" ? \"1\" : \"2\"}\n        truncate\n        {...props}\n        style={\n          dim\n            ? {\n                // TODO: use CSS var instead of hard-coded value for opacity\n                opacity: 0.6,\n                ...props.style,\n              }\n            : props.style\n        }\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\ntype TableCellTextProps = TextProps & {\n  level?: \"primary\" | \"secondary\";\n  dim?: boolean;\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nconst UsersManagementEmptyState = ({ isPending }: { isPending: boolean }) => {\n  const { clearSearch } = useSearchContext();\n  const {\n    state: { searchQuery },\n  } = useUsersManagementContext();\n\n  // When the search query is cleared, the users query is re-fetched which sends\n  // us into a pending state. When this happens we want to keep a snapshot of\n  // the previous search query while the query is revalidated. We can use this\n  // to keep the 'No users found for query' UI in place until re-fetching is\n  // complete, otherwise the view flips to 'No users found' very quickly before\n  // the full table is shown again.\n  const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({\n    isClearing: false,\n    lastSearchQuery: null as null | string,\n  });\n  const [wasPending, setWasPending] = React.useState(isPending);\n  if (wasPending !== isPending) {\n    setWasPending(isPending);\n    if (!isPending) {\n      setClearing((prev) =>\n        prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,\n      );\n    }\n  }\n\n  if (searchQuery || isClearing) {\n    return (\n      <Flex align=\"center\" justify=\"center\" py=\"8\" direction=\"column\" gap=\"2\">\n        <Text size=\"2\">\n          No users found for query{\" \"}\n          <Text weight=\"medium\">\n            “{isClearing ? lastSearchQuery : searchQuery}”\n          </Text>\n        </Text>\n\n        <SecondaryButton\n          size=\"1\"\n          onClick={() => {\n            setClearing({ isClearing: true, lastSearchQuery: searchQuery });\n            clearSearch();\n          }}\n          loading={isPending}\n        >\n          Clear search\n        </SecondaryButton>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex align=\"center\" justify=\"center\" py=\"8\" gap=\"2\">\n      <Text size=\"2\">No users found</Text>\n    </Flex>\n  );\n};\n\ninterface UserRolesCellContentProps {\n  user: Member;\n  isMultipleRolesEnabled: boolean;\n  dimText: boolean;\n}\n\nfunction UserRolesCellContent({\n  user,\n  isMultipleRolesEnabled,\n  dimText,\n}: UserRolesCellContentProps) {\n  if (!user.roles || user.roles.length === 0) {\n    return (\n      <>\n        <VisuallyHidden>No roles assigned</VisuallyHidden>\n        <span aria-hidden style={{ userSelect: \"none\" }}>\n          –\n        </span>\n      </>\n    );\n  }\n\n  if (isMultipleRolesEnabled && user.roles.length > 1) {\n    return (\n      <Tooltip\n        content={user.roles?.map((role) => role.name).join(\", \")}\n        maxWidth=\"250px\"\n      >\n        <TableCellText dim={dimText}>\n          {pluralize(\"role\", user.roles.length)}\n        </TableCellText>\n      </Tooltip>\n    );\n  }\n\n  return <TableCellText dim={dimText}>{user.roles?.[0]?.name}</TableCellText>;\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"users-management\",\n    widgetState: state,\n  });\n}\n\nexport type { UsersManagementLoadingProps, UsersManagementErrorProps };\nexport { UsersManagement, UsersManagementLoading, UsersManagementError };\n"],"mappings":"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","names":["lastActiveDateTime","lastActiveDisplay","TableCellText"]}
+{"version":3,"sources":["../../../src/lib/users-management.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Flex,\n  Grid,\n  Separator,\n  Table,\n  Tooltip,\n  Text,\n  type TextProps,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n  Avatar,\n  Badge,\n  IconButton,\n  Button,\n  Select,\n  Skeleton,\n  TextField,\n} from \"./elements.js\";\nimport { InviteUserDialog } from \"./invite-user-dialog.js\";\nimport { SearchProvider, useSearchContext } from \"./search-provider.js\";\nimport { useIsHydrated } from \"./use-is-hydrated.js\";\nimport { UserActionsDropdown } from \"./user-actions-dropdown.js\";\nimport { UsersFilter } from \"./users-filter.js\";\nimport { UsersSearch } from \"./users-search.js\";\nimport {\n  getBestName,\n  getComparativeReadableDate,\n  getDomProps,\n  pluralize,\n  WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { USER_ROW_LIMIT } from \"./constants.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { Member, MemberRole, MembersQueryResult } from \"../api/endpoint.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\";\n\ninterface UsersManagementProps extends WidgetRootDomProps {\n  rolesData: { roles: MemberRole[]; multipleRolesEnabled: boolean };\n  userData: MembersQueryResult;\n  disableRolesFilter?: boolean;\n  // When the users list is loading new users\n  isPending: boolean;\n}\n\nconst UsersManagement: React.FC<UsersManagementProps> = ({\n  userData,\n  rolesData,\n  isPending,\n  disableRolesFilter,\n  ...domProps\n}) => {\n  const users = userData?.data ?? [];\n  const usersCount = users?.length ?? 0;\n  const isHydrated = useIsHydrated();\n  const { listMetadata: pagination = {} } = userData;\n  const { dispatch } = useUsersManagementContext();\n  const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;\n\n  // we only want to show the loading indicator for some buttons if the request\n  // is still pending after 500ms. If the request is fast enough the indicator\n  // is a bit jarring.\n  const [deferredLoading, setDeferredLoading] = React.useState(false);\n  React.useEffect(() => {\n    if (isPending) {\n      const timeoutId = window.setTimeout(() => {\n        setDeferredLoading(true);\n      }, 500);\n      return () => {\n        window.clearTimeout(timeoutId);\n      };\n    } else {\n      setDeferredLoading(false);\n    }\n  }, [isPending]);\n\n  const showPagination = !!(pagination.before || pagination.after);\n\n  return (\n    <SearchProvider>\n      <Flex\n        direction=\"column\"\n        gap=\"3\"\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      >\n        <Grid columns=\"1fr auto\" gap=\"2\">\n          <Flex gap=\"2\" align=\"center\">\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <UsersSearch />\n            </Box>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <UsersFilter\n                roles={rolesData.roles}\n                disabled={disableRolesFilter}\n              />\n            </Box>\n          </Flex>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <InviteUserDialog>\n              <Button>Invite user</Button>\n            </InviteUserDialog>\n          </Box>\n        </Grid>\n        <Table.Root variant=\"ghost\" size=\"1\">\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeaderCell width=\"260px\">\n                User\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"100px\">\n                {`Role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"140px\">\n                Last active\n              </Table.ColumnHeaderCell>\n              <Table.ColumnHeaderCell width=\"28px\" />\n            </Table.Row>\n          </Table.Header>\n\n          <Table.Body\n            style={{\n              transition: `opacity 0.2s ease-out ${isPending ? \"0.2s\" : \"0s\"}`,\n              opacity: isPending && usersCount > 0 ? 0.5 : 1,\n            }}\n          >\n            {users.length > 0 ? (\n              users.map((user) => {\n                const userDisplayName = getBestName(user);\n                const dimText =\n                  user.status === \"InviteRevoked\" ||\n                  user.status === \"InviteExpired\";\n                return (\n                  <Table.Row key={user.id} align=\"center\">\n                    <Table.RowHeaderCell>\n                      <Flex\n                        align=\"center\"\n                        gap=\"3\"\n                        overflow=\"hidden\"\n                        height=\"var(--space-7)\"\n                      >\n                        <Avatar\n                          size=\"2\"\n                          fallback={<FallbackUserIcon />}\n                          src={user.profilePictureUrl ?? undefined}\n                          dim={dimText}\n                        />\n\n                        {userDisplayName ? (\n                          <Flex\n                            direction=\"column\"\n                            align=\"start\"\n                            height=\"var(--space-7)\"\n                            justify=\"center\"\n                            overflow=\"hidden\"\n                          >\n                            <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                              <TableCellText dim={dimText}>\n                                {userDisplayName}\n                              </TableCellText>\n                              <UserBadge user={user} />\n                            </Flex>\n                            <TableCellText\n                              level=\"secondary\"\n                              title={user.email}\n                              dim={dimText}\n                            >\n                              {user.email}\n                            </TableCellText>\n                          </Flex>\n                        ) : (\n                          <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n                            <TableCellText dim={dimText} title={user.email}>\n                              {user.email}\n                            </TableCellText>\n                            <UserBadge user={user} />\n                          </Flex>\n                        )}\n                      </Flex>\n                    </Table.RowHeaderCell>\n                    <Table.Cell>\n                      <UserRolesCellContent\n                        user={user}\n                        isMultipleRolesEnabled={isMultipleRolesEnabled}\n                        dimText={dimText}\n                      />\n                    </Table.Cell>\n                    <Table.Cell>\n                      <LastActive user={user} isHydrated={isHydrated} />\n                    </Table.Cell>\n                    <Table.Cell justify=\"end\">\n                      <UserActionsDropdown user={user}>\n                        <IconButton\n                          title=\"User actions\"\n                          aria-label=\"User actions\"\n                        >\n                          <DotsHorizontalIcon />\n                        </IconButton>\n                      </UserActionsDropdown>\n                    </Table.Cell>\n                  </Table.Row>\n                );\n              })\n            ) : (\n              <Table.Row align=\"center\">\n                <Table.Cell colSpan={4}>\n                  <UsersManagementEmptyState isPending={isPending} />\n                </Table.Cell>\n              </Table.Row>\n            )}\n          </Table.Body>\n        </Table.Root>\n\n        {showPagination ? (\n          <Flex gap=\"2\" justify=\"end\">\n            <Button\n              variant=\"secondary\"\n              size=\"1\"\n              disabled={!pagination.after || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.after) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: pagination.after },\n                  });\n                }\n              }}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"secondary\"\n              size=\"1\"\n              disabled={!pagination.before || isPending || undefined}\n              loading={deferredLoading}\n              onClick={() => {\n                if (pagination.before) {\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: pagination.before },\n                  });\n                }\n              }}\n            >\n              Next\n            </Button>\n          </Flex>\n        ) : null}\n      </Flex>\n    </SearchProvider>\n  );\n};\n\ninterface UsersManagementLoadingProps extends WidgetRootDomProps {}\n\nconst UsersManagementLoading: React.FC<UsersManagementLoadingProps> = (\n  props,\n) => {\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\n    >\n      <Grid columns=\"1fr auto\" gap=\"2\">\n        <Flex gap=\"2\" align=\"center\">\n          <Skeleton loading>\n            <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n              <TextField />\n            </Box>\n          </Skeleton>\n          <Skeleton loading>\n            <Box flexGrow=\"0\" flexShrink=\"0\">\n              <Select.Root value=\"all\" onValueChange={() => void 0}>\n                <Select.Trigger>All</Select.Trigger>\n                <Select.Content>\n                  <Select.Item value=\"all\">All</Select.Item>\n                </Select.Content>\n              </Select.Root>\n            </Box>\n          </Skeleton>\n        </Flex>\n        <Skeleton loading>\n          <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n            <Button>Invite user</Button>\n          </Box>\n        </Skeleton>\n      </Grid>\n      <Table.Root variant=\"ghost\" size=\"1\">\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeaderCell width=\"260px\">\n              <Skeleton loading>User</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"100px\">\n              <Skeleton>Role</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"140px\">\n              <Skeleton>Last active</Skeleton>\n            </Table.ColumnHeaderCell>\n            <Table.ColumnHeaderCell width=\"28px\" />\n          </Table.Row>\n        </Table.Header>\n\n        <Table.Body>\n          {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (\n            <Table.Row key={index} align=\"center\">\n              <Table.RowHeaderCell>\n                <Flex align=\"center\" gap=\"3\">\n                  <Skeleton>\n                    <Avatar size=\"2\" fallback=\"F\" />\n                  </Skeleton>\n\n                  <Flex\n                    direction=\"column\"\n                    height=\"var(--space-7)\"\n                    justify=\"center\"\n                  >\n                    <Skeleton width=\"180px\" height=\"var(--space-4)\" />\n                    <Skeleton width=\"90px\" height=\"var(--space-3)\" mt=\"1\" />\n                  </Flex>\n                </Flex>\n              </Table.RowHeaderCell>\n              <Table.Cell>\n                <Flex wrap=\"wrap\" gap=\"1\">\n                  <Skeleton width=\"75px\" height=\"var(--space-4)\" />\n                </Flex>\n              </Table.Cell>\n              <Table.Cell>\n                <Skeleton width=\"120px\" height=\"var(--space-4)\" />\n              </Table.Cell>\n              <Table.Cell justify=\"end\" />\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n\n      <Flex gap=\"2\" justify=\"end\">\n        <Skeleton loading>\n          <Button variant=\"secondary\" size=\"1\">\n            Previous\n          </Button>\n        </Skeleton>\n        <Skeleton loading>\n          <Button variant=\"secondary\" size=\"1\">\n            Next\n          </Button>\n        </Skeleton>\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface UsersManagementErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UsersManagementError: React.FC<UsersManagementErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <GenericError\n      error={error}\n      minHeight=\"676px\"\n      {...getWidgetRootDomProps(\"error\", domProps)}\n    />\n  );\n};\n\nfunction UserBadge({ user }: { user: Member }) {\n  // TODO: This is not yet available in the data. Update here after API is updated.\n  if (user.isLoggedInUser) {\n    return (\n      <Badge color=\"gray\" style={{ userSelect: \"none\" }}>\n        You\n      </Badge>\n    );\n  }\n  if (user.status === \"Invited\") {\n    return (\n      <Badge color=\"amber\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: </VisuallyHidden>Invited\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteExpired\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Expired\n      </Badge>\n    );\n  }\n  if (user.status === \"InviteRevoked\") {\n    return (\n      <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n        <VisuallyHidden>Status: Invite </VisuallyHidden>\n        Revoked\n      </Badge>\n    );\n  }\n  return null;\n}\n\ninterface LastActiveProps {\n  user: Member;\n  isHydrated: boolean;\n  dim?: boolean;\n}\n\nfunction LastActive(props: LastActiveProps) {\n  if (!props.user.lastActivityAt) {\n    return (\n      <>\n        <VisuallyHidden>\n          {props.user.status === \"Active\" ? \"Never\" : \"Not active\"}\n        </VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n  return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;\n}\n\nfunction LastActiveImpl({\n  date,\n  isHydrated,\n  dim,\n}: LastActiveProps & { date: string }) {\n  const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {\n    const defaultTimeZone = \"America/Los_Angeles\";\n    const lastActiveDate = new Date(date);\n    const lastActiveDateTime = lastActiveDate.toLocaleTimeString(\"en-US\", {\n      // hard-coded timezone before hydration to prevent server/client mismatch\n      timeZone: isHydrated ? undefined : defaultTimeZone,\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n      hour: \"numeric\",\n      minute: \"numeric\",\n    });\n\n    // Server and client may produce a different 'now' date, so only\n    // show comparative date if the component is hydrated to prevent a\n    // server/client mismatch\n    const lastActiveDisplay = isHydrated\n      ? getComparativeReadableDate(new Date(), lastActiveDate)\n      : lastActiveDate.toLocaleDateString(\"en-US\", {\n          // hard-coded timezone to prevent server/client mismatch\n          timeZone: defaultTimeZone,\n          month: \"long\",\n          day: \"numeric\",\n          year: \"numeric\",\n        });\n\n    return { lastActiveDateTime, lastActiveDisplay };\n  }, [isHydrated, date]);\n\n  // handle cases where the DB might return an invalid date string\n  if (lastActiveDisplay === \"Invalid Date\") {\n    return (\n      <>\n        <VisuallyHidden>Unknown</VisuallyHidden>\n        <Separator />\n      </>\n    );\n  }\n\n  return (\n    <TableCellText asChild dim={dim}>\n      <time dateTime={date} title={lastActiveDateTime}>\n        {lastActiveDisplay}\n      </time>\n    </TableCellText>\n  );\n}\n\nconst TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(\n  function TableCellText(\n    { children, dim, level = \"primary\", ...props },\n    forwardedRef,\n  ) {\n    return (\n      <Text\n        ref={forwardedRef}\n        color={level === \"secondary\" ? \"gray\" : undefined}\n        weight={level === \"secondary\" ? \"regular\" : \"medium\"}\n        size={level === \"secondary\" ? \"1\" : \"2\"}\n        truncate\n        {...props}\n        style={\n          dim\n            ? {\n                // TODO: use CSS var instead of hard-coded value for opacity\n                opacity: 0.6,\n                ...props.style,\n              }\n            : props.style\n        }\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\ntype TableCellTextProps = TextProps & {\n  level?: \"primary\" | \"secondary\";\n  dim?: boolean;\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nconst UsersManagementEmptyState = ({ isPending }: { isPending: boolean }) => {\n  const { clearSearch } = useSearchContext();\n  const {\n    state: { searchQuery },\n  } = useUsersManagementContext();\n\n  // When the search query is cleared, the users query is re-fetched which sends\n  // us into a pending state. When this happens we want to keep a snapshot of\n  // the previous search query while the query is revalidated. We can use this\n  // to keep the 'No users found for query' UI in place until re-fetching is\n  // complete, otherwise the view flips to 'No users found' very quickly before\n  // the full table is shown again.\n  const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({\n    isClearing: false,\n    lastSearchQuery: null as null | string,\n  });\n  const [wasPending, setWasPending] = React.useState(isPending);\n  if (wasPending !== isPending) {\n    setWasPending(isPending);\n    if (!isPending) {\n      setClearing((prev) =>\n        prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,\n      );\n    }\n  }\n\n  if (searchQuery || isClearing) {\n    return (\n      <Flex align=\"center\" justify=\"center\" py=\"8\" direction=\"column\" gap=\"2\">\n        <Text size=\"2\">\n          No users found for query{\" \"}\n          <Text weight=\"medium\">\n            “{isClearing ? lastSearchQuery : searchQuery}”\n          </Text>\n        </Text>\n\n        <Button\n          variant=\"secondary\"\n          size=\"1\"\n          onClick={() => {\n            setClearing({ isClearing: true, lastSearchQuery: searchQuery });\n            clearSearch();\n          }}\n          loading={isPending}\n        >\n          Clear search\n        </Button>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex align=\"center\" justify=\"center\" py=\"8\" gap=\"2\">\n      <Text size=\"2\">No users found</Text>\n    </Flex>\n  );\n};\n\ninterface UserRolesCellContentProps {\n  user: Member;\n  isMultipleRolesEnabled: boolean;\n  dimText: boolean;\n}\n\nfunction UserRolesCellContent({\n  user,\n  isMultipleRolesEnabled,\n  dimText,\n}: UserRolesCellContentProps) {\n  if (!user.roles || user.roles.length === 0) {\n    return (\n      <>\n        <VisuallyHidden>No roles assigned</VisuallyHidden>\n        <span aria-hidden style={{ userSelect: \"none\" }}>\n          –\n        </span>\n      </>\n    );\n  }\n\n  if (isMultipleRolesEnabled && user.roles.length > 1) {\n    return (\n      <Tooltip\n        content={user.roles?.map((role) => role.name).join(\", \")}\n        maxWidth=\"250px\"\n      >\n        <TableCellText dim={dimText}>\n          {pluralize(\"role\", user.roles.length)}\n        </TableCellText>\n      </Tooltip>\n    );\n  }\n\n  return <TableCellText dim={dimText}>{user.roles?.[0]?.name}</TableCellText>;\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"users-management\",\n    widgetState: state,\n  });\n}\n\nexport type { UsersManagementLoadingProps, UsersManagementErrorProps };\nexport { UsersManagement, UsersManagementLoading, UsersManagementError };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4FU;AA1FV,YAAuB;AACvB,oBAUO;AACP,sBAQO;AACP,gCAAiC;AACjC,6BAAiD;AACjD,6BAA8B;AAC9B,mCAAoC;AACpC,0BAA4B;AAC5B,0BAA4B;AAC5B,mBAOO;AACP,uBAA+B;AAC/B,sCAA0C;AAE1C,2BAA6B;AAC7B,yBAAmC;AAUnC,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,UAAU,QAAQ,CAAC;AACjC,QAAM,aAAa,OAAO,UAAU;AACpC,QAAM,iBAAa,sCAAc;AACjC,QAAM,EAAE,cAAc,aAAa,CAAC,EAAE,IAAI;AAC1C,QAAM,EAAE,SAAS,QAAI,2DAA0B;AAC/C,QAAM,yBAAyB,UAAU;AAKzC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAClE,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW;AACb,YAAM,YAAY,OAAO,WAAW,MAAM;AACxC,2BAAmB,IAAI;AAAA,MACzB,GAAG,GAAG;AACN,aAAO,MAAM;AACX,eAAO,aAAa,SAAS;AAAA,MAC/B;AAAA,IACF,OAAO;AACL,yBAAmB,KAAK;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,iBAAiB,CAAC,EAAE,WAAW,UAAU,WAAW;AAE1D,SACE,4CAAC,yCACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,YAAY,QAAQ;AAAA,MAE9C;AAAA,qDAAC,sBAAK,SAAQ,YAAW,KAAI,KAC3B;AAAA,uDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wDAAC,qBAAI,WAAU,SAAQ,UAAS,KAAI,YAAW,KAC7C,sDAAC,mCAAY,GACf;AAAA,YACA,4CAAC,qBAAI,UAAS,KAAI,YAAW,KAC3B;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,UAAU;AAAA,gBACjB,UAAU;AAAA;AAAA,YACZ,GACF;AAAA,aACF;AAAA,UACA,4CAAC,qBAAI,UAAS,KAAI,YAAW,KAAI,OAAO,EAAE,WAAW,WAAW,GAC9D,sDAAC,8CACC,sDAAC,0BAAO,yBAAW,GACrB,GACF;AAAA,WACF;AAAA,QACA,6CAAC,oBAAM,MAAN,EAAW,SAAQ,SAAQ,MAAK,KAC/B;AAAA,sDAAC,oBAAM,QAAN,EACC,uDAAC,oBAAM,KAAN,EACC;AAAA,wDAAC,oBAAM,kBAAN,EAAuB,OAAM,SAAQ,kBAEtC;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,SAC3B,iBAAO,yBAAyB,MAAM,EAAE,IAC3C;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,SAAQ,yBAEtC;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,QAAO;AAAA,aACvC,GACF;AAAA,UAEA;AAAA,YAAC,oBAAM;AAAA,YAAN;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,yBAAyB,YAAY,SAAS,IAAI;AAAA,gBAC9D,SAAS,aAAa,aAAa,IAAI,MAAM;AAAA,cAC/C;AAAA,cAEC,gBAAM,SAAS,IACd,MAAM,IAAI,CAAC,SAAS;AAClB,sBAAM,sBAAkB,0BAAY,IAAI;AACxC,sBAAM,UACJ,KAAK,WAAW,mBAChB,KAAK,WAAW;AAClB,uBACE,6CAAC,oBAAM,KAAN,EAAwB,OAAM,UAC7B;AAAA,8DAAC,oBAAM,eAAN,EACC;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAM;AAAA,sBACN,KAAI;AAAA,sBACJ,UAAS;AAAA,sBACT,QAAO;AAAA,sBAEP;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,MAAK;AAAA,4BACL,UAAU,4CAAC,oBAAiB;AAAA,4BAC5B,KAAK,KAAK,qBAAqB;AAAA,4BAC/B,KAAK;AAAA;AAAA,wBACP;AAAA,wBAEC,kBACC;AAAA,0BAAC;AAAA;AAAA,4BACC,WAAU;AAAA,4BACV,OAAM;AAAA,4BACN,QAAO;AAAA,4BACP,SAAQ;AAAA,4BACR,UAAS;AAAA,4BAET;AAAA,2EAAC,sBAAK,KAAI,KAAI,OAAM,UAAS,UAAS,KACpC;AAAA,4EAAC,iBAAc,KAAK,SACjB,2BACH;AAAA,gCACA,4CAAC,aAAU,MAAY;AAAA,iCACzB;AAAA,8BACA;AAAA,gCAAC;AAAA;AAAA,kCACC,OAAM;AAAA,kCACN,OAAO,KAAK;AAAA,kCACZ,KAAK;AAAA,kCAEJ,eAAK;AAAA;AAAA,8BACR;AAAA;AAAA;AAAA,wBACF,IAEA,6CAAC,sBAAK,KAAI,KAAI,OAAM,UAAS,UAAS,KACpC;AAAA,sEAAC,iBAAc,KAAK,SAAS,OAAO,KAAK,OACtC,eAAK,OACR;AAAA,0BACA,4CAAC,aAAU,MAAY;AAAA,2BACzB;AAAA;AAAA;AAAA,kBAEJ,GACF;AAAA,kBACA,4CAAC,oBAAM,MAAN,EACC;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBACF,GACF;AAAA,kBACA,4CAAC,oBAAM,MAAN,EACC,sDAAC,cAAW,MAAY,YAAwB,GAClD;AAAA,kBACA,4CAAC,oBAAM,MAAN,EAAW,SAAQ,OAClB,sDAAC,oDAAoB,MACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAM;AAAA,sBACN,cAAW;AAAA,sBAEX,sDAAC,yCAAmB;AAAA;AAAA,kBACtB,GACF,GACF;AAAA,qBAlEc,KAAK,EAmErB;AAAA,cAEJ,CAAC,IAED,4CAAC,oBAAM,KAAN,EAAU,OAAM,UACf,sDAAC,oBAAM,MAAN,EAAW,SAAS,GACnB,sDAAC,6BAA0B,WAAsB,GACnD,GACF;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QAEC,iBACC,6CAAC,sBAAK,KAAI,KAAI,SAAQ,OACpB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAU,CAAC,WAAW,SAAS,aAAa;AAAA,cAC5C,SAAS;AAAA,cACT,SAAS,MAAM;AACb,oBAAI,WAAW,OAAO;AACpB,2BAAS;AAAA,oBACP,MAAM;AAAA,oBACN,YAAY,EAAE,OAAO,WAAW,MAAM;AAAA,kBACxC,CAAC;AAAA,gBACH;AAAA,cACF;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAU,CAAC,WAAW,UAAU,aAAa;AAAA,cAC7C,SAAS;AAAA,cACT,SAAS,MAAM;AACb,oBAAI,WAAW,QAAQ;AACrB,2BAAS;AAAA,oBACP,MAAM;AAAA,oBACN,YAAY,EAAE,QAAQ,WAAW,OAAO;AAAA,kBAC1C,CAAC;AAAA,gBACH;AAAA,cACF;AAAA,cACD;AAAA;AAAA,UAED;AAAA,WACF,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;AAIA,MAAM,yBAAgE,CACpE,UACG;AACH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,qDAAC,sBAAK,SAAQ,YAAW,KAAI,KAC3B;AAAA,uDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wDAAC,4BAAS,SAAO,MACf,sDAAC,qBAAI,WAAU,SAAQ,UAAS,KAAI,YAAW,KAC7C,sDAAC,6BAAU,GACb,GACF;AAAA,YACA,4CAAC,4BAAS,SAAO,MACf,sDAAC,qBAAI,UAAS,KAAI,YAAW,KAC3B,uDAAC,uBAAO,MAAP,EAAY,OAAM,OAAM,eAAe,MAAM,QAC5C;AAAA,0DAAC,uBAAO,SAAP,EAAe,iBAAG;AAAA,cACnB,4CAAC,uBAAO,SAAP,EACC,sDAAC,uBAAO,MAAP,EAAY,OAAM,OAAM,iBAAG,GAC9B;AAAA,eACF,GACF,GACF;AAAA,aACF;AAAA,UACA,4CAAC,4BAAS,SAAO,MACf,sDAAC,qBAAI,UAAS,KAAI,YAAW,KAAI,OAAO,EAAE,WAAW,WAAW,GAC9D,sDAAC,0BAAO,yBAAW,GACrB,GACF;AAAA,WACF;AAAA,QACA,6CAAC,oBAAM,MAAN,EAAW,SAAQ,SAAQ,MAAK,KAC/B;AAAA,sDAAC,oBAAM,QAAN,EACC,uDAAC,oBAAM,KAAN,EACC;AAAA,wDAAC,oBAAM,kBAAN,EAAuB,OAAM,SAC5B,sDAAC,4BAAS,SAAO,MAAC,kBAAI,GACxB;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,SAC5B,sDAAC,4BAAS,kBAAI,GAChB;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,SAC5B,sDAAC,4BAAS,yBAAW,GACvB;AAAA,YACA,4CAAC,oBAAM,kBAAN,EAAuB,OAAM,QAAO;AAAA,aACvC,GACF;AAAA,UAEA,4CAAC,oBAAM,MAAN,EACE,gBAAM,KAAK,EAAE,QAAQ,gCAAe,GAAG,CAAC,GAAG,UAC1C,6CAAC,oBAAM,KAAN,EAAsB,OAAM,UAC3B;AAAA,wDAAC,oBAAM,eAAN,EACC,uDAAC,sBAAK,OAAM,UAAS,KAAI,KACvB;AAAA,0DAAC,4BACC,sDAAC,0BAAO,MAAK,KAAI,UAAS,KAAI,GAChC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,QAAO;AAAA,kBACP,SAAQ;AAAA,kBAER;AAAA,gEAAC,4BAAS,OAAM,SAAQ,QAAO,kBAAiB;AAAA,oBAChD,4CAAC,4BAAS,OAAM,QAAO,QAAO,kBAAiB,IAAG,KAAI;AAAA;AAAA;AAAA,cACxD;AAAA,eACF,GACF;AAAA,YACA,4CAAC,oBAAM,MAAN,EACC,sDAAC,sBAAK,MAAK,QAAO,KAAI,KACpB,sDAAC,4BAAS,OAAM,QAAO,QAAO,kBAAiB,GACjD,GACF;AAAA,YACA,4CAAC,oBAAM,MAAN,EACC,sDAAC,4BAAS,OAAM,SAAQ,QAAO,kBAAiB,GAClD;AAAA,YACA,4CAAC,oBAAM,MAAN,EAAW,SAAQ,OAAM;AAAA,eAzBZ,KA0BhB,CACD,GACH;AAAA,WACF;AAAA,QAEA,6CAAC,sBAAK,KAAI,KAAI,SAAQ,OACpB;AAAA,sDAAC,4BAAS,SAAO,MACf,sDAAC,0BAAO,SAAQ,aAAY,MAAK,KAAI,sBAErC,GACF;AAAA,UACA,4CAAC,4BAAS,SAAO,MACf,sDAAC,0BAAO,SAAQ,aAAY,MAAK,KAAI,kBAErC,GACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,uBAA4D,CAAC;AAAA,EACjE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACT,GAAG,sBAAsB,SAAS,QAAQ;AAAA;AAAA,EAC7C;AAEJ;AAEA,SAAS,UAAU,EAAE,KAAK,GAAqB;AAE7C,MAAI,KAAK,gBAAgB;AACvB,WACE,4CAAC,yBAAM,OAAM,QAAO,OAAO,EAAE,YAAY,OAAO,GAAG,iBAEnD;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,WAAW;AAC7B,WACE,6CAAC,yBAAM,OAAM,SAAQ,OAAO,EAAE,YAAY,OAAO,GAC/C;AAAA,kDAAC,gCAAe,sBAAQ;AAAA,MAAiB;AAAA,OAC3C;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,iBAAiB;AACnC,WACE,6CAAC,yBAAM,OAAM,OAAM,OAAO,EAAE,YAAY,OAAO,GAC7C;AAAA,kDAAC,gCAAe,6BAAe;AAAA,MAAiB;AAAA,OAElD;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,iBAAiB;AACnC,WACE,6CAAC,yBAAM,OAAM,OAAM,OAAO,EAAE,YAAY,OAAO,GAC7C;AAAA,kDAAC,gCAAe,6BAAe;AAAA,MAAiB;AAAA,OAElD;AAAA,EAEJ;AACA,SAAO;AACT;AAQA,SAAS,WAAW,OAAwB;AAC1C,MAAI,CAAC,MAAM,KAAK,gBAAgB;AAC9B,WACE,4EACE;AAAA,kDAAC,gCACE,gBAAM,KAAK,WAAW,WAAW,UAAU,cAC9C;AAAA,MACA,4CAAC,2BAAU;AAAA,OACb;AAAA,EAEJ;AACA,SAAO,4CAAC,kBAAgB,GAAG,OAAO,MAAM,MAAM,KAAK,gBAAgB;AACrE;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,EAAE,oBAAoB,kBAAkB,IAAI,MAAM,QAAQ,MAAM;AACpE,UAAM,kBAAkB;AACxB,UAAM,iBAAiB,IAAI,KAAK,IAAI;AACpC,UAAMA,sBAAqB,eAAe,mBAAmB,SAAS;AAAA;AAAA,MAEpE,UAAU,aAAa,SAAY;AAAA,MACnC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,CAAC;AAKD,UAAMC,qBAAoB,iBACtB,yCAA2B,oBAAI,KAAK,GAAG,cAAc,IACrD,eAAe,mBAAmB,SAAS;AAAA;AAAA,MAEzC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,IACR,CAAC;AAEL,WAAO,EAAE,oBAAAD,qBAAoB,mBAAAC,mBAAkB;AAAA,EACjD,GAAG,CAAC,YAAY,IAAI,CAAC;AAGrB,MAAI,sBAAsB,gBAAgB;AACxC,WACE,4EACE;AAAA,kDAAC,gCAAe,qBAAO;AAAA,MACvB,4CAAC,2BAAU;AAAA,OACb;AAAA,EAEJ;AAEA,SACE,4CAAC,iBAAc,SAAO,MAAC,KACrB,sDAAC,UAAK,UAAU,MAAM,OAAO,oBAC1B,6BACH,GACF;AAEJ;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eACP,EAAE,UAAU,KAAK,QAAQ,WAAW,GAAG,MAAM,GAC7C,cACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,UAAU,cAAc,SAAS;AAAA,QACxC,QAAQ,UAAU,cAAc,YAAY;AAAA,QAC5C,MAAM,UAAU,cAAc,MAAM;AAAA,QACpC,UAAQ;AAAA,QACP,GAAG;AAAA,QACJ,OACE,MACI;AAAA;AAAA,UAEE,SAAS;AAAA,UACT,GAAG,MAAM;AAAA,QACX,IACA,MAAM;AAAA,QAGX;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAOA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,SAAQ;AAAA,IAER;AAAA,kDAAC,WAAM,uBAAS;AAAA,MAChB,4CAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;AAGF,MAAM,4BAA4B,CAAC,EAAE,UAAU,MAA8B;AAC3E,QAAM,EAAE,YAAY,QAAI,yCAAiB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,EACvB,QAAI,2DAA0B;AAQ9B,QAAM,CAAC,EAAE,YAAY,gBAAgB,GAAG,WAAW,IAAI,MAAM,SAAS;AAAA,IACpE,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,SAAS;AAC5D,MAAI,eAAe,WAAW;AAC5B,kBAAc,SAAS;AACvB,QAAI,CAAC,WAAW;AACd;AAAA,QAAY,CAAC,SACX,KAAK,aAAa,EAAE,YAAY,OAAO,iBAAiB,KAAK,IAAI;AAAA,MACnE;AAAA,IACF;AAAA,EACF;AAEA,MAAI,eAAe,YAAY;AAC7B,WACE,6CAAC,sBAAK,OAAM,UAAS,SAAQ,UAAS,IAAG,KAAI,WAAU,UAAS,KAAI,KAClE;AAAA,mDAAC,sBAAK,MAAK,KAAI;AAAA;AAAA,QACY;AAAA,QACzB,6CAAC,sBAAK,QAAO,UAAS;AAAA;AAAA,UAClB,aAAa,kBAAkB;AAAA,UAAY;AAAA,WAC/C;AAAA,SACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM;AACb,wBAAY,EAAE,YAAY,MAAM,iBAAiB,YAAY,CAAC;AAC9D,wBAAY;AAAA,UACd;AAAA,UACA,SAAS;AAAA,UACV;AAAA;AAAA,MAED;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,4CAAC,sBAAK,OAAM,UAAS,SAAQ,UAAS,IAAG,KAAI,KAAI,KAC/C,sDAAC,sBAAK,MAAK,KAAI,4BAAc,GAC/B;AAEJ;AAQA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,MAAI,CAAC,KAAK,SAAS,KAAK,MAAM,WAAW,GAAG;AAC1C,WACE,4EACE;AAAA,kDAAC,gCAAe,+BAAiB;AAAA,MACjC,4CAAC,UAAK,eAAW,MAAC,OAAO,EAAE,YAAY,OAAO,GAAG,oBAEjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,0BAA0B,KAAK,MAAM,SAAS,GAAG;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,KAAK,OAAO,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,IAAI;AAAA,QACvD,UAAS;AAAA,QAET,sDAAC,iBAAc,KAAK,SACjB,sCAAU,QAAQ,KAAK,MAAM,MAAM,GACtC;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SAAO,4CAAC,iBAAc,KAAK,SAAU,eAAK,QAAQ,CAAC,GAAG,MAAK;AAC7D;AAEA,SAAS,sBACP,OACA,UACA;AACA,aAAO,0BAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":["lastActiveDateTime","lastActiveDisplay","TableCellText"]}

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

@@ -1,6 +1,17 @@
 import * as React from 'react';
 import { WidgetRootDomProps } from './utils.cjs';
 import { MemberRole, MembersQueryResult } from '../api/endpoint.cjs';
+import './elements.cjs';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.cjs';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.cjs';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.cjs';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.cjs';
+import '@radix-ui/themes/components/select';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
 

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

@@ -35,7 +35,6 @@ module.exports = __toCommonJS(users_search_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react_icons = require("@radix-ui/react-icons");
-var import_themes = require("@radix-ui/themes");
 var import_clsx = __toESM(require("clsx"), 1);
 var React = __toESM(require("react"), 1);
 var import_use_debounce = require("use-debounce");
@@ -77,15 +76,12 @@ const UsersSearch = React.forwardRef(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextFieldSlot, { side: "left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextFieldSlot, { side: "right", children: searchValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_themes.IconButton,
+            import_elements.IconButton,
             {
               size: "1",
-              color: "gray",
-              variant: "ghost",
-              radius: "full",
               onClick: resetSearch,
-              "aria-label": "Clear search",
               title: "Clear search",
+              "aria-label": "Clear search",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.Cross2Icon, { "aria-hidden": "true" })
             }
           ) })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/users-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { IconButton } from \"@radix-ui/themes\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TextField, TextFieldSlot } from \"./elements.js\";\nimport { useSearchContext } from \"./search-provider.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { namespaceClassNames } from \"./utils.js\";\n\ntype UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(\n  ({ className, ...props }, ref) => {\n    const { inputRef, clearSearch, searchValue, setSearchValue } =\n      useSearchContext();\n    const { dispatch } = useUsersManagementContext();\n\n    const filter = useDebouncedCallback((value) => {\n      dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n    }, 200);\n\n    const resetSearch = () => {\n      clearSearch();\n      filter.cancel();\n    };\n\n    return (\n      <TextField\n        ref={useComposedRefs(inputRef, ref)}\n        className={cx(namespaceClassNames(\"users-search\"), className)}\n        autoComplete=\"off\"\n        placeholder=\"Search by name or e-mail\"\n        value={searchValue}\n        onChange={(event) => {\n          const value = event.target.value;\n          setSearchValue(value);\n          filter(value);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") {\n            event.preventDefault();\n            resetSearch();\n          }\n        }}\n        {...props}\n      >\n        <TextFieldSlot side=\"left\">\n          <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n        </TextFieldSlot>\n\n        <TextFieldSlot side=\"right\">\n          {searchValue && (\n            <IconButton\n              size=\"1\"\n              color=\"gray\"\n              variant=\"ghost\"\n              radius=\"full\"\n              onClick={resetSearch}\n              aria-label=\"Clear search\"\n              title=\"Clear search\"\n            >\n              <Cross2Icon aria-hidden=\"true\" />\n            </IconButton>\n          )}\n        </TextFieldSlot>\n      </TextField>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BM;AA7BN,gCAAgC;AAChC,yBAAgD;AAChD,oBAA2B;AAC3B,kBAAe;AACf,YAAuB;AACvB,0BAAqC;AACrC,sBAAyC;AACzC,6BAAiC;AACjC,sCAA0C;AAC1C,mBAAoC;AAI7B,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,UAAU,aAAa,aAAa,eAAe,QACzD,yCAAiB;AACnB,UAAM,EAAE,SAAS,QAAI,2DAA0B;AAE/C,UAAM,aAAS,0CAAqB,CAAC,UAAU;AAC7C,eAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,IAC3D,GAAG,GAAG;AAEN,UAAM,cAAc,MAAM;AACxB,kBAAY;AACZ,aAAO,OAAO;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAK,2CAAgB,UAAU,GAAG;AAAA,QAClC,eAAW,YAAAA,aAAG,kCAAoB,cAAc,GAAG,SAAS;AAAA,QAC5D,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,UAAU;AACnB,gBAAM,QAAQ,MAAM,OAAO;AAC3B,yBAAe,KAAK;AACpB,iBAAO,KAAK;AAAA,QACd;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAM,eAAe;AACrB,wBAAY;AAAA,UACd;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,UAEA,4CAAC,iCAAc,MAAK,SACjB,yBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,QAAO;AAAA,cACP,SAAS;AAAA,cACT,cAAW;AAAA,cACX,OAAM;AAAA,cAEN,sDAAC,iCAAW,eAAY,QAAO;AAAA;AAAA,UACjC,GAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["cx"]}
+{"version":3,"sources":["../../../src/lib/users-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, TextField, TextFieldSlot } from \"./elements.js\";\nimport { useSearchContext } from \"./search-provider.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { namespaceClassNames } from \"./utils.js\";\n\ntype UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(\n  ({ className, ...props }, ref) => {\n    const { inputRef, clearSearch, searchValue, setSearchValue } =\n      useSearchContext();\n    const { dispatch } = useUsersManagementContext();\n\n    const filter = useDebouncedCallback((value) => {\n      dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n    }, 200);\n\n    const resetSearch = () => {\n      clearSearch();\n      filter.cancel();\n    };\n\n    return (\n      <TextField\n        ref={useComposedRefs(inputRef, ref)}\n        className={cx(namespaceClassNames(\"users-search\"), className)}\n        autoComplete=\"off\"\n        placeholder=\"Search by name or e-mail\"\n        value={searchValue}\n        onChange={(event) => {\n          const value = event.target.value;\n          setSearchValue(value);\n          filter(value);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") {\n            event.preventDefault();\n            resetSearch();\n          }\n        }}\n        {...props}\n      >\n        <TextFieldSlot side=\"left\">\n          <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n        </TextFieldSlot>\n\n        <TextFieldSlot side=\"right\">\n          {searchValue && (\n            <IconButton\n              size=\"1\"\n              onClick={resetSearch}\n              title=\"Clear search\"\n              aria-label=\"Clear search\"\n            >\n              <Cross2Icon aria-hidden=\"true\" />\n            </IconButton>\n          )}\n        </TextFieldSlot>\n      </TextField>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BM;AA5BN,gCAAgC;AAChC,yBAAgD;AAChD,kBAAe;AACf,YAAuB;AACvB,0BAAqC;AACrC,sBAAqD;AACrD,6BAAiC;AACjC,sCAA0C;AAC1C,mBAAoC;AAI7B,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,UAAU,aAAa,aAAa,eAAe,QACzD,yCAAiB;AACnB,UAAM,EAAE,SAAS,QAAI,2DAA0B;AAE/C,UAAM,aAAS,0CAAqB,CAAC,UAAU;AAC7C,eAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,IAC3D,GAAG,GAAG;AAEN,UAAM,cAAc,MAAM;AACxB,kBAAY;AACZ,aAAO,OAAO;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAK,2CAAgB,UAAU,GAAG;AAAA,QAClC,eAAW,YAAAA,aAAG,kCAAoB,cAAc,GAAG,SAAS;AAAA,QAC5D,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,UAAU;AACnB,gBAAM,QAAQ,MAAM,OAAO;AAC3B,yBAAe,KAAK;AACpB,iBAAO,KAAK;AAAA,QACd;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAM,eAAe;AACrB,wBAAY;AAAA,UACd;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,UAEA,4CAAC,iCAAc,MAAK,SACjB,yBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,OAAM;AAAA,cACN,cAAW;AAAA,cAEX,sDAAC,iCAAW,eAAY,QAAO;AAAA;AAAA,UACjC,GAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["cx"]}

package/dist/cjs/lib/utils.cjs

@@ -35,6 +35,7 @@ __export(utils_exports, {
   getUserLocation: () => getUserLocation,
   isErrorLike: () => isErrorLike,
   isObjectLike: () => isObjectLike,
+  isPromiseLike: () => isPromiseLike,
   namespaceClassNames: () => namespaceClassNames,
   parseErrorResponse: () => parseErrorResponse,
   parseUserAgent: () => parseUserAgent,
@@ -87,6 +88,9 @@ function isObjectLike(value) {
 function isErrorLike(value) {
   return isObjectLike(value) && typeof value.message === "string";
 }
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
 async function parseErrorResponse(response) {
   try {
     const json = await response.json();
@@ -109,7 +113,7 @@ async function parseErrorResponse(response) {
   }
 }
 function namespaceClassNames(...classNames) {
-  return classNames.map((className) => `${import_constants.WIDGETS_CLASS_NAMESPACE}-${className}`).join(" ");
+  return classNames.filter(Boolean).map((className) => `${import_constants.WIDGETS_CLASS_NAMESPACE}-${className}`).join(" ");
 }
 function getDomProps(args) {
   let {
@@ -121,12 +125,27 @@ function getDomProps(args) {
     widgetState,
     ...passthroughProps
   } = args;
+  const elementClassName = elementId ? (() => {
+    if (elementId === "primaryButton" || elementId === "secondaryButton" || elementId === "destructiveButton") {
+      return namespaceClassNames("button");
+    }
+    if (elementId === "iconButton") {
+      return namespaceClassNames("button", "icon-button");
+    }
+    if (elementId === "primaryMenuItem" || elementId === "destructiveMenuItem") {
+      return namespaceClassNames("menu-item");
+    }
+    if (elementId === "textfield") {
+      return namespaceClassNames(elementId, "text-field");
+    }
+    return namespaceClassNames(fastKebabCase(elementId));
+  })() : void 0;
   const props = {
     ...passthroughProps,
     className: (0, import_clsx.default)(
       className,
       isWidgetRoot && namespaceClassNames("widget"),
-      !!elementId && namespaceClassNames(elementId)
+      elementClassName
     )
   };
   if (widgetId) {
@@ -146,6 +165,9 @@ function getDomProps(args) {
       }
     }
   }
+  if (elementId) {
+    props[`data-${import_constants.WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-element`] = fastKebabCase(elementId);
+  }
   return props;
 }
 function fastKebabCase(alphaString) {
@@ -182,6 +204,7 @@ function pluralize(word = "", amount = 0, showAmount = true) {
   getUserLocation,
   isErrorLike,
   isObjectLike,
+  isPromiseLike,
   namespaceClassNames,
   parseErrorResponse,
   parseUserAgent,