@plesk/ui-library 3.38.2 → 3.40.0

package/styleguide/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="12432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="12480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <symbol viewBox="0 0 12 12" id="advisor:12">
       <path d="M4.5 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM8 7a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" />
@@ -244,6 +244,14 @@
       <path fill-rule="evenodd" d="M2 1a1 1 0 0 1 1-1h9a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a1 1 0 0 1-1-1V1zm1 12V1h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3zm10 .733V14a1 1 0 0 1-1 1H3v-1h9c.364 0 .706-.097 1-.267z" clip-rule="evenodd" />
       <path fill-rule="evenodd" d="M8 10a3 3 0 0 0 .878-.13c.264-.081.564.015.688.262.123.247.024.55-.236.642A4 4 0 1 1 12 7a1.5 1.5 0 0 1-2.4 1.2A2 2 0 1 1 10 7a.5.5 0 0 0 1 0 3 3 0 1 0-3 3zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="boost:12">
+      <path d="M10.5 2.1c-.1 0-.1 0-.1.1l-.6 7c-.5.2-.8.7-.8 1.3 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-.6-.3-1.1-.8-1.3l-.6-7c0-.1 0-.1-.1-.1zm0 8.9c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5z" />
+      <path d="M11.5 1c.3 0 .5-.2.5-.5s-.2-.5-.5-.5h-.1C8.1.2 5.1 1.7 3 4 1.3 6 .2 8.5 0 11.3v.2c0 .3.2.5.5.5s.5-.2.5-.5v-.2c.2-2.5 1.2-4.9 2.8-6.7C5.7 2.5 8.4 1.2 11.5 1z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="boost:16">
+      <path d="M15.5 1c.3 0 .5-.2.5-.5s-.2-.5-.5-.5C11.4.1 7.6 1.8 4.9 4.5 2 7.3.1 11.2 0 15.5c0 .3.2.5.5.5s.5-.2.5-.5c.1-4 1.9-7.7 4.6-10.3 2.6-2.5 6.1-4.1 9.9-4.2z" />
+      <path d="M14 2.8c-.1 0-.1 0-.2.1l-.8 9.3a2 2 0 0 0 .9 3.8 2 2 0 0 0 .9-3.8L14.2 3c-.1-.1-.1-.2-.2-.2zM14 15c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="boundary:12">
       <path fill-rule="evenodd" d="M3 9V2.997a1 1 0 01.342-.753L5.835.062a.25.25 0 01.33 0l2.494 2.182A1.003 1.003 0 019 2.997V9h.666a1 1 0 01.6.2l1.332 1c.769.577.361 1.8-.6 1.8H1.002c-.961 0-1.369-1.223-.6-1.8l1.333-1a1 1 0 01.6-.2H3zm5-1.565V9H6.435L8 7.435zM5 9l3-3V3.435l-4 4V9h1zm2.469-6.469L6 1.247l-2 1.75V6L7.469 2.53zM1.002 11l1.333-1h7.33l1.333 1H1.002z" clip-rule="evenodd" />
     </symbol>

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.38.2</title>
+    <title>Plesk UI Library 3.40.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.42040fbd.js"></script>
+    <script src="build/bundle.8f00c54c.js"></script>
   </body>
 </html>

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

@@ -92,6 +92,7 @@ type ButtonComponent<Component extends ElementType = 'button'> = {
     defaultProps?: Partial<ButtonProps<Component>>;
     displayName?: string;
 } & (<C extends ElementType = Component>(props: ButtonProps<C>) => ReactElement | null);
+export declare const BUTTON_PROP_NAMES: (keyof ButtonProps)[];
 /**
  * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
  * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).

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

@@ -118,29 +118,5 @@ export type DialogProps<FV extends FormValues = FormValues> = {
  * `Dialog` is a modal window that asks users to make a decision or enter additional information.
  * @since 0.0.68
  */
