@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/cjs/core/InformationPanel/InformationPanelContent.js

@@ -1,33 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InformationPanelContent', {
-  enumerable: true,
-  get: function () {
-    return InformationPanelContent;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const InformationPanelContent = _react.forwardRef((props, forwardedRef) => {
-  let { className, displayStyle = 'default', children, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-information-body-content',
-        {
-          'iui-inline': 'inline' === displayStyle,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});

package/cjs/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type InformationPanelHeaderProps = {
-    /**
-     * Callback fired when close icon is clicked.
-     *
-     * If not specified, close icon will not be shown.
-     */
-    onClose?: (e: React.MouseEvent) => void;
-    /**
-     * Custom header action buttons shown alongside the close button.
-     * @example
-     * actions={(
-     *   <>
-     *     <IconButton styleType='borderless' onClick={() => {}}><SvgEdit /></IconButton>
-     *     <IconButton styleType='borderless' onClick={() => {}}><SvgDelete /></IconButton>
-     *   </>
-     * )}
-     */
-    actions?: React.ReactNode;
-    /**
-     * Content of the panel header.
-     */
-    children?: React.ReactNode;
-};
-/**
- * Header of the InformationPanel to be passed in the `header` prop.
- *
- * @example
- * <InformationPanelHeader
- *   onClose={() => {}}
- *   actions={(
- *     <>
- *       <IconButton styleType='borderless' onClick={() => {}}><SvgEdit /></IconButton>
- *       <IconButton styleType='borderless' onClick={() => {}}><SvgDelete /></IconButton>
- *     </>
- *   )}
- * >
- *   <Text variant='subheading'>InfoPanel heading</Text>
- * </InformationPanelHeader>
- */
-export declare const InformationPanelHeader: PolymorphicForwardRefComponent<"div", InformationPanelHeaderProps>;
-export {};

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -1,54 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InformationPanelHeader', {
-  enumerable: true,
-  get: function () {
-    return InformationPanelHeader;
-  },
-});
-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 _IconButton = require('../Buttons/IconButton.js');
-const _index = require('../../utils/index.js');
-const InformationPanelHeader = _react.forwardRef((props, forwardedRef) => {
-  let { children, onClose, actions, className, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)('iui-information-header', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'span',
-        className: 'iui-information-header-label',
-      },
-      children,
-    ),
-    _react.createElement(
-      _index.Box,
-      {
-        className: 'iui-information-header-actions',
-      },
-      actions,
-      onClose &&
-        _react.createElement(
-          _IconButton.IconButton,
-          {
-            styleType: 'borderless',
-            onClick: onClose,
-            'aria-label': 'Close',
-          },
-          _react.createElement(_index.SvgCloseSmall, {
-            'aria-hidden': true,
-          }),
-        ),
-    ),
-  );
-});

package/cjs/core/InformationPanel/InformationPanelWrapper.d.ts

@@ -1,10 +0,0 @@
-/**
- * InformationPanelWrapper should contain the `InformationPanel`
- * and the component over which the panel will overlay.
- * @example
- * <InformationPanelWrapper>
- *   <Table ... />
- *   <InformationPanel ... />
- * </InformationPanelWrapper>
- */
-export declare const InformationPanelWrapper: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/InformationPanel/InformationPanelWrapper.js

@@ -1,14 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InformationPanelWrapper', {
-  enumerable: true,
-  get: function () {
-    return InformationPanelWrapper;
-  },
-});
-const _index = require('../../utils/index.js');
-const InformationPanelWrapper = _index.polymorphic.div(
-  'iui-information-panel-wrapper',
-);

package/cjs/core/Input/Input.d.ts

@@ -1,23 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type InputProps = {
-    /**
-     * Modify size of the input.
-     */
-    size?: 'small' | 'large';
-    /**
-     * Status of input.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Modify the native `size` attribute of the `<input>` element.
-     * The `width` or `inline-size` property must be unset in order to use this prop.
-     */
-    htmlSize?: number;
-};
-/**
- * Basic input component
- * @example
- * <Input disabled />
- * <Input size='small' />
- */
-export declare const Input: PolymorphicForwardRefComponent<"input", InputProps>;

package/cjs/core/Input/Input.js

