@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Slider/Thumb.js

@@ -12,101 +12,54 @@ import { Box } from '../utils/index.js';
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 export const Thumb = (props) => {
-  const {
-    value,
-    index,
-    minVal,
-    maxVal,
-    step,
-    sliderMin,
-    sliderMax,
-    isActive,
-    onThumbActivated,
-    onThumbValueChanged,
-    tooltipProps,
-    thumbProps,
-    disabled,
-  } = props;
-  const thumbRef = React.useRef(null);
-  const handleOnKeyboardEvent = React.useCallback(
-    (event, keyboardReleased) => {
-      if (disabled || event.altKey) {
-        return;
-      }
-      switch (event.key) {
-        case 'ArrowLeft':
-        case 'ArrowDown':
-          onThumbValueChanged(
-            index,
-            Math.max(value - step, minVal),
-            keyboardReleased,
-          );
-          break;
-        case 'ArrowRight':
-        case 'ArrowUp':
-          onThumbValueChanged(
-            index,
-            Math.min(value + step, maxVal),
-            keyboardReleased,
-          );
-          break;
-        case 'Home':
-          onThumbValueChanged(index, minVal, keyboardReleased);
-          break;
-        case 'End':
-          onThumbValueChanged(index, maxVal, keyboardReleased);
-          break;
-        default:
-          return;
-      }
-      event.preventDefault();
-    },
-    [disabled, onThumbValueChanged, index, value, step, minVal, maxVal],
-  );
-  const handlePointerDownOnThumb = React.useCallback(() => {
-    !disabled && onThumbActivated(index);
-  }, [disabled, index, onThumbActivated]);
-  const adjustedValue = React.useMemo(() => {
-    if (value < sliderMin) {
-      return sliderMin;
-    }
-    if (value > sliderMax) {
-      return sliderMax;
-    }
-    return value;
-  }, [sliderMax, sliderMin, value]);
-  const lowPercent = React.useMemo(() => {
-    if (sliderMax === sliderMin) {
-      return 0;
-    }
-    return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
-  }, [adjustedValue, sliderMax, sliderMin]);
-  const { style, className, ...rest } = thumbProps || {};
-  return React.createElement(
-    Tooltip,
-    {
-      placement: 'top',
-      autoUpdateOptions: { animationFrame: true },
-      ariaStrategy: 'none',
-      ...tooltipProps,
-    },
-    React.createElement(Box, {
-      ...rest,
-      ref: thumbRef,
-      style: {
-        ...style,
-        '--iui-slider-thumb-position': `${lowPercent}%`,
-      },
-      className: cx('iui-slider-thumb', { 'iui-active': isActive }, className),
-      role: 'slider',
-      tabIndex: disabled ? undefined : 0,
-      'aria-valuemin': minVal,
-      'aria-valuenow': value,
-      'aria-valuemax': maxVal,
-      'aria-disabled': disabled,
-      onPointerDown: handlePointerDownOnThumb,
-      onKeyDown: (event) => handleOnKeyboardEvent(event, false),
-      onKeyUp: (event) => handleOnKeyboardEvent(event, true),
-    }),
-  );
+    const { value, index, minVal, maxVal, step, sliderMin, sliderMax, isActive, onThumbActivated, onThumbValueChanged, tooltipProps, thumbProps, disabled, } = props;
+    const thumbRef = React.useRef(null);
+    const handleOnKeyboardEvent = React.useCallback((event, keyboardReleased) => {
+        if (disabled || event.altKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                onThumbValueChanged(index, Math.max(value - step, minVal), keyboardReleased);
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                onThumbValueChanged(index, Math.min(value + step, maxVal), keyboardReleased);
+                break;
+            case 'Home':
+                onThumbValueChanged(index, minVal, keyboardReleased);
+                break;
+            case 'End':
+                onThumbValueChanged(index, maxVal, keyboardReleased);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }, [disabled, onThumbValueChanged, index, value, step, minVal, maxVal]);
+    const handlePointerDownOnThumb = React.useCallback(() => {
+        !disabled && onThumbActivated(index);
+    }, [disabled, index, onThumbActivated]);
+    const adjustedValue = React.useMemo(() => {
+        if (value < sliderMin) {
+            return sliderMin;
+        }
+        if (value > sliderMax) {
+            return sliderMax;
+        }
+        return value;
+    }, [sliderMax, sliderMin, value]);
+    const lowPercent = React.useMemo(() => {
+        if (sliderMax === sliderMin) {
+            return 0;
+        }
+        return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
+    }, [adjustedValue, sliderMax, sliderMin]);
+    const { style, className, ...rest } = thumbProps || {};
+    return (React.createElement(Tooltip, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ariaStrategy: 'none', ...tooltipProps },
+        React.createElement(Box, { ...rest, ref: thumbRef, style: {
+                ...style,
+                '--iui-slider-thumb-position': `${lowPercent}%`,
+            }, className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: (event) => handleOnKeyboardEvent(event, false), onKeyUp: (event) => handleOnKeyboardEvent(event, true) })));
 };

