@itwin/itwinui-react 3.14.1 → 3.15.0

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.14.1';
+const e = '3.15.0';
 const u = new Proxy(
   {},
   {

package/cjs/utils/components/ShadowRoot.js

@@ -61,6 +61,19 @@ function useShadowRoot(templateRef, { css = '' }) {
   let styleSheet = _react.useRef();
   let latestCss = (0, _index.useLatestRef)(css);
   let latestShadowRoot = (0, _index.useLatestRef)(shadowRoot);
+  let createStyleSheet = _react.useCallback(
+    (shadow) => {
+      if (shadow && supportsAdoptedStylesheets) {
+        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        if (styleSheet.current instanceof currentWindow.CSSStyleSheet) return;
+        styleSheet.current = new currentWindow.CSSStyleSheet();
+        shadow.adoptedStyleSheets.push(styleSheet.current);
+        if (latestCss.current)
+          styleSheet.current.replaceSync(latestCss.current);
+      }
+    },
+    [latestCss],
+  );
   (0, _index.useLayoutEffect)(() => {
     let parent = templateRef.current?.parentElement;
     if (!parent) return;
@@ -72,22 +85,23 @@ function useShadowRoot(templateRef, { css = '' }) {
         parent.attachShadow({
           mode: 'open',
         });
-      if (supportsAdoptedStylesheets) {
-        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
-        styleSheet.current = new currentWindow.CSSStyleSheet();
-        shadow.adoptedStyleSheets = [styleSheet.current];
-        if (latestCss.current)
-          styleSheet.current.replaceSync(latestCss.current);
-      }
+      createStyleSheet(shadow);
       _reactdom.flushSync(() => setShadowRoot(shadow));
     };
     queueMicrotask(() => {
       setupOrReuseShadowRoot();
     });
     return () => void setShadowRoot(null);
-  }, [templateRef, latestCss, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot]);
   (0, _index.useLayoutEffect)(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);
+  _react.useEffect(() => {
+    let listener = () => createStyleSheet(latestShadowRoot.current);
+    window.addEventListener('appui:reparent', listener);
+    return () => {
+      window.removeEventListener('appui:reparent', listener);
+    };
+  }, [createStyleSheet, latestShadowRoot]);
   return shadowRoot;
 }

package/cjs/utils/hooks/useWarningLogger.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, 'useWarningLogger', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _dev = require('../functions/dev.js');
+const _dom = require('../functions/dom.js');
 const _React = _react;
 const ReactInternals =
   _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

package/esm/core/Buttons/SplitButton.d.ts

@@ -3,6 +3,7 @@ import type { ButtonProps } from './Button.js';
 import { IconButton } from './IconButton.js';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
 import type { Placement } from '@floating-ui/react';
+import type { usePopover } from '../Popover/Popover.js';
 export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
@@ -27,6 +28,10 @@ export type SplitButtonProps = ButtonProps & {
      * Passes props to SplitButton menu button.
      */
     menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+    /**
+     * Props to customize menu behavior.
+     */
+    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'>;
 } & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.

package/esm/core/Carousel/CarouselDotsList.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import {
   getBoundedValue,
-  getWindow,
+  useMediaQuery,
   useMergedRefs,
   useResizeObserver,
   Box,
@@ -96,18 +96,23 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       handleSlideChange,
     ],
   );
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   React.useEffect(() => {
     let firstDot = listRef.current?.children[firstVisibleDotIndex];
     if (!listRef.current || !firstDot) return;
-    let motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
     if (justMounted.current) justMounted.current = false;
-  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  }, [
+    currentIndex,
+    firstVisibleDotIndex,
+    motionOk,
+    slideCount,
+    visibleCount,
+    width,
+  ]);
   let handleKeyDown = (event) => {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
       return;

package/esm/core/Carousel/CarouselSlider.js

@@ -6,6 +6,7 @@ import {
   useMergedRefs,
   useLayoutEffect,
   Box,
+  useMediaQuery,
 } from '../../utils/index.js';
 export const CarouselSlider = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
@@ -30,13 +31,11 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
   }, [items.length, setSlideCount]);
   let sliderRef = React.useRef(null);
   let refs = useMergedRefs(sliderRef, ref);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   scrollToSlide.current = (slideIndex, { instant } = {}) => {
     isManuallyUpdating.current = true;
     let slideToShow = sliderRef.current?.children.item(slideIndex);
     if (!sliderRef.current || !slideToShow) return;
-    let motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
     sliderRef.current.scrollTo({
       left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
       behavior: instant || !motionOk ? 'instant' : 'smooth',

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,7 +1,28 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { Slider } from '../Slider/Slider.js';
+type ColorBuilderProps = {
+    /**
+     * Passes props to the color field.
+     */
+    colorFieldProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color dot.
+     */
+    colorDotProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color opacity slider.
+     */
+    opacitySliderProps?: React.ComponentProps<typeof Slider>;
+    /**
+     * Passes props to the color hue slider.
+     */
+    hueSliderProps?: React.ComponentProps<typeof Slider>;
+};
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-export declare const ColorBuilder: PolymorphicForwardRefComponent<"div">;
+export declare const ColorBuilder: PolymorphicForwardRefComponent<"div", ColorBuilderProps>;
+export {};

package/esm/core/ColorPicker/ColorBuilder.js

@@ -6,6 +6,7 @@ import {
   useEventListener,
   useMergedRefs,
   Box,
+  mergeEventHandlers,
 } from '../../utils/index.js';
 import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
@@ -18,7 +19,14 @@ let getHorizontalPercentageOfRectangle = (rect, pointer) => {
   return ((position - rect.left) / rect.width) * 100;
 };
 export const ColorBuilder = React.forwardRef((props, ref) => {
-  let { className, ...rest } = props;
+  let {
+    className,
+    colorFieldProps,
+    colorDotProps,
+    opacitySliderProps,
+    hueSliderProps,
+    ...rest
+  } = props;
   let builderRef = React.useRef();
   let refs = useMergedRefs(builderRef, ref);
   let {
@@ -206,54 +214,74 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        className: 'iui-color-field',
+        as: 'div',
+        ...colorFieldProps,
+        className: cx('iui-color-field', colorFieldProps?.className),
         style: {
           '--iui-color-field-hue': hueColorString,
           '--iui-color-picker-selected-color': dotColorString,
+          ...colorFieldProps?.style,
         },
-        ref: squareRef,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          updateSquareValue(event, 'onClick');
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
+        ref: useMergedRefs(squareRef, colorFieldProps?.ref),
+        onPointerDown: mergeEventHandlers(
+          colorFieldProps?.onPointerDown,
+          (event) => {
+            event.preventDefault();
+            updateSquareValue(event, 'onClick');
+            setColorDotActive(true);
+            colorDotRef.current?.focus();
+          },
+        ),
       },
       React.createElement(Box, {
-        className: 'iui-color-dot',
+        as: 'div',
+        ...colorDotProps,
+        className: cx('iui-color-dot', colorDotProps?.className),
         style: {
           '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
           '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
+          ...colorDotProps?.style,
         },
-        onPointerDown: () => {
+        onPointerDown: mergeEventHandlers(colorDotProps?.onPointerDown, () => {
           setColorDotActive(true);
           colorDotRef.current?.focus();
-        },
-        onKeyDown: handleColorDotKeyDown,
-        onKeyUp: handleColorDotKeyUp,
+        }),
+        onKeyDown: mergeEventHandlers(
+          colorDotProps?.onKeyDown,
+          handleColorDotKeyDown,
+        ),
+        onKeyUp: mergeEventHandlers(
+          colorDotProps?.onKeyUp,
+          handleColorDotKeyUp,
+        ),
         tabIndex: 0,
-        ref: colorDotRef,
+        ref: useMergedRefs(colorDotRef, colorDotProps?.ref),
       }),
     ),
     React.createElement(Slider, {
       minLabel: '',
       maxLabel: '',
       values: [sliderValue],
-      className: 'iui-hue-slider',
       trackDisplayMode: 'none',
+      min: 0,
+      max: 359,
+      ...hueSliderProps,
+      className: cx('iui-hue-slider', hueSliderProps?.className),
       tooltipProps: () => ({
         visible: false,
+        ...hueSliderProps?.tooltipProps,
       }),
       onChange: (values) => {
+        hueSliderProps?.onChange?.(values);
         updateHueSlider(values[0], true);
       },
       onUpdate: (values) => {
+        hueSliderProps?.onUpdate?.(values);
         updateHueSlider(values[0], false);
       },
-      min: 0,
-      max: 359,
       thumbProps: () => ({
         'aria-label': 'Hue',
+        ...hueSliderProps?.thumbProps,
       }),
     }),
     showAlpha &&
@@ -261,25 +289,31 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         minLabel: '',
         maxLabel: '',
         values: [alphaValue],
-        className: 'iui-opacity-slider',
         trackDisplayMode: 'none',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        ...opacitySliderProps,
+        className: cx('iui-opacity-slider', opacitySliderProps?.className),
         tooltipProps: () => ({
           visible: false,
+          ...opacitySliderProps?.tooltipProps,
         }),
         onChange: (values) => {
+          opacitySliderProps?.onChange?.(values);
           updateOpacitySlider(values[0], true);
         },
         onUpdate: (values) => {
+          opacitySliderProps?.onUpdate?.(values);
           updateOpacitySlider(values[0], false);
         },
-        min: 0,
-        max: 1,
-        step: 0.01,
         style: {
           '--iui-color-picker-selected-color': hueColorString,
+          ...opacitySliderProps?.style,
         },
         thumbProps: () => ({
           'aria-label': 'Opacity',
+          ...opacitySliderProps?.thumbProps,
         }),
       }),
   );

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { IconButton } from '../Buttons/IconButton.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ColorInputPanelProps = {
     /**
@@ -12,6 +14,22 @@ type ColorInputPanelProps = {
      * @default ['hsl', 'rgb', 'hex']
      */
     allowedColorFormats?: ('hsl' | 'rgb' | 'hex')[];
+    /**
+     * Passes props to the color picker section label.
+     */
+    panelLabelProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color input container.
+     */
+    colorInputContainerProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the color input fields group.
+     */
+    inputFieldsGroupProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the swap color format button.
+     */
+    swapColorFormatButtonProps?: React.ComponentProps<typeof IconButton>;
 };
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -2,13 +2,24 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Input } from '../Input/Input.js';
-import { ColorValue, SvgSwap, Box, useId } from '../../utils/index.js';
+import {
+  ColorValue,
+  SvgSwap,
+  Box,
+  useId,
+  useMergedRefs,
+  mergeEventHandlers,
+} from '../../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 export const ColorInputPanel = React.forwardRef((props, ref) => {
   let {
     defaultColorFormat,
     allowedColorFormats = ['hsl', 'rgb', 'hex'],
     className,
+    colorInputContainerProps,
+    panelLabelProps,
+    inputFieldsGroupProps,
+    swapColorFormatButtonProps,
     ...rest
   } = props;
   let inputsContainerRef = React.useRef(null);
