@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/cjs/core/InputGroup/InputGroup.js

@@ -1,94 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InputGroup', {
-  enumerable: true,
-  get: function () {
-    return InputGroup;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _InputGrid = require('../InputGrid/InputGrid.js');
-const _Label = require('../Label/Label.js');
-const _StatusMessage = require('../StatusMessage/StatusMessage.js');
-const InputGroup = _react.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    children,
-    disabled = false,
-    displayStyle = 'default',
-    label,
-    status,
-    required = false,
-    labelProps,
-    innerProps,
-    message,
-    svgIcon,
-    messageProps,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _InputGrid.InputGrid,
-    {
-      ref: forwardedRef,
-      as: 'div',
-      labelPlacement: displayStyle,
-      className: (0, _classnames.default)('iui-input-group-wrapper', className),
-      'data-iui-status': status,
-      ...rest,
-    },
-    label &&
-      _react.createElement(
-        _Label.Label,
-        {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          ...labelProps,
-        },
-        label,
-      ),
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'div',
-        ...innerProps,
-        className: (0, _classnames.default)(
-          'iui-input-group',
-          innerProps?.className,
-        ),
-      },
-      children,
-    ),
-    _react.createElement(BottomMessage, {
-      message: message,
-      status: status,
-      svgIcon: svgIcon,
-      displayStyle: displayStyle,
-      messageProps: messageProps,
-    }),
-  );
-});
-const BottomMessage = (props) => {
-  let { message, status, svgIcon, displayStyle, messageProps } = props;
-  if (message && 'string' != typeof message) return message;
-  if (message || status || svgIcon)
-    return _react.createElement(
-      _StatusMessage.StatusMessage,
-      {
-        iconProps: {
-          'aria-hidden': true,
-        },
-        startIcon: svgIcon,
-        status: status,
-        ...messageProps,
-      },
-      'inline' !== displayStyle && message,
-    );
-  return null;
-};

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { InputProps } from '../Input/Input.js';
-/**
- * Input component with various additional decorations.
- * You can add icons, buttons and other various subcomponents to it.
- *
- * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
- *
- * @example
- * <InputWithDecorations>
- *    <InputWithDecorations.Input />
- *    <InputWithDecorations.Icon>
- *      <SvgAdd />
- *    </InputWithDecorations.Icon>
- * </InputWithDecorations>
- */
-export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "as" | keyof import("../../utils/index.js").InputFlexContainerProps> & import("../../utils/index.js").InputFlexContainerProps & {
-    as?: "div" | undefined;
-}> & {
-    /**
-     * Subcomponent to include input in your InputWithDecorations
-     */
-    Input: PolymorphicForwardRefComponent<"input", InputProps>;
-    /**
-     * Subcomponent to include button in your InputWithDecorations
-     *
-     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
-     * in `InputWithDecorations`.
-     */
-    Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
-        styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
-    } & {
-        as?: "button" | undefined;
-    }>;
-    /**
-     * Subcomponent to include button in your InputWithDecorations.
-     *
-     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
-     * in `InputWithDecorations`.
-     */
-    Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
-        padded?: import("../Icon/Icon.js").IconProps["padded"];
-    }>;
-};

package/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -1,72 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InputWithDecorations', {
-  enumerable: true,
-  get: function () {
-    return InputWithDecorations;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const InputWithDecorationsContext = _react.createContext(void 0);
-const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
-  let { children, size, isDisabled, ...rest } = props;
-  return _react.createElement(
-    InputWithDecorationsContext.Provider,
-    {
-      value: {
-        size,
-        isDisabled,
-      },
-    },
-    _react.createElement(
-      _index.InputFlexContainer,
-      {
-        isDisabled: isDisabled,
-        size: size,
-        ref: ref,
-        ...rest,
-      },
-      children,
-    ),
-  );
-});
-const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
-  let { id: idProp, size, disabled: localDisabled, ...rest } = props;
-  let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
-    InputWithDecorationsContext,
-  );
-  return _react.createElement(_index.Box, {
-    as: 'input',
-    ref: ref,
-    'data-iui-size': size ?? contextSize,
-    disabled: localDisabled ?? isDisabled,
-    id: idProp,
-    ...rest,
-  });
-});
-const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
-  let { children, size, disabled: localDisabled, ...rest } = props;
-  let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
-    InputWithDecorationsContext,
-  );
-  return _react.createElement(
-    _index.InputFlexContainerButton,
-    {
-      ref: ref,
-      size: size ?? contextSize,
-      disabled: localDisabled ?? isDisabled,
-      ...rest,
-    },
-    children,
-  );
-});
-const InputWithDecorationsIcon = _index.InputFlexContainerIcon;
-const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
-  Input: InputWithDecorationsInput,
-  Button: InputWithDecorationsButton,
-  Icon: InputWithDecorationsIcon,
-});

