@plesk/ui-library 3.40.7 → 3.40.9

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.40.7</title>
+    <title>Plesk UI Library 3.40.9</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.52d1d9a1.js"></script>
+    <script src="build/bundle.56f21860.js"></script>
   </body>
 </html>

package/types/src/components/Cuttable/Cuttable.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import './Cuttable.less';
 export type CuttableProps = {
     /**
@@ -32,32 +32,10 @@ export type CuttableProps = {
      * @ignore
      */
     baseClassName?: string;
-};
-type CuttableState = {
-    collapsed?: boolean;
-    autofit: boolean;
-};
+} & HTMLAttributes<HTMLDivElement>;
 /**
  * `Cuttable` component is used for showing and hiding part of content.
  * @since 0.0.42
  */
-declare class Cuttable extends Component<CuttableProps, CuttableState> {
-    static defaultProps: {
-        collapsed: boolean;
-        maxHeight: string;
-        locale: {
-            showMore: string;
-            showLess: string;
-        };
-        baseClassName: string;
-    };
-    state: {
-        collapsed: undefined;
-        autofit: boolean;
-    };
-    contentRef: import("react").RefObject<HTMLDivElement>;
-    handleToggle: () => void;
-    handleResize: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const Cuttable: ({ children, collapsed: externalCollapsed, maxHeight, locale, className, baseClassName, ...props }: CuttableProps) => import("react/jsx-runtime").JSX.Element;
 export default Cuttable;

package/types/src/components/Cuttable/useContentOverflow.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+type Options = {
+    contentRef: RefObject<HTMLDivElement>;
+    hiddenElementRef: RefObject<HTMLDivElement>;
+    maxHeight: string;
+};
+export declare const useContentOverflow: ({ contentRef, hiddenElementRef, maxHeight }: Options) => boolean;
+export {};

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

@@ -344,6 +344,7 @@ declare class List<T extends ListData> extends Component<ListProps<T>, ListState
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "search" | "enter" | "send" | "done" | "go" | "next" | "previous" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;

package/types/src/components/SegmentedControl/ButtonGroupControl.d.ts

@@ -0,0 +1,12 @@
+import { SegmentedControlButton } from './types';
+interface ButtonGroupControlProps<T> {
+    buttons: SegmentedControlButton<T>[];
+    selectedValues: T[];
+    onClick: (value: T) => void;
+    ghost: boolean;
+    monospaced: boolean;
+    isResponsive: boolean;
+    baseClassName: string;
+}
+declare const ButtonGroupControl: <T>({ buttons, selectedValues, onClick, ghost, monospaced, isResponsive, baseClassName, }: ButtonGroupControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroupControl;

package/types/src/components/SegmentedControl/DropdownControl.d.ts

@@ -0,0 +1,8 @@
+import { SegmentedControlButton } from './types';
+interface DropdownControlProps<T> {
+    buttons: SegmentedControlButton<T>[];
+    selected?: T;
+    onClick: (value: T) => void;
+}
+declare const DropdownControl: <T>({ buttons, selected, onClick }: DropdownControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default DropdownControl;

package/types/src/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,5 @@
-import { Component, CSSProperties, ReactChild, ReactNode, ContextType } from 'react';
-import { DataAttributes } from '../../utils/types';
-import ResponsiveContext from '../ResponsiveContext';
+import { ReactNode } from 'react';
+import { SegmentedControlButton } from './types';
 import '../../helpers/base.less';
 import './SegmentedControl.less';
 type SingleProps<T> = {
@@ -28,7 +27,7 @@ export type SegmentedControlProps<T> = {
      * Label
      * @since 0.0.68
      */
-    label: ReactNode;
+    label?: ReactNode;
     /**
      * Where to place label
      * @since 0.0.68
@@ -38,15 +37,7 @@ export type SegmentedControlProps<T> = {
      * Array of buttons to display (every array item must contain an unique "value" property)
      * @since 0.0.68
      */
-    buttons: ({
-        value: T;
-        title?: ReactChild;
-        icon?: ReactNode;
-        className?: string;
-        style?: CSSProperties;
-        disabled?: boolean;
-        tooltip?: ReactNode;
-    } & DataAttributes)[];
+    buttons: SegmentedControlButton<T>[];
     /**
      * Monospaced version of buttons (all button would have the same width).
      * Attention: using it with buttons dynamic update may cause to wrong behavior!
@@ -72,46 +63,11 @@ export type SegmentedControlProps<T> = {
      */
     baseClassName?: string;
 } & MultipleBaseProps<T>;
-export interface SegmentedControlState<T> {
-    selected?: T | T[];
-    prevSelected?: T | T[];
-    monoWidth: number;
-    compact?: boolean;
-}
 export declare const SEGMENTED_CONTROL_BASE_CLASS_NAME: string;
 /**
- *  `Segmented Control` is a group of several [Buttons](#!/Button)
+ * `Segmented Control` is a group of several [Buttons](#!/Button)
  * each of which functions as a mutually exclusive option.
  * @since 0.0.68
  */
-declare class SegmentedControl<T = unknown> extends Component<SegmentedControlProps<T>, SegmentedControlState<T>> {
-    static defaultProps: {
-        label: null;
-        labelPlacement: string;
-        monospaced: boolean;
-        multiple: boolean;
-        onChange: null;
-        inline: boolean;
-        ghost: boolean;
-        className: null;
-        baseClassName: string;
-    };
-    state: SegmentedControlState<T>;
-    static getDerivedStateFromProps<T>(props: Readonly<SegmentedControlProps<T>>, state: SegmentedControlState<T>): Partial<SegmentedControlState<T>>;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    static contextType: import("react").Context<boolean | undefined>;
-    context: ContextType<typeof ResponsiveContext>;
-    isCompact: boolean;
-    rootRef: import("react").RefObject<Element>;
-    adjustMonospaced: () => void;
-    isResponsive(): boolean;
-    handleChange: (value: T) => () => void;
-    compact: () => boolean;
-    uncompact: () => boolean;
-    renderControl(): import("react/jsx-runtime").JSX.Element;
-    renderDropdown(): import("react/jsx-runtime").JSX.Element;
-    renderButtonGroup(): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const SegmentedControl: <T>({ label, labelPlacement, buttons, monospaced, multiple, selected: externalSelected, onChange, inline, ghost, className, baseClassName, ...props }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SegmentedControl;

package/types/src/components/SegmentedControl/getSelectedValues.d.ts

@@ -0,0 +1 @@
+export declare const getSelectedValues: <T>(selected: T | T[] | undefined) => T[];

package/types/src/components/SegmentedControl/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './SegmentedControl';
 export { SEGMENTED_CONTROL_BASE_CLASS_NAME } from './SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlState } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';

package/types/src/components/SegmentedControl/types.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactChild, ReactNode } from 'react';
+import { DataAttributes } from '../../utils/types';
+export type SegmentedControlButton<T> = {
+    value: T;
+    title?: ReactChild;
+    icon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    tooltip?: ReactNode;
+} & DataAttributes;

package/types/src/components/SegmentedControl/useResponsive.d.ts

@@ -0,0 +1,6 @@
+export declare const useResponsive: () => {
+    isResponsive: boolean;
+    isInResponsiveContext: boolean;
+    compact: () => boolean;
+    expand: () => boolean;
+};

package/types/src/components/SegmentedControl/useSelected.d.ts

@@ -0,0 +1,17 @@
+type SingleOptions<T> = {
+    multiple?: false;
+    externalSelected?: T;
+    onChange?: (newSelection: T) => void;
+};
+type MultipleOptions<T> = {
+    multiple: true;
+    externalSelected?: T[];
+    onChange?: (newSelection: T[]) => void;
+};
+type MultipleBaseOptions<T> = MultipleOptions<T> | SingleOptions<T>;
+type Options<T> = MultipleBaseOptions<T>;
+export declare const useSelected: <T>({ multiple, externalSelected, onChange }: Options<T>) => {
+    selectedValues: T[];
+    handleChange: (value: T) => void;
+};
+export {};

package/types/src/components/Squeezer/Squeezer.d.ts

@@ -1,22 +1,6 @@
-import { Component, MutableRefObject, ReactElement } from 'react';
-type SqueezerProps = {
-    children: ({ ref }: {
-        ref: (el: Element | null) => void;
-    }) => ReactElement;
-    compact: () => boolean;
-    uncompact: () => boolean;
-    innerRef?: (el: Element) => void;
-    innerMeasure?: (measure: () => void) => void;
-};
-declare class Squeezer extends Component<SqueezerProps> {
-    rootRef: MutableRefObject<Element | null>;
-    measuring: boolean;
-    measurements: number[];
-    minWidth: number;
-    addMeasurement(width: number): void;
-    measure(force?: boolean): void;
-    check(force?: boolean): void;
-    handleResize: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+/// <reference types="react" />
+import { UseSqueezeOptions } from '../../hooks';
+type SqueezerProps<Element extends HTMLElement> = Omit<UseSqueezeOptions<Element>, 'ref'>;
+/** Render-less useSqueeze wrapper */
+declare const Squeezer: import("react").ForwardRefExoticComponent<SqueezerProps<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 export default Squeezer;

package/types/src/components/Toolbar/RegistryContext.d.ts

@@ -8,8 +8,7 @@ declare class Registry {
     compact(): boolean;
     expand(): boolean;
     get isCompact(): boolean;
-    get hasCompactItems(): boolean;
-    private checkItemIsCompactOrHasCompactItems;
+    get isExpandable(): boolean;
 }
 declare class RegistryItem {
     private _isCompact;
@@ -20,6 +19,7 @@ declare class RegistryItem {
     compact(): void;
     expand(): void;
     get isCompact(): boolean;
+    get isExpandable(): boolean;
 }
 export declare const useRegistry: () => Registry;
 export declare const useRegistryItem: () => boolean[];

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

@@ -131,7 +131,7 @@ export { default as Section } from './Section';
 export * from './Section';
 export { default as SegmentedControl } from './SegmentedControl';
 export { SEGMENTED_CONTROL_BASE_CLASS_NAME } from './SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlState } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';
 export { default as Spot } from './Spot';
 export type { SpotProps } from './Spot';
 export { default as SplitButton } from './SplitButton';

package/types/src/hooks/index.d.ts

@@ -1 +1,3 @@
+export { useResizeObserver } from './useResizeObserver';
 export { useSqueeze } from './useSqueeze';
+export type { UseSqueezeOptions } from './useSqueeze';

package/types/src/hooks/useSqueeze.d.ts

@@ -1,10 +1,7 @@
 import { RefObject } from 'react';
-type UseSqueezeOptions<Element extends HTMLElement = HTMLElement> = {
+export type UseSqueezeOptions<Element extends HTMLElement = HTMLElement> = {
     ref: RefObject<Element>;
     compact: () => boolean;
     expand: () => boolean;
-    innerRef?: (el: Element) => void;
-    innerMeasure?: (measure: () => void) => void;
 };
 export declare const useSqueeze: <Element_1 extends HTMLElement = HTMLElement>({ ref, compact, expand, }: UseSqueezeOptions<Element_1>) => void;
-export {};