diff --git a/package.json b/package.json index e84c29b6f50..2f426b6a459 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,9 @@ "@storybook/react": "7.6.7", "@storybook/react-vite": "7.6.7", "@storybook/theming": "7.6.7", - "@ui5/webcomponents": "1.20.1", - "@ui5/webcomponents-fiori": "1.20.1", - "@ui5/webcomponents-icons": "1.20.1", + "@ui5/webcomponents": "1.21.0", + "@ui5/webcomponents-fiori": "1.21.0", + "@ui5/webcomponents-icons": "1.21.0", "react": "18.2.0", "react-dom": "18.2.0", "remark-gfm": "^3.0.1", @@ -59,7 +59,7 @@ "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", - "@ui5/webcomponents-tools": "1.20.0", + "@ui5/webcomponents-tools": "1.21.0", "@vitejs/plugin-react": "^4.2.0", "chromatic": "^10.0.0", "cssnano": "^6.0.1", diff --git a/packages/base/package.json b/packages/base/package.json index 4b31a9a17a1..8c6fc8f673b 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -30,7 +30,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~1.20.0", + "@ui5/webcomponents-base": "~1.21.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 2d295bdbf33..c96810beccb 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -34,8 +34,8 @@ "recharts": "2.10.3" }, "peerDependencies": { - "@ui5/webcomponents-react": "~1.23.0", - "@ui5/webcomponents-react-base": "~1.23.0", + "@ui5/webcomponents-react": "~1.24.0", + "@ui5/webcomponents-react-base": "~1.24.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-jss": "^10.10.0" }, diff --git a/packages/cra-template-seed/template.json b/packages/cra-template-seed/template.json index 25bd722e504..7b350a4211c 100644 --- a/packages/cra-template-seed/template.json +++ b/packages/cra-template-seed/template.json @@ -1,9 +1,9 @@ { "package": { "dependencies": { - "@ui5/webcomponents": "~1.20.0", - "@ui5/webcomponents-fiori": "~1.20.0", - "@ui5/webcomponents-icons": "~1.20.0", + "@ui5/webcomponents": "~1.21.0", + "@ui5/webcomponents-fiori": "~1.21.0", + "@ui5/webcomponents-icons": "~1.21.0", "@ui5/webcomponents-react": "latest", "axios": "^0.27.2", "formik": "^2.2.9", diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index eaa4c8bfb55..dc8bf922d64 100644 --- a/packages/cra-template/template.json +++ b/packages/cra-template/template.json @@ -1,9 +1,9 @@ { "package": { "dependencies": { - "@ui5/webcomponents": "~1.20.0", - "@ui5/webcomponents-fiori": "~1.20.0", - "@ui5/webcomponents-icons": "~1.20.0", + "@ui5/webcomponents": "~1.21.0", + "@ui5/webcomponents-fiori": "~1.21.0", + "@ui5/webcomponents-icons": "~1.21.0", "@ui5/webcomponents-react": "latest", "web-vitals": "^2.1.0" }, diff --git a/packages/main/package.json b/packages/main/package.json index cae51a50800..6ed85e8105b 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -61,10 +61,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~1.20.0", - "@ui5/webcomponents-base": "~1.20.0", - "@ui5/webcomponents-fiori": "~1.20.0", - "@ui5/webcomponents-icons": "~1.20.0", + "@ui5/webcomponents": "~1.21.0", + "@ui5/webcomponents-base": "~1.21.0", + "@ui5/webcomponents-fiori": "~1.21.0", + "@ui5/webcomponents-icons": "~1.21.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" }, diff --git a/packages/main/src/webComponents/CheckBox/CheckBoxDescription.md b/packages/main/src/webComponents/CheckBox/CheckBoxDescription.md index 4871eb9cc8b..ab69587680d 100644 --- a/packages/main/src/webComponents/CheckBox/CheckBoxDescription.md +++ b/packages/main/src/webComponents/CheckBox/CheckBoxDescription.md @@ -10,6 +10,7 @@ You can disable the `CheckBox` by setting the `disabled` property to `true`, or The `CheckBox` exposes the following CSS Shadow Parts: - root - Used to style the outermost wrapper of the `CheckBox` +- label - Used to style the label of the `CheckBox` ## Keyboard Handling diff --git a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json index 4e4e714563f..930716f1613 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json +++ b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json @@ -12,7 +12,9 @@ } ], "description": "Shows the ColorPalettePopover. Note: The method is deprecated and will be removed in future, use showAt instead.", - "deprecated": { "text": "The method is deprecated in favour of showAt." } + "deprecated": { + "text": "The method is deprecated in favour of open and opener properties." + } }, { "name": "showAt", @@ -26,6 +28,9 @@ "description": "the element that the popover is shown at" } ], - "description": "Shows the ColorPalettePopover." + "description": "Shows the ColorPalettePopover.", + "deprecated": { + "text": "The method is deprecated in favour of open and opener properties." + } } ] diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index 1419ef6863f..d3dea0c4861 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -11,6 +11,14 @@ interface ColorPalettePopoverAttributes { * Defines the default color of the component. **Note:** The default color should be a part of the ColorPalette colors */ defaultColor?: CSSProperties['color']; + /** + * Defines the open | closed state of the popover. + */ + open?: boolean; + /** + * Defines the ID of the element that the popover is shown at. + */ + opener?: string; /** * Defines whether the user can choose the default color from a button. */ @@ -25,19 +33,25 @@ interface ColorPalettePopoverAttributes { showRecentColors?: boolean; } -export interface ColorPalettePopoverDomRef extends ColorPalettePopoverAttributes, Ui5DomRef { +export interface ColorPalettePopoverDomRef extends Omit, Ui5DomRef { /** * Shows the ColorPalettePopover. **Note:** The method is deprecated and will be removed in future, use `showAt` instead. * - * @deprecated The method is deprecated in favour of showAt. + * @deprecated The method is deprecated in favour of open and opener properties. * @param {HTMLElement | EventTarget} opener - the element that the popover is shown at */ openPopover: (opener: HTMLElement | EventTarget) => void; /** * Shows the ColorPalettePopover. + * + * @deprecated The method is deprecated in favour of open and opener properties. * @param {HTMLElement | EventTarget} opener - the element that the popover is shown at */ showAt: (opener: HTMLElement | EventTarget) => void; + /** + * Defines the ID or DOM Reference of the element that the popover is shown at. + */ + opener?: string | HTMLElement; } export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttributes, CommonProps { @@ -45,6 +59,10 @@ export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttribu * Defines the content of the component. */ children?: ReactNode | ReactNode[]; + /** + * Fired when the `ColorPalettePopover` is closed due to user interaction. + */ + onClose?: (event: Ui5CustomEvent) => void; /** * Fired when the user selects a color. */ @@ -60,10 +78,10 @@ export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttribu */ const ColorPalettePopover = withWebComponent( 'ui5-color-palette-popover', - ['defaultColor'], - ['showDefaultColor', 'showMoreColors', 'showRecentColors'], + ['defaultColor', 'opener'], + ['open', 'showDefaultColor', 'showMoreColors', 'showRecentColors'], [], - ['item-click'], + ['close', 'item-click'], () => import('@ui5/webcomponents/dist/ColorPalettePopover.js') ); diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx index 5f919779992..daf64c674a5 100644 --- a/packages/main/src/webComponents/Select/index.tsx +++ b/packages/main/src/webComponents/Select/index.tsx @@ -4,7 +4,7 @@ import '@ui5/webcomponents/dist/Select.js'; import type { SelectChangeEventDetail, SelectLiveChangeEventDetail } from '@ui5/webcomponents/dist/Select.js'; import type { ReactNode } from 'react'; import { ValueState } from '../../enums/index.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../interfaces/index.js'; +import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; import type { UI5WCSlotsNode } from '../../types/index.js'; @@ -24,7 +24,7 @@ interface SelectAttributes { */ disabled?: boolean; /** - * Defines the ID of the component's options menu, as an alternative to defining the selection's drop-down menu. + * Defines the ID of component's menu of options as alternative to define the select's dropdown. * * **Note:** Usage of `SelectMenu` is recommended. */ @@ -37,6 +37,12 @@ interface SelectAttributes { * **Note:** When set, a native `input` HTML element will be created inside the `Select` so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form. */ name?: string; + /** + * Defines whether the component is read-only. + * + * **Note:** A read-only component is not editable, but still provides visual feedback upon user interaction. + */ + readonly?: boolean; /** * Defines whether the component is required. */ @@ -57,7 +63,7 @@ export interface SelectDomRef extends Omit, Ui5DomRef */ value?: string; /** - * Defines a reference (ID or DOM element) of the component's options menu, as an alternative to defining the selection's drop-down menu. + * Defines a reference (ID or DOM element) of component's menu of options as alternative to define the select's dropdown. * * **Note:** Usage of `SelectMenu` is recommended. */ @@ -134,8 +140,8 @@ export interface SelectPropTypes extends SelectAttributes, Omit( 'ui5-select', - ['accessibleName', 'accessibleNameRef', 'menu', 'name', 'valueState'], - ['disabled', 'required'], + ['accessibleName', 'accessibleNameRef', 'menu', 'name', 'value', 'valueState'], + ['disabled', 'readonly', 'required'], ['label', 'valueStateMessage'], ['change', 'close', 'live-change', 'open'], () => import('@ui5/webcomponents/dist/Select.js') diff --git a/packages/main/src/webComponents/SelectMenuOption/SelectMenuOptionDescription.md b/packages/main/src/webComponents/SelectMenuOption/SelectMenuOptionDescription.md index 70c2f60be6b..f3ffb2b54b4 100644 --- a/packages/main/src/webComponents/SelectMenuOption/SelectMenuOptionDescription.md +++ b/packages/main/src/webComponents/SelectMenuOption/SelectMenuOptionDescription.md @@ -1,6 +1,6 @@ **Since:** 1.19.0 -The code>SelectMenuOption component represents an option in the `SelectMenu`. +The `SelectMenuOption` component represents an option in the `SelectMenu`. ### Usage diff --git a/packages/main/src/webComponents/SelectMenuOption/index.tsx b/packages/main/src/webComponents/SelectMenuOption/index.tsx index 5db6dd04698..efd8b0e0995 100644 --- a/packages/main/src/webComponents/SelectMenuOption/index.tsx +++ b/packages/main/src/webComponents/SelectMenuOption/index.tsx @@ -44,7 +44,7 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C } /** - * The code>SelectMenuOption component represents an option in the `SelectMenu`. + * The `SelectMenuOption` component represents an option in the `SelectMenu`. * * __Note:__ This component is a web component developed by the UI5 Web Components’ team. * diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index 2c7d57a7208..4ec690676e0 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -11,6 +11,12 @@ interface SplitButtonAttributes { * Defines the accessible ARIA name of the component. */ accessibleName?: string; + /** + * Defines whether the arrow button should have the active state styles or not. + * + * @since 1.24.0 + */ + activeArrowButton?: boolean; /** * Defines the icon to be displayed in active state as graphical element within the component. */ @@ -60,7 +66,7 @@ export interface SplitButtonPropTypes extends SplitButtonAttributes, Omit( 'ui5-split-button', ['accessibleName', 'activeIcon', 'design', 'icon'], - ['disabled'], + ['activeArrowButton', 'disabled'], [], ['arrow-click', 'click'], () => import('@ui5/webcomponents/dist/SplitButton.js') diff --git a/packages/main/src/webComponents/TabContainer/TabContainerDescription.md b/packages/main/src/webComponents/TabContainer/TabContainerDescription.md index b5f2b3d1ff0..7fcf8db975a 100644 --- a/packages/main/src/webComponents/TabContainer/TabContainerDescription.md +++ b/packages/main/src/webComponents/TabContainer/TabContainerDescription.md @@ -14,6 +14,7 @@ Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper CSS Shadow Parts allow developers to style elements inside the Shadow DOM. The `TabContainer` exposes the following CSS Shadow Parts: +- tabstrip - Used to style the tabstrip of the component - content - Used to style the content of the component ## Keyboard Handling diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index ca033bc7f62..4b04c6b4f29 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -52,26 +52,23 @@ interface ToolbarButtonAttributes { */ tooltip?: string; /** - * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, - * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. - * Available options are: + * Defines the width of the button. * - * *`NeverOverflow` - * *`AlwaysOverflow` - * *`Default` + * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. */ - overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; + width?: CSSProperties['width'] | CSSProperties['height']; /** - * Defines if the toolbar overflow popup should close upon interaction with the item. - * It will close by default. + * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. Available options are: + * + * * `NeverOverflow` + * * `AlwaysOverflow` + * * `Default` */ - preventOverflowClosing?: boolean; + overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines the width of the button. - * - * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. + * Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default. */ - width?: CSSProperties['width'] | CSSProperties['height']; + preventOverflowClosing?: boolean; } export interface ToolbarButtonDomRef extends ToolbarButtonAttributes, Ui5DomRef { @@ -112,7 +109,7 @@ export interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, Omit( 'ui5-toolbar-button', - ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'overflowPriority', 'text', 'tooltip', 'width'], + ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'text', 'tooltip', 'width', 'overflowPriority'], ['disabled', 'iconEnd', 'preventOverflowClosing'], [], ['click'], diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index a2ea94f5909..3c72c44b922 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -3,7 +3,7 @@ import '@ui5/webcomponents/dist/ToolbarSelect.js'; import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/ToolbarSelect.js'; import type { CSSProperties, ReactNode } from 'react'; -import { ToolbarItemOverflowBehavior, ValueState } from '../../enums/index.js'; +import { ValueState, ToolbarItemOverflowBehavior } from '../../enums/index.js'; import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; @@ -22,21 +22,6 @@ interface ToolbarSelectAttributes { * **Note:** A disabled component is noninteractive. */ disabled?: boolean; - /** - * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, - * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. - * Available options are: - * - * *`NeverOverflow` - * *`AlwaysOverflow` - * *`Default` - */ - overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; - /** - * Defines if the toolbar overflow popup should close upon interaction with the item. - * It will close by default. - */ - preventOverflowClosing?: boolean; /** * Defines the value state of the component. */ @@ -47,6 +32,18 @@ interface ToolbarSelectAttributes { * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. */ width?: CSSProperties['width'] | CSSProperties['height']; + /** + * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. Available options are: + * + * * `NeverOverflow` + * * `AlwaysOverflow` + * * `Default` + */ + overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; + /** + * Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default. + */ + preventOverflowClosing?: boolean; } export interface ToolbarSelectDomRef extends ToolbarSelectAttributes, Ui5DomRef {} @@ -85,7 +82,7 @@ export interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, Omit( 'ui5-toolbar-select', - ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'], + ['accessibleName', 'accessibleNameRef', 'valueState', 'width', 'overflowPriority'], ['disabled', 'preventOverflowClosing'], [], ['change', 'close', 'open'], diff --git a/packages/main/src/webComponents/ToolbarSeparatorV2/index.tsx b/packages/main/src/webComponents/ToolbarSeparatorV2/index.tsx index 695dd9e7e91..e18972a5a3e 100644 --- a/packages/main/src/webComponents/ToolbarSeparatorV2/index.tsx +++ b/packages/main/src/webComponents/ToolbarSeparatorV2/index.tsx @@ -4,22 +4,18 @@ import '@ui5/webcomponents/dist/ToolbarSeparator.js'; import { ToolbarItemOverflowBehavior } from '../../enums/index.js'; import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; -import { ToolbarSelect } from '../ToolbarSelect/index.js'; interface ToolbarSeparatorV2Attributes { /** - * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, - * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. - * Available options are: + * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. Available options are: * - * *`NeverOverflow` - * *`AlwaysOverflow` - * *`Default` + * * `NeverOverflow` + * * `AlwaysOverflow` + * * `Default` */ overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior; /** - * Defines if the toolbar overflow popup should close upon interaction with the item. - * It will close by default. + * Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default. */ preventOverflowClosing?: boolean; } @@ -48,7 +44,7 @@ const ToolbarSeparatorV2 = withWebComponent( 'ui5-toolbar-spacer', - ['overflowPriority', 'width'], + ['width', 'overflowPriority'], ['preventOverflowClosing'], [], [], @@ -55,7 +51,7 @@ const ToolbarSpacerV2 = withWebComponent