package/esm/core/Slider/Track.js

@@ -6,86 +6,61 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
 function shouldDisplaySegment(segmentIndex, mode) {
-  if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
-    return true;
-  } else if ('even-segments' === mode && 0 === segmentIndex % 2) {
-    return true;
-  }
-  return false;
+    if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
+        return true;
+    }
+    else if ('even-segments' === mode && 0 === segmentIndex % 2) {
+        return true;
+    }
+    return false;
 }
 function generateSegments(values, min, max) {
-  const segments = [];
-  const newValues = [...values];
-  newValues.sort((a, b) => a - b);
-  if (
-    0 === newValues.length ||
-    newValues[0] < min ||
-    newValues[newValues.length - 1] > max ||
-    min === max
-  ) {
-    return [];
-  }
-  let lastValue = min;
-  for (let i = 0; i < newValues.length; i++) {
-    segments.push({ left: lastValue, right: newValues[i] });
-    lastValue = newValues[i];
-  }
-  segments.push({ left: lastValue, right: max });
-  return segments;
+    const segments = [];
+    const newValues = [...values];
+    newValues.sort((a, b) => a - b);
+    if (0 === newValues.length ||
+        newValues[0] < min ||
+        newValues[newValues.length - 1] > max ||
+        min === max) {
+        return [];
+    }
+    let lastValue = min;
+    for (let i = 0; i < newValues.length; i++) {
+        segments.push({ left: lastValue, right: newValues[i] });
+        lastValue = newValues[i];
+    }
+    segments.push({ left: lastValue, right: max });
+    return segments;
 }
 /**
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.
  */
 export const Track = (props) => {
-  const {
-    className,
-    trackDisplayMode,
-    sliderMin,
-    sliderMax,
-    values,
-    orientation,
-  } = props;
-  const [segments, setSegments] = React.useState(() =>
-    generateSegments(values, sliderMin, sliderMax),
-  );
-  React.useEffect(() => {
-    setSegments(generateSegments(values, sliderMin, sliderMax));
-  }, [values, sliderMin, sliderMax]);
-  return React.createElement(
-    React.Fragment,
-    null,
-    'none' !== trackDisplayMode &&
-      segments.map((segment, index) => {
-        const lowPercent =
-          segment.left >= sliderMin && sliderMax !== sliderMin
-            ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
-            : 0;
-        const highPercent =
-          segment.right >= sliderMin && sliderMax !== sliderMin
-            ? 100.0 -
-              (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
-            : 100;
-        return React.createElement(
-          React.Fragment,
-          { key: index },
-          shouldDisplaySegment(index, trackDisplayMode)
-            ? React.createElement(Box, {
-                className: cx('iui-slider-track', className),
-                style: {
-                  ...(orientation === 'horizontal'
-                    ? {
-                        insetInlineStart: `${lowPercent}%`,
-                        insetInlineEnd: `${highPercent}%`,
-                      }
-                    : {
-                        insetBlockStart: `${highPercent}%`,
-                        insetBlockEnd: `${lowPercent}%`,
-                      }),
-                },
-              })
-            : null,
-        );
-      }),
-  );
+    const { className, trackDisplayMode, sliderMin, sliderMax, values, orientation, } = props;
+    const [segments, setSegments] = React.useState(() => generateSegments(values, sliderMin, sliderMax));
+    React.useEffect(() => {
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
+    return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
+        segments.map((segment, index) => {
+            const lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+                ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
+                : 0;
+            const highPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+                ? 100.0 -
+                    (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
+                : 100;
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement(Box, { className: cx('iui-slider-track', className), style: {
+                    ...(orientation === 'horizontal'
+                        ? {
+                            insetInlineStart: `${lowPercent}%`,
+                            insetInlineEnd: `${highPercent}%`,
+                        }
+                        : {
+                            insetBlockStart: `${highPercent}%`,
+                            insetBlockEnd: `${lowPercent}%`,
+                        }),
+                } })) : null));
+        })));
 };

package/esm/core/StatusMessage/StatusMessage.js

