@itwin/itwinui-react 3.15.5 → 3.16.0

package/DEV-esm/core/Panels/Panels.js

@@ -0,0 +1,301 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {
+  Box,
+  cloneElementWithRef,
+  mergeEventHandlers,
+  SvgChevronLeft,
+  useInstance,
+  useMergedRefs,
+  useSafeContext,
+  useMediaQuery,
+  useWarningLogger,
+  useLayoutEffect,
+  useLatestRef,
+} from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Flex } from '../Flex/Flex.js';
+import { Text } from '../Typography/Text.js';
+import cx from 'classnames';
+import { PanelsInstanceContext, PanelsInstanceProvider } from './helpers.js';
+export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
+  let {
+    children,
+    className,
+    onActiveIdChange: onActiveIdChangeProp,
+    instance,
+    ...rest
+  } = props;
+  let onActiveIdChange = useLatestRef(onActiveIdChangeProp);
+  let ref = React.useRef(null);
+  let [activePanelId, setActivePanelId] = React.useState(void 0);
+  let [triggers, setTriggers] = React.useState({});
+  let panels = React.useRef(new Set());
+  let [shouldFocus, setShouldFocus] = React.useState(void 0);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+  let changeActivePanel = React.useCallback(
+    (newActiveId) => {
+      if (!panels.current.has(newActiveId) || newActiveId === activePanelId)
+        return;
+      ReactDOM.flushSync(() => setActivePanelId(newActiveId));
+      onActiveIdChange.current?.(newActiveId);
+      ref.current?.ownerDocument.getElementById(newActiveId)?.scrollIntoView({
+        block: 'nearest',
+        inline: 'center',
+        behavior: motionOk ? 'smooth' : 'instant',
+      });
+    },
+    [activePanelId, motionOk, onActiveIdChange],
+  );
+  return React.createElement(
+    PanelsWrapperContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          activePanelId,
+          setActivePanelId,
+          changeActivePanel,
+          triggers,
+          setTriggers,
+          shouldFocus,
+          setShouldFocus,
+          panels,
+        }),
+        [
+          activePanelId,
+          changeActivePanel,
+          setActivePanelId,
+          setTriggers,
+          shouldFocus,
+          triggers,
+        ],
+      ),
+    },
+    React.createElement(
+      PanelsInstanceProvider,
+      {
+        instance: instance,
+      },
+      React.createElement(
+        Box,
+        {
+          ref: useMergedRefs(ref, forwardedRef),
+          ...rest,
+          className: cx('iui-panel-wrapper', className),
+        },
+        children,
+      ),
+    ),
+  );
+});
+PanelsWrapper.displayName = 'Panels.Wrapper';
+export const PanelsWrapperContext = React.createContext(void 0);
+PanelsWrapperContext.displayName = 'PanelsWrapperContext';
+let Panel = React.forwardRef((props, forwardedRef) => {
+  let { id, children, className, ...rest } = props;
+  let { activePanelId, triggers, panels, setActivePanelId } =
+    useSafeContext(PanelsWrapperContext);
+  let associatedTrigger = React.useMemo(() => triggers[id], [id, triggers]);
+  let previousActivePanelId = useDelayed(activePanelId) || activePanelId;
+  let isMounted = [activePanelId, previousActivePanelId].includes(id);
+  let isTransitioning =
+    activePanelId === id && activePanelId !== previousActivePanelId;
+  let isInert = previousActivePanelId === id && activePanelId !== id;
+  useLayoutEffect(() => {
+    let isFirstPanel = null == activePanelId && 0 === panels.current.size;
+    if (isFirstPanel) setActivePanelId(id);
+    let panelsCurrent = panels.current;
+    if (!panelsCurrent.has(id)) panelsCurrent.add(id);
+    return () => {
+      panelsCurrent.delete(id);
+    };
+  }, [activePanelId, id, panels, setActivePanelId]);
+  return React.createElement(
+    PanelContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          id,
+          associatedTrigger,
+        }),
+        [associatedTrigger, id],
+      ),
+    },
+    isMounted &&
+      React.createElement(
+        Box,
+        {
+          ref: forwardedRef,
+          id: id,
+          className: cx('iui-panel', className),
+          'aria-labelledby': `${id}-header-title`,
+          role: 'group',
+          inert: isInert ? '' : void 0,
+          'data-iui-transitioning': isTransitioning ? 'true' : void 0,
+          ...rest,
+        },
+        children,
+      ),
+  );
+});
+Panel.displayName = 'Panels.Panel';
+let PanelContext = React.createContext(void 0);
+PanelContext.displayName = 'PanelContext';
+let PanelTrigger = (props) => {
+  let { children, for: forProp } = props;
+  let {
+    changeActivePanel,
+    triggers,
+    setTriggers,
+    activePanelId: activePanel,
+    shouldFocus,
+    setShouldFocus,
+    panels,
+  } = useSafeContext(PanelsWrapperContext);
+  let { id: panelId } = useSafeContext(PanelContext);
+  let fallbackId = React.useId();
+  let triggerId = children.props.id || fallbackId;
+  let onClick = React.useCallback(() => {
+    if (null == activePanel) return;
+    setShouldFocus({
+      fromPanelId: activePanel,
+      toPanelId: forProp,
+      direction: 'forward',
+    });
+    changeActivePanel?.(forProp);
+  }, [activePanel, changeActivePanel, forProp, setShouldFocus]);
+  let focusRef = React.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'backward' &&
+        shouldFocus?.toPanelId === panelId &&
+        shouldFocus?.fromPanelId === forProp
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [forProp, panelId, setShouldFocus, shouldFocus],
+  );
+  let logWarning = useWarningLogger();
+  React.useEffect(() => {
+    if (!panels.current.has(forProp))
+      logWarning(
+        `Panels.Trigger's \`for\` prop ("${forProp}") corresponds to no Panel.`,
+      );
+  }, [forProp, logWarning, panels, triggers]);
+  React.useEffect(() => {
+    setTriggers((oldTriggers) => {
+      let triggersMatch = oldTriggers[forProp];
+      if (
+        null == triggersMatch ||
+        panelId !== triggersMatch.panelId ||
+        triggerId !== triggersMatch.triggerId
+      )
+        return {
+          ...oldTriggers,
+          [forProp]: {
+            panelId,
+            triggerId,
+          },
+        };
+      return oldTriggers;
+    });
+  }, [forProp, panelId, setTriggers, triggerId]);
+  return cloneElementWithRef(children, (children) => ({
+    ...children.props,
+    id: triggerId,
+    ref: focusRef,
+    onClick: mergeEventHandlers(children.props.onClick, onClick),
+    'aria-expanded': activePanel === forProp,
+    'aria-controls': forProp,
+  }));
+};
+PanelTrigger.displayName = 'Panels.Trigger';
+let PanelHeader = React.forwardRef((props, forwardedRef) => {
+  let { titleProps, children, ...rest } = props;
+  let { shouldFocus, setShouldFocus } = useSafeContext(PanelsWrapperContext);
+  let { id: panelId, associatedTrigger: panelAssociatedTrigger } =
+    useSafeContext(PanelContext);
+  let focusRef = React.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'forward' &&
+        shouldFocus.toPanelId === panelId
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [panelId, setShouldFocus, shouldFocus?.direction, shouldFocus?.toPanelId],
+  );
+  return React.createElement(
+    Flex,
+    {
+      ref: forwardedRef,
+      ...rest,
+    },
+    panelAssociatedTrigger && React.createElement(PanelBackButton, null),
+    React.createElement(
+      Text,
+      {
+        id: `${panelId}-header-title`,
+        as: 'h2',
+        tabIndex: -1,
+        ref: focusRef,
+        ...titleProps,
+      },
+      children,
+    ),
+  );
+});
+PanelHeader.displayName = 'Panels.Header';
+let PanelBackButton = React.forwardRef((props, forwardedRef) => {
+  let { children, onClick, ...rest } = props;
+  let { instance: panelInstance } = useSafeContext(PanelsInstanceContext);
+  return React.createElement(
+    IconButton,
+    {
+      ref: forwardedRef,
+      'aria-label': 'Previous panel',
+      styleType: 'borderless',
+      size: 'small',
+      'data-iui-shift': 'left',
+      ...rest,
+      onClick: mergeEventHandlers(
+        React.useCallback(() => panelInstance?.goBack(), [panelInstance]),
+        onClick,
+      ),
+    },
+    children || React.createElement(SvgChevronLeft, null),
+  );
+});
+PanelBackButton.displayName = 'Panels.BackButton';
+export const Panels = {
+  Wrapper: PanelsWrapper,
+  Panel,
+  Trigger: PanelTrigger,
+  Header: PanelHeader,
+  useInstance: useInstance,
+};
+function useDelayed(
+  value,
+  { delay } = {
+    delay: 500,
+  },
+) {
+  let [delayed, setDelayed] = React.useState(void 0);
+  let timeout = React.useRef(void 0);
+  React.useEffect(() => {
+    if (0 === delay) setDelayed(value);
+    else timeout.current = setTimeout(() => setDelayed(value), delay);
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, [value, delay]);
+  return delayed;
+}

package/DEV-esm/core/Panels/helpers.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useSafeContext, useSynchronizeInstance } from '../../utils/index.js';
+import { Panels, PanelsWrapperContext } from './Panels.js';
+export const PanelsInstanceContext = React.createContext(void 0);
+PanelsInstanceContext.displayName = 'PanelsInstanceContext';
+export const PanelsInstanceProvider = (props) => {
+  let { children, instance: instanceProp } = props;
+  let instanceBackup = Panels.useInstance();
+  let instance = instanceProp || instanceBackup;
+  let { activePanelId, changeActivePanel, triggers, setShouldFocus } =
+    useSafeContext(PanelsWrapperContext);
+  let goBack = React.useCallback(async () => {
+    if (null == activePanelId) return;
+    let trigger = triggers[activePanelId];
+    if (null != trigger.triggerId) {
+      setShouldFocus({
+        fromPanelId: activePanelId,
+        toPanelId: trigger.panelId,
+        direction: 'backward',
+      });
+      changeActivePanel(trigger.panelId);
+    }
+  }, [activePanelId, changeActivePanel, setShouldFocus, triggers]);
+  useSynchronizeInstance(
+    instance,
+    React.useMemo(
+      () => ({
+        goBack,
+      }),
+      [goBack],
+    ),
+  );
+  return React.createElement(
+    PanelsInstanceContext.Provider,
+    {
+      value: {
+        instance,
+      },
+    },
+    children,
+  );
+};

