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

package/cjs/core/LabeledSelect/LabeledSelect.types-test.js

@@ -1,103 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-const _react = require('react');
-const _LabeledSelect = require('./LabeledSelect.js');
-() => {
-  let ref = (0, _react.useRef)(null);
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(_LabeledSelect.LabeledSelect, {
-      options: [
-        {
-          value: 1,
-          label: 'Option 1',
-        },
-        {
-          value: 2,
-          label: 'Option 2',
-        },
-        {
-          value: 3,
-          label: 'Option 3',
-        },
-      ],
-      onChange: (value) => {
-        let returnValue = value;
-        return returnValue;
-      },
-      ref: ref,
-    }),
-  );
-};
-() =>
-  React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(_LabeledSelect.LabeledSelect, {
-      options: [
-        {
-          value: 1,
-          label: 'Option 1',
-        },
-        {
-          value: 2,
-          label: 'Option 2',
-        },
-        {
-          value: 3,
-          label: 'Option 3',
-        },
-      ],
-      onChange: (value) => {
-        let returnValue = value;
-        return returnValue;
-      },
-    }),
-  );
-() =>
-  React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(_LabeledSelect.LabeledSelect, {
-      label: 'Select Label',
-      options: [
-        {
-          value: '1',
-          label: 'Item #1',
-        },
-        {
-          value: '2',
-          label: 'Item #2',
-        },
-        {
-          value: '3',
-          label: 'Item #3',
-        },
-      ],
-      onChange: (value) => {
-        let returnValue = value;
-        return returnValue;
-      },
-    }),
-  );
-() =>
-  React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(_LabeledSelect.LabeledSelect, {
-      label: 'Select Label',
-      options: [
-        {
-          value: 1,
-          label: 'Item #1',
-        },
-      ],
-      onChange: (value) => {
-        let returnValue = value;
-        return returnValue;
-      },
-    }),
-  );

package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../Icon/Icon.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import { InputGrid } from '../InputGrid/InputGrid.js';
-type LabeledTextareaProps = {
-    /**
-     * Label for the textarea.
-     */
-    label: React.ReactNode;
-    /**
-     * Message below the textarea. Does not apply to 'inline' textarea.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of text area.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Pass props to wrapper element.
-     */
-    wrapperProps?: React.ComponentProps<typeof InputGrid>;
-    /**
-     * Passes properties for label.
-     */
-    labelProps?: React.ComponentProps<'label'>;
-    /**
-     * Passes properties for message content.
-     */
-    messageContentProps?: React.ComponentPropsWithRef<'div'>;
-    /**
-     * Passes properties for svgIcon.
-     */
-    iconProps?: React.ComponentProps<typeof Icon>;
-} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle'>;
-/**
- * Textarea wrapper that allows for additional styling and labelling
- * @example
- * <LabeledTextarea
- *  label='Textarea Label'
- *  message='Help Message'
- *  placeholder='This is a textarea'
- * />
- * <LabeledTextarea
- *  label='Disabled Textarea Label'
- *  message='Help Message'
- *  placeholder='This is a textarea'
- *  disabled={true}
- * />
- * <LabeledTextarea
- *  label='Textarea Label'
- *  message='Negative Message'
- *  placeholder='This is a textarea'
- *  status='negative'
- * />
- */
-export declare const LabeledTextarea: PolymorphicForwardRefComponent<"textarea", LabeledTextareaProps>;
-export {};

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -1,21 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'LabeledTextarea', {
-  enumerable: true,
-  get: function () {
-    return LabeledTextarea;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _LabeledInput = require('../LabeledInput/LabeledInput.js');
-const LabeledTextarea = _react.forwardRef((props, forwardedRef) =>
-  _react.createElement(_LabeledInput.LabeledInput, {
-    as: 'textarea',
-    rows: 3,
-    ref: forwardedRef,
-    ...props,
-  }),
-);

package/cjs/core/LinkAction/LinkAction.d.ts

@@ -1,24 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
-/**
- * Polymorphic link action component.
- * It is rendered as `a` by default.
- * @example
- * <LinkBox>
- *   <Surface>
- *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
- *   </Surface>
- * </LinkBox>
- */
-export declare const LinkAction: PolymorphicForwardRefComponent<"a">;
-/**
- * Polymorphic link box component.
- * Used to wrap around your component to use LinkAction.
- * Rendered as `div` by default
- * @example
- * <LinkBox>
- *   <Surface>
- *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
- *   </Surface>
- * </LinkBox>
- */
-export declare const LinkBox: PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/LinkAction/LinkAction.js

@@ -1,35 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  LinkAction: function () {
-    return LinkAction;
-  },
-  LinkBox: function () {
-    return LinkBox;
-  },
-});
-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 _polymorphic = require('../../utils/functions/polymorphic.js');
-const _index = require('../../utils/components/index.js');
-const LinkAction = _react.forwardRef((props, forwardedRef) => {
-  let { as: asProp = props.href ? 'a' : 'button' } = props;
-  return _react.createElement(_index.Box, {
-    ...props,
-    as: asProp,
-    className: (0, _classnames.default)('iui-link-action', props.className),
-    ref: forwardedRef,
-  });
-});
-const LinkBox = _polymorphic.polymorphic.div('iui-link-box');

