@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/cjs/core/SearchBox/SearchBox.js

@@ -1,134 +1,226 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SearchBox = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Buttons/IconButton/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../Buttons/IconButton/index.js');
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
-    const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
-    const uid = (0, index_js_1.useId)();
-    const [inputId, setInputId] = React.useState(uid);
-    const inputRef = React.useRef(null);
-    const openButtonRef = React.useRef(null);
-    const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-    const isExpanded = isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : localExpanded;
-    const onCollapse = () => {
-        setLocalExpanded(false);
-        onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp();
-        queueMicrotask(() => { var _a; return (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
-    };
-    const onExpand = () => {
-        setLocalExpanded(true);
-        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp();
-        queueMicrotask(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
-    };
-    return (React.createElement(SearchBoxContext.Provider, { value: {
-            size,
-            isDisabled,
-            onCollapse,
-            onExpand,
-            inputRef,
-            inputId,
-            setInputId,
-            openButtonRef,
-            isExpanded,
-            expandable,
-        } },
-        React.createElement(index_js_1.InputFlexContainer, { ref: ref, className: (0, classnames_1.default)('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-            React.createElement(SearchBoxCollapsedState, null,
-                React.createElement(SearchBoxExpandButton, null)),
-            React.createElement(SearchBoxExpandedState, null,
-                React.createElement(SearchBoxIcon, null),
-                React.createElement(SearchBoxInput, { ...inputProps }),
-                expandable ? React.createElement(SearchBoxCollapseButton, null) : null))))));
+  const {
+    size,
+    expandable = false,
+    isDisabled = false,
+    onCollapse: onCollapseProp,
+    onExpand: onExpandProp,
+    isExpanded: isExpandedProp,
+    children,
+    inputProps,
+    className,
+    ...rest
+  } = props;
+  const uid = (0, index_js_1.useId)();
+  const [inputId, setInputId] = React.useState(uid);
+  const inputRef = React.useRef(null);
+  const openButtonRef = React.useRef(null);
+  const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+  const isExpanded = isExpandedProp ?? localExpanded;
+  const onCollapse = () => {
+    setLocalExpanded(false);
+    onCollapseProp?.();
+    queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
+  };
+  const onExpand = () => {
+    setLocalExpanded(true);
+    onExpandProp?.();
+    queueMicrotask(() => inputRef.current?.focus({ preventScroll: true }));
+  };
+  return React.createElement(
+    SearchBoxContext.Provider,
+    {
+      value: {
+        size,
+        isDisabled,
+        onCollapse,
+        onExpand,
+        inputRef,
+        inputId,
+        setInputId,
+        openButtonRef,
+        isExpanded,
+        expandable,
+      },
+    },
+    React.createElement(
+      index_js_1.InputFlexContainer,
+      {
+        ref: ref,
+        className: (0, classnames_1.default)(
+          'iui-searchbox',
+          { 'iui-expandable-searchbox': expandable },
+          className,
+        ),
+        size: size,
+        isDisabled: isDisabled,
+        'data-iui-expanded': isExpanded,
+        ...rest,
+      },
+      children ??
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(
+            SearchBoxCollapsedState,
+            null,
+            React.createElement(SearchBoxExpandButton, null),
+          ),
+          React.createElement(
+            SearchBoxExpandedState,
+            null,
+            React.createElement(SearchBoxIcon, null),
+            React.createElement(SearchBoxInput, { ...inputProps }),
+            expandable
+              ? React.createElement(SearchBoxCollapseButton, null)
+              : null,
+          ),
+        ),
+    ),
+  );
 });
 // ----------------------------------------------------------------------------
-const SearchBoxCollapsedState = ({ children, }) => {
-    const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    if (!expandable || isExpanded) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children !== null && children !== void 0 ? children : React.createElement(SearchBoxExpandButton, null));
+const SearchBoxCollapsedState = ({ children }) => {
+  const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(
+    SearchBoxContext,
+  );
+  if (!expandable || isExpanded) {
+    return null;
+  }
+  return React.createElement(
+    React.Fragment,
+    null,
+    children ?? React.createElement(SearchBoxExpandButton, null),
+  );
 };
 SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 // ----------------------------------------------------------------------------
