@keycloak/keycloak-ui-shared 25.0.0

package/dist/main.css

@@ -0,0 +1 @@
+._title_180i0_2{margin-bottom:var(--pf-v5-global--spacer--lg)}._panel_1cdve_1{margin-top:var(--pf-v5-global--spacer--lg)}._sticky_1cdve_5{position:sticky;top:0}

package/dist/main.d.ts

@@ -0,0 +1,31 @@
+export { AlertProvider, useAlerts } from './alerts/Alerts';
+export { ErrorPage } from './context/ErrorPage';
+export { Help, useHelp } from './context/HelpContext';
+export { KeycloakProvider, useEnvironment, type KeycloakContext, } from './context/KeycloakContext';
+export { getInjectedEnvironment, type BaseEnvironment, } from './context/environment';
+export { ContinueCancelModal } from './continue-cancel/ContinueCancelModal';
+export { FormErrorText, type FormErrorTextProps, } from './controls/FormErrorText';
+export { HelpItem } from './controls/HelpItem';
+export { NumberControl } from './controls/NumberControl';
+export { PasswordControl } from './controls/PasswordControl';
+export { PasswordInput } from './controls/PasswordInput';
+export { SelectControl, SelectVariant, } from './controls/select-control/SelectControl';
+export type { SelectControlOption, SelectControlProps, } from './controls/select-control/SelectControl';
+export { SwitchControl, type SwitchControlProps, } from './controls/SwitchControl';
+export { TextAreaControl } from './controls/TextAreaControl';
+export { TextControl } from './controls/TextControl';
+export { KeycloakTextArea, type KeycloakTextAreaProps, } from './controls/keycloak-text-area/KeycloakTextArea';
+export { IconMapper } from './icons/IconMapper';
+export { FormPanel } from './scroll-form/FormPanel';
+export { ScrollForm, mainPageContentId } from './scroll-form/ScrollForm';
+export { FormSubmitButton, type FormSubmitButtonProps, } from './buttons/FormSubmitButton';
+export { UserProfileFields } from './user-profile/UserProfileFields';
+export { beerify, debeerify, isUserProfileError, label, setUserProfileServerError, } from './user-profile/utils';
+export type { UserFormFields } from './user-profile/utils';
+export { createNamedContext } from './utils/createNamedContext';
+export { isDefined } from './utils/isDefined';
+export { useRequiredContext } from './utils/useRequiredContext';
+export { useStoredState } from './utils/useStoredState';
+export { default as KeycloakMasthead } from './masthead/Masthead';
+export { KeycloakSelect } from './select/KeycloakSelect';
+export type { Variant, KeycloakSelectProps } from './select/KeycloakSelect';

package/dist/masthead/DefaultAvatar.d.ts

