@keycloakify/keycloak-account-ui 25.0.4-rc.6 → 26.0.0-rc.0

package/src/ui-shared/controls/table/PaginatingTableToolbar.tsx

@@ -0,0 +1,106 @@
+import {
+  Pagination,
+  PaginationToggleTemplateProps,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { PropsWithChildren, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/TableToolbar";
+
+type KeycloakPaginationProps = {
+  id?: string;
+  count: number;
+  first: number;
+  max: number;
+  onNextClick: (page: number) => void;
+  onPreviousClick: (page: number) => void;
+  onPerPageSelect: (max: number, first: number) => void;
+  variant?: "top" | "bottom";
+};
+
+type TableToolbarProps = KeycloakPaginationProps & {
+  searchTypeComponent?: ReactNode;
+  toolbarItem?: ReactNode;
+  subToolbar?: ReactNode;
+  inputGroupName?: string;
+  inputGroupPlaceholder?: string;
+  inputGroupOnEnter?: (value: string) => void;
+};
+
+const KeycloakPagination = ({
+  id,
+  variant = "top",
+  count,
+  first,
+  max,
+  onNextClick,
+  onPreviousClick,
+  onPerPageSelect,
+}: KeycloakPaginationProps) => {
+  const { t } = useTranslation();
+  const page = Math.round(first / max);
+  return (
+    <Pagination
+      widgetId={id}
+      titles={{
+        paginationAriaLabel: `${t("pagination")} ${variant} `,
+      }}
+      isCompact
+      toggleTemplate={({
+        firstIndex,
+        lastIndex,
+      }: PaginationToggleTemplateProps) => (
+        <b>
+          {firstIndex} - {lastIndex}
+        </b>
+      )}
+      itemCount={count + page * max}
+      page={page + 1}
+      perPage={max}
+      onNextClick={(_, p) => onNextClick((p - 1) * max)}
+      onPreviousClick={(_, p) => onPreviousClick((p - 1) * max)}
+      onPerPageSelect={(_, m, f) => onPerPageSelect(f - 1, m)}
+      variant={variant}
+    />
+  );
+};
+
+export const PaginatingTableToolbar = ({
+  count,
+  searchTypeComponent,
+  toolbarItem,
+  subToolbar,
+  children,
+  inputGroupName,
+  inputGroupPlaceholder,
+  inputGroupOnEnter,
+  ...rest
+}: PropsWithChildren<TableToolbarProps>) => {
+  return (
+    <TableToolbar
+      searchTypeComponent={searchTypeComponent}
+      toolbarItem={
+        <>
+          {toolbarItem}
+          <ToolbarItem variant="pagination">
+            <KeycloakPagination count={count} {...rest} />
+          </ToolbarItem>
+        </>
+      }
+      subToolbar={subToolbar}
+      toolbarItemFooter={
+        count !== 0 ? (
+          <ToolbarItem variant="pagination">
+            <KeycloakPagination count={count} variant="bottom" {...rest} />
+          </ToolbarItem>
+        ) : null
+      }
+      inputGroupName={inputGroupName}
+      inputGroupPlaceholder={inputGroupPlaceholder}
+      inputGroupOnEnter={inputGroupOnEnter}
+    >
+      {children}
+    </TableToolbar>
+  );
+};

package/src/ui-shared/controls/table/TableToolbar.tsx

@@ -0,0 +1,92 @@
+import {
+  Divider,
+  InputGroup,
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { KeyboardEvent, PropsWithChildren, ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type TableToolbarProps = {
+  toolbarItem?: ReactNode;
+  subToolbar?: ReactNode;
+  toolbarItemFooter?: ReactNode;
+  searchTypeComponent?: ReactNode;
+  inputGroupName?: string;
+  inputGroupPlaceholder?: string;
+  inputGroupOnEnter?: (value: string) => void;
+};
+
+export const TableToolbar = ({
+  toolbarItem,
+  subToolbar,
+  toolbarItemFooter,
+  children,
+  searchTypeComponent,
+  inputGroupName,
+  inputGroupPlaceholder,
+  inputGroupOnEnter,
+}: PropsWithChildren<TableToolbarProps>) => {
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const onSearch = () => {
+    if (searchValue !== "") {
+      setSearchValue(searchValue);
+      inputGroupOnEnter?.(searchValue);
+    } else {
+      setSearchValue("");
+      inputGroupOnEnter?.("");
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onSearch();
+    }
+  };
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          {inputGroupName && (
+            <ToolbarItem>
+              <InputGroup data-testid={inputGroupName}>
+                {searchTypeComponent}
+                {inputGroupPlaceholder && (
+                  <SearchInput
+                    data-testid="table-search-input"
+                    placeholder={inputGroupPlaceholder}
+                    aria-label={t("search")}
+                    value={searchValue}
+                    onChange={(_, value) => {
+                      setSearchValue(value);
+                    }}
+                    onSearch={onSearch}
+                    onKeyDown={handleKeyDown}
+                    onClear={() => {
+                      setSearchValue("");
+                      inputGroupOnEnter?.("");
+                    }}
+                  />
+                )}
+              </InputGroup>
+            </ToolbarItem>
+          )}
+          {toolbarItem}
+        </ToolbarContent>
+      </Toolbar>
+      {subToolbar && (
+        <Toolbar>
+          <ToolbarContent>{subToolbar}</ToolbarContent>
+        </Toolbar>
+      )}
+      <Divider />
+      {children}
+      <Toolbar>{toolbarItemFooter}</Toolbar>
+    </>
+  );
+};

package/src/ui-shared/main.ts

@@ -1,4 +1,10 @@
-export { AlertProvider, useAlerts } from "@keycloakify/keycloak-account-ui/ui-shared/alerts/Alerts";
+export {
+  AlertProvider,
+  useAlerts,
+  type AddAlertFunction,
+  type AddErrorFunction,
+  type AlertProps,
+} from "@keycloakify/keycloak-account-ui/ui-shared/alerts/Alerts";
 export { ErrorPage } from "@keycloakify/keycloak-account-ui/ui-shared/context/ErrorPage";
 export { Help, useHelp } from "@keycloakify/keycloak-account-ui/ui-shared/context/HelpContext";
 export {
@@ -54,9 +60,37 @@ export {
 } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
 export type { UserFormFields } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
 export { createNamedContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/createNamedContext";
+export {
+  getErrorDescription,
+  getErrorMessage,
+  getNetworkErrorMessage,
+  getNetworkErrorDescription,
+} from "@keycloakify/keycloak-account-ui/ui-shared/utils/errors";
 export { isDefined } from "@keycloakify/keycloak-account-ui/ui-shared/utils/isDefined";
 export { useRequiredContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useRequiredContext";
 export { useStoredState } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useStoredState";
+export { useSetTimeout } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useSetTimeout";
+export { generateId } from "@keycloakify/keycloak-account-ui/ui-shared/utils/generateId";
 export { default as KeycloakMasthead } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/Masthead";
 export { KeycloakSelect } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
 export type { Variant, KeycloakSelectProps } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
+export { KeycloakDataTable } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
+export type {
+  Action,
+  Field,
+  DetailField,
+  LoaderFunction,
+} from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
+export { PaginatingTableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/PaginatingTableToolbar";
+export { TableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/TableToolbar";
+export { ListEmptyState } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/ListEmptyState";
+export { KeycloakSpinner } from "@keycloakify/keycloak-account-ui/ui-shared/controls/KeycloakSpinner";
+export { useFetch } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useFetch";
+export {
+  useErrorBoundary,
+  ErrorBoundaryFallback,
+  ErrorBoundaryProvider,
+} from "@keycloakify/keycloak-account-ui/ui-shared/utils/ErrorBoundary";
+export type { FallbackProps } from "@keycloakify/keycloak-account-ui/ui-shared/utils/ErrorBoundary";
+export { OrganizationTable } from "@keycloakify/keycloak-account-ui/ui-shared/controls/OrganizationTable";
+export { initializeDarkMode } from "@keycloakify/keycloak-account-ui/ui-shared/utils/darkMode";

package/src/ui-shared/masthead/Masthead.tsx

@@ -1,17 +1,19 @@
 import {
   Avatar,
   AvatarProps,
-  Brand,
-  BrandProps,
   DropdownItem,
+  Masthead,
+  MastheadBrand,
+  MastheadBrandProps,
+  MastheadContent,
+  MastheadMainProps,
+  MastheadToggle,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  PageHeader,
-  PageHeaderProps,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-} from "@patternfly/react-core/deprecated";
+import { BarsIcon } from "@patternfly/react-icons";
 import { TFunction } from "i18next";
 import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
 import { ReactNode } from "react";
@@ -38,11 +40,9 @@ function loggedInUserName(
   return givenName || familyName || preferredUsername || t("unknownUser");
 }
 
-type BrandLogo = BrandProps & {
-  href: string;
-};
+type BrandLogo = MastheadBrandProps;
 
-type KeycloakMastheadProps = PageHeaderProps & {
+type KeycloakMastheadProps = MastheadMainProps & {
   keycloak: Keycloak;
   brand: BrandLogo;
   avatar?: AvatarProps;
@@ -58,7 +58,7 @@ type KeycloakMastheadProps = PageHeaderProps & {
 
 const KeycloakMasthead = ({
   keycloak,
-  brand: { href: brandHref, ...brandProps },
+  brand: { src, alt, className, ...brandProps },
   avatar,
   features: {
     hasLogout = true,
@@ -92,33 +92,28 @@ const KeycloakMasthead = ({
 
   const picture = keycloak.idTokenParsed?.picture;
   return (
-    <PageHeader
-      {...rest}
-      logo={<Brand {...brandProps} />}
-      logoProps={{ href: brandHref }}
-      headerTools={
-        <PageHeaderTools>
-          <PageHeaderToolsGroup>
-            <PageHeaderToolsItem
-              visibility={{
-                md: "hidden",
-              }}
-            >
-              <KeycloakDropdown
-                data-testid="options-kebab"
-                isKebab
-                dropDownItems={[
-                  ...(kebabDropdownItems || dropdownItems),
-                  extraItems,
-                ]}
-              />
-            </PageHeaderToolsItem>
-            <PageHeaderToolsItem>{toolbarItems}</PageHeaderToolsItem>
-            <PageHeaderToolsItem
+    <Masthead {...rest}>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label={t("navigation")}>
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadBrand {...brandProps}>
+        <img src={src} alt={alt} className={className} />
+      </MastheadBrand>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            {toolbarItems?.map((item, index) => (
+              <ToolbarItem key={index} align={{ default: "alignRight" }}>
+                {item}
+              </ToolbarItem>
+            ))}
+            <ToolbarItem
               visibility={{
                 default: "hidden",
                 md: "visible",
-              }}
+              }} /** this user dropdown is hidden on mobile sizes */
             >
               <KeycloakDropdown
                 data-testid="options"
@@ -129,16 +124,37 @@ const KeycloakMasthead = ({
                     : undefined
                 }
               />
-            </PageHeaderToolsItem>
-          </PageHeaderToolsGroup>
-          {picture || avatar?.src ? (
-            <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
-          ) : (
-            <DefaultAvatar {...avatar} />
-          )}
-        </PageHeaderTools>
-      }
-    />
+            </ToolbarItem>
+            <ToolbarItem
+              align={{ default: "alignLeft" }}
+              visibility={{
+                md: "hidden",
+              }}
+            >
+              <KeycloakDropdown
+                data-testid="options-kebab"
+                isKebab
+                dropDownItems={[
+                  ...(kebabDropdownItems || dropdownItems),
+                  extraItems,
+                ]}
+              />
+            </ToolbarItem>
+            <ToolbarItem
+              variant="overflow-menu"
+              align={{ default: "alignRight" }}
+              className="pf-v5-u-m-0-on-lg"
+            >
+              {picture || avatar?.src ? (
+                <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
+              ) : (
+                <DefaultAvatar {...avatar} />
+              )}
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
   );
 };
 

package/src/ui-shared/select/SingleSelect.tsx

@@ -21,6 +21,7 @@ export const SingleSelect = ({
   maxHeight,
   toggleIcon,
   className,
+  isDisabled,
   children,
   ...props
 }: SingleSelectProps) => {
@@ -69,6 +70,7 @@ export const SingleSelect = ({
           isExpanded={isOpen}
           aria-label={props["aria-label"]}
           icon={toggleIcon}
+          isDisabled={isDisabled}
           isFullWidth
         >
           {childArray.find((c) => c.props.value === selections)?.props

package/src/ui-shared/select/TypeaheadSelect.tsx

@@ -37,6 +37,7 @@ export const TypeaheadSelect = ({
   chipGroupComponent,
   chipGroupProps,
   footer,
+  isDisabled,
   children,
   ...rest
 }: KeycloakSelectProps) => {
@@ -124,6 +125,7 @@ export const TypeaheadSelect = ({
           variant="typeahead"
           onClick={() => onToggle?.(true)}
           icon={toggleIcon}
+          isDisabled={isDisabled}
           isExpanded={rest.isOpen}
           isFullWidth
           status={validated === "error" ? MenuToggleStatus.danger : undefined}

package/src/ui-shared/user-profile/LocaleSelector.tsx

@@ -6,7 +6,7 @@ import { UserProfileFieldProps } from "@keycloakify/keycloak-account-ui/ui-share
 const localeToDisplayName = (locale: string) => {
   try {
     return new Intl.DisplayNames([locale], { type: "language" }).of(locale);
-  } catch (error) {
+  } catch {
     return locale;
   }
 };

package/src/ui-shared/user-profile/UserProfileFields.tsx

@@ -5,7 +5,7 @@ import {
 } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
 import { Text } from "@patternfly/react-core";
 import { TFunction } from "i18next";
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useMemo, type JSX } from "react";
 import { FieldPath, UseFormReturn } from "react-hook-form";
 
 import { ScrollForm } from "@keycloakify/keycloak-account-ui/ui-shared/main";
@@ -25,26 +25,23 @@ export type Options = {
   options?: string[];
 };
 
-const INPUT_TYPES = [
-  "text",
-  "textarea",
-  "select",
-  "select-radiobuttons",
-  "multiselect",
-  "multiselect-checkboxes",
-  "html5-email",
-  "html5-tel",
-  "html5-url",
-  "html5-number",
-  "html5-range",
-  "html5-datetime-local",
-  "html5-date",
-  "html5-month",
-  "html5-time",
-  "multi-input",
-] as const;
-
-export type InputType = (typeof INPUT_TYPES)[number];
+export type InputType =
+  | "text"
+  | "textarea"
+  | "select"
+  | "select-radiobuttons"
+  | "multiselect"
+  | "multiselect-checkboxes"
+  | "html5-email"
+  | "html5-tel"
+  | "html5-url"
+  | "html5-number"
+  | "html5-range"
+  | "html5-datetime-local"
+  | "html5-date"
+  | "html5-month"
+  | "html5-time"
+  | "multi-input";
 
 export type UserProfileFieldProps = {
   t: TFunction;

package/src/ui-shared/user-profile/UserProfileGroup.tsx

@@ -3,7 +3,7 @@ import { FormGroup, InputGroup } from "@patternfly/react-core";
 import { TFunction } from "i18next";
 import { get } from "lodash-es";
 import { PropsWithChildren, ReactNode } from "react";
-import { UseFormReturn } from "react-hook-form";
+import { UseFormReturn, type FieldError } from "react-hook-form";
 
 import { FormErrorText } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormErrorText";
 import { HelpItem } from "@keycloakify/keycloak-account-ui/ui-shared/controls/HelpItem";
@@ -38,7 +38,8 @@ export const UserProfileGroup = ({
   } = form;
 
   const component = renderer?.(attribute);
-  const error = get(errors, fieldName(attribute.name));
+  const error = get(errors, fieldName(attribute.name)) as FieldError;
+
   return (
     <FormGroup
       key={attribute.name}

package/src/ui-shared/user-profile/utils.ts

@@ -50,7 +50,10 @@ export const isRootAttribute = (attr?: string) =>
   attr && ROOT_ATTRIBUTES.includes(attr);
 
 export const fieldName = (name?: string) =>
-  `${isRootAttribute(name) ? "" : "attributes."}${name?.replaceAll(".", "🍺")}` as FieldPath<UserFormFields>;
+  `${isRootAttribute(name) ? "" : "attributes."}${name?.replaceAll(
+    ".",
+    "🍺",
+  )}` as FieldPath<UserFormFields>;
 
 export const beerify = <T extends string>(name: T) =>
   name.replaceAll(".", "🍺");
@@ -70,13 +73,16 @@ export function setUserProfileServerError<T>(
   ).forEach((e) => {
     const params = Object.assign(
       {},
-      e.params?.map((p) => t(isBundleKey(p.toString()) ? unWrap(p) : p)),
+      e.params?.map((p) => (isBundleKey(p.toString()) ? t(unWrap(p)) : p)),
     );
     setError(fieldName(e.field) as keyof T, {
-      message: t(e.errorMessage, {
-        ...params,
-        defaultValue: e.errorMessage || e.field,
-      }),
+      message: t(
+        isBundleKey(e.errorMessage) ? unWrap(e.errorMessage) : e.errorMessage,
+        {
+          ...params,
+          defaultValue: e.errorMessage || e.field,
+        },
+      ),
       type: "server",
     });
   });

package/src/ui-shared/utils/ErrorBoundary.tsx

@@ -0,0 +1,77 @@
+import {
+  Component,
+  type ComponentType,
+  type FunctionComponent,
+  type GetDerivedStateFromError,
+  type ReactNode,
+} from "react";
+import { createNamedContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/createNamedContext";
+import { useRequiredContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useRequiredContext";
+
+export interface ErrorBoundaryContextValue {
+  error?: Error;
+  showBoundary: (error: Error) => void;
+}
+
+const ErrorBoundaryContext = createNamedContext<
+  ErrorBoundaryContextValue | undefined
+>("ErrorBoundaryContext", undefined);
+
+export const useErrorBoundary = () => useRequiredContext(ErrorBoundaryContext);
+
+export interface ErrorBoundaryProviderProps {
+  children: ReactNode;
+}
+
+export interface ErrorBoundaryProviderState {
+  error?: Error;
+}
+
+export class ErrorBoundaryProvider extends Component<
+  ErrorBoundaryProviderProps,
+  ErrorBoundaryProviderState
+> {
+  state: ErrorBoundaryProviderState = {};
+
+  static getDerivedStateFromError: GetDerivedStateFromError<
+    ErrorBoundaryProviderProps,
+    ErrorBoundaryProviderState
+  > = (error) => {
+    return { error };
+  };
+
+  showBoundary = (error: Error) => {
+    this.setState({ error });
+  };
+
+  render() {
+    return (
+      <ErrorBoundaryContext.Provider
+        value={{ error: this.state.error, showBoundary: this.showBoundary }}
+      >
+        {this.props.children}
+      </ErrorBoundaryContext.Provider>
+    );
+  }
+}
+
+export interface FallbackProps {
+  error: Error;
+}
+
+export interface ErrorBoundaryFallbackProps {
+  fallback: ComponentType<FallbackProps>;
+  children: ReactNode;
+}
+
+export const ErrorBoundaryFallback: FunctionComponent<
+  ErrorBoundaryFallbackProps
+> = ({ children, fallback: FallbackComponent }) => {
+  const { error } = useErrorBoundary();
+
+  if (error) {
+    return <FallbackComponent error={error} />;
+  }
+
+  return children;
+};

package/src/ui-shared/utils/darkMode.ts

@@ -0,0 +1,19 @@
+const DARK_MODE_CLASS = "pf-v5-theme-dark";
+const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+function updateDarkMode(isEnabled: boolean) {
+  const { classList } = document.documentElement;
+
+  if (isEnabled) {
+    classList.add(DARK_MODE_CLASS);
+  } else {
+    classList.remove(DARK_MODE_CLASS);
+  }
+}
+
+export function initializeDarkMode() {
+  updateDarkMode(mediaQuery.matches);
+  mediaQuery.addEventListener("change", (event) =>
+    updateDarkMode(event.matches),
+  );
+}