-const SearchBoxExpandedState = ({ children, }) => {
-    const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    if (expandable && !isExpanded) {
-        return null;
-    }
-    return React.createElement(React.Fragment, null, children);
+const SearchBoxExpandedState = ({ children }) => {
+  const { isExpanded, expandable } = (0, index_js_1.useSafeContext)(
+    SearchBoxContext,
+  );
+  if (expandable && !isExpanded) {
+    return null;
+  }
+  return React.createElement(React.Fragment, null, children);
 };
 SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(index_js_1.Icon, { "aria-hidden": true, className: (0, classnames_1.default)('iui-search-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgSearch, null)));
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    index_js_1.Icon,
+    {
+      'aria-hidden': true,
+      className: (0, classnames_1.default)('iui-search-icon', className),
+      ref: ref,
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgSearch, null),
+  );
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
 const SearchBoxInput = React.forwardRef((props, ref) => {
-    const { className, id: idProp, ...rest } = props;
-    const { inputId, setInputId, isDisabled, inputRef } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    React.useEffect(() => {
-        if (idProp && idProp !== inputId) {
-            setInputId(idProp);
-        }
-    }, [idProp, inputId, setInputId]);
-    return (React.createElement(index_js_1.Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: (0, index_js_1.useMergedRefs)(ref, inputRef), role: 'searchbox', type: 'text', className: (0, classnames_1.default)('iui-search-input', className), disabled: isDisabled, ...rest }));
+  const { className, id: idProp, ...rest } = props;
+  const { inputId, setInputId, isDisabled, inputRef } = (0,
+  index_js_1.useSafeContext)(SearchBoxContext);
+  React.useEffect(() => {
+    if (idProp && idProp !== inputId) {
+      setInputId(idProp);
+    }
+  }, [idProp, inputId, setInputId]);
+  return React.createElement(index_js_1.Box, {
+    as: 'input',
+    id: idProp ?? inputId,
+    ref: (0, index_js_1.useMergedRefs)(ref, inputRef),
+    role: 'searchbox',
+    type: 'text',
+    className: (0, classnames_1.default)('iui-search-input', className),
+    disabled: isDisabled,
+    ...rest,
+  });
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgSearch, null)));
+  const { children, ...rest } = props;
+  const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(
+    SearchBoxContext,
+  );
+  return React.createElement(
+    index_js_2.IconButton,
+    {
+      styleType: 'borderless',
+      size: sizeContext,
+      ref: ref,
+      disabled: isDisabled,
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgSearch, null),
+  );
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
-    const { children, onClick: onClickProp, ...rest } = props;
-    const { onCollapse, size: sizeContext, isDisabled, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCloseSmall, null)));
+  const { children, onClick: onClickProp, ...rest } = props;
+  const {
+    onCollapse,
+    size: sizeContext,
+    isDisabled,
+  } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+  return React.createElement(
+    SearchBoxButton,
+    {
+      ref: ref,
+      'aria-label': 'Close searchbox',
+      size: sizeContext,
+      disabled: isDisabled,
+      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onCollapse),
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgCloseSmall, null),
+  );
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-    const { children, className, onClick: onClickProp, ...rest } = props;
-    const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), className: (0, classnames_1.default)('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgSearch, null)));
+  const { children, className, onClick: onClickProp, ...rest } = props;
+  const {
+    onExpand,
+    size: sizeContext,
+    isDisabled,
+    openButtonRef,
+  } = (0, index_js_1.useSafeContext)(SearchBoxContext);
+  return React.createElement(
+    SearchBoxButton,
+    {
+      ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef),
+      className: (0, classnames_1.default)(
+        'iui-searchbox-open-button',
+        className,
+      ),
+      'aria-label': 'Expand searchbox',
+      size: sizeContext,
+      disabled: isDisabled,
+      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand),
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgSearch, null),
+  );
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------
@@ -152,35 +244,35 @@ SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
  * </SearchBox>
  */
 exports.SearchBox = Object.assign(SearchBoxComponent, {
-    /**
-     * Icon to be placed within SearchBox.
-     * @default Looking glass icon
-     */
-    Icon: SearchBoxIcon,
-    /**
-     * Input to be placed within SearchBox
-     */
-    Input: SearchBoxInput,
-    /**
-     * Button to be placed within SearchBox. Default has looking glass icon.
-     */
-    Button: SearchBoxButton,
-    /**
-     * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
-     */
-    CollapseButton: SearchBoxCollapseButton,
-    /**
-     * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
-     */
-    ExpandButton: SearchBoxExpandButton,
-    /**
-     * Subcomponent to customise expanded state of the SearchBox
-     */
-    ExpandedState: SearchBoxExpandedState,
-    /**
-     * Subcomponent to customise collapsed state.
-     */
-    CollapsedState: SearchBoxCollapsedState,
+  /**
+   * Icon to be placed within SearchBox.
+   * @default Looking glass icon
+   */
+  Icon: SearchBoxIcon,
+  /**
+   * Input to be placed within SearchBox
+   */
+  Input: SearchBoxInput,
+  /**
+   * Button to be placed within SearchBox. Default has looking glass icon.
+   */
+  Button: SearchBoxButton,
+  /**
+   * Collapse button for expandable SearchBox. Clicking on this button will collapse SearchBox.
+   */
+  CollapseButton: SearchBoxCollapseButton,
+  /**
+   * Expand button for expandable SearchBox. Clicking on this will expand SearchBox.
+   */
+  ExpandButton: SearchBoxExpandButton,
+  /**
+   * Subcomponent to customise expanded state of the SearchBox
+   */
+  ExpandedState: SearchBoxExpandedState,
+  /**
+   * Subcomponent to customise collapsed state.
+   */
+  CollapsedState: SearchBoxCollapsedState,
 });
 exports.SearchBox.displayName = 'SearchBox';
 exports.default = exports.SearchBox;

