@keycloakify/keycloak-ui-shared 26.0.6001

package/keycloak-theme/shared/keycloak-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 "./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/keycloak-theme/shared/keycloak-ui-shared/scroll-form/FormTitle.tsx

@@ -0,0 +1,28 @@
+import { Title, TitleProps } from "@patternfly/react-core";
+
+import style from "./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/keycloak-theme/shared/keycloak-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 "./FormPanel";
+import { ScrollPanel } from "./ScrollPanel";
+
+import style from "./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/keycloak-theme/shared/keycloak-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 "./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/keycloak-theme/shared/keycloak-ui-shared/scroll-form/form-title.module.css

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

package/keycloak-theme/shared/keycloak-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/keycloak-theme/shared/keycloak-ui-shared/select/KeycloakSelect.tsx

@@ -0,0 +1,49 @@
+import { ChipGroupProps, SelectProps } from "@patternfly/react-core";
+import { SingleSelect } from "./SingleSelect";
+import { TypeaheadSelect } from "./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/keycloak-theme/shared/keycloak-ui-shared/select/SingleSelect.tsx

@@ -0,0 +1,89 @@
+import {
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOptionProps,
+} from "@patternfly/react-core";
+import { Children, useRef, useState } from "react";
+import { KeycloakSelectProps, propertyToString } from "./KeycloakSelect";
+
+type SingleSelectProps = Omit<KeycloakSelectProps, "variant">;
+
+export const SingleSelect = ({
+  toggleId,
+  onToggle,
+  onSelect,
+  selections,
+  isOpen,
+  menuAppendTo,
+  direction,
+  width,
+  maxHeight,
+  toggleIcon,
+  className,
+  isDisabled,
+  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={(isOpen) => {
+        if (isOpen !== open) toggle();
+      }}
+      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}
+          isDisabled={isDisabled}
+          isFullWidth
+        >
+          {childArray.find((c) => c.props.value === selections)?.props
+            .children ||
+            selections ||
+            props["aria-label"]}
+        </MenuToggle>
+      )}
+      isOpen={isOpen}
+    >
+      <SelectList>{children}</SelectList>
+    </Select>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/select/TypeaheadSelect.tsx

@@ -0,0 +1,198 @@
+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 "./KeycloakSelect";
+
+export const TypeaheadSelect = ({
+  toggleId,
+  onSelect,
+  onToggle,
+  onFilter,
+  variant,
+  validated,
+  placeholderText,
+  maxHeight,
+  width,
+  toggleIcon,
+  direction,
+  selections,
+  typeAheadAriaLabel,
+  chipGroupComponent,
+  chipGroupProps,
+  footer,
+  isDisabled,
+  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={(isOpen) => onToggle?.(isOpen)}
+      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}
+          isDisabled={isDisabled}
+          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>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/LocaleSelector.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { FormProvider } from "react-hook-form";
+import { SelectControl } from "../controls/select-control/SelectControl";
+import { UserProfileFieldProps } from "./UserProfileFields";
+
+const localeToDisplayName = (locale: string) => {
+  try {
+    return new Intl.DisplayNames([locale], { type: "language" }).of(locale);
+  } catch {
+    return locale;
+  }
+};
+
+type LocaleSelectorProps = Omit<UserProfileFieldProps, "inputType"> & {
+  supportedLocales: string[];
+  currentLocale: string;
+};
+
+export const LocaleSelector = ({
+  t,
+  form,
+  supportedLocales,
+  currentLocale,
+}: LocaleSelectorProps) => {
+  const locales = useMemo(
+    () =>
+      supportedLocales
+        .map((locale) => ({
+          key: locale,
+          value: t(`locale_${locale}`, localeToDisplayName(locale) ?? locale),
+        }))
+        .sort((a, b) => a.value.localeCompare(b.value, currentLocale)),
+    [supportedLocales, currentLocale, t],
+  );
+
+  if (!locales.length) {
+    return null;
+  }
+  return (
+    <FormProvider {...form}>
+      <SelectControl
+        data-testid="locale-select"
+        name="attributes.locale"
+        label={t("selectALocale")}
+        controller={{ defaultValue: "" }}
+        options={locales}
+        variant={locales.length >= 10 ? "typeahead" : "single"}
+      />
+    </FormProvider>
+  );
+};