@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/esm/core/ProgressIndicators/{ProgressLinear/ProgressLinear.js → ProgressLinear.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../../utils/index.js';
+import { Box, getBoundedValue } from '../utils/index.js';
 /**
  * Shows progress on a linear bar
  * @example
@@ -21,16 +21,37 @@ import { Box } from '../../utils/index.js';
  * <ProgressLinear status='negative' />
  */
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
-    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, ...rest } = props;
-    const boundedValue = Math.min(100, Math.max(0, value));
-    return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', {
-            [`iui-${status}`]: !!status,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-track' },
-            React.createElement(Box, { className: cx('iui-fill', {
-                    'iui-determinate': !indeterminate && isAnimated,
-                    'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : `${boundedValue}%` } })),
-        labels.length > 0 && (React.createElement(Box, { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+  const {
+    value,
+    indeterminate = value === undefined,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    ...rest
+  } = props;
+  const boundedValue = getBoundedValue(value ?? 100, 0, 100);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-linear', className),
+      ref: forwardedRef,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      'data-iui-animated': isAnimated ? 'true' : undefined,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
+    },
+    labels.length > 0 &&
+      React.createElement(
+        Box,
+        { className: 'iui-progress-indicator-linear-label' },
+        labels.map((label, index) =>
+          React.createElement('span', { key: index }, label),
+        ),
+      ),
+  );
 });
 export default ProgressLinear;

package/esm/core/ProgressIndicators/{ProgressRadial/ProgressRadial.d.ts → ProgressRadial.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressRadialProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
      */

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import * as React from 'react';
+import {
+  SvgCheckmarkSmall,
+  SvgImportantSmall,
+  Box,
+  getBoundedValue,
+} from '../utils/index.js';
+/**
+ * Circular Progress Indicator
+ * @example
+ * Basic
+ * <ProgressRadial value={50} />
+ * Indeterminate
+ * <ProgressRadial indeterminate />
+ * Positive / Negative
+ * <ProgressRadial status='positive' />
+ * <ProgressRadial status='negative' />
+ * Centered Content
+ * <ProgressRadial value={63}>63</ProgressRadial>
+ * Small
+ * <ProgressRadial size={'small'} indeterminate/>
+ */
+export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    status,
+    size,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const statusMap = {
+    negative: React.createElement(SvgImportantSmall, { 'aria-hidden': true }),
+    positive: React.createElement(SvgCheckmarkSmall, { 'aria-hidden': true }),
+  };
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-radial', className),
+      'data-iui-size': size,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      ref: forwardedRef,
+      style: {
+        ...(value !== undefined && {
+          '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
+        }),
+        ...style,
+      },
+      ...rest,
+    },
+    size !== 'x-small'
+      ? children ?? (!!status ? statusMap[status] : null)
+      : null,
+  );
+});
+export default ProgressRadial;

package/esm/core/ProgressIndicators/index.d.ts

@@ -1,2 +1,2 @@
-export { ProgressLinear } from './ProgressLinear/index.js';
-export { ProgressRadial } from './ProgressRadial/index.js';
+export { ProgressLinear } from './ProgressLinear.js';
+export { ProgressRadial } from './ProgressRadial.js';

package/esm/core/ProgressIndicators/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { ProgressLinear } from './ProgressLinear/index.js';
-export { ProgressRadial } from './ProgressRadial/index.js';
+export { ProgressLinear } from './ProgressLinear.js';
+export { ProgressRadial } from './ProgressRadial.js';

