@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/InformationPanel/InformationPanel.js

@@ -27,76 +27,41 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * </InformationPanelWrapper>
  */
 export const InformationPanel = React.forwardRef((props, ref) => {
-  const {
-    className,
-    isOpen = false,
-    orientation = 'vertical',
-    resizable = true,
-    children,
-    ...rest
-  } = props;
-  const infoPanelRef = React.useRef(null);
-  const refs = useMergedRefs(ref, infoPanelRef);
-  const startResize = (e) => {
-    if (!infoPanelRef.current) {
-      return;
-    }
-    if (e.button != undefined && e.button !== 0) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    infoPanelRef.current.ownerDocument.addEventListener(
-      'pointermove',
-      onResize,
-    );
-    infoPanelRef.current.ownerDocument.addEventListener(
-      'pointerup',
-      () =>
-        infoPanelRef.current?.ownerDocument.removeEventListener(
-          'pointermove',
-          onResize,
-        ),
-      { once: true },
-    );
-  };
-  const onResize = React.useCallback(
-    (e) => {
-      e.preventDefault();
-      if (!infoPanelRef.current) {
-        return;
-      }
-      const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
-      if (orientation === 'vertical') {
-        infoPanelRef.current.style.width = `${right - e.clientX}px`;
-      } else {
-        infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
-      }
-    },
-    [orientation],
-  );
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-information-panel',
-        {
-          'iui-right': orientation === 'vertical',
-          'iui-bottom': orientation === 'horizontal',
-          'iui-visible': isOpen,
-        },
-        className,
-      ),
-      ref: refs,
-      ...rest,
-    },
-    resizable &&
-      React.createElement(
-        Box,
-        { className: 'iui-resizer', onPointerDown: startResize },
-        React.createElement(Box, { className: 'iui-resizer-bar' }),
-      ),
-    children,
-  );
+    const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
+    const infoPanelRef = React.useRef(null);
+    const refs = useMergedRefs(ref, infoPanelRef);
+    const startResize = (e) => {
+        if (!infoPanelRef.current) {
+            return;
+        }
+        if (e.button != undefined && e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
+        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), { once: true });
+    };
+    const onResize = React.useCallback((e) => {
+        e.preventDefault();
+        if (!infoPanelRef.current) {
+            return;
+        }
+        const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+        if (orientation === 'vertical') {
+            infoPanelRef.current.style.width = `${right - e.clientX}px`;
+        }
+        else {
+            infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
+        }
+    }, [orientation]);
+    return (React.createElement(Box, { className: cx('iui-information-panel', {
+            'iui-right': orientation === 'vertical',
+            'iui-bottom': orientation === 'horizontal',
+            'iui-visible': isOpen,
+        }, className), ref: refs, ...rest },
+        resizable && (React.createElement(Box, { className: 'iui-resizer', onPointerDown: startResize },
+            React.createElement(Box, { className: 'iui-resizer-bar' }))),
+        children));
 });
 export default InformationPanel;

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -28,22 +28,8 @@ import { Box } from '../utils/index.js';
  *   <Input id='path-input' value='/Shared/Music/' />
  * </InformationPanelContent>
  */
