@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/esm/core/utils/components/InputContainer.js

@@ -5,6 +5,8 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Label } from '../../Label/index.js';
+import { StatusMessage } from '../../StatusMessage/index.js';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
@@ -18,7 +20,6 @@ export const InputContainer = (props) => {
     message,
     icon,
     isLabelInline,
-    isIconInline,
     children,
     className,
     style,
@@ -30,29 +31,19 @@ export const InputContainer = (props) => {
   return React.createElement(
     Box,
     {
-      className: cx(
-        'iui-input-container',
-        {
-          'iui-disabled': disabled,
-          [`iui-${status}`]: !!status,
-          'iui-inline-label': isLabelInline,
-          'iui-inline-icon': isIconInline,
-          'iui-with-message':
-            (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        },
-        className,
-      ),
+      className: cx('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
       ...rest,
     },
     label &&
       React.createElement(
-        Box,
+        Label,
         {
           as: inputId && props.as !== 'label' ? 'label' : 'div',
-          className: cx('iui-label', {
-            'iui-required': required,
-          }),
+          required: required,
+          disabled: disabled,
           htmlFor: inputId,
           id: labelId,
         },
@@ -61,18 +52,11 @@ export const InputContainer = (props) => {
     children,
     statusMessage
       ? statusMessage
-      : React.createElement(
-          React.Fragment,
-          null,
-          icon &&
-            React.createElement(
-              Box,
-              { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-              icon,
-            ),
-          message &&
-            !isLabelInline &&
-            React.createElement(Box, { className: 'iui-message' }, message),
-        ),
+      : message &&
+          React.createElement(
+            StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
   );
 };

package/esm/core/utils/components/InputFlexContainer.d.ts

@@ -2,6 +2,7 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

package/esm/core/utils/components/InputFlexContainer.js

@@ -10,12 +10,14 @@ import { Box } from './Box.js';
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, style, ...rest } = props;
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
   return React.createElement(
     Box,
     {
       className: cx('iui-input-flex-container', className),
       'data-iui-status': status,
+      'data-iui-size': size,
       'data-iui-disabled': isDisabled ? 'true' : undefined,
       ref: ref,
       style: style,

package/esm/core/utils/components/Popover.js

@@ -36,8 +36,7 @@ export const Popover = React.forwardRef((props, ref) => {
   const computedProps = {
     allowHTML: true,
     animation: false,
-    appendTo: (el) =>
-      themeInfo?.portalContainerRef?.current || el.ownerDocument.body,
+    appendTo: (el) => themeInfo?.portalContainer || el.ownerDocument.body,
     arrow: false,
     duration: 0,
     interactive: true,
@@ -62,7 +61,10 @@ export const Popover = React.forwardRef((props, ref) => {
       ...props.popperOptions,
       modifiers: [
         { name: 'flip' },
-        { name: 'preventOverflow', options: { padding: 0 } },
+        {
+          name: 'preventOverflow',
+          options: { padding: 0 },
+        },
         ...(props.popperOptions?.modifiers || []),
       ],
     },

package/esm/core/utils/components/Portal.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;

package/esm/core/utils/components/Portal.js

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
+import { getDocument } from '../functions/dom.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = useIsClient();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/esm/core/utils/components/VirtualScroll.js

@@ -36,8 +36,8 @@ const getElementHeightWithMargins = (element) => {
     return undefined;
   }
   const margin =
-    parseFloat(getElementStyle(element, 'margin-top')) +
-    parseFloat(getElementStyle(element, 'margin-bottom'));
+    parseFloat(getElementStyle(element, 'margin-block-start')) +
+    parseFloat(getElementStyle(element, 'margin-block-end'));
   return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
 };
 const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
@@ -344,13 +344,13 @@ export const useVirtualization = (props) => {
   return {
     outerProps: {
       style: {
-        minHeight:
+        minBlockSize:
           itemsLength > 1
             ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
               childHeight.current.first +
               childHeight.current.last
             : childHeight.current.middle,
-        minWidth: '100%',
+        minInlineSize: '100%',
         ...style,
       },
       ...rest,

package/esm/core/utils/components/index.d.ts

@@ -13,3 +13,5 @@ export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
+export * from './ButtonBase.js';
+export * from './Portal.js';

package/esm/core/utils/components/index.js

@@ -17,3 +17,5 @@ export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
+export * from './ButtonBase.js';
+export * from './Portal.js';

package/esm/core/utils/functions/colors.d.ts

@@ -17,4 +17,4 @@ export declare const isSoftBackground: (value: string) => value is "skyblue" | "
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.
  */
-export declare const getUserColor: (emailOrName: string) => string;
+export declare const getUserColor: (emailOrName: string) => "var(--iui-color-background-skyblue)" | "var(--iui-color-background-celery)" | "var(--iui-color-background-froly)" | "var(--iui-color-background-steelblue)" | "var(--iui-color-background-sunglow)" | "var(--iui-color-background-seabuckthorn)" | "var(--iui-color-background-montecarlo)" | "var(--iui-color-background-poloblue)" | "var(--iui-color-background-bouquet)" | "var(--iui-color-background-ash)" | "var(--iui-color-background-oak)";

package/esm/core/utils/functions/colors.js

@@ -19,19 +19,7 @@ export const SoftBackgrounds = {
 export const isSoftBackground = (value) => {
   return Object.keys(SoftBackgrounds).includes(value);
 };
-const USER_COLORS = [
-  '#6AB9EC',
-  '#B1C854',
-  '#F7706C',
-  '#4585A5',
-  '#FFC335',
-  '#F7963E',
-  '#73C7C1',
-  '#85A9CF',
-  '#A3779F',
-  '#C8C2B4',
-  '#A47854',
-];
+const USER_COLORS = Object.values(SoftBackgrounds);
 /**
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.

package/esm/core/utils/functions/index.d.ts

@@ -6,3 +6,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/esm/core/utils/functions/index.js

@@ -10,3 +10,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/esm/core/utils/functions/react.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: JSX.Element) => Record<string, unknown>) => string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;

package/esm/core/utils/functions/react.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { mergeRefs } from '../hooks/useMergedRefs.js';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export const cloneElementWithRef = (children, getProps) => {
+  if (!children) {
+    return null;
+  }
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = mergeRefs(
+    ...[
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    // we already checked ref above and handled null, so ts-ignore is ok
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref,
+  });
+};

package/esm/core/utils/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/index.js

@@ -15,3 +15,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/esm/core/utils/hooks/useControlledState.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    React.useState(initialValue);
+  const state =
+    controlledState !== undefined ? controlledState : uncontrolledState;
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
+};

package/esm/core/utils/hooks/useGlobals.d.ts

@@ -9,7 +9,7 @@ import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType | undefined;
     themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
-    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/esm/styles.js

@@ -10,13 +10,6 @@ const styles = {
   'iui-anchor': '_iui3-anchor',
   'iui-anchor-external': '_iui3-anchor-external',
   'iui-avatar': '_iui3-avatar',
-  'iui-stroke': '_iui3-stroke',
-  'iui-initials': '_iui3-initials',
-  'iui-status': '_iui3-status',
-  'iui-online': '_iui3-online',
-  'iui-away': '_iui3-away',
-  'iui-busy': '_iui3-busy',
-  'iui-offline': '_iui3-offline',
   'iui-avatar-count': '_iui3-avatar-count',
   'iui-small': '_iui3-small',
   'iui-large': '_iui3-large',
@@ -40,8 +33,9 @@ const styles = {
   'iui-button-dropdown': '_iui3-button-dropdown',
   'iui-button-split': '_iui3-button-split',
   'iui-button-group': '_iui3-button-group',
-  'iui-input-container': '_iui3-input-container',
+  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
   'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
@@ -184,36 +178,18 @@ const styles = {
   'iui-information-body-content': '_iui3-information-body-content',
   'iui-input-label': '_iui3-input-label',
   'iui-inline': '_iui3-inline',
-  'iui-required': '_iui3-required',
   'iui-input-with-icon': '_iui3-input-with-icon',
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
-  'iui-actionable': '_iui3-actionable',
   'iui-open': '_iui3-open',
-  'iui-inline-icon': '_iui3-inline-icon',
-  'iui-with-message': '_iui3-with-message',
-  'iui-input-icon': '_iui3-input-icon',
+  'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
+  'iui-status-message': '_iui3-status-message',
+  'iui-select-button': '_iui3-select-button',
+  'iui-input-group-wrapper': '_iui3-input-group-wrapper',
   'iui-toggle-switch-wrapper': '_iui3-toggle-switch-wrapper',
   'iui-radio-wrapper': '_iui3-radio-wrapper',
-  'iui-inline-label': '_iui3-inline-label',
-  'iui-label': '_iui3-label',
-  'iui-message': '_iui3-message',
-  'iui-select-button': '_iui3-select-button',
-  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-keyboard': '_iui3-keyboard',
-  'iui-location-marker': '_iui3-location-marker',
-  'iui-location-marker-default': '_iui3-location-marker-default',
-  'iui-location-marker-default-pin': '_iui3-location-marker-default-pin',
-  'iui-location-marker-default-pin-dot':
-    '_iui3-location-marker-default-pin-dot',
-  'iui-location-marker-data-rich': '_iui3-location-marker-data-rich',
-  'iui-location-marker-data-rich-body': '_iui3-location-marker-data-rich-body',
-  'iui-location-marker-data-rich-icon': '_iui3-location-marker-data-rich-icon',
-  'iui-location-marker-data-rich-icon-monochrome':
-    '_iui3-location-marker-data-rich-icon-monochrome',
-  'iui-location-marker-me': '_iui3-location-marker-me',
-  'iui-location-marker-me-dot': '_iui3-location-marker-me-dot',
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
@@ -242,10 +218,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ux8sxma': '_iui3-ux8sxma',
+  'iui-ubn95wp': '_iui3-ubn95wp',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ux8sxmt': '_iui3-ux8sxmt',
+  'iui-ubn95xj': '_iui3-ubn95xj',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -312,6 +288,7 @@ const styles = {
   'iui-table-body': '_iui3-table-body',
   'iui-table-header-wrapper': '_iui3-table-header-wrapper',
   'iui-slot': '_iui3-slot',
+  'iui-actionable': '_iui3-actionable',
   'iui-table-filter-button': '_iui3-table-filter-button',
   'iui-table-resizer': '_iui3-table-resizer',
   'iui-table-resizer-bar': '_iui3-table-resizer-bar',
@@ -408,6 +385,7 @@ const styles = {
   'iui-placement-bottom-start': '_iui3-placement-bottom-start',
   'iui-placement-bottom-end': '_iui3-placement-bottom-end',
   'iui-status-area': '_iui3-status-area',
+  'iui-message': '_iui3-message',
   'iui-toast-anchor': '_iui3-toast-anchor',
   'iui-informational': '_iui3-informational',
   'iui-label-on-left': '_iui3-label-on-left',
@@ -415,11 +393,8 @@ const styles = {
   'iui-toggle-switch-icon': '_iui3-toggle-switch-icon',
   'iui-toggle-switch': '_iui3-toggle-switch',
   'iui-toggle-switch-label': '_iui3-toggle-switch-label',
-  'iui-tooltip-container': '_iui3-tooltip-container',
   'iui-tooltip': '_iui3-tooltip',
-  'iui-tooltip-visible': '_iui3-tooltip-visible',
   'iui-transfer-list-wrapper': '_iui3-transfer-list-wrapper',
-  'iui-transfer-list-listbox-label': '_iui3-transfer-list-listbox-label',
   'iui-transfer-list-listbox-wrapper': '_iui3-transfer-list-listbox-wrapper',
   'iui-transfer-list-listbox': '_iui3-transfer-list-listbox',
   'iui-transfer-list-toolbar': '_iui3-transfer-list-toolbar',
@@ -437,6 +412,7 @@ const styles = {
   'iui-tree-node-content-label': '_iui3-tree-node-content-label',
   'iui-tree-node-content-title': '_iui3-tree-node-content-title',
   'iui-tree-node-content-caption': '_iui3-tree-node-content-caption',
+  'iui-button-base': '_iui3-button-base',
   'iui-svg-icon': '_iui3-svg-icon',
   'iui-notification-marker': '_iui3-notification-marker',
   pulse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.6",
+  "version": "3.0.0-dev.8",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -73,7 +73,7 @@
     "dev:styles": "yarn build:styles --watch"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.24.3",
+    "@floating-ui/react": "^0.25.2",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",
@@ -83,7 +83,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.0.0-dev.6",
+    "@itwin/itwinui-css": "^2.0.0-dev.8",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-variables": "3.0.0-dev.1",
     "@swc/cli": "^0.1.62",