@plesk/ui-library 3.44.0 → 3.45.0

package/styleguide/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Plesk UI Library 3.44.0</title>
+    <title>Plesk UI Library 3.45.0</title>
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
@@ -26,6 +26,6 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KWST26V"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <script src="build/bundle.cf3363eb.js"></script>
+    <script src="build/bundle.1771d6b7.js"></script>
   </body>
 </html>

package/types/components/Button/Button.d.ts

@@ -49,6 +49,12 @@ interface BaseButtonProps {
      * @since 0.0.42
      */
     tooltip?: ReactNode;
+    /**
+     * Use tooltip as an accessible label for the trigger element.
+     * By default, the tooltip is used as an accessible description.
+     * @since 3.45.0
+     */
+    tooltipAsLabel?: boolean;
     /**
      * Name of icon or [Icon](#!/Icon) component
      * @since 0.0.42

package/types/components/ComboBoxDropdown/ComboBoxDropdown.d.ts

@@ -19,6 +19,7 @@ type OptionType = {
     children: ReactNode;
 };
 export declare const findNextSafeIndex: (currIndex: number, diff: number, options: OptionType[]) => number;
+export declare const getOptionId: (listboxId: string, index: number) => string;
 type ComboBoxDropdownProps = {
     baseClassName?: string;
     className?: string;

package/types/components/ComboBoxDropdown/index.d.ts

@@ -1 +1 @@
-export { default, findNextSafeIndex } from './ComboBoxDropdown';
+export { default, findNextSafeIndex, getOptionId } from './ComboBoxDropdown';

package/types/components/Dropdown/Dropdown.d.ts

@@ -42,6 +42,11 @@ export interface DropdownProps {
      * @ignore
      */
     baseClassName?: string;
+    /**
+     * Callback fired when the dropdown is opened or closed.
+     * @since 3.45.0
+     */
+    onToggle?: (open: boolean) => void;
 }
 /**
  * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).

package/types/components/Layout/Layout.d.ts

@@ -138,6 +138,7 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     handleToggle: () => void;
     handleResize: ({ bounds }: ContentRect) => void;
     getSidebarClosed: () => boolean;
+    getSidebarTogglerLabel: () => string;
     renderHeader({ header }: {
         header: ReactNode;
     }): import("react/jsx-runtime").JSX.Element | null;

package/types/components/List/ListActions.d.ts

@@ -21,10 +21,15 @@ export type ListActionsProps = {
     locale?: {
         close?: ReactNode;
     };
+    /**
+     * Callback fired when the dropdown menu is opened or closed.
+     * @since 3.45.0
+     */
+    onMenuToggle?: (open: boolean) => void;
 };
 /**
  * `ListActions` component is used for performing operations on individual objects in [List](#!/List).
  * @since 3.3.0
  */