@@ -13,28 +13,10 @@ import { Icon } from '../Icon/Icon.js';
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 export const StatusMessage = React.forwardRef((props, ref) => {
-  const {
-    children,
-    startIcon: userStartIcon,
-    status,
-    className,
-    iconProps,
-    contentProps,
-    ...rest
-  } = props;
-  const icon = userStartIcon ?? (status && StatusIconMap[status]());
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-status-message', className),
-      'data-iui-status': status,
-      ref: ref,
-      ...rest,
-    },
-    !!icon
-      ? React.createElement(Icon, { 'aria-hidden': true, ...iconProps }, icon)
-      : null,
-    React.createElement(Box, { ...contentProps }, children),
-  );
+    const { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
+    const icon = userStartIcon ?? (status && StatusIconMap[status]());
+    return (React.createElement(Box, { className: cx('iui-status-message', className), "data-iui-status": status, ref: ref, ...rest },
+        !!icon ? (React.createElement(Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
+        React.createElement(Box, { ...contentProps }, children)));
 });
 export default StatusMessage;

package/esm/core/Stepper/Stepper.js

@@ -7,77 +7,21 @@ import * as React from 'react';
 import { Box } from '../utils/index.js';
 import { StepperStep } from './StepperStep.js';
 const defaultStepperLocalization = {
-  stepsCountLabel: (currentStep, totalSteps) =>
-    `Step ${currentStep} of ${totalSteps}:`,
+    stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
 };
 export const Stepper = React.forwardRef((props, ref) => {
-  const {
-    currentStep,
-    steps,
-    type = 'default',
-    localization = defaultStepperLocalization,
-    onStepClick,
-    stepProps,
-    trackContentProps,
-    circleProps,
-    nameProps,
-    labelProps,
-    labelCountProps,
-    ...rest
-  } = props;
-  const boundedCurrentStep = Math.min(
-    Math.max(0, currentStep ?? 0),
-    steps.length - 1,
-  );
-  return React.createElement(
-    Box,
-    { className: 'iui-stepper', ref: ref, ...rest },
-    React.createElement(
-      'ol',
-      null,
-      steps.map((s, index) => {
-        const thisStepProps = stepProps?.(index);
-        const thisTrackContentProps = trackContentProps?.(index);
-        const thisCircleProps = circleProps?.(index);
-        const thisNameProps = nameProps?.(index);
-        return React.createElement(StepperStep, {
-          stepProps: thisStepProps,
-          trackContentProps: thisTrackContentProps,
-          circleProps: thisCircleProps,
-          nameProps: thisNameProps,
-          key: index,
-          index: index,
-          title: type === 'long' ? '' : s.name,
-          currentStepNumber: boundedCurrentStep,
-          totalSteps: steps.length,
-          type: type,
-          onClick: onStepClick,
-          description: s.description,
-        });
-      }),
-    ),
-    type === 'long' &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...labelProps,
-          className: cx('iui-stepper-steps-label', labelProps?.className),
-        },
-        React.createElement(
-          Box,
-          {
-            as: 'span',
-            ...labelCountProps,
-            className: cx(
-              'iui-stepper-steps-label-count',
-              labelCountProps?.className,
-            ),
-          },
-          localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
-        ),
-        steps[boundedCurrentStep].name,
-      ),
-  );
+    const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, stepProps, trackContentProps, circleProps, nameProps, labelProps, labelCountProps, ...rest } = props;
+    const boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
+    return (React.createElement(Box, { className: 'iui-stepper', ref: ref, ...rest },
+        React.createElement("ol", null, steps.map((s, index) => {
+            const thisStepProps = stepProps?.(index);
+            const thisTrackContentProps = trackContentProps?.(index);
+            const thisCircleProps = circleProps?.(index);
+            const thisNameProps = nameProps?.(index);
+            return (React.createElement(StepperStep, { stepProps: thisStepProps, trackContentProps: thisTrackContentProps, circleProps: thisCircleProps, nameProps: thisNameProps, key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description }));
+        })),
+        type === 'long' && (React.createElement(Box, { as: 'div', ...labelProps, className: cx('iui-stepper-steps-label', labelProps?.className) },
+            React.createElement(Box, { as: 'span', ...labelCountProps, className: cx('iui-stepper-steps-label-count', labelCountProps?.className) }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+            steps[boundedCurrentStep].name))));
 });
 export default Stepper;

package/esm/core/Stepper/StepperStep.js

