@keycloakify/keycloak-account-ui 25.0.1-rc.0

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

@@ -0,0 +1,145 @@
+import {
+  Avatar,
+  AvatarProps,
+  Brand,
+  BrandProps,
+  DropdownItem,
+} from "@patternfly/react-core";
+import {
+  PageHeader,
+  PageHeaderProps,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
+} from "@patternfly/react-core/deprecated";
+import { TFunction } from "i18next";
+import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { DefaultAvatar } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/DefaultAvatar";
+import { KeycloakDropdown } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/KeycloakDropdown";
+
+function loggedInUserName(
+  token: KeycloakTokenParsed | undefined,
+  t: TFunction,
+) {
+  if (!token) {
+    return t("unknownUser");
+  }
+
+  const givenName = token.given_name;
+  const familyName = token.family_name;
+  const preferredUsername = token.preferred_username;
+
+  if (givenName && familyName) {
+    return t("fullName", { givenName, familyName });
+  }
+
+  return givenName || familyName || preferredUsername || t("unknownUser");
+}
+
+type BrandLogo = BrandProps & {
+  href: string;
+};
+
+type KeycloakMastheadProps = PageHeaderProps & {
+  keycloak: Keycloak;
+  brand: BrandLogo;
+  avatar?: AvatarProps;
+  features?: {
+    hasLogout?: boolean;
+    hasManageAccount?: boolean;
+    hasUsername?: boolean;
+  };
+  kebabDropdownItems?: ReactNode[];
+  dropdownItems?: ReactNode[];
+  toolbarItems?: ReactNode[];
+};
+
+const KeycloakMasthead = ({
+  keycloak,
+  brand: { href: brandHref, ...brandProps },
+  avatar,
+  features: {
+    hasLogout = true,
+    hasManageAccount = true,
+    hasUsername = true,
+  } = {},
+  kebabDropdownItems,
+  dropdownItems = [],
+  toolbarItems,
+  ...rest
+}: KeycloakMastheadProps) => {
+  const { t } = useTranslation();
+  const extraItems = [];
+  if (hasManageAccount) {
+    extraItems.push(
+      <DropdownItem
+        key="manageAccount"
+        onClick={() => keycloak.accountManagement()}
+      >
+        {t("manageAccount")}
+      </DropdownItem>,
+    );
+  }
+  if (hasLogout) {
+    extraItems.push(
+      <DropdownItem key="signOut" onClick={() => keycloak.logout()}>
+        {t("signOut")}
+      </DropdownItem>,
+    );
+  }
+
+  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
+              visibility={{
+                default: "hidden",
+                md: "visible",
+              }}
+            >
+              <KeycloakDropdown
+                data-testid="options"
+                dropDownItems={[...dropdownItems, extraItems]}
+                title={
+                  hasUsername
+                    ? loggedInUserName(keycloak.idTokenParsed, t)
+                    : undefined
+                }
+              />
+            </PageHeaderToolsItem>
+          </PageHeaderToolsGroup>
+          {picture || avatar?.src ? (
+            <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
+          ) : (
+            <DefaultAvatar {...avatar} />
+          )}
+        </PageHeaderTools>
+      }
+    />
+  );
+};
+
+export default KeycloakMasthead;

package/src/ui-shared/scroll-form/FormPanel.tsx

@@ -0,0 +1,29 @@
+import { Card, CardBody, CardHeader, CardTitle } from "@patternfly/react-core";
+import { PropsWithChildren, useId } from "react";
+import { FormTitle } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/FormTitle";
+
+type FormPanelProps = {
+  title: string;
+  scrollId?: string;
+  className?: string;
+};
+
+export const FormPanel = ({
+  title,
+  children,
+  scrollId,
+  className,
+}: PropsWithChildren<FormPanelProps>) => {
+  const id = useId();
+
+  return (
+    <Card id={id} className={className} isFlat>
+      <CardHeader className="kc-form-panel__header">
+        <CardTitle tabIndex={0}>
+          <FormTitle id={scrollId} title={title} />
+        </CardTitle>
+      </CardHeader>
+      <CardBody className="kc-form-panel__body">{children}</CardBody>
+    </Card>
+  );
+};

package/src/ui-shared/scroll-form/FormTitle.tsx