-declare const ListActions: ({ baseClassName, className, children, locale, ...props }: ListActionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ListActions: ({ baseClassName, className, children, locale, onMenuToggle, ...props }: ListActionsProps) => import("react/jsx-runtime").JSX.Element;
 export default ListActions;

package/types/components/LocaleProvider/LocaleProvider.d.ts

@@ -40,5 +40,8 @@ declare class LocaleProvider extends PureComponent<LocaleProviderProps> {
 }
 export default LocaleProvider;
 export declare const useTranslate: (namespace?: string) => Translate;
+type InternalTranslate = (...args: Parameters<Translate>) => string;
+/** Internal function to support legacy class components */
+export declare const getInternalTranslate: (namespace?: string) => InternalTranslate;
 export declare const useInternalTranslate: (namespace?: string) => Translate;
 export declare const LocaleBetaProvider: ({ messages, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element;

package/types/components/Select/Select.d.ts

@@ -73,6 +73,10 @@ export type SelectProps = MultipleBaseProps & {
      * @since 2.3.0
      */
     placeholder?: ReactNode;
+    /** @ignore */
+    'aria-label'?: string;
+    /** @ignore */
+    'aria-labelledby'?: string;
 } & Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'size'>;
 /**
  * `Select` component is used for making a choice among a set of related options.

package/types/components/Select/SelectControl.d.ts

@@ -22,7 +22,11 @@ type SelectControlProps = {
     onClear: () => void;
     onValueRemove: (value?: Value) => void;
     opened?: boolean;
+    ariaId: string;
     listboxId?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-activedescendant'?: string;
 };
 declare const SelectControl: import("react").ForwardRefExoticComponent<SelectControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SelectControl;

package/types/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { Component, CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 import './Tooltip.less';
 export interface TooltipProps {
     /**
@@ -16,6 +16,19 @@ export interface TooltipProps {
      * @since 0.0.50
      */
     delay?: number;
+    /**
+     * Use tooltip as an accessible label for the trigger element.
+     *
+     * - If `true` with a `string` title, the trigger element receives `aria-label` attribute.
+     * - If `true` with a `node` title, the trigger element receives `aria-labelledby` attribute.
+     * - If `false`, the tooltip is used as an accessible description.
+     * @since 3.45.0
+     */
+    asLabel?: boolean;
+    /**
+     * @ignore
+     */
+    id?: string;
     /**
      * @ignore
      */
@@ -34,29 +47,5 @@ export interface TooltipProps {
  * while user hovers the pointer over the element.
  * @since 0.0.35
  */
-declare class Tooltip extends Component<TooltipProps> {
-    static defaultProps: {
-        delay: number;
-        style: undefined;
-        className: undefined;
-        baseClassName: string;
-    };
-    state: {
-        left: number;
-        top: number;
-        ready: boolean;
-        visible: boolean;
-        id: string;
-    };
-    componentWillUnmount(): void;
-    private timer;
-    private tooltipRef;
-    clearTimer: () => void;
-    handleShow: () => void;
-    handleHide: () => void;
-    handleMouseEnter: () => void;
-    handleMouseMove: (e: MouseEvent) => void;
-    renderTooltip(): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const Tooltip: ({ title, children, delay, asLabel, className, baseClassName, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/types/components/Tooltip/TooltipContent.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VirtualElement } from '@floating-ui/react-dom';
+type TooltipContentProps = {
+    title: ReactNode;
+    visible: boolean;
+    virtualElement: VirtualElement | null;
+    trigger: HTMLElement | null;
+    onEscapeKeyDown?: () => void;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'title'>;
+export declare const TooltipContent: ({ title, visible, virtualElement, trigger, onEscapeKeyDown, className, style, id, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/components/Tooltip/getA11yAttributes.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export declare const getA11yAttributes: ({ asLabel, title, ready, id, }: {
+    asLabel: boolean;
+    title: string | ReactNode;
+    ready: boolean;
+    id: string;
+}) => {
+    'aria-describedby': string | undefined;
+    'aria-label'?: undefined;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label': string;
+    'aria-describedby'?: undefined;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-labelledby': string | undefined;
+    'aria-describedby'?: undefined;
+    'aria-label'?: undefined;
+};

package/types/components/Tooltip/useVirtualElement.d.ts

@@ -0,0 +1,3 @@
+import { PointerEvent } from 'react';
+import { VirtualElement } from '@floating-ui/react-dom';
+export declare const useVirtualElement: () => readonly [VirtualElement | null, ({ clientX, clientY }: PointerEvent) => void, () => void];

package/types/components/utils.d.ts

@@ -1,4 +1,4 @@
-import { SyntheticEvent, FunctionComponent, Ref, RefObject } from 'react';
+import type { FunctionComponent, KeyboardEventHandler, Ref, RefObject, SyntheticEvent } from 'react';
 type SafeInvoke = <A extends any[]>(fn: ((...args: A) => void) | undefined, ...args: A) => void;
 export declare const safeInvoke: SafeInvoke;
 type WrapFunction = <A extends any[]>(fn: ((...args: A) => void) | undefined, wrapper: ((...args: A) => void) | undefined) => (...args: A) => void;
@@ -28,4 +28,11 @@ export declare const createFocusManager: (containerRef: RefObject<HTMLElement>,
 };
 export declare const mergeRefs: <T>(...refs: Ref<T | null>[]) => (value: T | null) => void;
 export declare const normalizeSize: (value?: number | string) => string | number | undefined;
+export declare const createKeyboardClickAdapter: ({ existingHandler, disabled, }?: {
+    existingHandler?: KeyboardEventHandler;
+    disabled?: boolean;
+}) => KeyboardEventHandler;
+export declare const setFocusReturned: (element?: HTMLElement | null, duration?: number) => void;
+export declare const getFocusReturned: (element: Element) => number;
+export declare const isFocusVisible: (element: Element) => boolean;
 export {};

package/types/hooks/useEscapeKeydown.d.ts

@@ -0,0 +1 @@
+export declare const useEscapeKeydown: (onEscapeKeyDown?: (event: KeyboardEvent) => void) => void;

package/types/utils.d.ts

@@ -1,7 +1,4 @@
-import { type ReactNode } from 'react';
-import type { IconName, IconProps } from './components';
 export declare const isRtl: () => boolean;
 export declare const disableDocumentScroll: () => void;
 export declare const enableDocumentScroll: () => void;
 export declare const copyToClipboard: (value: string) => void;
-export declare const prepareIconName: (icon: IconName | IconProps | ReactNode, empty: boolean) => string | undefined;