package/cjs/core/List/List.d.ts

@@ -1 +0,0 @@
-export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/List/List.js

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

package/cjs/core/List/ListItem.d.ts

@@ -1,80 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type ListItemOwnProps = {
-    /**
-     * Size of the ListItem. Can be explicitly specified to be 'large',
-     * but if a description is included in addition to the label, then
-     * it will automatically become large.
-     */
-    size?: 'default' | 'large';
-    /**
-     * If true, the ListItem has disabled (dimmed) styling.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the ListItem has active (selected) styling.
-     */
-    active?: boolean;
-    /**
-     * If true, the ListItem will get actionable styling, such as hover styling and cursor.
-     */
-    actionable?: boolean;
-    /**
-     * If true, the ListItem has focus styling.
-     *
-     * By default, focus styling is automatically applied if the item is
-     * focused, or if the item contains a `LinkAction` and it is focused.
-     * This prop is useful for custom focus management (e.g. using `aria-activedescendant`).
-     */
-    focused?: boolean;
-};
-/**
- * A generic ListItem component that can be used simply for displaying data, or as a base
- * for the list items in a more complex component (e.g. a custom Select).
- *
- * Includes support for left/right icons, multiple lines of text, and hover/focus/active/disabled styling.
- *
- * @example
- * <List>
- *   <ListItem>item 1</ListItem>
- *   <ListItem>item 2</ListItem>
- *   <ListItem>item 3</ListItem>
- * </List>
- */
-export declare const ListItem: PolymorphicForwardRefComponent<"div", ListItemOwnProps> & {
-    /**
-     * Icon to be placed at the beginning or end of the ListItem.
-     */
-    Icon: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Wrapper for the main content of the ListItem.
-     *
-     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-     * - When using an end icon. The `ListItem.Content` will fill the available space
-     *   and push the icon to the end
-     * - When using `ListItem.Description`.
-     */
-    Content: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Description to be used in addition to the main label of the ListItem.
-     * Should be used as a child of `ListItem.Content`.
-     *
-     * @example
-     * <ListItem>
-     *  <ListItem.Content>
-     *   <div>some list item</div>
-     *   <ListItem.Description>description for this item</ListItem.Description>
-     *  </ListItem.Content>
-     * </ListItem>
-     */
-    Description: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
-     * This ensures that clicking anywhere on the ListItem will trigger the link.
-     *
-     * @example
-     * <ListItem>
-     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
-     * </ListItem>
-     */
-    Action: PolymorphicForwardRefComponent<"a", {}>;
-};

package/cjs/core/List/ListItem.js

@@ -1,48 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'ListItem', {
-  enumerable: true,
-  get: function () {
-    return ListItem;
-  },
-});
-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 _LinkAction = require('../LinkAction/LinkAction.js');
-const ListItemComponent = _react.forwardRef((props, ref) => {
-  let {
-    size = 'default',
-    disabled = false,
-    active = false,
-    actionable = false,
-    focused = false,
-    className,
-    ...rest
-  } = props;
-  return _react.createElement(_index.Box, {
-    role: 'listitem',
-    className: (0, _classnames.default)('iui-list-item', className),
-    'data-iui-active': active ? 'true' : void 0,
-    'data-iui-disabled': disabled ? 'true' : void 0,
-    'data-iui-size': 'large' === size ? 'large' : void 0,
-    'data-iui-actionable': actionable ? 'true' : void 0,
-    'data-iui-focused': focused ? 'true' : void 0,
-    ref: ref,
-    ...rest,
-  });
-});
-const ListItemIcon = _index.polymorphic.div('iui-list-item-icon');
-const ListItemContent = _index.polymorphic.div('iui-list-item-content');
-const ListItemDescription = _index.polymorphic.div('iui-list-item-description');
-const ListItemAction = _LinkAction.LinkAction;
-const ListItem = Object.assign(ListItemComponent, {
-  Icon: ListItemIcon,
-  Content: ListItemContent,
-  Description: ListItemDescription,
-  Action: ListItemAction,
-});

