@keycloakify/keycloak-account-ui 26.0.6-rc.1 → 260007.0.1

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

@@ -1,29 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,21 +0,0 @@
-/* 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

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

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

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

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

@@ -1,49 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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,
-  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/src/ui-shared/select/TypeaheadSelect.tsx

@@ -1,198 +0,0 @@
-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,
-  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/src/ui-shared/user-profile/LocaleSelector.tsx

@@ -1,51 +0,0 @@
-import { useMemo } from "react";
-import { FormProvider } from "react-hook-form";
-import { SelectControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/SelectControl";
-import { UserProfileFieldProps } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/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>
-  );
-};