@@ -7,96 +7,33 @@ import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const StepperStep = React.forwardRef((props, forwardedRef) => {
-  const {
-    title,
-    index,
-    currentStepNumber,
-    totalSteps,
-    type,
-    onClick,
-    description,
-    className,
-    style,
-    stepProps,
-    trackContentProps,
-    circleProps,
-    nameProps,
-    ...rest
-  } = props;
-  const isPast = currentStepNumber > index;
-  const isActive = currentStepNumber === index;
-  const isClickable = isPast && !!onClick;
-  const onCompletedClick = () => {
-    if (isClickable) {
-      onClick?.(index);
-    }
-  };
-  const onKeyDown = (e) => {
-    if (e.altKey) {
-      return;
-    }
-    if (!isClickable) {
-      return;
-    }
-    if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
-      onCompletedClick();
-    }
-  };
-  const stepShape = React.createElement(
-    Box,
-    {
-      as: 'li',
-      ...stepProps,
-      className: cx(
-        'iui-stepper-step',
-        { 'iui-current': isActive, 'iui-clickable': isClickable },
-        className,
-        stepProps?.className,
-      ),
-      style: {
-        inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
-        ...style,
-        ...stepProps?.style,
-      },
-      onClick: onCompletedClick,
-      onKeyDown: onKeyDown,
-      'aria-current': isActive ? 'step' : undefined,
-      tabIndex: isClickable ? 0 : undefined,
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...trackContentProps,
-        className: cx(
-          'iui-stepper-track-content',
-          trackContentProps?.className,
-        ),
-      },
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          ...circleProps,
-          className: cx('iui-stepper-circle', circleProps?.className),
-        },
-        index + 1,
-      ),
-    ),
-    type === 'default' &&
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          ...nameProps,
-          className: cx('iui-stepper-step-name', nameProps?.className),
-        },
-        title,
-      ),
-  );
-  return description
-    ? React.createElement(Tooltip, { content: description }, stepShape)
-    : stepShape;
+    const { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, stepProps, trackContentProps, circleProps, nameProps, ...rest } = props;
+    const isPast = currentStepNumber > index;
+    const isActive = currentStepNumber === index;
+    const isClickable = isPast && !!onClick;
+    const onCompletedClick = () => {
+        if (isClickable) {
+            onClick?.(index);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.altKey) {
+            return;
+        }
+        if (!isClickable) {
+            return;
+        }
+        if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
+            onCompletedClick();
+        }
+    };
+    const stepShape = (React.createElement(Box, { as: 'li', ...stepProps, className: cx('iui-stepper-step', { 'iui-current': isActive, 'iui-clickable': isClickable }, className, stepProps?.className), style: {
+            inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
+            ...style,
+            ...stepProps?.style,
+        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'div', ...trackContentProps, className: cx('iui-stepper-track-content', trackContentProps?.className) },
+            React.createElement(Box, { as: 'span', ...circleProps, className: cx('iui-stepper-circle', circleProps?.className) }, index + 1)),
+        type === 'default' && (React.createElement(Box, { as: 'span', ...nameProps, className: cx('iui-stepper-step-name', nameProps?.className) }, title))));
+    return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
 });

package/esm/core/Stepper/WorkflowDiagram.js

@@ -7,26 +7,13 @@ import cx from 'classnames';
 import { Box } from '../utils/index.js';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef(
-  // TODO: Remove this ref cast. ref and rest props should be applied on the same element
-  (props, ref) => {
+// TODO: Remove this ref cast. ref and rest props should be applied on the same element
+(props, ref) => {
     const { steps, className, contentProps, wrapperProps, ...rest } = props;
-    return React.createElement(
-      Box,
-      { as: 'div', ...wrapperProps, ref: ref },
-      React.createElement(
-        Box,
-        { as: 'ol', className: cx('iui-workflow-diagram', className), ...rest },
-        steps.map((s, index) => {
-          const thisContentProps = contentProps?.(index);
-          return React.createElement(WorkflowDiagramStep, {
-            contentProps: thisContentProps,
-            key: index,
-            title: s.name,
-            description: s.description,
-          });
-        }),
-      ),
-    );
-  },
-);
+    return (React.createElement(Box, { as: 'div', ...wrapperProps, ref: ref },
+        React.createElement(Box, { as: 'ol', className: cx('iui-workflow-diagram', className), ...rest }, steps.map((s, index) => {
+            const thisContentProps = contentProps?.(index);
+            return (React.createElement(WorkflowDiagramStep, { contentProps: thisContentProps, key: index, title: s.name, description: s.description }));
+        }))));
+});
 export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -7,26 +7,8 @@ import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, contentProps, ...rest } = props;
-  const stepShape = React.createElement(
-    Box,
-    {
-      as: 'li',
-      className: cx('iui-workflow-diagram-step', className),
-      style: style,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'span',
-        ...contentProps,
-        className: cx('iui-workflow-diagram-content', contentProps?.className),
-      },
-      title,
-    ),
-  );
-  return description
-    ? React.createElement(Tooltip, { content: description }, stepShape)
-    : stepShape;
+    const { title, description, className, style, contentProps, ...rest } = props;
+    const stepShape = (React.createElement(Box, { as: 'li', className: cx('iui-workflow-diagram-step', className), style: style, ...rest },
+        React.createElement(Box, { as: 'span', ...contentProps, className: cx('iui-workflow-diagram-content', contentProps?.className) }, title)));
+    return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
 };