@itwin/itwinui-react 3.0.0-dev.9 → 3.0.1

package/cjs/core/Select/Select.js

@@ -8,12 +8,13 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Menu/index.js');
-const index_js_2 = require('../utils/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(require('./SelectTag.js'));
-const SelectTagContainer_js_1 = tslib_1.__importDefault(
-  require('./SelectTagContainer.js'),
-);
+const Menu_js_1 = require('../Menu/Menu.js');
+const MenuItem_js_1 = require('../Menu/MenuItem.js');
+const index_js_1 = require('../utils/index.js');
+const SelectTag_js_1 = require('./SelectTag.js');
+const SelectTagContainer_js_1 = require('./SelectTagContainer.js');
+const Icon_js_1 = require('../Icon/Icon.js');
+const Popover_js_1 = require('../Popover/Popover.js');
 const isMultipleEnabled = (variable, multiple) => {
   return multiple;
 };
@@ -70,8 +71,8 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-const Select = (props) => {
-  const uid = (0, index_js_2.useId)();
+exports.Select = React.forwardRef((props, forwardedRef) => {
+  const uid = (0, index_js_1.useId)();
   const {
     options,
     value,
@@ -113,7 +114,7 @@ const Select = (props) => {
         : value === option.value;
       const menuItem = itemRenderer
         ? itemRenderer(option, { close: () => setIsOpen(false), isSelected })
-        : React.createElement(index_js_1.MenuItem, null, option.label);
+        : React.createElement(MenuItem_js_1.MenuItem, null, option.label);
       const { label, icon, startIcon: startIconProp, ...restOption } = option;
       const startIcon = startIconProp ?? icon;
       return React.cloneElement(menuItem, {
@@ -121,7 +122,7 @@ const Select = (props) => {
         isSelected,
         startIcon: startIcon,
         endIcon: isSelected
-          ? React.createElement(index_js_2.SvgCheckmark, {
+          ? React.createElement(index_js_1.SvgCheckmark, {
               'aria-hidden': true,
             })
           : null,
@@ -170,12 +171,12 @@ const Select = (props) => {
       : options.find((option) => option.value === value);
   }, [multiple, options, value]);
   const tagRenderer = React.useCallback((item) => {
-    return React.createElement(SelectTag_js_1.default, {
+    return React.createElement(SelectTag_js_1.SelectTag, {
       key: item.label,
       label: item.label,
     });
   }, []);
-  const popover = (0, index_js_2.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
@@ -186,15 +187,18 @@ const Select = (props) => {
     React.Fragment,
     null,
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         className: (0, classnames_1.default)('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: (0, index_js_1.useMergedRefs)(
+          popover.refs.setPositionReference,
+          forwardedRef,
+        ),
       },
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           ...popover.getReferenceProps(),
           tabIndex: 0,
@@ -207,7 +211,7 @@ const Select = (props) => {
           'aria-haspopup': 'listbox',
           'aria-controls': `${uid}-menu`,
           ...triggerProps,
-          ref: (0, index_js_2.useMergedRefs)(
+          ref: (0, index_js_1.useMergedRefs)(
             selectRef,
             popover.refs.setReference,
           ),
@@ -223,7 +227,7 @@ const Select = (props) => {
         },
         (!selectedItems || selectedItems.length === 0) &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             { as: 'span', className: 'iui-content' },
             placeholder,
           ),
@@ -239,7 +243,7 @@ const Select = (props) => {
             }),
       ),
       React.createElement(
-        index_js_2.Icon,
+        Icon_js_1.Icon,
         {
           as: 'span',
           'aria-hidden': true,
@@ -248,23 +252,23 @@ const Select = (props) => {
             'iui-open': isOpen,
           }),
         },
-        React.createElement(index_js_2.SvgCaretDownSmall, null),
+        React.createElement(index_js_1.SvgCaretDownSmall, null),
       ),
       multiple
-        ? React.createElement(index_js_2.AutoclearingHiddenLiveRegion, {
+        ? React.createElement(index_js_1.AutoclearingHiddenLiveRegion, {
             text: liveRegionSelection,
           })
         : null,
     ),
     popover.open &&
       React.createElement(
-        index_js_2.Portal,
+        index_js_1.Portal,
         null,
         React.createElement(
-          index_js_1.Menu,
+          Menu_js_1.Menu,
           {
             role: 'listbox',
-            className: (0, classnames_1.default)('iui-scroll', menuClassName),
+            className: menuClassName,
             id: `${uid}-menu`,
             key: `${uid}-menu`,
             ...popover.getFloatingProps({
@@ -275,14 +279,19 @@ const Select = (props) => {
                 }
               },
             }),
-            ref: popover.refs.setFloating,
+            ref: (node) => {
+              // early return if ref is already set, to prevent repeated re-renders
+              if (popover.refs.floating.current || !node) {
+                return;
+              }
+              popover.refs.setFloating(node);
+            },
           },
           menuItems,
         ),
       ),
   );
-};
-exports.Select = Select;
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(
@@ -296,12 +305,12 @@ const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
         null,
         startIcon &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             { as: 'span', className: 'iui-icon', 'aria-hidden': true },
             startIcon,
           ),
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { as: 'span', className: 'iui-content' },
           selectedItem.label,
         ),
@@ -328,9 +337,9 @@ const MultipleSelectButton = ({
     selectedItems &&
       !selectedItemsRenderer &&
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         { as: 'span', className: 'iui-content' },
-        React.createElement(SelectTagContainer_js_1.default, {
+        React.createElement(SelectTagContainer_js_1.SelectTagContainer, {
           tags: selectedItemsElements,
         }),
       ),

package/cjs/core/Select/SelectTagContainer.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(require('./SelectTag.js'));
+const SelectTag_js_1 = require('./SelectTag.js');
 /**
  */
 exports.SelectTagContainer = React.forwardRef((props, ref) => {
@@ -31,7 +31,7 @@ exports.SelectTagContainer = React.forwardRef((props, ref) => {
       null,
       visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
       visibleCount < tags.length &&
-        React.createElement(SelectTag_js_1.default, {
+        React.createElement(SelectTag_js_1.SelectTag, {
           label: `+${tags.length - visibleCount + 1} item(s)`,
         }),
     ),

package/cjs/core/SideNavigation/SideNavigation.js

@@ -9,8 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
-const index_js_3 = require('../Tooltip/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
 /**
  * Left side navigation menu component.
  * @example
@@ -46,7 +46,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
     _setIsExpanded(isExpanded);
   }, [isExpanded]);
   const ExpandButton = React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       label: 'Toggle icon labels',
       'aria-expanded': _isExpanded,
@@ -106,7 +106,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
           items.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
-                  index_js_3.Tooltip,
+                  Tooltip_js_1.Tooltip,
                   {
                     content: sidenavButton.props.children,
                     placement: 'right',
@@ -130,7 +130,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
           secondaryItems?.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
-                  index_js_3.Tooltip,
+                  Tooltip_js_1.Tooltip,
                   {
                     content: sidenavButton.props.children,
                     placement: 'right',

package/cjs/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/cjs/core/SideNavigation/SidenavButton.js

@@ -8,7 +8,7 @@ exports.SidenavButton = void 0;
 const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
@@ -23,7 +23,7 @@ exports.SidenavButton = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Button,
+    Button_js_1.Button,
     {
       className: (0, classnames_1.default)(
         'iui-sidenav-button',

package/cjs/core/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { Tooltip } from '../Tooltip/index.js';
+import type { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Determines which segments are shown with color.
  */
@@ -65,9 +65,9 @@ export type SliderProps = {
      */
     maxLabel?: React.ReactNode;
     /**
-     * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
+     * Additional props for container `<div>` that hold the slider thumbs, and tracks.
      */
-    railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    trackContainerProps?: React.HTMLAttributes<HTMLDivElement>;
     /**
      * Allows props to be passed for slider-min
      */
@@ -76,10 +76,6 @@ export type SliderProps = {
      * Allows props to be passed for slider-max
      */
     maxProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-rail
-     */
-    railProps?: React.ComponentProps<'div'>;
     /**
      * Allows props to be passed for slider-track
      */

package/cjs/core/Slider/Slider.js

@@ -90,10 +90,9 @@ exports.Slider = React.forwardRef((props, ref) => {
     onUpdate,
     thumbProps,
     className,
-    railContainerProps,
+    trackContainerProps,
     minProps,
     maxProps,
-    railProps,
     trackProps,
     tickProps,
     ticksProps,
@@ -332,12 +331,9 @@ exports.Slider = React.forwardRef((props, ref) => {
     index_js_1.Box,
     {
       ref: ref,
-      className: (0, classnames_1.default)(
-        'iui-slider-component-container',
-        `iui-slider-${orientation}`,
-        { 'iui-disabled': disabled },
-        className,
-      ),
+      className: (0, classnames_1.default)('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
       ...rest,
     },
     minValueLabel &&
@@ -356,26 +352,17 @@ exports.Slider = React.forwardRef((props, ref) => {
     React.createElement(
       index_js_1.Box,
       {
-        as: 'div',
         ref: containerRef,
-        ...railContainerProps,
+        ...trackContainerProps,
         className: (0, classnames_1.default)(
-          'iui-slider-container',
+          'iui-slider',
           {
             'iui-grabbing': undefined !== activeThumbIndex,
           },
-          railContainerProps?.className,
+          trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(index_js_1.Box, {
-        as: 'div',
-        ...railProps,
-        className: (0, classnames_1.default)(
-          'iui-slider-rail',
-          railProps?.className,
-        ),
-      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -394,7 +381,6 @@ exports.Slider = React.forwardRef((props, ref) => {
           step: step,
           sliderMin: min,
           sliderMax: max,
-          orientation: orientation,
         });
       }),
       React.createElement(Track_js_1.Track, {
@@ -405,8 +391,8 @@ exports.Slider = React.forwardRef((props, ref) => {
         orientation: orientation,
         ...trackProps,
       }),
-      tickMarkArea,
     ),
+    tickMarkArea,
     maxValueLabel &&
       React.createElement(
         index_js_1.Box,

package/cjs/core/Slider/Thumb.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import type { SliderProps } from './Slider.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 type ThumbProps = {
     /**
      * Thumb value.
@@ -54,7 +53,7 @@ type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-} & Pick<SliderProps, 'orientation'>;
+};
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/cjs/core/Slider/Thumb.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
@@ -30,7 +30,6 @@ const Thumb = (props) => {
     tooltipProps,
     thumbProps,
     disabled,
-    orientation,
   } = props;
   const thumbRef = React.useRef(null);
   const handleOnKeyboardEvent = React.useCallback(
@@ -88,22 +87,19 @@ const Thumb = (props) => {
   }, [adjustedValue, sliderMax, sliderMin]);
   const { style, className, ...rest } = thumbProps || {};
   return React.createElement(
-    index_js_1.Tooltip,
+    Tooltip_js_1.Tooltip,
     {
       placement: 'top',
       autoUpdateOptions: { animationFrame: true },
       ariaStrategy: 'none',
       ...tooltipProps,
     },
-    React.createElement(index_js_2.Box, {
+    React.createElement(index_js_1.Box, {
       ...rest,
-      'data-index': index,
       ref: thumbRef,
       style: {
         ...style,
-        ...(orientation === 'horizontal'
-          ? { insetInlineStart: `${lowPercent}%` }
-          : { insetBlockEnd: `${lowPercent}%` }),
+        '--iui-slider-thumb-position': `${lowPercent}%`,
       },
       className: (0, classnames_1.default)(
         'iui-slider-thumb',

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.

package/cjs/core/StatusMessage/StatusMessage.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Icon_js_1 = require('../Icon/Icon.js');
 /**
  * Component to display icon and text below the form field.
  * @example
@@ -36,7 +37,7 @@ exports.StatusMessage = React.forwardRef((props, ref) => {
     },
     !!icon
       ? React.createElement(
-          index_js_1.Icon,
+          Icon_js_1.Icon,
           { 'aria-hidden': true, ...iconProps },
           icon,
         )

package/cjs/core/Stepper/StepperStep.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 exports.StepperStep = React.forwardRef((props, forwardedRef) => {
   const {
     title,
@@ -47,7 +47,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     }
   };
   const stepShape = React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'li',
       ...stepProps,
@@ -70,7 +70,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         as: 'div',
         ...trackContentProps,
@@ -80,7 +80,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
         ),
       },
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'span',
           ...circleProps,
@@ -94,7 +94,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     ),
     type === 'default' &&
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'span',
           ...nameProps,
@@ -108,7 +108,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
   );
   return description
     ? React.createElement(
-        index_js_1.Tooltip,
+        Tooltip_js_1.Tooltip,
         { content: description },
         stepShape,
       )

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -8,12 +8,12 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 const WorkflowDiagramStep = (props) => {
   const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'li',
       className: (0, classnames_1.default)(
@@ -24,7 +24,7 @@ const WorkflowDiagramStep = (props) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         as: 'span',
         ...contentProps,
@@ -38,7 +38,7 @@ const WorkflowDiagramStep = (props) => {
   );
   return description
     ? React.createElement(
-        index_js_1.Tooltip,
+        Tooltip_js_1.Tooltip,
         { content: description },
         stepShape,
       )

package/cjs/core/Surface/Surface.d.ts

@@ -11,6 +11,14 @@ type SurfaceProps = {
      * Sets the elevation of the surface
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sets the border of the surface.
+     *
+     * Can be a boolean to toggle the default border, or a string value to specify a custom border.
+     *
+     * @default true
+     */
+    border?: boolean | string;
     /**
      * Content in the surface.
      */

package/cjs/core/Surface/Surface.js

@@ -30,6 +30,16 @@ const getSurfaceElevationValue = (elevation) => {
       return '';
   }
 };
+/** Returns correct border value based on prop */
+const getBorderValue = (border) => {
+  if (typeof border === 'string') {
+    return border;
+  }
+  if (border === false) {
+    return 'none';
+  }
+  return '';
+};
 // ----------------------------------------------------------------------------
 // Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
@@ -81,10 +91,18 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 exports.Surface = Object.assign(
   React.forwardRef((props, ref) => {
-    const { elevation, className, style, children, ...rest } = props;
+    const {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
       '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
       ...style,
     };
     return React.createElement(

package/cjs/core/Table/SubRowExpander.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps } from 'react-table';
+import type { Cell, CellProps } from '../../react-table/react-table.js';
 export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;

package/cjs/core/Table/SubRowExpander.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const SubRowExpander = (props) => {
   const { cell, isDisabled, cellProps, expanderCell, density } = props;
   return React.createElement(
@@ -17,7 +17,7 @@ const SubRowExpander = (props) => {
     expanderCell
       ? expanderCell(cellProps)
       : React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             'aria-label': 'Toggle sub row',
             'aria-expanded': cell.row.isExpanded ? 'true' : 'false',

package/cjs/core/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, TableOptions, Row, TableState } from 'react-table';
+import type { CellProps, TableOptions, Row, TableState } from '../../react-table/react-table.js';
 import type { CommonProps } from '../utils/index.js';
 import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";