@@ -0,0 +1,7 @@
+type DefaultAvatarProps = {
+    className?: string;
+    border?: "light" | "dark";
+    size?: "sm" | "md" | "lg" | "xl";
+};
+export declare const DefaultAvatar: ({ className, border, size, }: DefaultAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/masthead/KeycloakDropdown.d.ts

@@ -0,0 +1,11 @@
+import { DropdownProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+
+type KeycloakDropdownProps = Omit<DropdownProps, "toggle"> & {
+    "data-testid"?: string;
+    isKebab?: boolean;
+    title?: ReactNode;
+    dropDownItems: ReactNode[];
+};
+export declare const KeycloakDropdown: ({ isKebab, title, dropDownItems, ...rest }: KeycloakDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/masthead/Masthead.d.ts

@@ -0,0 +1,23 @@
+import { AvatarProps, BrandProps } from '@patternfly/react-core';
+import { PageHeaderProps } from '@patternfly/react-core/deprecated';
+import { default as Keycloak } from 'keycloak-js';
+import { ReactNode } from 'react';
+
+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[];
+};
+declare const KeycloakMasthead: ({ keycloak, brand: { href: brandHref, ...brandProps }, avatar, features: { hasLogout, hasManageAccount, hasUsername, }, kebabDropdownItems, dropdownItems, toolbarItems, ...rest }: KeycloakMastheadProps) => import("react/jsx-runtime").JSX.Element;
+export default KeycloakMasthead;

package/dist/scroll-form/FormPanel.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+type FormPanelProps = {
+    title: string;
+    scrollId?: string;
+    className?: string;
+};
+export declare const FormPanel: ({ title, children, scrollId, className, }: PropsWithChildren<FormPanelProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/scroll-form/FormTitle.d.ts

@@ -0,0 +1,9 @@
+import { TitleProps } from '@patternfly/react-core';
+
+type FormTitleProps = Omit<TitleProps, "headingLevel"> & {
+    id?: string;
+    title: string;
+    headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+export declare const FormTitle: ({ id, title, headingLevel, size, ...rest }: FormTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/scroll-form/ScrollForm.d.ts

@@ -0,0 +1,16 @@
+import { GridProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+
+export declare const mainPageContentId = "kc-main-content-page-container";
+type ScrollSection = {
+    title: string;
+    panel: ReactNode;
+    isHidden?: boolean;
+};
+type ScrollFormProps = GridProps & {
+    label: string;
+    sections: ScrollSection[];
+    borders?: boolean;
+};
+export declare const ScrollForm: ({ label, sections, borders, ...rest }: ScrollFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/scroll-form/ScrollPanel.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps } from 'react';
+
+type ScrollPanelProps = HTMLProps<HTMLFormElement> & {
+    title: string;
+    scrollId: string;
+};
+export declare const ScrollPanel: (props: ScrollPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/select/KeycloakSelect.d.ts

@@ -0,0 +1,31 @@
+import { ChipGroupProps, SelectProps } from '@patternfly/react-core';
+
+export type Variant = `${SelectVariant}`;
+export declare enum SelectVariant {
+    single = "single",
+    typeahead = "typeahead",
+    typeaheadMulti = "typeaheadMulti"
+}
+export declare const propertyToString: (prop: string | number | undefined) => string | undefined;
+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 declare const KeycloakSelect: ({ variant, ...rest }: KeycloakSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/select/SingleSelect.d.ts

@@ -0,0 +1,5 @@
+import { KeycloakSelectProps } from './KeycloakSelect';
+
+type SingleSelectProps = Omit<KeycloakSelectProps, "variant">;
+export declare const SingleSelect: ({ toggleId, onToggle, onSelect, selections, isOpen, menuAppendTo, direction, width, maxHeight, toggleIcon, className, children, ...props }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/select/TypeaheadSelect.d.ts

@@ -0,0 +1,3 @@
+import { KeycloakSelectProps } from './KeycloakSelect';
+
+export declare const TypeaheadSelect: ({ toggleId, onSelect, onToggle, onFilter, variant, validated, placeholderText, maxHeight, width, toggleIcon, direction, selections, typeAheadAriaLabel, chipGroupComponent, chipGroupProps, footer, children, ...rest }: KeycloakSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/LocaleSelector.d.ts

@@ -0,0 +1,8 @@
+import { UserProfileFieldProps } from './UserProfileFields';
+
+type LocaleSelectorProps = Omit<UserProfileFieldProps, "inputType"> & {
+    supportedLocales: string[];
+    currentLocale: string;
+};
+export declare const LocaleSelector: ({ t, form, supportedLocales, currentLocale, }: LocaleSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/user-profile/MultiInputComponent.d.ts

@@ -0,0 +1,16 @@
+import { TextInputProps } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+import { FieldPath, UseFormReturn } from 'react-hook-form';
+import { InputType, UserProfileFieldProps } from './UserProfileFields';
+import { UserFormFields } from './utils';
+
+export declare const MultiInputComponent: ({ t, form, attribute, renderer, ...rest }: UserProfileFieldProps) => import("react/jsx-runtime").JSX.Element;
+export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
+    t: TFunction;
+    name: FieldPath<UserFormFields>;
+    form: UseFormReturn<UserFormFields>;
+    addButtonLabel?: string;
+    isDisabled?: boolean;
+    defaultValue?: string[];
+    inputType: InputType;
+};

package/dist/user-profile/OptionsComponent.d.ts

@@ -0,0 +1,3 @@
+import { UserProfileFieldProps } from './UserProfileFields';
+
+export declare const OptionComponent: (props: UserProfileFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/SelectComponent.d.ts

@@ -0,0 +1,3 @@
+import { UserProfileFieldProps } from './UserProfileFields';
+
+export declare const SelectComponent: (props: UserProfileFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/TextAreaComponent.d.ts

@@ -0,0 +1,3 @@
+import { UserProfileFieldProps } from './UserProfileFields';
+
+export declare const TextAreaComponent: (props: UserProfileFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/TextComponent.d.ts

@@ -0,0 +1,3 @@
+import { UserProfileFieldProps } from './UserProfileFields';
+
+export declare const TextComponent: (props: UserProfileFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/UserProfileFields.d.ts

@@ -0,0 +1,40 @@
+import { UserProfileAttributeMetadata, UserProfileMetadata } from '@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata';
+import { TFunction } from 'i18next';
+import { ReactNode } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { UserFormFields } from './utils';
+
+export type UserProfileError = {
+    responseData: {
+        errors?: {
+            errorMessage: string;
+        }[];
+    };
+};
+export type Options = {
+    options?: string[];
+};
+declare const INPUT_TYPES: readonly ["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 InputType = (typeof INPUT_TYPES)[number];
+export type UserProfileFieldProps = {
+    t: TFunction;
+    form: UseFormReturn<UserFormFields>;
+    inputType: InputType;
+    attribute: UserProfileAttributeMetadata;
+    renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
+};
+export type OptionLabel = Record<string, string> | undefined;
+export declare const FIELDS: {
+    [type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
+};
+export type UserProfileFieldsProps = {
+    t: TFunction;
+    form: UseFormReturn<UserFormFields>;
+    userProfileMetadata: UserProfileMetadata;
+    supportedLocales: string[];
+    currentLocale: string;
+    hideReadOnly?: boolean;
+    renderer?: (attribute: UserProfileAttributeMetadata) => JSX.Element | undefined;
+};
+export declare const UserProfileFields: ({ t, form, userProfileMetadata, supportedLocales, currentLocale, hideReadOnly, renderer, }: UserProfileFieldsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/user-profile/UserProfileGroup.d.ts

@@ -0,0 +1,13 @@
+import { UserProfileAttributeMetadata } from '@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata';
+import { TFunction } from 'i18next';
+import { PropsWithChildren, ReactNode } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { UserFormFields } from './utils';
+
+export type UserProfileGroupProps = {
+    t: TFunction;
+    form: UseFormReturn<UserFormFields>;
+    attribute: UserProfileAttributeMetadata;
+    renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
+};
+export declare const UserProfileGroup: ({ t, form, attribute, renderer, children, }: PropsWithChildren<UserProfileGroupProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/user-profile/utils.d.ts

@@ -0,0 +1,32 @@
+import { UserProfileAttributeMetadata } from '@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata';
+import { default as UserRepresentation } from '@keycloak/keycloak-admin-client/lib/defs/userRepresentation';
+import { TFunction } from 'i18next';
+
+export type KeyValueType = {
+    key: string;
+    value: string;
+};
+export type UserFormFields = Omit<UserRepresentation, "attributes" | "userProfileMetadata"> & {
+    attributes?: KeyValueType[] | Record<string, string | string[]>;
+};
+type FieldError = {
+    field: string;
+    errorMessage: string;
+    params?: string[];
+};
+type ErrorArray = {
+    errors?: FieldError[];
+};
+export type UserProfileError = {
+    responseData: ErrorArray | FieldError;
+};
+export declare const label: (t: TFunction, text: string | undefined, fallback?: string) => string | undefined;
+export declare const labelAttribute: (t: TFunction, attribute: UserProfileAttributeMetadata) => string | undefined;
+export declare const isRootAttribute: (attr?: string) => boolean | "" | undefined;
+export declare const fieldName: (name?: string) => "id" | "enabled" | "email" | "attributes" | "createdTimestamp" | "username" | "totp" | "emailVerified" | "disableableCredentialTypes" | "requiredActions" | "notBefore" | "access" | "clientConsents" | "clientRoles" | "credentials" | "federatedIdentities" | "federationLink" | "firstName" | "groups" | "lastName" | "origin" | "realmRoles" | "self" | "serviceAccountClientId" | `attributes.${string}` | `attributes.${number}` | `attributes.${number}.value` | `attributes.${number}.key` | `disableableCredentialTypes.${number}` | `requiredActions.${number}` | `access.${string}` | `clientConsents.${number}` | `clientConsents.${number}.clientId` | `clientConsents.${number}.createDate` | `clientConsents.${number}.grantedClientScopes` | `clientConsents.${number}.lastUpdatedDate` | `clientConsents.${number}.grantedClientScopes.${number}` | `clientRoles.${string}` | `credentials.${number}` | `credentials.${number}.value` | `credentials.${number}.type` | `credentials.${number}.id` | `credentials.${number}.createdDate` | `credentials.${number}.credentialData` | `credentials.${number}.priority` | `credentials.${number}.secretData` | `credentials.${number}.temporary` | `credentials.${number}.userLabel` | `federatedIdentities.${number}` | `federatedIdentities.${number}.identityProvider` | `federatedIdentities.${number}.userId` | `federatedIdentities.${number}.userName` | `groups.${number}` | `realmRoles.${number}`;
+export declare const beerify: <T extends string>(name: T) => string;
+export declare const debeerify: <T extends string>(name: T) => string;
+export declare function setUserProfileServerError<T>(error: UserProfileError, setError: (field: keyof T, params: object) => void, t: TFunction): void;
+export declare function isRequiredAttribute({ required, validators, }: UserProfileAttributeMetadata): boolean;
+export declare function isUserProfileError(error: unknown): error is UserProfileError;
+export {};

package/dist/utils/createNamedContext.d.ts

@@ -0,0 +1,4 @@
+import { Context } from 'react';
+
+export type NamedContext<T> = Context<T> & Required<Pick<Context<T>, "displayName">>;
+export declare function createNamedContext<T>(displayName: string, defaultValue: T): NamedContext<T>;

package/dist/utils/isDefined.d.ts

@@ -0,0 +1 @@
+export declare function isDefined<T>(value: T): value is NonNullable<T>;

package/dist/utils/useRequiredContext.d.ts

@@ -0,0 +1,10 @@
+import { Context } from 'react';
+
+/**
+ * Passes the call to `useContext` and throw an exception if the resolved value is either `null` or `undefined`.
+ * Can be used for contexts that are required and should always have a non nullable value.
+ *
+ * @param context The context to pass to `useContext`
+ * @returns
+ */
+export declare function useRequiredContext<T>(context: Context<T>): NonNullable<T>;

package/dist/utils/useStorageItem.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'react';
+
+/**
+ * A hook that allows you to get a specific item stored by the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+ * Automatically updates the value when modified in the context of another document (such as an open tab) trough the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event.
+ *
+ * @param storageArea The storage area to target, must implement the [`Storage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage) interface (such as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)).
+ * @param keyName The key of the item to get from storage, same as passed to [`Storage.getItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)
+ * @param The default value to fall back to in case no stored value was retrieved.
+ */
+export declare function useStorageItem(storageArea: Storage, keyName: string, defaultValue: string): [string, Dispatch<string>];

package/dist/utils/useStoredState.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch } from 'react';
+
+/**
+ * A hook that acts similarly to React's `useState()`, but persists the state using [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+ * Automatically updates the value when modified in the context of another document (such as an open tab) trough the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event.
+ *
+ * The value is serialized as [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) and therefore the value provided must be serializable as such.
+ * Because the value is always serialized it will never be referentially equal to originally provided value.
+ *
+ * @param storageArea The storage area to target, must implement the [`Storage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage) interface (such as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)).
+ * @param keyName The key of the item to get from storage, same as passed to [`Storage.getItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)
+ * @param defaultValue The default value to fall back to in case no stored value was retrieved (must be serializable as JSON).
+ */
+export declare function useStoredState<S>(storageArea: Storage, keyName: string, defaultValue: S): [S, Dispatch<S>];

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@keycloak/keycloak-ui-shared",
+  "version": "25.0.0",
+  "type": "module",
+  "main": "./dist/keycloak-ui-shared.js",
+  "types": "./dist/keycloak-ui-shared.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/keycloak-ui-shared.js",
+      "types": "./dist/keycloak-ui-shared.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "wireit": {
+    "build": {
+      "command": "vite build",
+      "dependencies": [
+        "../keycloak-admin-client:build"
+      ],
+      "files": [
+        "src/**",
+        "package.json",
+        "tsconfig.json",
+        "vite.config.ts"
+      ],
+      "output": [
+        "dist/**"
+      ]
+    },
+    "lint": {
+      "command": "eslint .",
+      "dependencies": [
+        "../keycloak-admin-client:build"
+      ]
+    }
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^5.3.3",
+    "@patternfly/react-icons": "^5.3.2",
+    "@patternfly/react-styles": "^5.3.1",
+    "i18next": "^23.11.5",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.51.5",
+    "react-i18next": "^14.1.2",
+    "@keycloak/keycloak-admin-client": "25.0.0",
+    "keycloak-js": "25.0.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "vite": "^5.2.12",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vitest": "^1.6.0"
+  },
+  "scripts": {
+    "build": "wireit",
+    "lint": "wireit"
+  }
+}