package/cjs/core/SearchBox/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SearchBox = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var SearchBox_js_1 = require("./SearchBox.js");
-Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return SearchBox_js_1.SearchBox; } });
+var SearchBox_js_1 = require('./SearchBox.js');
+Object.defineProperty(exports, 'SearchBox', {
+  enumerable: true,
+  get: function () {
+    return SearchBox_js_1.SearchBox;
+  },
+});
 exports.default = './SearchBox';

package/cjs/core/Select/Select.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { PopoverProps, CommonProps } from '../utils/index.js';
-export declare type ItemRendererProps = {
+import { usePopover } from '../utils/index.js';
+import type { CommonProps } from '../utils/index.js';
+export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
      */
@@ -10,7 +11,7 @@ export declare type ItemRendererProps = {
      */
     isSelected: boolean;
 };
-export declare type SelectOption<T> = {
+export type SelectOption<T> = {
     /**
      * Label of the item used in dropdown list and when selected.
      */
@@ -48,8 +49,8 @@ export declare type SelectOption<T> = {
      */
     [key: string]: unknown;
 } & CommonProps;
-export declare type SelectValueChangeEvent = 'added' | 'removed';
-export declare type SelectMultipleTypeProps<T> = {
+export type SelectValueChangeEvent = 'added' | 'removed';
+export type SelectMultipleTypeProps<T> = {
     /**
      * Enable multiple selection.
      * @default false
@@ -75,7 +76,7 @@ export declare type SelectMultipleTypeProps<T> = {
     value?: T[];
     onChange?: (value: T, event: SelectValueChangeEvent) => void;
 };
-export declare type SelectProps<T> = {
+export type SelectProps<T> = {
     /**
      * Array of options that populates the select menu.
      */
@@ -94,10 +95,9 @@ export declare type SelectProps<T> = {
      */
     size?: 'small' | 'large';
     /**
-     * Set focus on select.
-     * @default false
+     * Status of select.
      */
-    setFocus?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
@@ -111,15 +111,14 @@ export declare type SelectProps<T> = {
      */
     menuStyle?: React.CSSProperties;
     /**
-     * Props to customize {@link Popover} behavior.
-     * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
+     * Props to customize Popover behavior.
      */
-    popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
     /**
      * Props to pass to the select button (trigger) element.
      */
     triggerProps?: React.ComponentPropsWithoutRef<'div'>;
-} & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
+} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.