package/DEV-esm/core/Radio/Radio.js

@@ -16,7 +16,7 @@ export const Radio = React.forwardRef((props, ref) => {
   let refs = useMergedRefs(inputElementRef, ref);
   let radio = React.createElement(Box, {
     as: 'input',
-    className: cx('iui-radio', className),
+    className: cx('iui-checkbox', 'iui-radio', className),
     style: style,
     disabled: disabled,
     type: 'radio',
@@ -29,14 +29,9 @@ export const Radio = React.forwardRef((props, ref) => {
         {
           as: 'label',
           ...wrapperProps,
-          className: cx(
-            'iui-radio-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-            },
-            wrapperProps?.className,
-          ),
+          className: cx('iui-checkbox-wrapper', wrapperProps?.className),
+          'data-iui-status': status,
+          'data-iui-disabled': disabled ? 'true' : void 0,
         },
         radio,
         label &&

package/DEV-esm/core/RadioTiles/RadioTileGroup.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../../utils/index.js';
+import cx from 'classnames';
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-  let { children, label, ...rest } = props;
+  let { children, label, tileContainerProps, ...rest } = props;
   return React.createElement(
     InputGroup,
     {
@@ -13,7 +14,12 @@ export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       Box,
       {
-        className: 'iui-radio-tile-container',
+        as: 'div',
+        ...tileContainerProps,
+        className: cx(
+          'iui-radio-tile-container',
+          tileContainerProps?.className,
+        ),
       },
       children,
     ),

package/DEV-esm/core/Select/SelectTag.js

@@ -1,23 +1,21 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { Tag } from '../Tag/Tag.js';
 export const SelectTag = React.forwardRef((props, forwardedRef) => {
   let { className, label, ...rest } = props;
   return React.createElement(
-    Box,
+    Tag,
     {
-      as: 'span',
       className: cx('iui-select-tag', className),
+      labelProps: {
+        className: 'iui-select-tag-label',
+      },
+      removeButtonProps: {
+        className: 'iui-select-tag-button',
+      },
       ref: forwardedRef,
       ...rest,
     },
-    React.createElement(
-      Box,
-      {
-        as: 'span',
-        className: 'iui-select-tag-label',
-      },
-      label,
-    ),
+    label,
   );
 });

package/DEV-esm/core/Select/SelectTagContainer.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SelectTag } from './SelectTag.js';
 import { OverflowContainer } from '../../utils/index.js';
-export const SelectTagContainer = React.forwardRef((props, ref) => {
+export const SelectTagContainer = React.forwardRef((props, forwardedRef) => {
   let { tags: tagsProp, className, ...rest } = props;
   let tags = React.useMemo(() => React.Children.toArray(tagsProp), [tagsProp]);
   return React.createElement(
@@ -10,7 +10,7 @@ export const SelectTagContainer = React.forwardRef((props, ref) => {
     {
       itemsCount: tags.length,
       className: cx('iui-select-tag-container', className),
-      ref: ref,
+      ref: forwardedRef,
       ...rest,
     },
     React.createElement(SelectTagContainerContent, {

package/DEV-esm/core/Stepper/Stepper.js

@@ -53,6 +53,7 @@ export const Stepper = React.forwardRef((props, ref) => {
           type: type,
           onClick: onStepClick,
           description: s.description,
+          stepContent: s.stepContent,
         });
       }),
     ),

package/DEV-esm/core/Stepper/StepperStep.js

@@ -17,6 +17,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     trackContentProps,
     circleProps,
     nameProps,
+    stepContent,
     ...rest
   } = props;
   let isPast = currentStepNumber > index;
@@ -74,7 +75,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
           ...circleProps,
           className: cx('iui-stepper-circle', circleProps?.className),
         },
-        index + 1,
+        stepContent ? stepContent() : index + 1,
       ),
     ),
     'default' === type &&

package/DEV-esm/core/Table/Table.js

@@ -53,7 +53,7 @@ let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let iuiId = Symbol('iui-id');
+export const iuiId = Symbol('iui-id');
 let flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -665,11 +665,7 @@ export const Table = (props) => {
               },
               bodyProps?.className,
             ),
-            style: {
-              outline: 0,
-            },
           }),
-          tabIndex: -1,
           'aria-multiselectable':
             (isSelectable && 'multi' === selectionMode) || void 0,
         },

package/DEV-esm/core/Table/TablePaginator.js

@@ -13,6 +13,7 @@ import {
   SvgChevronRight,
   Box,
   OverflowContainer,
+  useLayoutEffect,
 } from '../../utils/index.js';
 import { styles } from '../../styles.js';
 let defaultLocalization = {
@@ -56,7 +57,7 @@ export const TablePaginator = (props) => {
   );
   let pageListRef = React.useRef(null);
   let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
   let needFocus = React.useRef(false);
@@ -178,6 +179,7 @@ export const TablePaginator = (props) => {
             : React.createElement(TablePaginatorPageButtons, {
                 size: size,
                 focusedIndex: focusedIndex,
+                setFocusedIndex: setFocusedIndex,
                 totalPagesCount: totalPagesCount,
                 onPageChange: onPageChange,
                 currentPage: currentPage,
@@ -251,6 +253,7 @@ export const TablePaginator = (props) => {
 let TablePaginatorPageButtons = (props) => {
   let {
     focusedIndex,
+    setFocusedIndex,
     totalPagesCount,
     onPageChange,
     currentPage,
@@ -270,14 +273,24 @@ let TablePaginatorPageButtons = (props) => {
           styleType: 'borderless',
           size: buttonSize,
           'data-iui-active': index === currentPage,
-          onClick: () => onPageChange(index),
+          onClick: () => {
+            setFocusedIndex(index);
+            onPageChange(index);
+          },
           'aria-current': index === currentPage,
           'aria-label': localization.goToPageLabel?.(index + 1),
           tabIndex: tabIndex,
         },
         index + 1,
       ),
-    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+    [
+      focusedIndex,
+      buttonSize,
+      currentPage,
+      localization,
+      setFocusedIndex,
+      onPageChange,
+    ],
   );
   let pageList = React.useMemo(
     () =>

package/DEV-esm/core/Table/actionHandlers/selectHandler.js

@@ -1,3 +1,4 @@
+import { iuiId } from '../Table.js';
 let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   if (!instance?.rows.length) {
     onSelect?.([], newState);
@@ -7,14 +8,16 @@ let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
     let isAllSubSelected = true;
-    row.initialSubRows.forEach((subRow) => {
-      let result = handleRow(subRow);
-      if (!result) isAllSubSelected = false;
-    });
+    if (row.initialSubRows[0]?.original[iuiId] === void 0)
+      row.initialSubRows.forEach((subRow) => {
+        let result = handleRow(subRow);
+        if (!result) isAllSubSelected = false;
+      });
     if (
-      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-      (row.initialSubRows.length && isAllSubSelected)
+      newState.selectedRowIds[row.id] &&
+      (!instance.selectSubRows ||
+        !row.initialSubRows.length ||
+        isAllSubSelected)
     )
       newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];

package/DEV-esm/core/Table/columns/selectionColumn.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
+import { iuiId } from '../Table.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 export const SelectionColumn = (props = {}) => {
   let { isDisabled, density } = props;
@@ -50,7 +51,11 @@ export const SelectionColumn = (props = {}) => {
         disabled: isDisabled?.(row.original),
         onClick: (e) => e.stopPropagation(),
         onChange: () => {
-          if (row.subRows.length > 0 && selectSubRows)
+          if (
+            row.subRows.length > 0 &&
+            selectSubRows &&
+            void 0 === row.initialSubRows[0].original[iuiId]
+          )
             row.toggleRowSelected(
               !row.subRows.every(
                 (subRow) => subRow.isSelected || isDisabled?.(subRow.original),

package/DEV-esm/core/Tree/Tree.js

@@ -164,6 +164,7 @@ export const Tree = (props) => {
           onKeyDown: handleKeyDown,
           ref: treeRef,
           className: className,
+          'data-iui-size': 'small' === size ? 'small' : void 0,
           style: style,
           ...rest,
         })

package/DEV-esm/index.js

@@ -64,6 +64,7 @@ export { ModalContent } from './core/Modal/ModalContent.js';
 export { ModalButtonBar } from './core/Modal/ModalButtonBar.js';
 export { NotificationMarker } from './core/NotificationMarker/NotificationMarker.js';
 export { Overlay } from './core/Overlay/Overlay.js';
+export { Panels as unstable_Panels } from './core/Panels/Panels.js';
 export { ProgressLinear } from './core/ProgressIndicators/ProgressLinear.js';
 export { ProgressRadial } from './core/ProgressIndicators/ProgressRadial.js';
 export { Radio } from './core/Radio/Radio.js';

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.15.5';
+const t = '3.16.0';
 const u = new Proxy(
   {},
   {

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { OverflowContainer } from './OverflowContainer.js';
+import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
+import { ShadowRoot } from './ShadowRoot.js';
 let ELLIPSIS_CHAR = '…';
-export const MiddleTextTruncation = (props) => {
-  let { text, style, ...rest } = props;
+export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
+  let { text, endCharsCount, textRenderer, style, ...rest } = props;
   return React.createElement(
     OverflowContainer,
     {
@@ -16,10 +18,26 @@ export const MiddleTextTruncation = (props) => {
       },
       itemsCount: text.length,
       ...rest,
+      ref: forwardedRef,
     },
-    React.createElement(MiddleTextTruncationContent, props),
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement(VisuallyHidden, null, text),
+      React.createElement('slot', {
+        'aria-hidden': true,
+        style: {
+          pointerEvents: 'none',
+        },
+      }),
+    ),
+    React.createElement(MiddleTextTruncationContent, {
+      text: text,
+      endCharsCount: endCharsCount,
+      textRenderer: textRenderer,
+    }),
   );
-};
+});
 MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 let MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;