package/cjs/core/Menu/Menu.d.ts

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-import { usePopover } from '../Popover/Popover.js';
-import { useInteractions, type UseListNavigationProps } from '@floating-ui/react';
-type UsePopoverProps = Parameters<typeof usePopover>[0];
-type MenuProps = {
-    /**
-     * Menu items. Recommended to use `MenuItem` components.
-     *
-     * If you have custom actionable items, they should have `tabIndex={-1}` for better keyboard navigation support
-     * and selected item should have `aria-selected={true}`.
-     */
-    children: React.ReactNode;
-    /**
-     * The trigger that opens the menu.
-     */
-    trigger: React.ReactNode;
-    /**
-     * You can use this optional prop when the position reference is not the trigger.
-     * (Equivalent to using FloatingUI's `floating.refs.setPositionReference`)
-     */
-    positionReference?: Parameters<ReturnType<typeof usePopover>['refs']['setPositionReference']>[0];
-    /**
-     * Use this prop to override the default props passed to `usePopover` and `useListNavigation`.
-     */
-    popoverProps?: Omit<UsePopoverProps, 'interactions'> & {
-        interactions?: UsePopoverProps['interactions'] & {
-            listNavigation?: Partial<UseListNavigationProps>;
-        };
-    };
-} & Pick<PortalProps, 'portal'>;
-/**
- * @private
- *
- * Used for dropdown components. E.g. `DropdownMenu`, `SplitButton`.
- *
- * What needs to be handled **manually**:
- * - Menu items need to spread `MenuContext.popover.getItemProps()`.
- * - Menu items need to focus itself on hover.
- *
- * What is handled automatically:
- * - the portaling: use the optional `portal` prop for more customization
- * - conditional rendering based on the popover's open state
- * - spreading the popover props `getFloatingProps` and `getReferenceProps`.
- *   - As mentioned above, `getItemProps` need to be spread **manually** in the menu item.
- * - setting the refs: use the optional`positionReference` prop to set the position reference
- * - keyboard navigation: use the `interactions.listNavigation` prop for more customization
- * - registering a `FloatingNode` in the `FloatingTree` if an ancestral `FloatingTree` is found
- * - focus management:
- *   - focuses items on hover.
- *   - if *not* in a `FloatingTree`, focus moves to the trigger when the menu is closed.
- *     If in a `FloatingTree`, focus does not move back to the trigger since menu items handle the focus.
- * - setting `aria-expanded` accordingly depending on the menu open state
- *
- * All `Menu` popover interactions are identical to `usePopover`'s interactions. Exception:
- * - `hover`: When the `Menu` is within a `FloatingTree`, if a submenu has focus, the hover interaction is automatically
- * disabled. This helps to keep the last hovered/focused submenu open even upon hovering out.
- *
- * @example
- * const trigger = <Button>Menu</Button>;
- * const [positionReference, setPositionReference] = React.useState<HTMLDivElement | null>(null);
- * const popoverProps = { matchWidth: true };
- * const nodeId = useFloatingNodeId();
- *
- * return (
- *   <Box ref={setPositionReference}>
- *     <Menu
- *       trigger={trigger}
- *       positionReference={positionReference}
- *       nodeId={nodeId}
- *       popoverProps={popoverProps}
- *     >
- *       <MenuItem>Item 1</MenuItem>
- *       <MenuItem>Item 2</MenuItem>
- *     </Menu>
- *   </Box>
- * );
- */
-export declare const Menu: PolymorphicForwardRefComponent<"div", MenuProps>;
-export type TreeEvent = {
-    nodeId: string;
-    parentId: string | null;
-};
-type PopoverGetItemProps = ({ focusableItemIndex, userProps, }: {
-    /**
-     * Index of this item out of all the focusable items in the parent `Menu`
-     */
-    focusableItemIndex: number | undefined;
-    userProps?: Parameters<NonNullable<ReturnType<typeof useInteractions>['getItemProps']>>[0];
-}) => ReturnType<ReturnType<typeof useInteractions>['getItemProps']>;
-export declare const MenuContext: React.Context<{
-    popoverGetItemProps: PopoverGetItemProps;
-    focusableElements: HTMLElement[];
-} | undefined>;
-export {};