package/cjs/core/Label/Label.d.ts

@@ -1,29 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type LabelOwnProps = {
-    /**
-     * Set the display style of the label.
-     *   - 'block' - default, no extra spacing (label and input will be on separate lines)
-     *   - 'inline' - label gets a right margin so it can be placed inline
-     * @default 'block'
-     */
-    displayStyle?: 'block' | 'inline';
-    /**
-     * Set to true if the label's associated input is required.
-     * This adds an asterisk next to the label text.
-     */
-    required?: boolean;
-    /**
-     * Adds disabled styling to a label.
-     * @default false
-     */
-    disabled?: boolean;
-};
-/**
- * A standalone label to be used with input components (using `htmlFor`).
- * Can be rendered as any element, e.g. span, using the `as` prop.
- * @example
- * <Label htmlFor='name-input'>Name</Label>
- * <Input id='name-input' />
- */
-export declare const Label: PolymorphicForwardRefComponent<"label", LabelOwnProps>;
-export {};

package/cjs/core/Label/Label.js

@@ -1,43 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Label', {
-  enumerable: true,
-  get: function () {
-    return Label;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const Label = _react.forwardRef((props, forwardedRef) => {
-  let {
-    displayStyle = 'block',
-    required,
-    disabled,
-    className,
-    children,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'label',
-      className: (0, _classnames.default)(
-        'iui-input-label',
-        {
-          'iui-inline': 'inline' === displayStyle,
-          'iui-required': required,
-        },
-        className,
-      ),
-      'data-iui-disabled': !!disabled || void 0,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Input } from '../Input/Input.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { InputGrid } from '../InputGrid/InputGrid.js';
-import { Icon } from '../Icon/Icon.js';
-export type LabeledInputProps = {
-    /**
-     * Label of the input.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the input. Does not apply to 'inline' input.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the input.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | null;
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: React.ComponentProps<typeof InputGrid>;
-    /**
-     * Set display style of label.
-     * Supported values:
-     * - 'default' - label appears above input.
-     * - 'inline' - appears in the same line as input.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: React.ComponentPropsWithRef<'div'>;
-    /**
-     * Passes properties for icon.
-     */
-    iconProps?: React.ComponentProps<typeof Icon>;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.ComponentProps<'label'>;
-    /**
-     *  Passes properties for input wrapper.
-     */
-    inputWrapperProps?: React.ComponentPropsWithRef<'div'>;
-} & React.ComponentProps<typeof Input>;
-/**
- * Basic labeled input component
- * @example
- * <LabeledInput label='My label' />
- * <LabeledInput disabled label='My label' />
- * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' />
- */
-export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;

package/cjs/core/LabeledInput/LabeledInput.js

@@ -1,92 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'LabeledInput', {
-  enumerable: true,
-  get: function () {
-    return LabeledInput;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _Input = require('../Input/Input.js');
-const _index = require('../../utils/index.js');
-const _InputGrid = require('../InputGrid/InputGrid.js');
-const _StatusMessage = require('../StatusMessage/StatusMessage.js');
-const _Label = require('../Label/Label.js');
-const _Icon = require('../Icon/Icon.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const LabeledInput = _react.forwardRef((props, ref) => {
-  let {
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    iconProps,
-    inputWrapperProps,
-    displayStyle = 'default',
-    required = false,
-    ...rest
-  } = props;
-  let icon = svgIcon ?? (status && _index.StatusIconMap[status]());
-  let shouldShowIcon = null !== svgIcon && (svgIcon || (status && !message));
-  return _react.createElement(
-    _InputGrid.InputGrid,
-    {
-      labelPlacement: displayStyle,
-      'data-iui-status': status,
-      ...wrapperProps,
-    },
-    label &&
-      _react.createElement(
-        _Label.Label,
-        {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          ...labelProps,
-        },
-        label,
-      ),
-    _react.createElement(
-      _index.InputWithIcon,
-      inputWrapperProps,
-      _react.createElement(_Input.Input, {
-        disabled: disabled,
-        required: required,
-        ref: ref,
-        ...rest,
-      }),
-      shouldShowIcon &&
-        _react.createElement(
-          _Icon.Icon,
-          {
-            fill: status,
-            ...iconProps,
-            className: (0, _classnames.default)(
-              'iui-end-icon',
-              iconProps?.className,
-            ),
-          },
-          icon,
-        ),
-    ),
-    'string' == typeof message
-      ? _react.createElement(
-          _StatusMessage.StatusMessage,
-          {
-            status: status,
-            iconProps: iconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
-});

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import type { SelectProps } from '../Select/Select.js';
-import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import { InputGrid } from '../InputGrid/InputGrid.js';
-import { Icon } from '../Icon/Icon.js';
-export type LabeledSelectProps<T> = {
-    /**
-     * Label of the select.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the select. Does not apply to 'inline' select.
-     *
-     * @example
-     * <caption>strings</caption>
-     * <LabeledSelect message='Positive Message' … />
-     *
-     * @example
-     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
-     * <LabeledSelect
-     *   status="positive"
-     *   message={
-     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
-     *       Help message
-     *     </StatusMessage>
-     *   }
-     *   …
-     * />
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the select.
-     * @default ''
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-     *
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element;
-    /**
-     * If true, shows a red asterisk.
-     *
-     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: React.ComponentProps<typeof InputGrid>;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: React.ComponentPropsWithRef<'div'>;
-    /**
-     * Passes properties for message icon.
-     */
-    messageIconProps?: React.ComponentProps<typeof Icon>;
-} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T> & {
-    /**
-     * LabeledSelect does not support `styleType`.
-     */
-    styleType?: never;
-};
-/**
- * Labeled select component to select value from options.
- * @example
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Help Message'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Positive Message'
- *   status='positive'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Custom Message'
- *   svgIcon={<SvgCamera />}
- * />
- */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -1,74 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'LabeledSelect', {
-  enumerable: true,
-  get: function () {
-    return LabeledSelect;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _Select = require('../Select/Select.js');
-const _StatusMessage = require('../StatusMessage/StatusMessage.js');
-const _InputGrid = require('../InputGrid/InputGrid.js');
-const _Label = require('../Label/Label.js');
-const LabeledSelect = _react.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    disabled = false,
-    label,
-    message,
-    status,
-    svgIcon,
-    displayStyle = 'default',
-    style,
-    required = false,
-    wrapperProps,
-    labelProps,
-    messageContentProps,
-    messageIconProps,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _InputGrid.InputGrid,
-    {
-      labelPlacement: displayStyle,
-      'data-iui-status': status,
-      ...wrapperProps,
-    },
-    label &&
-      _react.createElement(
-        _Label.Label,
-        {
-          as: 'div',
-          required: required,
-          disabled: disabled,
-          ...labelProps,
-        },
-        label,
-      ),
-    _react.createElement(_Select.Select, {
-      disabled: disabled,
-      className: className,
-      style: style,
-      required: props.native ? required : void 0,
-      ...rest,
-      ref: forwardedRef,
-      styleType: 'default',
-    }),
-    'string' == typeof message
-      ? _react.createElement(
-          _StatusMessage.StatusMessage,
-          {
-            status: status,
-            startIcon: svgIcon,
-            iconProps: messageIconProps,
-            contentProps: messageContentProps,
-          },
-          message,
-        )
-      : message,
-  );
-});