@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/CHANGELOG.md

@@ -1,5 +1,172 @@
 # Changelog
 
+## 3.0.0-dev.10
+
+### Major Changes
+
+- [#1514](https://github.com/iTwin/iTwinUI/pull/1514): Table now has better type support. Users must now import types from `@itwin/itwinui-react/react-table` instead of from `@types/react-table`.
+- [#1433](https://github.com/iTwin/iTwinUI/pull/1433): Updated `exports` to prevent importing internal utilities.
+
+### Minor Changes
+
+- [#1573](https://github.com/iTwin/iTwinUI/pull/1573): Added `applyBackground` prop to ColorPicker and DatePicker.
+- [#1567](https://github.com/iTwin/iTwinUI/pull/1567): Added `endIconProps` prop to ComboBox.
+
+## 3.0.0-dev.9
+
+### Major Changes
+
+- [#1506](https://github.com/iTwin/iTwinUI/pull/1506): Replaced `tippy.js` with `floating-ui` in all popover-based components. While the basic usage is unchanged, all advanced props from tippy are no longer available.
+
+  Components affected: Select, ComboBox, DropdownMenu, DropdownButton, SplitButton.
+
+### Minor Changes
+
+- [#1506](https://github.com/iTwin/iTwinUI/pull/1506): Added new `Popover` component for public use.
+
+## 3.0.0-dev.8
+
+### Major Changes
+
+- [#1544](https://github.com/iTwin/iTwinUI/pull/1544): Removed `iconDisplayStyle` prop from `LabeledInput` and `LabeledTextarea` components. `svgIcon` is now added inline. Users must use `StatusMessage` to add custom icon to the message.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `inputStyle` and `inputClassName` props from `LabeledInput`; style and className props are being passed down to input. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps`, `inputWrapperProps` to pass props to sub elements.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `selectStyle` and `selectClassName` props from `LabeledSelect`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Removed `textareaStyle` and `textareaClassName` props from `LabeledTextarea`; style and className props are being passed down to textarea. Added `wrapperProps`, `labelProps`, `messageProps`, `messageIconProps` to pass props to sub elements.
+
+### Minor Changes
+
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `status` prop to `Input`, `Textarea` and `Select`.
+- [#1510](https://github.com/iTwin/iTwinUI/pull/1510): Added `domProps` to allow Toast's DOM customisation.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added two new components for building complex input layouts.
+
+  - `InputGrid` for the "outer" layout (label, inputs and statusMessage)
+  - `InputWithDecorations` for the "inner" layout (start icon/button, end icon/button)
+
+  `LabeledInput`, `LabeledSelect`, `LabeledTextarea` and table `DatePickerInput` have been updated to make use of these new components internally.
+
+- [#1531](https://github.com/iTwin/iTwinUI/pull/1531): Selected options in Select/ComboBox will now have a checkmark.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added new `padded` prop to `Icon`.
+- [#1466](https://github.com/iTwin/iTwinUI/pull/1466): Adding the ability for every DOM node inside DatePicker component to have a custom className passed to it.
+- [#1523](https://github.com/iTwin/iTwinUI/pull/1523): Added `ariaStrategy` prop to Tooltip. Can be used to change how the tooltip is associated with the trigger element.
+
+### Patch Changes
+
+- [#1533](https://github.com/iTwin/iTwinUI/pull/1533): Fixed missing accessible name in SplitButton.
+- [#1495](https://github.com/iTwin/iTwinUI/pull/1495): Added accessible name to dropdown menu button in HeaderSplitButton.
+- [#1496](https://github.com/iTwin/iTwinUI/pull/1496): Added accessible button name to SideNavigation expand button.
+- [#1505](https://github.com/iTwin/iTwinUI/pull/1505): Gave accessible label to the sub-row toggle in <Table>.
+
+## 3.0.0-dev.7
+
+### Major Changes
+
+- [#1478](https://github.com/iTwin/iTwinUI/pull/1478): ThemeProvider now defaults the `theme` value to `"inherit"` and falls back to `"light"` there is no parent theme found. Also the inherit behavior has been made more resilient for cases where react context fails.
+- [#1458](https://github.com/iTwin/iTwinUI/pull/1458): Added wrapperProps, contentProps, topProps, and bottomProps to Side Navigation component to improve customization. Top-level props (className, styling, etc) now passed to SideNav button instead of to the wrapper.
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of SplitButton with wrapperProps and menuButtonProps. ClassName now passed to the button instead of the component wrapper.
+- [#1461](https://github.com/iTwin/iTwinUI/pull/1461): Changed disabled button behavior to make them focusable and use `aria-disabled` instead of `disabled` attribute.
+
+### Minor Changes
+
+- [#1440](https://github.com/iTwin/iTwinUI/pull/1440): Adding the ability for every DOM node to have a custom className passed to it.
+  New prop for `FileUpload` component: `contentProps`
+- [#1430](https://github.com/iTwin/iTwinUI/pull/1430): Adding the ability for each node element in `Stepper` to have a custom `prop`.
+  New props include: `stepProps`, `trackContentProps`, `circleProps`, `nameProps`, `labelProps`, `labelCountProps`
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of Button with new props: labelProps, startIconProps, and endIconProps.
+  Improving customization of IconButton with iconProps.
+- [#1477](https://github.com/iTwin/iTwinUI/pull/1477): Added a new `portalContainer` prop to `ThemeProvider`. When specified, all floating elements (tooltips, toats, dialogs) under the ThemeProvider will read this prop from context and portal into it.
+
+### Patch Changes
+
+- [#1446](https://github.com/iTwin/iTwinUI/pull/1446): Avatar has been refactored to be a single `<span>`. The colors have been updated to pass AAA contrast ratio.
+- [#1492](https://github.com/iTwin/iTwinUI/pull/1492): Fixed `aria-owns` syntax for `TreeNode`
+- [#1486](https://github.com/iTwin/iTwinUI/pull/1486): DatePicker date tables now have accessible labels.
+- [#1499](https://github.com/iTwin/iTwinUI/pull/1499): Removed special handling of iPhone notch in Header and SideNavigation.
+
+## 3.0.0-dev.6
+
+### Major Changes
+
+- [#1409](https://github.com/iTwin/iTwinUI/pull/1409): `RadioTile`'s `className` and `style` props will now be applied on the `<input>` element instead of the wrapper. Added `wrapperProps`, `iconProps`, `labelProps`, `subLabelProps` to individually customize each part of the component.
+
+### Minor Changes
+
+- [#1457](https://github.com/iTwin/iTwinUI/pull/1457): Added `htmlName` prop to the `HeaderButton` subcomponent which handles the native `name` attribute in `<button>`.
+- [#1437](https://github.com/iTwin/iTwinUI/pull/1437): Added headerWrapperProps, headerProps, bodyProps, and emptyTableContentProps to make each part of the Table component more customizable.
+- [#1412](https://github.com/iTwin/iTwinUI/pull/1412): All styles have been wrapped inside a cascade layer named `itwinui`.
+- [#1419](https://github.com/iTwin/iTwinUI/pull/1419): Added `htmlSize` prop to the `Input` component which handles the native `size` attribute in `<input>`.
+
+### Patch Changes
+
+- [#1420](https://github.com/iTwin/iTwinUI/pull/1420): RadioTile DOM has been simplified to remove a content wrapper `div`.
+
+## 3.0.0-dev.5
+
+### Major Changes
+
+- [#1370](https://github.com/iTwin/iTwinUI/pull/1370): ProgressLinear has been refactored to be a single `<div>`.
+- [#1371](https://github.com/iTwin/iTwinUI/pull/1371): Checkbox: `className` and `style` will now always be applied on the checkbox input element. Added new `wrapperProps` and `labelProps` to allow for styling of wrapper and label elements.
+- [#1389](https://github.com/iTwin/iTwinUI/pull/1389): iTwinUI now correctly supports both ESM and CJS environments.
+- [#1369](https://github.com/iTwin/iTwinUI/pull/1369): Added new `Breadcrumbs.Item` subcomponent to use for custom `a` and `button` elements within the `Breadcrumbs`
+- [#1400](https://github.com/iTwin/iTwinUI/pull/1400): `ErrorPage` will now dynamically import illustrations. The peer dependency on `@itwin/itwinui-illustrations-react` will need to be manually installed if using `ErrorPage`.
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): Updated Expandable Block component to be composition of customizable subcomponents: <ExpandableBlock.Header/>, <ExpandableBlock.ExpandIcon/>, <ExpandableBlock.LabelArea/>, <ExpandableBlock.Title/>, <ExpandableBlock.Caption/>, <ExpandableBlock.EndIcon/>, <ExpandableBlock.Content/>
+
+  The following props have been removed as they are now subcomponents: `title`, `caption`, `endIcon`
+
+- [#1406](https://github.com/iTwin/iTwinUI/pull/1406): Removed `setFocus` prop from Checkbox, ColorPicker, ComboBox, Input, LabeledInput, LabeledTextarea, Radio, RadioTile, Select, Slider, ToggleSwitch. Users can use `ref` to focus the element.
+
+### Minor Changes
+
+- [#1373](https://github.com/iTwin/iTwinUI/pull/1373): Converted all physical CSS properties to their logical equivalents.
+- [#1328](https://github.com/iTwin/iTwinUI/pull/1328): Created new Overlay component with customizable subcomponents: Overlay.Wrapper, Overlay.HiddenContent, Overlay.Overlay
+- [#1403](https://github.com/iTwin/iTwinUI/pull/1403): Updated `DropdownMenu` to additionally accept list of JSX elements or a JSX fragment for `menuItems` prop,
+- [#1407](https://github.com/iTwin/iTwinUI/pull/1407): Adding the ability for each node element in `NonIdealState` to have a custom `className`.
+
+### Patch Changes
+
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): Expandable block animation now uses pure css instead of javascript for transitioning.
+- [#1389](https://github.com/iTwin/iTwinUI/pull/1389): The build output is now more readable, using a combination of `prettier` for formatting and `tslib` for import helpers.
+- [#1397](https://github.com/iTwin/iTwinUI/pull/1397): Avatar will no longer incorrectly set aria-label on the status dot.
+- [#1404](https://github.com/iTwin/iTwinUI/pull/1404): `aria-orientation` attribute removed from ButtonGroup to meet accessibility requirements.
+
+## 3.0.0-dev.4
+
+### Major Changes
+
+- [#1383](https://github.com/iTwin/iTwinUI/pull/1383): Removed previously-deprecated `UserIcon` and `UserIconGroup` components. Also removed `userIcon` prop from `Header`.
+- [#1384](https://github.com/iTwin/iTwinUI/pull/1384): Removed previously-deprecated `Wizard` component (replaced by `Stepper` and `WorkflowDiagram`).
+- [#1255](https://github.com/iTwin/iTwinUI/pull/1255): Updated Tile component to be composition of customizable subcomponents: `Tile.Name`, `Tile.NameIcon`, `Tile.NameLabel`, `Tile.Action`, `Tile.ThumbnailArea`, `Tile.ThumbnailPicture`, `Tile.BadgeContainer`, `Tile.TypeIndicator`, `Tile.QuickAction`, `Tile.ContentArea`, `Tile.Description`, `Tile.MoreOptions`, `Tile.Metadata`, `Tile.Buttons`. Certain props have been removed as they are now subcomponents: `name`, `description`, `metadata`, `thumbnail`, `badge`, `leftIcon`, `rightIcon`, `button`, `moreOptions`, `isActionable` props have been removed.
+
+- [#1356](https://github.com/iTwin/iTwinUI/pull/1356): ProgressRadial has been refactored to be a single `<div>` instead of using a nested svg. Also it is recommended to explicitly set `size` when using in other components.
+- [#1311](https://github.com/iTwin/iTwinUI/pull/1311): - Removed Tippy.js as dependency in Tooltip. Using FloatingUI instead.
+- [#1388](https://github.com/iTwin/iTwinUI/pull/1388): Removed deprecated `HorizontalTabs` and `VerticalTabs` (replaced by `orientation` prop in `Tabs`).
+
+### Minor Changes
+
+- [#1362](https://github.com/iTwin/iTwinUI/pull/1362): All elements under the root will now get a default focus styling matching `--iui-color-border-accent`.
+
+### Patch Changes
+
+- [#1360](https://github.com/iTwin/iTwinUI/pull/1360): The `color-scheme` property will now be correctly set for dark theme, resulting in better theming of built-in html elements.
+
+## 3.0.0-dev.3
+
+### Major Changes
+
+- [#1330](https://github.com/iTwin/iTwinUI/pull/1330): Deprecated `FileUploadTemplate`. Removed all of its references.
+- [#1351](https://github.com/iTwin/iTwinUI/pull/1351): `toaster` import has been removed and replaced with `useToaster` which returns a toaster object with the same API.
+
+## 3.0.0-dev.2
+
+### Major Changes
+
+- [#1300](https://github.com/iTwin/iTwinUI/pull/1300): `modalRootId` and `ownerDocument` props have been removed from `Modal`, in favor of the new `portal` prop (also available in `Dialog`).
+- [#1247](https://github.com/iTwin/iTwinUI/pull/1247): Alert composition has been updated such that it is now made up of customizable subcomponents, thus removing the `onClose`, `clickableText`, and `clickableTextProps` props from `Alert`.
+- [#1346](https://github.com/iTwin/iTwinUI/pull/1346): The build now targets `es2020` instead of `es2018`.
+
+### Patch Changes
+
+- [#1347](https://github.com/iTwin/iTwinUI/pull/1347): Fixed an issue where ThemeProvider warning was always logged even when using ThemeProvider.
+
 ## 3.0.0-dev.1
 
 ### Major Changes
@@ -35,6 +202,115 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.8
+
+### Patch Changes
+
+- [#1576](https://github.com/iTwin/iTwinUI/pull/1576): Dropdown menus will now automatically become scrollable if there are too many menu items. Also added delay to submenu.
+- [#1578](https://github.com/iTwin/iTwinUI/pull/1578): Fixed missing animation in ComboBox.
+- [#1572](https://github.com/iTwin/iTwinUI/pull/1572): Adjusted borders and shadow values to be more prominent in dark theme.
+- [#1575](https://github.com/iTwin/iTwinUI/pull/1575): ProgressRadial now stays inside container when using size="x-small".
+
+## 2.12.7
+
+### Patch Changes
+
+- [#1545](https://github.com/iTwin/iTwinUI/pull/1545): `tableFilters.DateRangeFilter` now supports localizing the date picker using `translatedLabels.datePicker`.
+
+## 2.12.6
+
+### Patch Changes
+
+- [#1516](https://github.com/iTwin/iTwinUI/pull/1516): Update SearchBox placeholder color to match Input.
+
+## 2.12.5
+
+### Patch Changes
+
+- [#1511](https://github.com/iTwin/iTwinUI/pull/1511): Fix high-visibility button background on hover.
+
+## 2.12.4
+
+### Patch Changes
+
+- [#1508](https://github.com/iTwin/iTwinUI/pull/1508): Fixed an issue where styles were not included in CommonJS environments.
+
+## 2.12.3
+
+### Patch Changes
+
+- [#1485](https://github.com/iTwin/iTwinUI/pull/1485): Improved color contrast for input and select placeholder text.
+- [#1501](https://github.com/iTwin/iTwinUI/pull/1501): Fixed a small misalignment in Table when using sticky columns.
+
+## 2.12.2
+
+### Patch Changes
+
+- [#1494](https://github.com/iTwin/iTwinUI/pull/1494): Updated color-picker dot so its outline adapts dynamically to the backgrounds for better contrast.
+
+## 2.12.1
+
+### Patch Changes
+
+- [#1467](https://github.com/iTwin/iTwinUI/pull/1467): Fixed an issue in Carousel where latest `onSlideChange` callback was being ignored.
+
+## 2.12.0
+
+### Minor Changes
+
+- [#1415](https://github.com/iTwin/iTwinUI/pull/1415): The styling strategy has changed so there will now be a single stylesheet included at runtime, instead of separate css imports inside every component. All the styles are also wrapped in a cascade layer named `itwinui`. This behavior can be customized using the `includeCss` prop in `ThemeProvider`.
+
+  **Important note**: The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variables` have been removed, so these packages _don't_ need to be installed if you are only using components from `@itwin/itwinui-react`.
+
+- [#1422](https://github.com/iTwin/iTwinUI/pull/1422): Changed `all: revert` to `all: revert-layer` so that only styles from the v1 layer are reverted, thus avoiding issues with inadvertently removing browser default styles.
+- [#1443](https://github.com/iTwin/iTwinUI/pull/1443): `DropdownButton` now supports `styleType='high-visibility'` to make it blue. This should be used sparingly, as a default or borderless dropdown button is the better choice in most cases.
+- [#1454](https://github.com/iTwin/iTwinUI/pull/1454): Added `disabled` prop to `ExpandableBlock` to disable intersction with it.
+- [#1441](https://github.com/iTwin/iTwinUI/pull/1441): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
+## 2.11.11
+
+### Patch Changes
+
+- [#1448](https://github.com/iTwin/iTwinUI/pull/1448): Fix resizable Dialog bug where Dialog jumped around the screen when resized on right side.
+
+## 2.11.10
+
+### Patch Changes
+
+- [#1424](https://github.com/iTwin/iTwinUI/pull/1424), [#1427](https://github.com/iTwin/iTwinUI/pull/1427): Fixed a few different resizing issues in Dialog.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.5
+
+## 2.11.9
+
+### Patch Changes
+
+- [#1421](https://github.com/iTwin/iTwinUI/pull/1421): Fixed an issue in Table where column reordering and editable cells were not working when v2 Table was used within a v1 app.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.4
+
+## 2.11.8
+
+### Patch Changes
+
+- [#1410](https://github.com/iTwin/iTwinUI/pull/1410): Fixed an issue in `Tabs` where tabs-list was becoming too tall when the tabpanel didn't have enough content inside.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.3
+
+## 2.11.7
+
+### Patch Changes
+
+- [#1376](https://github.com/iTwin/iTwinUI/pull/1376): Fix issue where a nested expandable block's expander icon would always display as expanded.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.2
+
+## 2.11.6
+
+### Patch Changes
+
+- [#1341](https://github.com/iTwin/iTwinUI/pull/1341): Table: fixed action column header content alignment when using globalFilterValue.
+
 ## 2.11.5
 
 ### Patch Changes
@@ -546,4 +822,4 @@ If you're interested in more details about every signle change, check out a full
 
 ## 1.X
 
-For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI-react/blob/v1/packages/iTwinUI-react/CHANGELOG.md).
+For any changes prior to 2.0.0, check out the [1.X changelog](https://github.com/iTwin/iTwinUI/blob/legacy/v1-react/packages/iTwinUI-react/CHANGELOG.md).

package/cjs/core/Alert/Alert.d.ts

@@ -1,47 +1,77 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type AlertProps = {
+type AlertOwnProps = {
     /**
      * Type of the alert.
      * @default 'informational'
      */
     type?: 'positive' | 'warning' | 'negative' | 'informational';
     /**
-     * Text for the link you want to provide.
+     * Stick the alert to the top.
+     * @default false
      */
+    isSticky?: boolean;
+};
+type AlertLegacyProps = {
+    /** @deprecated Use `Alert.Action` subcomponent. */
     clickableText?: React.ReactNode;
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
+    /** @deprecated Use `Alert.CloseButton` subcomponent. */
+    onClose?: () => void;
+};
+/**
+ * A small box to quickly grab user attention and communicate a brief message
+ * @example
+ * <Alert>This is an alert.</Alert>
+ * @example
+ * <Alert.Wrapper type='informational'>
+ *  <Alert.Icon />
+ *  <Alert.Message>This is an informational alert.</Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}} />
+ * </Alert.Wrapper>
+ * @example
+ * <Alert.Wrapper type='positive'>
+ *  <Alert.Icon>
+ *    <SvgSmileyHappy />
+ *  </Alert.Icon>
+ *  <Alert.Message>
+ *    This is an alert.
+ *    <Alert.Action>This is clickable text.</Alert.Action>
+ *  </Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}}>
+ *    <SvgCollapse />
+ *  </Alert.CloseButton>
+ * </Alert.Wrapper>
+ */
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
     /**
-     * Props for the clickable text. Used for providing `href` and other attributes.
+     *  Alert wrapper subcomponent
      */
-    clickableTextProps?: React.ComponentPropsWithRef<'a'>;
+    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
     /**
-     * Action handler for close.
+     * 	Alert icon subcomponent
      */
-    onClose?: () => void;
+    Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
+        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        as?: "span" | undefined;
+    }>;
     /**
-     * Stick the alert to the top.
-     * @default false
+     * 	Alert message subcomponent
      */
-    isSticky?: boolean;
+    Message: PolymorphicForwardRefComponent<"span", {}>;
     /**
-     * Alert message text.
+     * 	Alert action subcomponent for the link you want to provide.
      */
-    children: React.ReactNode;
+    Action: PolymorphicForwardRefComponent<"a", {}>;
+    /**
+     * 	Alert close button subcomponent
+     */
+    CloseButton: PolymorphicForwardRefComponent<"button", {}>;
 };
-/**
- * A small box to quickly grab user attention and communicate a brief message
- * @example
- * <Alert>This is a basic alert.</Alert>
- * <Alert type='positive'>This is a positive alert.</Alert>
- * <Alert type='warning'>This is a warning alert.</Alert>
- * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert
- *  type='positive'
- *  clickableText="I am a clickable text"
- *  clickableTextProps={{ href: 'https://www.example.com' }}
- * >
- *   This is a positive alert with a clickable text
- * </Alert>
- */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertProps>;
 export default Alert;

package/cjs/core/Alert/Alert.js

@@ -1,64 +1,167 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Alert = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../Buttons/index.js');
+const AlertContext = React.createContext(undefined);
+// ----------------------------------------------------------------------------
+// Alert component
+const AlertComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(
+    exports.Alert.Wrapper,
+    { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
+    React.createElement(exports.Alert.Icon, null),
+    React.createElement(
+      exports.Alert.Message,
+      null,
+      children,
+      clickableText
+        ? React.createElement(
+            exports.Alert.Action,
+            { ...clickableTextProps },
+            clickableText,
+          )
+        : null,
+    ),
+    onClose
+      ? React.createElement(exports.Alert.CloseButton, { onClick: onClose })
+      : null,
+  );
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Wrapper component
+const AlertWrapper = React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    type = 'informational',
+    isSticky = false,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-alert', className),
+      'data-iui-status': type,
+      'data-iui-variant': isSticky ? 'sticky' : undefined,
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(AlertContext.Provider, { value: { type } }, children),
+  );
+});
+AlertWrapper.displayName = 'Alert.Wrapper';
+// ----------------------------------------------------------------------------
+// Alert.Icon component
+const AlertIcon = React.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const { type } = (0, index_js_1.useSafeContext)(AlertContext);
+  const StatusIcon = index_js_1.StatusIconMap[type];
+  return React.createElement(
+    index_js_1.Icon,
+    { fill: type, ref: ref, ...rest },
+    children ?? React.createElement(StatusIcon, null),
+  );
+});
+AlertIcon.displayName = 'Alert.Icon';
+// ----------------------------------------------------------------------------
+// Alert.Message component
+const AlertMessage = index_js_1.polymorphic.span('iui-alert-message');
+AlertMessage.displayName = 'Alert.Message';
+// ----------------------------------------------------------------------------
+// Alert.Action component
+const AlertAction = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    index_js_1.ButtonBase,
+    {
+      as: !!props.href ? 'a' : 'button',
+      className: (0, classnames_1.default)('iui-alert-link', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+AlertAction.displayName = 'Alert.Action';
+// ----------------------------------------------------------------------------
+// Alert.CloseButton component
+const AlertCloseButton = React.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  return React.createElement(
+    index_js_2.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': 'Close',
+      ref: ref,
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgCloseSmall, null),
+  );
+});
+AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>This is a basic alert.</Alert>
- * <Alert type='positive'>This is a positive alert.</Alert>
- * <Alert type='warning'>This is a warning alert.</Alert>
- * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert
- *  type='positive'
- *  clickableText="I am a clickable text"
- *  clickableTextProps={{ href: 'https://www.example.com' }}
- * >
- *   This is a positive alert with a clickable text
- * </Alert>
+ * <Alert>This is an alert.</Alert>
+ * @example
+ * <Alert.Wrapper type='informational'>
+ *  <Alert.Icon />
+ *  <Alert.Message>This is an informational alert.</Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}} />
+ * </Alert.Wrapper>
+ * @example
+ * <Alert.Wrapper type='positive'>
+ *  <Alert.Icon>
+ *    <SvgSmileyHappy />
+ *  </Alert.Icon>
+ *  <Alert.Message>
+ *    This is an alert.
+ *    <Alert.Action>This is clickable text.</Alert.Action>
+ *  </Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}}>
+ *    <SvgCollapse />
+ *  </Alert.CloseButton>
+ * </Alert.Wrapper>
  */
-exports.Alert = React.forwardRef((props, ref) => {
-    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, isSticky = false, ...rest } = props;
-    const StatusIcon = index_js_1.StatusIconMap[type];
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
-        React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-alert-message' },
-            children,
-            clickableText && (React.createElement(index_js_1.Box, { as: 'a', ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
-        onClose && (React.createElement(index_js_1.Box, { as: 'button', onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-alert-button-icon', "aria-hidden": true },
-                React.createElement(index_js_1.SvgCloseSmall, null))))));
+exports.Alert = Object.assign(AlertComponent, {
+  /**
+   *  Alert wrapper subcomponent
+   */
+  Wrapper: AlertWrapper,
+  /**
+   * 	Alert icon subcomponent
+   */
+  Icon: AlertIcon,
+  /**
+   * 	Alert message subcomponent
+   */
+  Message: AlertMessage,
+  /**
+   * 	Alert action subcomponent for the link you want to provide.
+   */
+  Action: AlertAction,
+  /**
+   * 	Alert close button subcomponent
+   */
+  CloseButton: AlertCloseButton,
 });
 exports.default = exports.Alert;

package/cjs/core/Alert/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Alert = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Alert_js_1 = require("./Alert.js");
-Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_js_1.Alert; } });
+var Alert_js_1 = require('./Alert.js');
+Object.defineProperty(exports, 'Alert', {
+  enumerable: true,
+  get: function () {
+    return Alert_js_1.Alert;
+  },
+});
 exports.default = './Alert';