-export const InformationPanelContent = React.forwardRef(
-  (props, forwardedRef) => {
+export const InformationPanelContent = React.forwardRef((props, forwardedRef) => {
     const { className, displayStyle = 'default', children, ...rest } = props;
-    return React.createElement(
-      Box,
-      {
-        className: cx(
-          'iui-information-body-content',
-          { 'iui-inline': displayStyle === 'inline' },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    );
-  },
-);
+    return (React.createElement(Box, { className: cx('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ref: forwardedRef, ...rest }, children));
+});
 export default InformationPanelContent;

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -22,37 +22,13 @@ import { SvgCloseSmall, Box } from '../utils/index.js';
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-export const InformationPanelHeader = React.forwardRef(
-  (props, forwardedRef) => {
+export const InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    return React.createElement(
-      Box,
-      {
-        className: cx('iui-information-header', className),
-        ref: forwardedRef,
-        ...rest,
-      },
-      React.createElement(
-        Box,
-        { as: 'span', className: 'iui-information-header-label' },
-        children,
-      ),
-      React.createElement(
-        Box,
-        { className: 'iui-information-header-actions' },
-        actions,
-        onClose &&
-          React.createElement(
-            IconButton,
-            {
-              styleType: 'borderless',
-              onClick: onClose,
-              'aria-label': 'Close',
-            },
-            React.createElement(SvgCloseSmall, { 'aria-hidden': true }),
-          ),
-      ),
-    );
-  },
-);
+    return (React.createElement(Box, { className: cx('iui-information-header', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'span', className: 'iui-information-header-label' }, children),
+        React.createElement(Box, { className: 'iui-information-header-actions' },
+            actions,
+            onClose && (React.createElement(IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                React.createElement(SvgCloseSmall, { "aria-hidden": true }))))));
+});
 export default InformationPanelHeader;

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -12,7 +12,5 @@ import { polymorphic } from '../utils/index.js';
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-export const InformationPanelWrapper = polymorphic.div(
-  'iui-information-panel-wrapper',
-);
+export const InformationPanelWrapper = polymorphic.div('iui-information-panel-wrapper');
 export default InformationPanelWrapper;

package/esm/core/Input/Input.js

@@ -12,17 +12,9 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-  const { size, htmlSize, status, className, ...rest } = props;
-  const inputRef = React.useRef(null);
-  const refs = useMergedRefs(inputRef, ref);
-  return React.createElement(Box, {
-    as: 'input',
-    className: cx('iui-input', className),
-    'data-iui-size': size,
-    'data-iui-status': status,
-    size: htmlSize,
-    ref: refs,
-    ...rest,
-  });
+    const { size, htmlSize, status, className, ...rest } = props;
+    const inputRef = React.useRef(null);
+    const refs = useMergedRefs(inputRef, ref);
+    return (React.createElement(Box, { as: 'input', className: cx('iui-input', className), "data-iui-size": size, "data-iui-status": status, size: htmlSize, ref: refs, ...rest }));
 });
 export default Input;

package/esm/core/InputGrid/InputGrid.js

@@ -19,17 +19,8 @@ import cx from 'classnames';
  * </InputGrid>
  */
 export const InputGrid = React.forwardRef((props, ref) => {
-  const { children, className, labelPlacement = undefined, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-input-grid', className),
-      'data-iui-label-placement': labelPlacement,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
+    const { children, className, labelPlacement = undefined, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-input-grid', className), "data-iui-label-placement": labelPlacement, ref: ref, ...rest }, children));
 });
 //-------------------------------------------------------------------------------
 export default InputGrid;

package/esm/core/InputGroup/InputGroup.js

@@ -24,62 +24,21 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
  * </InputGroup>
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    disabled = false,
-    displayStyle = 'default',
-    label,
-    message,
-    status,
-    svgIcon,
-    required = false,
-    labelProps,
-    messageProps,
-    innerProps,
-    ...rest
-  } = props;
-  const icon = () => {
-    if (svgIcon) {
-      return React.cloneElement(svgIcon, { 'aria-hidden': true });
-    }
-    if (status && message) {
-      return React.cloneElement(StatusIconMap[status](), {
-        'aria-hidden': true,
-      });
-    }
-    return undefined;
-  };
-  return React.createElement(
-    InputGrid,
-    {
-      ref: forwardedRef,
-      as: 'div',
-      labelPlacement: displayStyle,
-      className: cx('iui-input-group-wrapper', className),
-      ...rest,
-    },
-    label &&
-      React.createElement(
-        Label,
-        { as: 'label', required: required, disabled: disabled, ...labelProps },
-        label,
-      ),
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...innerProps,
-        className: cx('iui-input-group', innerProps?.className),
-      },
-      children,
-    ),
-    (message || status || svgIcon) &&
-      React.createElement(
-        StatusMessage,
-        { startIcon: icon(), status: status, ...messageProps },
-        displayStyle !== 'inline' && message,
-      ),
-  );
+    const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
+    const icon = () => {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return React.cloneElement(StatusIconMap[status](), {
+                'aria-hidden': true,
+            });
+        }
+        return undefined;
+    };
+    return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), ...rest },
+        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className) }, children),
+        (message || status || svgIcon) && (React.createElement(StatusMessage, { startIcon: icon(), status: status, ...messageProps }, displayStyle !== 'inline' && message))));
 });
 export default InputGroup;

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -7,49 +7,21 @@ import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
-  const { children, size, isDisabled, ...rest } = props;
-  return React.createElement(
-    InputWithDecorationsContext.Provider,
-    { value: { size, isDisabled } },
-    React.createElement(
-      InputFlexContainer,
-      { isDisabled: isDisabled, size: size, ref: ref, ...rest },
-      children,
-    ),
-  );
+    const { children, size, isDisabled, ...rest } = props;
+    return (React.createElement(InputWithDecorationsContext.Provider, { value: { size, isDisabled } },
+        React.createElement(InputFlexContainer, { isDisabled: isDisabled, size: size, ref: ref, ...rest }, children)));
 });
 //-------------------------------------------------------------------------------
 const InputWithDecorationsInput = React.forwardRef((props, ref) => {
-  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
-  const { size: contextSize, isDisabled } = useSafeContext(
-    InputWithDecorationsContext,
-  );
-  return React.createElement(Box, {
-    as: 'input',
-    ref: ref,
-    'data-iui-size': size ?? contextSize,
-    disabled: localDisabled ?? isDisabled,
-    id: idProp,
-    ...rest,
-  });
+    const { id: idProp, size, disabled: localDisabled, ...rest } = props;
+    const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
+    return (React.createElement(Box, { as: 'input', ref: ref, "data-iui-size": size ?? contextSize, disabled: localDisabled ?? isDisabled, id: idProp, ...rest }));
 });
 //-------------------------------------------------------------------------------
 const InputWithDecorationsButton = React.forwardRef((props, ref) => {
-  const { children, size, disabled: localDisabled, ...rest } = props;
-  const { size: contextSize, isDisabled } = useSafeContext(
-    InputWithDecorationsContext,
-  );
-  return React.createElement(
-    IconButton,
-    {
-      ref: ref,
-      size: size ?? contextSize,
-      styleType: 'borderless',
-      disabled: localDisabled ?? isDisabled,
-      ...rest,
-    },
-    children,
-  );
+    const { children, size, disabled: localDisabled, ...rest } = props;
+    const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
+    return (React.createElement(IconButton, { ref: ref, size: size ?? contextSize, styleType: 'borderless', disabled: localDisabled ?? isDisabled, ...rest }, children));
 });
 /**
  * Input component with various additional decorations.
@@ -65,9 +37,7 @@ const InputWithDecorationsButton = React.forwardRef((props, ref) => {
  *    </InputWithDecorations.Icon>
  * </InputWithDecorations>
  */
