@itwin/itwinui-react 3.0.0-dev.12 → 3.0.0-dev.14

package/esm/core/ColorPicker/ColorPalette.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  ColorValue,
-  getFocusableElements,
-  useMergedRefs,
-  Box,
-} from '../utils/index.js';
+import { ColorValue, Box } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
@@ -28,76 +23,6 @@ export const ColorPalette = React.forwardRef((props, ref) => {
   const { colors, label, className, children, ...rest } = props;
   const { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
-  const setDefaultTabIndex = (el) => {
-    if (el && !el.querySelector('[tabindex="0"]')) {
-      el.firstElementChild?.setAttribute('tabindex', '0');
-    }
-  };
-  const paletteRef = React.useRef(null);
-  const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
-  // Color palette arrow key navigation
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const swatches = getFocusableElements(paletteRef.current);
-    if (!swatches.length) {
-      return;
-    }
-    const currentIndex = swatches.findIndex(
-      (swatch) => swatch === paletteRef.current?.ownerDocument.activeElement,
-    );
-    if (currentIndex < 0) {
-      return;
-    }
-    let newIndex = -1;
-    switch (event.key) {
-      case 'ArrowDown': {
-        // Look for next ColorSwatch with same offsetLeft value
-        newIndex = swatches.findIndex(
-          (swatch, index) =>
-            index > currentIndex &&
-            swatch.offsetLeft === swatches[currentIndex].offsetLeft,
-        );
-        break;
-      }
-      case 'ArrowUp': {
-        // Look backwards for next ColorSwatch with same offsetLeft value
-        for (let i = currentIndex - 1; i >= 0; i--) {
-          if (swatches[i].offsetLeft === swatches[currentIndex].offsetLeft) {
-            newIndex = i;
-            break;
-          }
-        }
-        break;
-      }
-      case 'ArrowLeft':
-        newIndex = Math.max(currentIndex - 1, 0);
-        break;
-      case 'ArrowRight':
-        newIndex = Math.min(currentIndex + 1, swatches.length - 1);
-        break;
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        swatches[currentIndex].click();
-        event.preventDefault();
-        return;
-    }
-    if (newIndex >= 0 && newIndex < swatches.length) {
-      setFocusedIndex(newIndex);
-      event.preventDefault();
-    }
-  };
-  // call focus() when focusedIndex changes
-  React.useEffect(() => {
-    if (focusedIndex != null) {
-      const swatches = getFocusableElements(paletteRef.current);
-      swatches[focusedIndex]?.focus();
-    }
-  }, [focusedIndex]);
   return React.createElement(
     Box,
     {
@@ -113,11 +38,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
       ),
     React.createElement(
       Box,
-      {
-        className: 'iui-color-palette',
-        onKeyDown: handleKeyDown,
-        ref: paletteRefs,
-      },
+      { className: 'iui-color-palette' },
       children,
       colors &&
         colors.map((_color, index) => {
@@ -125,8 +46,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
           return React.createElement(ColorSwatch, {
             key: index,
             color: color,
-            onClick: (event) => {
-              event.preventDefault();
+            onClick: () => {
               onChangeComplete?.(color);
               setActiveColor(color);
             },

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

@@ -16,5 +16,5 @@ type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: PolymorphicForwardRefComponent<"div", ColorSwatchProps>;
+export declare const ColorSwatch: PolymorphicForwardRefComponent<"button", ColorSwatchProps>;
 export default ColorSwatch;

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, Box } from '../utils/index.js';
+import { ColorValue, Box, ButtonBase } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * ColorSwatch component to display within a color palette.
  * @example
@@ -21,17 +22,22 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
         : getColorValue(color).toHslString(true),
     [color],
   );
-  return React.createElement(Box, {
-    className: cx('iui-color-swatch', { 'iui-active': isActive }, className),
-    style: {
-      '--iui-color-swatch-background': colorString,
-      ...style,
+  return React.createElement(
+    Box,
+    {
+      as: !!onClick ? ButtonBase : 'span',
+      className: cx('iui-color-swatch', { 'iui-active': isActive }, className),
+      style: {
+        '--iui-color-swatch-background': colorString,
+        ...style,
+      },
+      onClick: onClick,
+      'aria-pressed': !!onClick && isActive ? 'true' : undefined,
+      ref: ref,
+      ...rest,
     },
-    onClick: onClick,
-    tabIndex: isActive ? 0 : -1,
-    'aria-selected': isActive,
-    ref: ref,
-    ...rest,
-  });
+    props.children ??
+      React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
+  );
 });
 export default ColorSwatch;

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -76,5 +76,5 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T>) => JSX.Element;
+export declare const LabeledSelect: React.ForwardRefExoticComponent<LabeledSelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default LabeledSelect;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -42,7 +42,7 @@ import { Icon } from '../Icon/Icon.js';
  *   svgIcon={<SvgCamera />}
  * />
  */
-export const LabeledSelect = (props) => {
+export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -91,6 +91,7 @@ export const LabeledSelect = (props) => {
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -109,5 +110,5 @@ export const LabeledSelect = (props) => {
         )
       : message,
   );
-};
+});
 export default LabeledSelect;

package/esm/core/Select/Select.d.ts

@@ -168,5 +168,5 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default Select;

package/esm/core/Select/Select.js

@@ -75,7 +75,7 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-export const Select = (props) => {
+export const Select = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
   const {
     options,
@@ -194,7 +194,7 @@ export const Select = (props) => {
         className: cx('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
       },
       React.createElement(
         Box,
@@ -281,7 +281,7 @@ export const Select = (props) => {
         ),
       ),
   );
-};
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(

package/esm/core/Slider/Slider.d.ts

@@ -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/esm/core/Slider/Slider.js

@@ -78,10 +78,9 @@ export const Slider = React.forwardRef((props, ref) => {
     onUpdate,
     thumbProps,
     className,
-    railContainerProps,
+    trackContainerProps,
     minProps,
     maxProps,
-    railProps,
     trackProps,
     tickProps,
     ticksProps,
@@ -306,12 +305,9 @@ export const Slider = React.forwardRef((props, ref) => {
     Box,
     {
       ref: ref,
-      className: cx(
-        'iui-slider-component-container',
-        `iui-slider-${orientation}`,
-        { 'iui-disabled': disabled },
-        className,
-      ),
+      className: cx('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
       ...rest,
     },
     minValueLabel &&
@@ -327,23 +323,17 @@ export const Slider = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        as: 'div',
         ref: containerRef,
-        ...railContainerProps,
+        ...trackContainerProps,
         className: cx(
-          'iui-slider-container',
+          'iui-slider',
           {
             'iui-grabbing': undefined !== activeThumbIndex,
           },
-          railContainerProps?.className,
+          trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(Box, {
-        as: 'div',
-        ...railProps,
-        className: cx('iui-slider-rail', railProps?.className),
-      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -362,7 +352,6 @@ export const Slider = React.forwardRef((props, ref) => {
           step: step,
           sliderMin: min,
           sliderMax: max,
-          orientation: orientation,
         });
       }),
       React.createElement(Track, {
@@ -373,8 +362,8 @@ export const Slider = React.forwardRef((props, ref) => {
         orientation: orientation,
         ...trackProps,
       }),
-      tickMarkArea,
     ),
+    tickMarkArea,
     maxValueLabel &&
       React.createElement(
         Box,

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import type { SliderProps } from './Slider.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/esm/core/Slider/Thumb.js

@@ -26,7 +26,6 @@ export const Thumb = (props) => {
     tooltipProps,
     thumbProps,
     disabled,
-    orientation,
   } = props;
   const thumbRef = React.useRef(null);
   const handleOnKeyboardEvent = React.useCallback(
@@ -93,13 +92,10 @@ export const Thumb = (props) => {
     },
     React.createElement(Box, {
       ...rest,
-      'data-index': index,
       ref: thumbRef,
       style: {
         ...style,
-        ...(orientation === 'horizontal'
-          ? { insetInlineStart: `${lowPercent}%` }
-          : { insetBlockEnd: `${lowPercent}%` }),
+        '--iui-slider-thumb-position': `${lowPercent}%`,
       },
       className: cx('iui-slider-thumb', { 'iui-active': isActive }, className),
       role: 'slider',

package/esm/core/Tabs/Tabs.d.ts

@@ -1,28 +1,5 @@
 import * as React from 'react';
-export type OverflowOptions = {
-    /**
-     * Whether to allow tabs list to scroll when there is overflow,
-     * i.e. when there is not enough space to fit all the tabs.
-     *
-     * Not applicable to types `pill` and `borderless`.
-     */
-    useOverflow?: boolean;
-};
-type TabsOverflowProps = {
-    /**
-     * Options that can be specified to deal with tabs overflowing the allotted space.
-     */
-    overflowOptions?: OverflowOptions;
-    /**
-     * Type of the tabs.
-     *
-     * If `orientation = 'vertical'`, `pill` is not applicable.
-     * @default 'default'
-     */
-    type?: 'default';
-} | {
-    type: 'pill' | 'borderless';
-};
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type TabsOrientationProps = {
     /**
      * Orientation of the tabs.
@@ -40,24 +17,85 @@ type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
-type TabsTypeProps = {
+type TabsWrapperOwnProps = {
     /**
-     * Type of the tabs.
+     * Color of the bar on the active tab.
+     * @default 'blue'
+     */
+    color?: 'blue' | 'green';
+    /**
+     * Control whether focusing tabs (using arrow keys) should automatically select them.
+     * Use 'manual' if tab panel content is not preloaded.
+     * @default 'auto'
+     */
+    focusActivationMode?: 'auto' | 'manual';
+    /**
+     * Value of the tab that should be active on initial render.
      *
-     * If `orientation = 'vertical'`, `pill` is not applicable.
-     * @default 'default'
+     * Should be used for uncontrolled state (when no `value` passed).
+     *
+     * If not specified, then first tab will be active by default.
      */
-    type?: 'default' | 'borderless';
+    defaultValue?: string;
+    /**
+     * Value of the active tab for controlled state.
+     */
+    value?: string;
+    /**
+     * Function that gets called when active tab is changed.
+     *
+     * Should be used alongside `value` prop.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * @deprecated Do not use.
+     */
+    defaultChecked?: never;
+} & TabsOrientationProps;
+type TabListOwnProps = {
+    /**
+     * Tab items.
+     */
+    children: React.ReactNode[];
+};
+type TabOwnProps = {
+    /**
+     * Value used to associate the tab with a given panel.
+     */
+    value: string;
+    /**
+     * Tab label used for simple Tab construction.
+     * Cannot be used with tabs that have icons or descriptions.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * @deprecated Don't pass `id`, as it will be automatically set.
+     */
+    id?: string;
+};
+type TabsActionsOwnProps = {
+    /**
+     * Passes props to the wrapper component for the actions
+     */
+    wrapperProps?: React.ComponentPropsWithRef<'div'>;
+};
+type TabsPanelOwnProps = {
+    /**
+     * Value used to associate the panel with a given tab.
+     */
+    value: string;
+    /**
+     * @deprecated Don't pass `id`, as it will be automatically set.
+     */
+    id?: string;
+};
+type TabsLegacyProps = {
     /**
      * Content displayed to the right/bottom of the horizontal/vertical tabs
      *
      * If `type = 'pill'`, `actions` is not applicable.
      */
     actions?: React.ReactNode[];
-} | {
-    type: 'pill';
-};
-export type TabsProps = {
     /**
      * Elements shown for each tab.
      * Recommended to pass an array of `Tab` components.
@@ -98,33 +136,165 @@ export type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-} & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
+    /**
+     * @deprecated Tabs will now overflow by default, so this prop does nothing.
+     */
+    overflowOptions?: {
+        /**
+         * @deprecated Tabs will now overflow by default, so this prop does nothing.
+         */
+        useOverflow?: boolean;
+    };
+    defaultValue?: never;
+    defaultChecked?: never;
+} & TabsOrientationProps;
+type TabLegacyProps = {
+    /**
+     * The main label shown in the tab.
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label shown below the main label.
+     */
+    sublabel?: React.ReactNode;
+    /**
+     * Svg icon shown before the labels.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Control whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom content appended to the tab.
+     */
+    children?: React.ReactNode;
+    /**
+     * `value` of the tab.
+     *
+     * Will be set by parent `Tabs` component.
+     */
+    value?: string;
+};
 /**
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ * Legacy Tab component.
+ * For full functionality use composition API.
+ *
+ * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
  * const tabs = [
- *   <Tab label='Label 1' />,
- *   <Tab label='Label 2' />,
- *   <Tab label='Label 3' />,
+ *   <Tab label='Label 1' sublabel='Description 1' />,
+ *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
- * <Tabs labels={tabs} />
- *
+ */
+declare const LegacyTab: PolymorphicForwardRefComponent<"button", TabLegacyProps>;
+export { LegacyTab as Tab };
+/**
+ * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+ * `Tabs.Tab` and `Tabs.Panel` can be associated with each other by passing them the same `value`.
  * @example
- * <Tabs orientation='vertical' labels={tabs} />
+ * <Tabs.Wrapper>
+ *   <Tabs.TabList>
+ *     <Tabs.Tab value='tab1' label='Label 1' />
+ *     <Tabs.Tab value='tab2' label='Label 2' />
+ *     <Tabs.Tab value='tab3' label='Label 3' />
+ *   </Tabs.TabList>
+ *   <Tabs.ActionsWrapper>
+ *     <Tabs.Actions>
+ *       <Button>Sample Button</Button>
+ *     </Tabs.Actions>
+ *   </Tabs.ActionsWrapper>
+ *   <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
+ *   <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
+ *   <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
+ * </Tabs.Wrapper>
  *
  * @example
- * const tabsWithSublabels = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- * ];
- * <Tabs labels={tabsWithSublabels} activeIndex={1} />
+ * <Tabs orientation='vertical'/>
  *
  * @example
- * const tabsWithIcons = [
- *   <Tab label='Label 1' icon={<SvgPlaceholder />} />,
- *   <Tab label='Label 2' icon={<SvgPlaceholder />} />,
- * ];
- * <Tabs labels={tabsWithIcons} type='pill' />
+ * <Tabs.Wrapper focusActivationMode='manual'>
+ *  <Tabs.Tab value='sample'>
+ *   <Tabs.TabIcon>
+ *     <SvgPlaceholder />
+ *   </Tabs.TabIcon>
+ *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+ *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+ *  </Tabs.Tab>
+ * </Tabs.Wrapper>
  */
-export declare const Tabs: (props: TabsProps) => React.JSX.Element;
+export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps> & {
+    /**
+     * A wrapper component for Tabs
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperOwnProps>;
+    /**
+     * Tablist subcomponent which contains all of the tab subcomponents.
+     * @example
+     * <Tabs.TabList>
+     *   <Tabs.Tab value='tab1' label='Label 1' />
+     *   <Tabs.Tab value='tab2' label='Label 2' />
+     *   <Tabs.Tab value='tab3' label='Label 3' />
+     * </Tabs.TabList>
+     *
+     * @example
+     * <Tabs.TabList>
+     *   <Tabs.Tab value='tab1' label='Green Tab' />
+     * </Tabs.TabList>
+     *
+     * @example
+     * <Tabs.TabList focusActivationMode='manual'>
+     *   <Tabs.Tab value='tab1' label='Manual Focus Tab' />
+     * </Tabs.TabList>
+     */
+    TabList: PolymorphicForwardRefComponent<"div", TabListOwnProps>;
+    /**
+     * Tab subcomponent which is used for each of the tabs.
+     * @example
+     * <Tabs.Tab value='tab1' label='Label 1' />
+     *
+     * @example
+     * <Tabs.Tab value='sample'>
+     *   <Tabs.TabIcon>
+     *     <SvgPlaceholder />
+     *   </Tabs.TabIcon>
+     *   <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
+     *   <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
+     * </Tabs.Tab>
+     *
+     */
+    Tab: PolymorphicForwardRefComponent<"button", TabOwnProps>;
+    /**
+     * Tab icon subcomponent which places an icon on the left side of the tab.
+     */
+    TabIcon: 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" | "auto" | "medium" | "large" | 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;
+    }>;
+    /**
+     * Tab label subcomponent which holds the tab's label.
+     */
+    TabLabel: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * Tab description subcomponent which places a description under the tab label.
+     */
+    TabDescription: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * Tab actions subcomponent which contains action buttons that are placed at the end of the tabs.
+     */
+    Actions: PolymorphicForwardRefComponent<"div", TabsActionsOwnProps>;
+    /**
+     * Tab panel subcomponent which contains the tab's content.
+     * @example
+     * <Tabs.Panel value='tab1'>
+     *   Sample Panel
+     * </Tabs.Panel>
+     */
+    Panel: PolymorphicForwardRefComponent<"div", TabsPanelOwnProps>;
+};
 export default Tabs;