@workos-inc/widgets 1.20.2-next.1792700156145 → 1.20.2

package/src/widgets/organization-switcher/organization-switcher.tsx

@@ -66,13 +66,32 @@ const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({
     (organization) => organization.isCurrent,
   );
   const invalidateAllWidgets = useWidgetsInvalidator();
+  const translate = useTranslation();
 
-  // TODO: Possible if the user has no organizations - we should figure out what
-  // to do in this case
-  if (!currentOrganization) {
-    return null;
+  if (organizations.length === 0) {
+    return (
+      <OrganizationSwitcherError
+        variant={variant}
+        {...domProps}
+        message={translate({
+          id: "XimGbo",
+          defaultMessage: "No organizations found",
+          description:
+            "Shown in the disabled organization switcher when the user belongs to no organizations",
+        })}
+      />
+    );
   }
 
+  const currentOrganizationName =
+    currentOrganization?.name ??
+    translate({
+      id: "aZ7eyn",
+      defaultMessage: "Select an organization",
+      description:
+        "Placeholder in the organization switcher trigger when the user has organizations but none is active",
+    });
+
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
@@ -96,7 +115,7 @@ const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({
             minWidth="0"
           >
             <TruncatedOrganizationName
-              organizationName={currentOrganization.name}
+              organizationName={currentOrganizationName}
               truncateBehavior={truncateBehavior}
             />
             <Flex asChild flexShrink="0">
@@ -122,7 +141,10 @@ const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({
             >
               <DropdownMenu.Item
                 onClick={() => {
-                  if (organization.id !== currentOrganization.id) {
+                  if (
+                    !currentOrganization ||
+                    organization.id !== currentOrganization.id
+                  ) {
                     const result = switchToOrganization({
                       organizationId: organization.id,
                     });
@@ -205,17 +227,19 @@ const OrganizationSwitcherLoading: React.FC<
 };
 
 interface OrganizationSwitcherErrorProps extends WidgetRootDomProps {
-  error: unknown;
+  error?: unknown;
+  message?: string;
   variant?: OrganizationSwitcherVariant;
 }
 
 const OrganizationSwitcherError: React.FC<OrganizationSwitcherErrorProps> = ({
   error,
   variant,
+  message,
   ...domProps
 }) => {
   const translate = useTranslation();
-  const { heading } = getErrorMessage(error, translate);
+  const heading = message || getErrorMessage(error, translate).heading;
 
   return (
     <Button

package/src/widgets/users-management/invite-user-dialog.tsx

@@ -46,19 +46,17 @@ const InviteUserDialog: React.FC<InviteUserDialogProps> = ({ children }) => {
   const [selectedRole, setSelectedRole] = React.useState(
     () => getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE,
   );
-  React.useEffect(() => {
+
+  const [previousRoles, setPreviousRoles] = React.useState(roles);
+  if (previousRoles !== roles) {
+    setPreviousRoles(roles);
     // Update the selected role if it's not in the list (eg if the list was
     // previously empty and the query resolved)
-    // TODO: Fix this!
-    // oxlint-disable-next-line react/set-state-in-effect
-    setSelectedRole((selectedRole) => {
-      if (roles.find((role) => role.slug === selectedRole)) {
-        // if current selected role is in the new list, don't change it
-        return selectedRole;
-      }
-      return getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE;
-    });
-  }, [roles]);
+    const found = roles.find((role) => role.slug === selectedRole);
+    if (!found) {
+      setSelectedRole(getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE);
+    }
+  }
 
   const onSubmitForm = (input: InviteUserInput) => {
     if (inviteUser.isPending || rolesQuery.status !== "success") {

package/src/widgets/users-management/users-management.tsx

@@ -648,7 +648,7 @@ const TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(
         style={
           dim
             ? {
-                // TODO: use CSS var instead of hard-coded value for opacity
+                // TODO(v2): use CSS var instead of hard-coded value for opacity
                 opacity: 0.6,
                 ...props.style,
               }

package/src/widgets/users-management/users-search.tsx

@@ -20,9 +20,12 @@ const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
     const { dispatch } = useUsersManagementContext();
     const translate = useTranslation();
 
-    const filter = useDebouncedCallback((value) => {
-      dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
-    }, 200);
+    const filter = useDebouncedCallback(
+      (value) => {
+        dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
+      },
+      { wait: 200 },
+    );
 
     const resetSearch = () => {
       clearSearch();