-export const InputWithDecorations = Object.assign(
-  InputWithDecorationsComponent,
-  {
+export const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
     /**
      * Subcomponent to include input in your InputWithDecorations
      */
@@ -76,5 +46,4 @@ export const InputWithDecorations = Object.assign(
      * Subcomponent to include button in your InputWithDecorations
      */
     Button: InputWithDecorationsButton,
-  },
-);
+});

package/esm/core/Label/Label.js

@@ -13,31 +13,10 @@ import { Box } from '../utils/index.js';
  * <Input id='name-input' />
  */
 export const Label = React.forwardRef((props, forwardedRef) => {
-  const {
-    displayStyle = 'block',
-    required,
-    disabled,
-    className,
-    children,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'label',
-      className: cx(
-        'iui-input-label',
-        {
-          'iui-inline': displayStyle === 'inline',
-          'iui-required': required,
-        },
-        className,
-      ),
-      'data-iui-disabled': disabled ? true : undefined,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { displayStyle = 'block', required, disabled, className, children, ...rest } = props;
+    return (React.createElement(Box, { as: 'label', className: cx('iui-input-label', {
+            'iui-inline': displayStyle === 'inline',
+            'iui-required': required,
+        }, className), "data-iui-disabled": disabled ? true : undefined, ref: forwardedRef, ...rest }, children));
 });
 export default Label;

package/esm/core/LabeledInput/LabeledInput.js

@@ -19,68 +19,15 @@ import { Icon } from '../Icon/Icon.js';
  * <LabeledInput status='negative' label='Negative' />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
-  const uid = useId();
-  const {
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    iconProps,
-    inputWrapperProps,
-    displayStyle = 'default',
-    required = false,
-    id = uid,
-    ...rest
-  } = props;
-  const icon = svgIcon ?? (status && StatusIconMap[status]());
-  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-  return React.createElement(
-    InputGrid,
-    { labelPlacement: displayStyle, ...wrapperProps },
-    label &&
-      React.createElement(
-        Label,
-        {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          htmlFor: id,
-          ...labelProps,
-        },
-        label,
-      ),
-    React.createElement(
-      InputWithDecorations,
-      { status: status, isDisabled: disabled, ...inputWrapperProps },
-      React.createElement(InputWithDecorations.Input, {
-        disabled: disabled,
-        required: required,
-        id: id,
-        ref: ref,
-        ...rest,
-      }),
-      shouldShowIcon &&
-        React.createElement(
-          Icon,
-          { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
-          icon,
-        ),
-    ),
-    typeof message === 'string'
-      ? React.createElement(
-          StatusMessage,
-          {
-            status: status,
-            iconProps: iconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
+    const uid = useId();
+    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, id = uid, ...rest } = props;
+    const icon = svgIcon ?? (status && StatusIconMap[status]());
+    const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label)),
+        React.createElement(InputWithDecorations, { status: status, isDisabled: disabled, ...inputWrapperProps },
+            React.createElement(InputWithDecorations.Input, { disabled: disabled, required: required, id: id, ref: ref, ...rest }),
+            shouldShowIcon && (React.createElement(Icon, { fill: !svgIcon ? status : undefined, padded: true, ...iconProps }, icon))),
+        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledInput;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -43,72 +43,23 @@ import { Icon } from '../Icon/Icon.js';
  * />
  */
 export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    displayStyle = 'default',
-    style,
-    required = false,
-    triggerProps,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    messageIconProps,
-    ...rest
-  } = props;
-  const labelId = `${useId()}-label`;
-  const icon = () => {
-    if (svgIcon) {
-      return React.createElement(Icon, null, svgIcon);
-    }
-    if (status && message) {
-      return StatusIconMap[status]();
-    }
-    return undefined;
-  };
-  return React.createElement(
-    InputGrid,
-    { labelPlacement: displayStyle, ...wrapperProps },
-    label &&
-      React.createElement(
-        Label,
-        {
-          as: 'div',
-          required: required,
-          disabled: disabled,
-          id: labelId,
-          ...labelProps,
-        },
-        label,
-      ),
-    React.createElement(Select, {
-      disabled: disabled,
-      className: className,
-      style: style,
-      status: status,
-      ...rest,
-      ref: forwardedRef,
-      triggerProps: {
-        'aria-labelledby': labelId,
-        ...triggerProps,
-      },
-    }),
-    typeof message === 'string'
-      ? React.createElement(
-          StatusMessage,
-          {
-            status: status,
-            startIcon: displayStyle === 'default' ? icon() : undefined,
-            iconProps: messageIconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, triggerProps, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
+    const labelId = `${useId()}-label`;
+    const icon = () => {
+        if (svgIcon) {
+            return React.createElement(Icon, null, svgIcon);
+        }
+        if (status && message) {
+            return StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, id: labelId, ...labelProps }, label)),
+        React.createElement(Select, { disabled: disabled, className: className, style: style, status: status, ...rest, ref: forwardedRef, triggerProps: {
+                'aria-labelledby': labelId,
+                ...triggerProps,
+            } }),
+        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: displayStyle === 'default' ? icon() : undefined, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -28,16 +28,10 @@ import { LabeledInput } from '../LabeledInput/LabeledInput.js';
  * />
  */
 export const LabeledTextarea = React.forwardRef((props, forwardedRef) => {
-  return (
+    return (
     // ref types don't match but it's internal, so ts-ignore is ok here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    React.createElement(LabeledInput, {
-      as: 'textarea',
-      rows: 3,
-      ref: forwardedRef,
-      ...props,
-    })
-  );
+    React.createElement(LabeledInput, { as: 'textarea', rows: 3, ref: forwardedRef, ...props }));
 });
 export default LabeledTextarea;