@@ -0,0 +1,28 @@
+import { Title, TitleProps } from "@patternfly/react-core";
+
+import style from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/form-title.module.css";
+
+type FormTitleProps = Omit<TitleProps, "headingLevel"> & {
+  id?: string;
+  title: string;
+  headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+export const FormTitle = ({
+  id,
+  title,
+  headingLevel = "h1",
+  size = "xl",
+  ...rest
+}: FormTitleProps) => (
+  <Title
+    headingLevel={headingLevel}
+    size={size}
+    className={style.title}
+    id={id}
+    tabIndex={0} // so that jumpLink sends focus to the section for a11y
+    {...rest}
+  >
+    {title}
+  </Title>
+);

package/src/ui-shared/scroll-form/ScrollForm.tsx

@@ -0,0 +1,98 @@
+import {
+  Grid,
+  GridItem,
+  GridProps,
+  JumpLinks,
+  JumpLinksItem,
+  PageSection,
+} from "@patternfly/react-core";
+import { Fragment, ReactNode, useMemo } from "react";
+import { FormPanel } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/FormPanel";
+import { ScrollPanel } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/ScrollPanel";
+
+import style from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/scroll-form.module.css";
+
+export const mainPageContentId = "kc-main-content-page-container";
+
+type ScrollSection = {
+  title: string;
+  panel: ReactNode;
+  isHidden?: boolean;
+};
+
+type ScrollFormProps = GridProps & {
+  label: string;
+  sections: ScrollSection[];
+  borders?: boolean;
+};
+
+const spacesToHyphens = (string: string): string => {
+  return string.replace(/\s+/g, "-");
+};
+
+export const ScrollForm = ({
+  label,
+  sections,
+  borders = false,
+  ...rest
+}: ScrollFormProps) => {
+  const shownSections = useMemo(
+    () => sections.filter(({ isHidden }) => !isHidden),
+    [sections],
+  );
+
+  return (
+    <Grid hasGutter {...rest}>
+      <GridItem md={8} sm={12}>
+        {shownSections.map(({ title, panel }) => {
+          const scrollId = spacesToHyphens(title.toLowerCase());
+
+          return (
+            <Fragment key={title}>
+              {borders ? (
+                <FormPanel
+                  scrollId={scrollId}
+                  title={title}
+                  className={style.panel}
+                >
+                  {panel}
+                </FormPanel>
+              ) : (
+                <ScrollPanel scrollId={scrollId} title={title}>
+                  {panel}
+                </ScrollPanel>
+              )}
+            </Fragment>
+          );
+        })}
+      </GridItem>
+      <GridItem md={4} sm={12} order={{ default: "-1", md: "1" }}>
+        <PageSection className={style.sticky}>
+          <JumpLinks
+            isVertical
+            // scrollableSelector has to point to the id of the element whose scrollTop changes
+            // to scroll the entire main section, it has to be the pf-v5-c-page__main
+            scrollableSelector={`#${mainPageContentId}`}
+            label={label}
+            offset={100}
+          >
+            {shownSections.map(({ title }) => {
+              const scrollId = spacesToHyphens(title.toLowerCase());
+
+              return (
+                // note that JumpLinks currently does not work with spaces in the href
+                <JumpLinksItem
+                  key={title}
+                  href={`#${scrollId}`}
+                  data-testid={`jump-link-${scrollId}`}
+                >
+                  {title}
+                </JumpLinksItem>
+              );
+            })}
+          </JumpLinks>
+        </PageSection>
+      </GridItem>
+    </Grid>
+  );
+};

package/src/ui-shared/scroll-form/ScrollPanel.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+// See: https://github.com/i18next/react-i18next/issues/1543
+import { HTMLProps } from "react";
+import { FormTitle } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/FormTitle";
+
+type ScrollPanelProps = HTMLProps<HTMLFormElement> & {
+  title: string;
+  scrollId: string;
+};
+
+export const ScrollPanel = (props: ScrollPanelProps) => {
+  const { title, children, scrollId, ...rest } = props;
+  return (
+    <section {...rest} style={{ marginTop: "var(--pf-v5-global--spacer--lg)" }}>
+      <>
+        <FormTitle id={scrollId} title={title} />
+        {children}
+      </>
+    </section>
+  );
+};

package/src/ui-shared/scroll-form/form-title.module.css

@@ -0,0 +1,4 @@
+
+.title {
+  margin-bottom: var(--pf-v5-global--spacer--lg);
+}

package/src/ui-shared/scroll-form/scroll-form.module.css

@@ -0,0 +1,8 @@
+.panel {
+  margin-top: var(--pf-v5-global--spacer--lg);
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}

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

@@ -0,0 +1,49 @@
+import { ChipGroupProps, SelectProps } from "@patternfly/react-core";
+import { SingleSelect } from "@keycloakify/keycloak-account-ui/ui-shared/select/SingleSelect";
+import { TypeaheadSelect } from "@keycloakify/keycloak-account-ui/ui-shared/select/TypeaheadSelect";
+
+export type Variant = `${SelectVariant}`;
+
+export enum SelectVariant {
+  single = "single",
+  typeahead = "typeahead",
+  typeaheadMulti = "typeaheadMulti",
+}
+
+export const propertyToString = (prop: string | number | undefined) =>
+  typeof prop === "number" ? prop + "px" : prop;
+
+export type KeycloakSelectProps<> = Omit<
+  SelectProps,
+  "name" | "toggle" | "selected" | "onClick" | "onSelect"
+> & {
+  toggleId?: string;
+  onFilter?: (value: string) => JSX.Element[];
+  onClear?: () => void;
+  variant?: Variant;
+  isDisabled?: boolean;
+  menuAppendTo?: string;
+  maxHeight?: string | number;
+  width?: string | number;
+  toggleIcon?: React.ReactElement;
+  direction?: "up" | "down";
+  placeholderText?: string;
+  onSelect?: (value: string | number | object) => void;
+  onToggle: (val: boolean) => void;
+  selections?: string | string[] | number | number[];
+  validated?: "success" | "warning" | "error" | "default";
+  typeAheadAriaLabel?: string;
+  chipGroupProps?: Omit<ChipGroupProps, "children" | "ref">;
+  chipGroupComponent?: React.ReactNode;
+  footer?: React.ReactNode;
+};
+export const KeycloakSelect = ({
+  variant = SelectVariant.single,
+  ...rest
+}: KeycloakSelectProps) => {
+  if (variant === SelectVariant.single) {
+    return <SingleSelect {...rest} />;
+  } else {
+    return <TypeaheadSelect {...rest} variant={variant} />;
+  }
+};

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

@@ -0,0 +1,85 @@
+import {
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOptionProps,
+} from "@patternfly/react-core";
+import { Children, useRef, useState } from "react";
+import { KeycloakSelectProps, propertyToString } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
+
+type SingleSelectProps = Omit<KeycloakSelectProps, "variant">;
+
+export const SingleSelect = ({
+  toggleId,
+  onToggle,
+  onSelect,
+  selections,
+  isOpen,
+  menuAppendTo,
+  direction,
+  width,
+  maxHeight,
+  toggleIcon,
+  className,
+  children,
+  ...props
+}: SingleSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLElement>();
+  const toggle = () => {
+    setOpen(!open);
+    onToggle(!open);
+  };
+
+  const append = () => {
+    if (menuAppendTo === "parent") {
+      return ref.current?.parentElement || "inline";
+    }
+    return "inline";
+  };
+
+  const childArray = Children.toArray(
+    children,
+  ) as React.ReactElement<SelectOptionProps>[];
+
+  return (
+    <Select
+      ref={ref}
+      maxMenuHeight={propertyToString(maxHeight)}
+      isScrollable
+      popperProps={{
+        appendTo: append(),
+        direction,
+        width: propertyToString(width),
+      }}
+      {...props}
+      onClick={toggle}
+      onOpenChange={() => setOpen(false)}
+      selected={selections}
+      onSelect={(_, value) => {
+        onSelect?.(value || "");
+        toggle();
+      }}
+      toggle={(ref) => (
+        <MenuToggle
+          id={toggleId}
+          ref={ref}
+          className={className}
+          onClick={toggle}
+          isExpanded={isOpen}
+          aria-label={props["aria-label"]}
+          icon={toggleIcon}
+          isFullWidth
+        >
+          {childArray.find((c) => c.props.value === selections)?.props
+            .children ||
+            selections ||
+            props["aria-label"]}
+        </MenuToggle>
+      )}
+      isOpen={isOpen}
+    >
+      <SelectList>{children}</SelectList>
+    </Select>
+  );
+};

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

@@ -0,0 +1,196 @@
+import {
+  Button,
+  Chip,
+  ChipGroup,
+  MenuFooter,
+  MenuToggle,
+  MenuToggleStatus,
+  Select,
+  SelectList,
+  SelectOptionProps,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} from "@patternfly/react-core";
+import { TimesIcon } from "@patternfly/react-icons";
+import { Children, useRef, useState } from "react";
+import {
+  KeycloakSelectProps,
+  SelectVariant,
+  propertyToString,
+} from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
+
+export const TypeaheadSelect = ({
+  toggleId,
+  onSelect,
+  onToggle,
+  onFilter,
+  variant,
+  validated,
+  placeholderText,
+  maxHeight,
+  width,
+  toggleIcon,
+  direction,
+  selections,
+  typeAheadAriaLabel,
+  chipGroupComponent,
+  chipGroupProps,
+  footer,
+  children,
+  ...rest
+}: KeycloakSelectProps) => {
+  const [filterValue, setFilterValue] = useState("");
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
+  const textInputRef = useRef<HTMLInputElement>();
+
+  const childArray = Children.toArray(
+    children,
+  ) as React.ReactElement<SelectOptionProps>[];
+
+  const toggle = () => {
+    onToggle?.(!rest.isOpen);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const focusedItem = childArray[focusedItemIndex];
+    onToggle?.(true);
+
+    switch (event.key) {
+      case "Enter": {
+        event.preventDefault();
+
+        if (variant !== SelectVariant.typeaheadMulti) {
+          setFilterValue(focusedItem.props.value);
+        } else {
+          setFilterValue("");
+        }
+        onSelect?.(focusedItem.props.value);
+        onToggle?.(false);
+        setFocusedItemIndex(0);
+
+        break;
+      }
+      case "Escape": {
+        onToggle?.(false);
+        break;
+      }
+      case "Backspace": {
+        if (variant === SelectVariant.typeahead) {
+          onSelect?.("");
+        }
+        break;
+      }
+      case "ArrowUp":
+      case "ArrowDown": {
+        event.preventDefault();
+
+        let indexToFocus = 0;
+
+        if (event.key === "ArrowUp") {
+          if (focusedItemIndex === 0) {
+            indexToFocus = childArray.length - 1;
+          } else {
+            indexToFocus = focusedItemIndex - 1;
+          }
+        }
+
+        if (event.key === "ArrowDown") {
+          if (focusedItemIndex === childArray.length - 1) {
+            indexToFocus = 0;
+          } else {
+            indexToFocus = focusedItemIndex + 1;
+          }
+        }
+
+        setFocusedItemIndex(indexToFocus);
+        break;
+      }
+    }
+  };
+
+  return (
+    <Select
+      {...rest}
+      onClick={toggle}
+      onOpenChange={() => onToggle?.(false)}
+      onSelect={(_, value) => onSelect?.(value || "")}
+      maxMenuHeight={propertyToString(maxHeight)}
+      popperProps={{ direction, width: propertyToString(width) }}
+      toggle={(ref) => (
+        <MenuToggle
+          ref={ref}
+          id={toggleId}
+          variant="typeahead"
+          onClick={() => onToggle?.(true)}
+          icon={toggleIcon}
+          isExpanded={rest.isOpen}
+          isFullWidth
+          status={validated === "error" ? MenuToggleStatus.danger : undefined}
+        >
+          <TextInputGroup isPlain>
+            <TextInputGroupMain
+              placeholder={placeholderText}
+              value={
+                variant === SelectVariant.typeahead && selections
+                  ? (selections as string)
+                  : filterValue
+              }
+              onClick={toggle}
+              onChange={(_, value) => {
+                setFilterValue(value);
+                onFilter?.(value);
+              }}
+              onKeyDown={(event) => onInputKeyDown(event)}
+              autoComplete="off"
+              innerRef={textInputRef}
+              role="combobox"
+              isExpanded={rest.isOpen}
+              aria-controls="select-typeahead-listbox"
+              aria-label={typeAheadAriaLabel}
+            >
+              {variant === SelectVariant.typeaheadMulti &&
+                Array.isArray(selections) &&
+                (chipGroupComponent ? (
+                  chipGroupComponent
+                ) : (
+                  <ChipGroup {...chipGroupProps}>
+                    {selections.map((selection, index: number) => (
+                      <Chip
+                        key={index}
+                        onClick={(ev) => {
+                          ev.stopPropagation();
+                          onSelect?.(selection);
+                        }}
+                      >
+                        {selection}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                ))}
+            </TextInputGroupMain>
+            <TextInputGroupUtilities>
+              {!!filterValue && (
+                <Button
+                  variant="plain"
+                  onClick={() => {
+                    onSelect?.("");
+                    setFilterValue("");
+                    onFilter?.("");
+                    textInputRef?.current?.focus();
+                  }}
+                  aria-label="Clear input value"
+                >
+                  <TimesIcon aria-hidden />
+                </Button>
+              )}
+            </TextInputGroupUtilities>
+          </TextInputGroup>
+        </MenuToggle>
+      )}
+    >
+      <SelectList>{children}</SelectList>
+      {footer && <MenuFooter>{footer}</MenuFooter>}
+    </Select>
+  );
+};