@@ -1,29 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Input', {
-  enumerable: true,
-  get: function () {
-    return Input;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const Input = _react.forwardRef((props, ref) => {
-  let { size, htmlSize, status, className, ...rest } = props;
-  let inputRef = _react.useRef(null);
-  let refs = (0, _index.useMergedRefs)(inputRef, ref);
-  return _react.createElement(_index.Box, {
-    as: 'input',
-    className: (0, _classnames.default)('iui-input', 'iui-field', className),
-    'data-iui-size': size,
-    'data-iui-status': status,
-    size: htmlSize,
-    ref: refs,
-    ...rest,
-  });
-});

package/cjs/core/InputGrid/InputGrid.d.ts

@@ -1,27 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type InputGridOwnProps = {
-    /**
-     * Set display style of label.
-     * Supported values:
-     * - 'default' - label appears above input.
-     * - 'inline' - appears in the same line as input.
-     * @default 'default'
-     */
-    labelPlacement?: 'default' | 'inline';
-};
-/**
- * InputGrid component is used to display form fields (input, textarea, select)
- * with label and/or status message
- *
- * Form fields are automatically associated with the label and status message for
- * better accessibility.
- *
- * @example
- * <InputGrid>
- *   <Label>This is a label</Label>
- *   <Input />
- *   <StatusMessage>This is a message</StatusMessage>
- * </InputGrid>
- */
-export declare const InputGrid: PolymorphicForwardRefComponent<"div", InputGridOwnProps>;
-export {};

package/cjs/core/InputGrid/InputGrid.js

@@ -1,158 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'InputGrid', {
-  enumerable: true,
-  get: function () {
-    return InputGrid;
-  },
-});
-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 _index = require('../../utils/index.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const _Label = require('../Label/Label.js');
-const _Input = require('../Input/Input.js');
-const _Textarea = require('../Textarea/Textarea.js');
-const _StatusMessage = require('../StatusMessage/StatusMessage.js');
-const _InputWithDecorations = require('../InputWithDecorations/InputWithDecorations.js');
-const _ComboBox = require('../ComboBox/ComboBox.js');
-const _Select = require('../Select/Select.js');
-const InputGrid = _react.forwardRef((props, ref) => {
-  let { children: childrenProp, className, labelPlacement, ...rest } = props;
-  let children = useChildrenWithIds(childrenProp);
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)('iui-input-grid', className),
-      'data-iui-label-placement': labelPlacement,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-const useChildrenWithIds = (children) => {
-  let { labelId, inputId, messageId } = useSetup(children);
-  return _react.useMemo(
-    () =>
-      _react.Children.map(children, (child) => {
-        if (!_react.isValidElement(child)) return child;
-        if (child.type === _Label.Label || 'label' === child.type)
-          return (0, _index.cloneElementWithRef)(child, (child) => ({
-            ...child.props,
-            htmlFor: child.props.htmlFor || inputId,
-            id: child.props.id || labelId,
-          }));
-        if (child.type === _StatusMessage.StatusMessage)
-          return (0, _index.cloneElementWithRef)(child, (child) => ({
-            ...child.props,
-            id: child.props.id || messageId,
-          }));
-        if (
-          isInput(child) ||
-          child.type === _InputWithDecorations.InputWithDecorations ||
-          child.type === _index.InputWithIcon
-        )
-          return handleCloningInputs(child, {
-            labelId,
-            inputId,
-            messageId,
-          });
-        return child;
-      }),
-    [children, inputId, labelId, messageId],
-  );
-};
-const useSetup = (children) => {
-  let idPrefix = (0, _index.useId)();
-  let labelId;
-  let inputId;
-  let messageId;
-  let hasLabel = false;
-  let hasSelect = false;
-  let findInputId = (child) => {
-    if (!_react.isValidElement(child)) return;
-    if (child.type === _ComboBox.ComboBox)
-      return child.props.inputProps?.id || `${idPrefix}--input`;
-    if (child.type !== _Select.Select)
-      return child.props.id || `${idPrefix}--input`;
-  };
-  _react.Children.forEach(children, (child) => {
-    if (!_react.isValidElement(child)) return;
-    if (child.type === _Label.Label || 'label' === child.type) {
-      hasLabel = true;
-      labelId || (labelId = child.props.id || `${idPrefix}--label`);
-    }
-    if (child.type === _StatusMessage.StatusMessage)
-      messageId || (messageId = child.props.id || `${idPrefix}--message`);
-    if (
-      child.type === _InputWithDecorations.InputWithDecorations ||
-      child.type === _index.InputWithIcon
-    )
-      _react.Children.forEach(child.props.children, (child) => {
-        if (isInput(child)) inputId || (inputId = findInputId(child));
-      });
-    else if (isInput(child)) inputId || (inputId = findInputId(child));
-    if (child.type === _Select.Select) hasSelect = true;
-  });
-  return {
-    labelId: hasSelect ? labelId : void 0,
-    inputId: hasLabel && !hasSelect ? inputId : void 0,
-    messageId,
-  };
-};
-const handleCloningInputs = (child, { labelId, inputId, messageId }) => {
-  let inputProps = (props = {}) => {
-    let ariaDescribedBy = [props['aria-describedby'], messageId]
-      .filter(Boolean)
-      .join(' ');
-    return {
-      ...props,
-      ...(child.type !== _Select.Select && {
-        id: props.id || inputId,
-      }),
-      'aria-describedby': ariaDescribedBy?.trim() || void 0,
-    };
-  };
-  let cloneInput = (child) => {
-    if (child.type === _ComboBox.ComboBox)
-      return (0, _index.cloneElementWithRef)(child, (child) => ({
-        inputProps: inputProps(child.props.inputProps),
-      }));
-    if (child.type === _Select.Select)
-      return (0, _index.cloneElementWithRef)(child, (child) => ({
-        triggerProps: {
-          'aria-labelledby': labelId,
-          ...inputProps(child.props.triggerProps),
-        },
-      }));
-    return (0, _index.cloneElementWithRef)(child, (child) =>
-      inputProps(child.props),
-    );
-  };
-  if (
-    child.type === _InputWithDecorations.InputWithDecorations ||
-    child.type === _index.InputWithIcon
-  )
-    return (0, _index.cloneElementWithRef)(child, (child) => ({
-      children: _react.Children.map(child.props.children, (child) => {
-        if (_react.isValidElement(child) && isInput(child))
-          return cloneInput(child);
-        return child;
-      }),
-    }));
-  return cloneInput(child);
-};
-const isInput = (child) =>
-  _react.isValidElement(child) &&
-  ('input' === child.type ||
-    'textarea' === child.type ||
-    'select' === child.type ||
-    child.type === _Input.Input ||
-    child.type === _Textarea.Textarea ||
-    child.type === _InputWithDecorations.InputWithDecorations.Input ||
-    child.type === _Select.Select ||
-    child.type === _ComboBox.ComboBox);

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { StatusMessage } from '../StatusMessage/StatusMessage.js';
-type InputGroupProps = {
-    /**
-     * Label of the group.
-     */
-    label?: React.ReactNode;
-    /**
-     * Status of the group.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Message below the group. Does not apply to 'inline' group.
-     *
-     * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
-     * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
-     * `<StatusMessage>` yourself for proper styling of `message`.
-     */
-    message?: React.ReactNode;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
-    /**
-     * Disable whole group.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the whole input group is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Custom icon. If group has status, default status icon is used instead.
-     */
-    svgIcon?: React.ComponentPropsWithoutRef<typeof StatusMessage>['startIcon'];
-    /**
-     * Child inputs inside group.
-     */
-    children: React.ReactNode;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.ComponentProps<'label'>;
-    /**
-     * Passes properties for message.
-     */
-    messageProps?: Pick<React.ComponentProps<typeof StatusMessage>, 'iconProps' | 'contentProps'>;
-    /**
-     * Passes properties for inner input group element.
-     */
-    innerProps?: React.ComponentProps<'div'>;
-};
-/**
- * Group Checkbox/Radio components together
- * @example
- * <caption>Group checkboxes</caption>
- * <InputGroup label='Checkbox group'>
- *  <Checkbox />
- *  <Checkbox />
- * </InputGroup>
- * @example
- * <caption>Group radios</caption>
- * <InputGroup label='Radio group'>
- *  <Radio />
- *  <Radio />
- * </InputGroup>
- */
-export declare const InputGroup: PolymorphicForwardRefComponent<"div", InputGroupProps>;
-export {};

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,
-});