@@ -352,10 +363,12 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
       }),
   );
-  let labelId = useId();
+  let fallbackLabelId = useId();
+  let labelId = panelLabelProps?.id ?? fallbackLabelId;
   return React.createElement(
     Box,
     {
+      as: 'div',
       className: cx('iui-color-input-wrapper', className),
       ref: ref,
       ...rest,
@@ -363,7 +376,12 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        className: 'iui-color-picker-section-label',
+        as: 'div',
+        ...panelLabelProps,
+        className: cx(
+          'iui-color-picker-section-label',
+          panelLabelProps?.className,
+        ),
         id: labelId,
       },
       showAlpha && 'hex' !== currentFormat
@@ -373,26 +391,37 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        className: 'iui-color-input',
+        as: 'div',
+        ...colorInputContainerProps,
+        className: cx('iui-color-input', colorInputContainerProps?.className),
       },
       allowedColorFormats.length > 1 &&
         React.createElement(
           IconButton,
           {
-            styleType: 'borderless',
-            onClick: swapColorFormat,
             size: 'small',
+            styleType: 'borderless',
             label: 'Switch format',
+            ...swapColorFormatButtonProps,
+            onClick: mergeEventHandlers(
+              swapColorFormatButtonProps?.onClick,
+              swapColorFormat,
+            ),
           },
           React.createElement(SvgSwap, null),
         ),
       React.createElement(
         Box,
         {
-          ref: inputsContainerRef,
-          className: 'iui-color-input-fields',
+          as: 'div',
           role: 'hex' !== currentFormat ? 'group' : void 0,
           'aria-labelledby': 'hex' !== currentFormat ? labelId : void 0,
+          ...inputFieldsGroupProps,
+          ref: useMergedRefs(inputsContainerRef, inputFieldsGroupProps?.ref),
+          className: cx(
+            'iui-color-input-fields',
+            inputFieldsGroupProps?.className,
+          ),
         },
         'hex' === currentFormat && hexInputField,
         'rgb' === currentFormat && rgbInputs,

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -6,6 +6,10 @@ export type ColorPaletteProps = {
      * Label shown above the palette.
      */
     label?: React.ReactNode;
+    /**
+     * Passes props to the color picker section label.
+     */
+    labelProps?: React.ComponentProps<'div'>;
     /**
      * List of colors shown as swatches in the palette.
      */
@@ -14,6 +18,10 @@ export type ColorPaletteProps = {
      * Pass any custom swatches as children.
      */
     children?: React.ReactNode;
+    /**
+     * Passes props to the color palette container.
+     */
+    paletteContainerProps?: React.ComponentProps<'div'>;
 };
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.

package/esm/core/ColorPicker/ColorPalette.js

@@ -5,7 +5,15 @@ import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 export const ColorPalette = React.forwardRef((props, ref) => {
-  let { colors, label, className, children, ...rest } = props;
+  let {
+    colors,
+    label,
+    labelProps,
+    className,
+    children,
+    paletteContainerProps,
+    ...rest
+  } = props;
   let { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
   return React.createElement(
@@ -19,14 +27,21 @@ export const ColorPalette = React.forwardRef((props, ref) => {
       React.createElement(
         Box,
         {
-          className: 'iui-color-picker-section-label',
+          as: 'div',
+          ...labelProps,
+          className: cx(
+            'iui-color-picker-section-label',
+            labelProps?.className,
+          ),
         },
         label,
       ),
     React.createElement(
       Box,
       {
-        className: 'iui-color-palette',
+        as: 'div',
+        ...paletteContainerProps,
+        className: cx('iui-color-palette', paletteContainerProps?.className),
       },
       children,
       colors &&

package/esm/core/ComboBox/ComboBox.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
 import type { Input } from '../Input/Input.js';
-import type { InputContainerProps, CommonProps } from '../../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
+import type { InputContainerProps, CommonProps, PortalProps } from '../../utils/index.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {
@@ -59,7 +60,7 @@ export type ComboBoxProps<T> = {
     /**
      * Props to customize dropdown menu behavior.
      */
-    dropdownMenuProps?: React.ComponentProps<'div'>;
+    dropdownMenuProps?: React.ComponentProps<'div'> & Pick<Parameters<typeof usePopover>['0'], 'middleware'> & Pick<PortalProps, 'portal'>;
     /**
      * End icon props.
      */

package/esm/core/ComboBox/ComboBox.js

@@ -38,7 +38,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     filterFunction = defaultFilterFunction,
     inputProps,
     endIconProps,
-    dropdownMenuProps,
+    dropdownMenuProps: { middleware, ...dropdownMenuProps } = {},
     emptyStateMessage = 'No options found',
     itemRenderer,
     enableVirtualization = false,
@@ -318,6 +318,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       size: {
         maxHeight: 'var(--iui-menu-max-height)',
       },
+      ...middleware,
     },
     closeOnOutsideClick: true,
     interactions: {

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -90,7 +90,7 @@ let VirtualizedComboBoxMenu = (props) => {
   );
 };
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  let { className, children, style, ...rest } = props;
+  let { className, children, style, portal = true, ...rest } = props;
   let { id, enableVirtualization, popover } =
     useSafeContext(ComboBoxStateContext);
   let { menuRef } = useSafeContext(ComboBoxRefsContext);
@@ -100,7 +100,7 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       Portal,
       {
-        portal: true,
+        portal: portal,
       },
       React.createElement(
         List,

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -16,6 +16,17 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
+    /**
+     * Middleware options.
+     *
+     * By default, `hide` is enabled. If the menu gets hidden even when it shouldn't (e.g. some custom styles interfering
+     * with the trigger's hide detection) consider disabling the `hide` middleware.
+     *
+     * @see https://floating-ui.com/docs/middleware
+     */
+    middleware?: {
+        hide?: boolean;
+    };
 } & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -22,6 +22,7 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     matchWidth = false,
     onVisibleChange,
     portal = true,
+    middleware,
     ...rest
   } = props;
   let [visible, setVisible] = useControlledState(
@@ -35,28 +36,28 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     return menuItems;
   }, [menuItems, setVisible]);
   return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      Menu,
-      {
-        trigger: children,
-        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-          if (e.defaultPrevented) return;
-          if ('Tab' === e.key) setVisible(false);
-        }),
-        role: role,
-        ref: forwardedRef,
-        portal: portal,
-        popoverProps: {
+    Menu,
+    {
+      trigger: children,
+      onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+        if (e.defaultPrevented) return;
+        if ('Tab' === e.key) setVisible(false);
+      }),
+      role: role,
+      ref: forwardedRef,
+      portal: portal,
+      popoverProps: React.useMemo(
+        () => ({
           placement,
           matchWidth,
           visible,
           onVisibleChange: setVisible,
-        },
-        ...rest,
-      },
-      menuContent,
-    ),
+          middleware,
+        }),
+        [matchWidth, middleware, placement, setVisible, visible],
+      ),
+      ...rest,
+    },
+    menuContent,
   );
 });

package/esm/core/Footer/Footer.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 export type TitleTranslations = {
-    termsOfService: string;
-    privacy: string;
-    termsOfUse: string;
-    cookies: string;
-    legalNotices: string;
+    termsOfService?: string;
+    privacy?: string;
+    termsOfUse?: string;
+    cookies?: string;
+    legalNotices?: string;
 };
 type FooterProps = {
     /**