-declare const Dialog: {
-    <FV extends FormValues = FormValues>({ baseClassName, className, children, actions, isOpen, banner, image, title, subtitle, cancelTitle, cancelButton, buttons, form, size, closable, onClose, closingConfirmation, canClose, ...props }: DialogProps<FV>): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        isOpen: boolean;
-        banner: undefined;
-        sideBanner: undefined;
-        sideBannerContainer: undefined;
-        image: undefined;
-        title: undefined;
-        subtitle: undefined;
-        cancelTitle: undefined;
-        cancelButton: undefined;
-        buttons: undefined;
-        actions: undefined;
-        form: undefined;
-        size: string;
-        closable: boolean;
-        canClose: boolean;
-        onClose: undefined;
-        closingConfirmation: undefined;
-        children: undefined;
-        className: undefined;
-        baseClassName: string;
-    };
-};
+declare const Dialog: <FV extends FormValues = FormValues>({ baseClassName, isOpen, size, closable, canClose, className, children, actions, banner, image, title, subtitle, cancelTitle, cancelButton, buttons, form, onClose, closingConfirmation, ...props }: DialogProps<FV>) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

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

@@ -99,8 +99,5 @@ export interface DrawerProps<FV extends FormValues = FormValues> {
  * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
-declare const Drawer: {
-    <FV extends FormValues = FormValues>({ baseClassName, className, children, title, subtitle, backButton, hideButton, tabs, onClose, form, progress, closingConfirmation, ...props }: DrawerProps<FV>): import("react/jsx-runtime").JSX.Element;
-    defaultProps: Partial<DrawerProps<FormValues>>;
-};
+declare const Drawer: <FV extends FormValues = FormValues>({ baseClassName, isOpen, placement, size, className, children, title, subtitle, backButton, hideButton, tabs, onClose, form, progress, closingConfirmation, ...props }: DrawerProps<FV>) => import("react/jsx-runtime").JSX.Element;
 export default Drawer;

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

@@ -130,29 +130,7 @@ export interface FormFieldProps {
  * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
 declare const FormFieldWrapper: {
-    (props: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, errors, required, baseClassName, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: {
-        id: undefined;
-        name: undefined;
-        value: undefined;
-        onChange: null;
-        label: undefined;
-        description: undefined;
-        errors: {};
-        required: boolean;
-        children: undefined;
-        multi: undefined;
-        disabled: undefined;
-        locale: undefined;
-        addMoreValidator: undefined;
-        onRemoveRow: null;
-        fullDescription: undefined;
-        className: undefined;
-        baseClassName: string;
-        form: undefined;
-        vertical: undefined;
-        scrollableElement: undefined;
-    };
 };
 export default FormFieldWrapper;

package/types/src/components/Icon/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const NAMES_12: IconName[];
-export type IconName = 'advisor' | 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-circle-filled' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-left-circle-filled' | 'arrow-right' | 'arrow-right-circle-filled' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-circle-filled' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bar-chart-vertical-lock' | 'bell' | 'book-email' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-filled' | 'database-plus' | 'deploy' | 'docker-filled' | 'dollar' | 'dollar-filled' | 'dot' | 'dot-big' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'file' | 'filter' | 'filter-check-mark' | 'fire' | 'flag' | 'flag-filled' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'forward-circle-filled' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'joomla' | 'kebab' | 'key' | 'label' | 'label-plus' | 'laravel' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-circle-filled' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'plus-circle' | 'plus-circle-filled' | 'power' | 'projects' | 'puzzle' | 'python' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'redirect-circle-filled' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'server' | 'servers' | 'share' | 'shield' | 'shield-attention-filled' | 'shield-chain' | 'shield-filled' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'ssl-it' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'start-filled' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'woocommerce' | 'wordpress' | 'wordpress-minus' | 'zero-circle-filled';
+export type IconName = 'advisor' | 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-circle-filled' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-left-circle-filled' | 'arrow-right' | 'arrow-right-circle-filled' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-circle-filled' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bar-chart-vertical-lock' | 'bell' | 'book-email' | 'boost' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-filled' | 'database-plus' | 'deploy' | 'docker-filled' | 'dollar' | 'dollar-filled' | 'dot' | 'dot-big' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'file' | 'filter' | 'filter-check-mark' | 'fire' | 'flag' | 'flag-filled' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'forward-circle-filled' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'joomla' | 'kebab' | 'key' | 'label' | 'label-plus' | 'laravel' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-circle-filled' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'plus-circle' | 'plus-circle-filled' | 'power' | 'projects' | 'puzzle' | 'python' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'redirect-circle-filled' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'server' | 'servers' | 'share' | 'shield' | 'shield-attention-filled' | 'shield-chain' | 'shield-filled' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'ssl-it' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'start-filled' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'woocommerce' | 'wordpress' | 'wordpress-minus' | 'zero-circle-filled';
 export declare const NAMES: IconName[];

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

@@ -8,6 +8,7 @@ export declare const STATUS_DONE = "done";
 export declare const STATUS_WARNING = "warning";
 export declare const STATUS_ERROR = "error";
 export declare const STATUS_CANCELED = "canceled";
+export declare const PROGRESS_STEP_DEFAULT_STATUS = "not_started";
 export type Status = typeof STATUS_NOT_STARTED | typeof STATUS_RUNNING | typeof STATUS_DONE | typeof STATUS_ERROR | typeof STATUS_CANCELED | typeof STATUS_WARNING;
 export interface ProgressStepProps {
     /**
@@ -53,17 +54,5 @@ export interface ProgressStepProps {
  * `ProgressStep` is a part of the [Progress](#!/Progress) component.
  * @since 1.10.0
  */
-declare const ProgressStep: {
-    ({ className, children, icon, title, statusText, progress, status, baseClassName, ...props }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        icon: null;
-        title: null;
-        status: string;
-        statusText: null;
-        progress: number;
-        children: null;
-        className: null;
-        baseClassName: string;
-    };
-};
+declare const ProgressStep: ({ className, children, icon, title, statusText, progress, status, baseClassName, ...props }: ProgressStepProps) => import("react/jsx-runtime").JSX.Element;
 export default ProgressStep;

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

@@ -1,2 +1,2 @@
 export type { Status, ProgressStepProps } from './ProgressStep';
-export { default, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR, STATUS_WARNING, STATUS_CANCELED, STATUS_NOT_STARTED, } from './ProgressStep';
+export { default, STATUS_RUNNING, STATUS_DONE, STATUS_ERROR, STATUS_WARNING, STATUS_CANCELED, STATUS_NOT_STARTED, PROGRESS_STEP_DEFAULT_STATUS, } from './ProgressStep';

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

@@ -54,7 +54,7 @@ export interface SectionProps {
      * Content of the `Section`.
      * @since 0.0.54
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * @ignore
      */
@@ -78,21 +78,6 @@ interface SectionState extends DerivedState {
 }
 export declare const SECTION_BASE_CLASS_NAME: string;
 declare class Section extends Component<SectionProps, SectionState> {
-    static defaultProps: {
-        title: undefined;
-        intent: undefined;
-        collapsible: boolean;
-        collapsed: boolean;
-        onTitleChange: undefined;
-        onClose: undefined;
-        onToggle: undefined;
-        buttons: undefined;
-        vertical: undefined;
-        children: undefined;
-        className: undefined;
-        baseClassName: string;
-        form: undefined;
-    };
     state: SectionState;
     static getDerivedStateFromProps(props: SectionProps, state: SectionState): DerivedState;
     handleResize: ({ bounds }: ContentRect) => void;
@@ -123,23 +108,8 @@ declare class Section extends Component<SectionProps, SectionState> {
  * @since 0.0.54
  */
 declare const SectionWrapper: {
-    (props: Omit<SectionProps, 'form'>): import("react/jsx-runtime").JSX.Element;
+    ({ collapsible, collapsed, baseClassName, ...props }: Omit<SectionProps, 'form'>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: {
-        title: undefined;
-        intent: undefined;
-        collapsible: boolean;
-        collapsed: boolean;
-        onTitleChange: undefined;
-        onClose: undefined;
-        onToggle: undefined;
-        buttons: undefined;
-        vertical: undefined;
-        children: undefined;
-        className: undefined;
-        baseClassName: string;
-        form: undefined;
-    };
     WrappedComponent: typeof Section;
 };
 export default SectionWrapper;

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

@@ -1,4 +1,5 @@
-import { Component, ComponentPropsWithoutRef, SyntheticEvent } from 'react';
+import { ComponentPropsWithoutRef, ChangeEventHandler } from 'react';
+import { DataAttributes } from '../../utils/types';
 import './TextArea.less';
 type Rows = number | {
     min: number;
@@ -31,39 +32,11 @@ export type TextAreaProps = {
     /**
      * @ignore
      */
-    onChange?: (e: SyntheticEvent<HTMLTextAreaElement>) => void;
-} & Omit<ComponentPropsWithoutRef<'textarea'>, 'rows'>;
-type TextAreaState = {
-    textareaStyles: any;
-    minRows?: number;
-    maxRows?: number;
-};
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+} & Omit<ComponentPropsWithoutRef<'textarea'>, 'rows'> & DataAttributes;
 /**
  * `TextArea` is used for entering long text (like email body, descriptions, comments).
  * @since 1.9.0
  */
-declare class TextArea extends Component<TextAreaProps, TextAreaState> {
-    static defaultProps: {
-        baseClassName: string;
-        className: null;
-        rows: number;
-        size: string;
-        autoheight: boolean;
-        onChange: null;
-    };
-    state: TextAreaState;
-    static getDerivedStateFromProps({ rows }: TextAreaProps): {
-        minRows: number;
-        maxRows?: undefined;
-    } | {
-        minRows: number;
-        maxRows: number;
-    } | null;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: TextAreaProps): void;
-    rootRef: import("react").RefObject<HTMLTextAreaElement>;
-    handleChange: (e: SyntheticEvent<HTMLTextAreaElement>) => void;
-    adjustHeight(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const TextArea: ({ baseClassName, className, rows, size, autoheight, onChange, style, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/types/src/components/TextArea/calculateNodeHeight.d.ts

@@ -1,6 +1,2 @@
-export default function calculateNodeHeight(uiTextNode: HTMLTextAreaElement, useCache?: boolean, minRows?: number | null, maxRows?: number | null): {
-    height: number;
-    minHeight: number | null;
-    maxHeight: number | null;
-    overflowY: any;
-};
+import { CSSProperties } from 'react';
+export default function calculateNodeHeight(uiTextNode: HTMLTextAreaElement, useCache?: boolean, minRows?: number | undefined, maxRows?: number | undefined): CSSProperties;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+declare const RegistryContext: import("react").Context<Registry | undefined>;
+export default RegistryContext;
+declare class Registry {
+    private items;
+    register(item: RegistryItem | Registry): void;
+    unregister(item: RegistryItem | Registry): void;
+    compact(): boolean;
+    expand(): boolean;
+    get isCompact(): boolean;
+    get hasCompactItems(): boolean;
+    private checkItemIsCompactOrHasCompactItems;
+}
+declare class RegistryItem {
+    private _isCompact;
+    private readonly onCompactStateChange;
+    constructor({ onCompactStateChange }: {
+        onCompactStateChange: (state: boolean) => void;
+    });
+    compact(): void;
+    expand(): void;
+    get isCompact(): boolean;
+}
+export declare const useRegistry: () => Registry;
+export declare const useRegistryItem: () => boolean[];

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

@@ -1,5 +1,4 @@
-import { Component, ReactNode } from 'react';
-import { DistractionFreeMode } from '../DistractionFreeModeContext';
+import { ReactNode } from 'react';
 import '../../helpers/base.less';
 import './Toolbar.less';
 /**
@@ -24,24 +23,5 @@ export interface ToolbarProps {
      */
     baseClassName?: string;
 }
-type ToolbarState = {
-    distractionFreeMode: DistractionFreeMode;
-};
-declare class Toolbar extends Component<ToolbarProps, ToolbarState> {
-    static defaultProps: {
-        children: null;
-        className: null;
-        baseClassName: string;
-    };
-    constructor(props: ToolbarProps);
-    state: {
-        distractionFreeMode: {
-            enabled: boolean;
-            toggle: () => void;
-        };
-    };
-    private readonly registry;
-    private measure;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const Toolbar: (props: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default Toolbar;

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare const useToolbarBetaContext: () => boolean;
+type ToolbarBetaProviderProps = PropsWithChildren<{}>;
+declare const ToolbarBetaProvider: ({ children }: ToolbarBetaProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ToolbarBetaProvider;

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

@@ -39,8 +39,5 @@ export interface ToolbarGroupProps {
      */
     distractionFreeMode: DistractionFreeMode;
 }
-declare const ToolbarGroupWrapper: {
-    ({ groupable, baseClassName, ...props }: Omit<ToolbarGroupProps, 'registry' | 'distractionFreeMode'>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default ToolbarGroupWrapper;
+declare const ToolbarGroup: (props: Omit<ToolbarGroupProps, 'distractionFreeMode' | 'registry'>) => import("react/jsx-runtime").JSX.Element;
+export default ToolbarGroup;

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

@@ -1,2 +1,2 @@
 import { ReactNode } from 'react';
-export declare const toToolbarItems: (children: ReactNode) => (string | number | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element)[] | null | undefined;
+export declare const toToolbarItems: (children: ReactNode, isBeta?: boolean) => (string | number | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element)[] | null | undefined;

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

@@ -3,3 +3,4 @@ export type { ToolbarProps } from './Toolbar';
 export { default as ToolbarGroup } from './ToolbarGroup';
 export type { ToolbarGroupProps } from './ToolbarGroup';
 export { default as ToolbarExpander } from './ToolbarExpander';
+export { default as ToolbarBetaProvider } from './ToolbarBetaProvider';

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

@@ -111,7 +111,7 @@ export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressDialog } from './ProgressDialog';
 export type { ProgressDialogProps } from './ProgressDialog';
 export { default as ProgressDialogStep } from './ProgressDialogStep';
-export { default as ProgressStep } from './ProgressStep';
+export { default as ProgressStep, PROGRESS_STEP_DEFAULT_STATUS } from './ProgressStep';
 export type { ProgressStepProps } from './ProgressStep';
 export { default as Rating } from './Rating';
 export type { RatingProps } from './Rating';
@@ -138,7 +138,7 @@ export { default as Tabs, Tab, SearchBar } from './Tabs';
 export type { TabsProps, TabProps, SearchBarProps } from './Tabs';
 export { default as Text } from './Text';
 export { default as Toaster } from './Toaster';
-export { default as Toolbar, ToolbarGroup, ToolbarExpander } from './Toolbar';
+export { default as Toolbar, ToolbarGroup, ToolbarExpander, ToolbarBetaProvider } from './Toolbar';
 export type { ToolbarGroupProps, ToolbarProps } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';

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

@@ -0,0 +1 @@
+export { useSqueeze } from './useSqueeze';

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

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+    ref: RefObject<T>;
+    onResize?: () => void;
+};
+export declare const useResizeObserver: <Element_1 extends HTMLElement = HTMLElement>({ ref, onResize, }: UseResizeObserverOptions<Element_1>) => void;
+export {};

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+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 {};