package/esm/core/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioProps = {
+type RadioProps = {
     /**
      * Label of the radio.
      */
@@ -10,10 +10,13 @@ declare type RadioProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Set focus on radio element.
-     * @default false
+     * Passes props to Radio label.
      */
-    setFocus?: boolean;
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to Radio wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
 };
 /**
  * Basic radio input component

package/esm/core/Radio/Radio.js

@@ -16,17 +16,51 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Radio status='negative' label='Negative' />
  */
 export const Radio = React.forwardRef((props, ref) => {
-    const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    const radio = (React.createElement(Box, { as: 'input', className: cx('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
-    return !label ? (radio) : (React.createElement(Box, { as: 'label', className: cx('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
+  const {
+    className,
+    disabled = false,
+    label,
+    status,
+    labelProps,
+    wrapperProps,
+    style,
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  const radio = React.createElement(Box, {
+    as: 'input',
+    className: cx('iui-radio', className),
+    style: style,
+    disabled: disabled,
+    type: 'radio',
+    ref: refs,
+    ...rest,
+  });
+  return !label
+    ? radio
+    : React.createElement(
+        Box,
+        {
+          as: 'label',
+          ...wrapperProps,
+          className: cx(
+            'iui-radio-wrapper',
+            { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
+            wrapperProps?.className,
+          ),
+        },
         radio,
-        label && (React.createElement(Box, { as: 'span', className: 'iui-radio-label' }, label))));
+        label &&
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              ...labelProps,
+              className: cx('iui-radio-label', labelProps?.className),
+            },
+            label,
+          ),
+      );
 });
 export default Radio;

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioTileProps = {
+type RadioTileProps = {
     /**
      * Icon to be used.
      */
@@ -14,10 +14,21 @@ declare type RadioTileProps = {
      */
     description?: React.ReactNode;
     /**
-     * Set focus on radio tile element.
-     * @default false
+     * Passes props to tile wrapper.
      */
-    setFocus?: boolean;
+    wrapperProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes props to tile icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to tile label.
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to tile sublabel.
+     */
+    subLabelProps?: React.ComponentProps<'div'>;
 };
 /**
  * RadioTile component to be used in RadioTileGroup component

package/esm/core/RadioTiles/RadioTile.js

@@ -11,19 +11,67 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
 export const RadioTile = React.forwardRef((props, ref) => {
-    const { icon, label, description, setFocus = false, className, style, ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(Box, { as: 'label', className: cx('iui-radio-tile', className), style: style },
-        React.createElement(Box, { as: 'input', className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
-        React.createElement(Box, { className: 'iui-radio-tile-content' },
-            icon && (React.createElement(Box, { as: 'span', className: 'iui-radio-tile-icon', "aria-hidden": true }, icon)),
-            label && React.createElement(Box, { className: 'iui-radio-tile-label' }, label),
-            description && (React.createElement(Box, { className: 'iui-radio-tile-sublabel' }, description)))));
+  const {
+    icon,
+    label,
+    description,
+    className,
+    wrapperProps,
+    iconProps,
+    labelProps,
+    subLabelProps,
+    style,
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = useMergedRefs(inputElementRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      ...wrapperProps,
+      className: cx('iui-radio-tile', wrapperProps?.className),
+    },
+    React.createElement(Box, {
+      as: 'input',
+      ref: refs,
+      className: cx('iui-radio-tile-input', className),
+      style: style,
+      type: 'radio',
+      ...rest,
+    }),
+    icon &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...iconProps,
+          className: cx('iui-radio-tile-icon', iconProps?.className),
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...labelProps,
+          className: cx('iui-radio-tile-label', labelProps?.className),
+        },
+        label,
+      ),
+    description &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...subLabelProps,
+          className: cx('iui-radio-tile-sublabel', subLabelProps?.className),
+        },
+        description,
+      ),
+  );
 });
 export default RadioTile;

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
+type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -14,8 +14,15 @@ import { Box } from '../utils/index.js';
  * </RadioTileGroup>
  */
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-    const { children, label, ...rest } = props;
-    return (React.createElement(InputGroup, { label: label, ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-radio-tile-container' }, children)));
+  const { children, label, ...rest } = props;
+  return React.createElement(
+    InputGroup,
+    { label: label, ref: forwardedRef, ...rest },
+    React.createElement(
+      Box,
+      { className: 'iui-radio-tile-container' },
+      children,
+    ),
+  );
 });
 export default RadioTileGroup;

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
-declare type SearchBoxOwnProps = {
+type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.
      * @default false
@@ -75,7 +75,7 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
     ExpandedState: {
         ({ children, }: {
             children: React.ReactNode;
-        }): JSX.Element | null;
+        }): React.JSX.Element | null;
         displayName: string;
     };
     /**
@@ -84,7 +84,7 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
     CollapsedState: {
         ({ children, }: {
             children?: React.ReactNode;
-        }): JSX.Element | null;
+        }): React.JSX.Element | null;
         displayName: string;
     };
 };