@rescui/select 0.14.4-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.15.1-RUI-280-Update-select-component-026338d06.52

package/lib/index.d.ts

@@ -1,6 +1,4 @@
-export { default as Select } from './select';
-export type { SelectProps } from './select';
-export { default as NativeSelect } from './parts/native-select';
-export type { NativeSelectProps } from './parts/native-select';
-export { default as Multiselect } from './parts/multiselect';
-export type { MultiselectProps } from './parts/multiselect';
+export { Select } from './select';
+export { Multiselect } from './multiselect';
+export { NativeSelect } from './native-select';
+export type { SelectProps, MultiselectProps, NativeSelectProps, SelectOption, Key } from './types';

package/lib/index.js

@@ -1,4 +1,4 @@
 import './index.css';
-export { default as Select } from './select.js';
-export { default as NativeSelect } from './parts/native-select.js';
-export { default as Multiselect } from './parts/multiselect.js';
+export { Select } from './select.js';
+export { Multiselect } from './multiselect.js';
+export { NativeSelect } from './native-select.js';

package/lib/multiselect.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { MultiselectProps, NoOptionsMessage, SelectOption, SelectOptionOrGroup } from './types';
+export declare function Multiselect({ options, value, onChange, error, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, ...props }: MultiselectProps): JSX.Element;
+export declare namespace Multiselect {
+    var propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        options: React.Validator<SelectOptionOrGroup[]>;
+        value: React.Validator<SelectOption[]>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        isSingleLine: PropTypes.Requireable<boolean>;
+        isClearable: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+        error: React.Validator<React.ReactNode>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        noOptionsMessage: React.Validator<NoOptionsMessage>;
+        placement: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        boldLabel: PropTypes.Requireable<boolean>;
+    };
+}

package/lib/multiselect.js

@@ -0,0 +1,239 @@
+"use client";
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { useSelectState } from 'react-stately';
+import { useSelect, useButton, useFocusRing, mergeProps, HiddenSelect } from 'react-aria';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { ErrorMessage } from '@rescui/form-field';
+import { optionType, optionsGroupType, noOptionsMessageType } from './common-prop-types.js';
+import { PopupContent } from './parts/popup-content.js';
+import { Icons } from './parts/icons.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { MultiTrigger } from './parts/multi-trigger.js';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { useMultiOptionSerialization } from './hooks/use-multi-option-serialization.js';
+import { getEmptyMessage } from './utils/get-empty-message.js';
+import { convertOptions } from './utils/convert-options.js';
+import { convertPlacement } from './utils/convert-placement.js';
+import { getOptionValue } from './utils/get-option-value.js';
+import styles from './styles/common.p.module.css.js';
+const THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+}; // eslint-disable-next-line complexity
+
+function MultiselectInner(_ref) {
+  let {
+    id,
+    size,
+    mode,
+    theme,
+    style,
+    className,
+    isClearable,
+    isLoading,
+    placement,
+    boldLabel,
+    reserveErrorLine,
+    noOptionsMessage,
+    maxVisibleItems,
+    isSingleLine,
+    ...ariaProps
+  } = _ref;
+  // Create state with multiple selection mode
+  const state = useSelectState({ ...ariaProps,
+    selectionMode: 'multiple',
+    allowsEmptyCollection: true
+  });
+  const hasValue = state.selectedItems.length > 0; // Get props for child elements from useSelect
+
+  const triggerRef = useRef(null);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps: listBoxProps,
+    hiddenSelectProps,
+    errorMessageProps,
+    descriptionProps
+  } = useSelect({ ...ariaProps,
+    selectionMode: 'multiple',
+    onKeyDown: e => {
+      if (hasValue) {
+        if (e.key === 'Backspace') {
+          state.setValue([...state.selectedItems].map(item => item.key).slice(0, -1));
+          e.stopPropagation();
+        }
+
+        if (e.key === 'Delete') {
+          state.setValue([]);
+          e.stopPropagation();
+        }
+      }
+    }
+  }, state, triggerRef);
+  const {
+    buttonProps
+  } = useButton({ ...triggerProps,
+    elementType: 'div'
+  }, triggerRef);
+  const isDisabled = ariaProps.isDisabled;
+  const isOpen = state.isOpen;
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    within: true
+  });
+  const {
+    isFocusedByLabel,
+    labelClickProps,
+    triggerFocusProps: labelFocusForTriggerProps
+  } = useLabelFocus(triggerRef);
+  const emptyListMessage = getEmptyMessage({
+    isLoading,
+    isNothingFound: false,
+    noOptionsMessage
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(ariaProps.errorMessage) && styles.error),
+    id: id,
+    style: style,
+    "data-test": "multiselect"
+  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+    theme: theme,
+    size: size,
+    disabled: isDisabled,
+    label: ariaProps.label,
+    labelProps: mergeProps(labelClickProps, labelProps),
+    boldLabel: boldLabel,
+    error: ariaProps.errorMessage,
+    reserveErrorLine: reserveErrorLine,
+    errorMessageProps: errorMessageProps,
+    note: ariaProps.description,
+    descriptionProps: descriptionProps
+  }, /*#__PURE__*/React.createElement(HiddenSelect, { ...hiddenSelectProps
+  }), /*#__PURE__*/React.createElement("div", { ...mergeProps(buttonProps, focusProps, labelFocusForTriggerProps),
+    ref: triggerRef,
+    className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
+    "data-open": isOpen,
+    "data-focus-visible": isFocusVisible,
+    "data-label-focused": isFocusedByLabel,
+    "data-test": "multiselect__trigger"
+  }, /*#__PURE__*/React.createElement(MultiTrigger, {
+    state: state,
+    valueProps: valueProps,
+    isSingleLine: isSingleLine,
+    isDisabled: isDisabled,
+    placeholder: ariaProps.placeholder,
+    triggerRef: triggerRef
+  }), /*#__PURE__*/React.createElement(Icons, {
+    isLoading: isLoading,
+    canHaveClearIcon: isClearable && !isDisabled && hasValue,
+    onClear: () => {
+      var _triggerRef$current;
+
+      state.setValue([]);
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    },
+    triggerId: triggerProps.id
+  })), /*#__PURE__*/React.createElement(PopupContent, {
+    theme: theme,
+    state: state,
+    triggerRef: triggerRef,
+    placement: placement,
+    size: size,
+    mode: mode,
+    listBoxProps: listBoxProps,
+    emptyListMessage: emptyListMessage,
+    maxVisibleItems: maxVisibleItems,
+    selectionMode: "multiple"
+  })));
+}
+
+function Multiselect(_ref2) {
+  let {
+    options = [],
+    value,
+    onChange,
+    error,
+    note,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    placement = 'bottom',
+    isSingleLine = false,
+    boldLabel = true,
+    reserveErrorLine = false,
+    maxVisibleItems = 5,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    ...props
+  } = _ref2;
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
+    selectedKeys,
+    findOptionsByKeys,
+    virtualOptions
+  } = useMultiOptionSerialization(options, value);
+
+  const handleSelectionChange = keys => {
+    const newValue = findOptionsByKeys(keys);
+    onChange === null || onChange === void 0 || onChange(newValue);
+  };
+
+  return /*#__PURE__*/React.createElement(MultiselectInner, { ...props,
+    size: size,
+    mode: mode,
+    theme: theme,
+    value: selectedKeys,
+    onChange: handleSelectionChange,
+    errorMessage: error,
+    description: note,
+    placement: convertPlacement(placement),
+    isSingleLine: isSingleLine,
+    disabledKeys: virtualOptions.map(option => getOptionValue(option)),
+    boldLabel: boldLabel,
+    reserveErrorLine: reserveErrorLine,
+    maxVisibleItems: maxVisibleItems,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    isDisabled: isDisabled
+  }, convertOptions(options, virtualOptions));
+}
+
+Multiselect.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
+  value: PropTypes.arrayOf(optionType),
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isSingleLine: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  error: ErrorMessage.propTypes.children,
+  label: PropTypes.node,
+  note: PropTypes.node,
+  id: PropTypes.string,
+  noOptionsMessage: noOptionsMessageType,
+  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
+  name: PropTypes.string,
+  boldLabel: PropTypes.bool
+};
+export { Multiselect };

package/lib/native-select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NativeSelectProps } from './types';
+export declare const NativeSelect: React.FC<NativeSelectProps>;
+export default NativeSelect;

package/lib/native-select.js

@@ -0,0 +1,182 @@
+"use client";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { ErrorMessage } from '@rescui/form-field';
+import { useField, useFocusRing, mergeProps } from 'react-aria';
+import { nativeOptionType, nativeOptionsGroupType, noOptionsMessageType } from './common-prop-types.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { isOptionAGroup } from './utils/is-option-a-group.js';
+import { getEmptyMessage } from './utils/get-empty-message.js';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { NativeSelectTrigger } from './parts/native-select-trigger.js';
+import { NativeSelectOptionsWithGroups } from './parts/native-select-options-with-groups.js';
+import styles from './styles/native-select.p.module.css.js';
+
+function findSelectedOption(options, selectedValue) {
+  let result = null;
+
+  const checkOption = option => {
+    if (result === null || option.value === selectedValue) {
+      result = option;
+    }
+  };
+
+  options.forEach(optionOrGroup => {
+    if (isOptionAGroup(optionOrGroup)) {
+      var _group$options;
+
+      const group = optionOrGroup;
+      (_group$options = group.options) === null || _group$options === void 0 || _group$options.forEach(checkOption);
+    } else {
+      checkOption(optionOrGroup);
+    }
+  });
+  return result;
+}
+
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+}; // eslint-disable-next-line complexity
+
+const NativeSelect = _ref => {
+  let {
+    options = [],
+    size = 'm',
+    theme: themeFromProps,
+    className = null,
+    id,
+    style,
+    value,
+    onChange,
+    placeholder,
+    isLoading = false,
+    isDisabled = false,
+    trigger,
+    label,
+    note,
+    error,
+    reserveErrorLine = false,
+    noOptionsMessage,
+    name,
+    boldLabel = true,
+    ...ariaRestProps
+  } = _ref;
+  const {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useField({ ...ariaRestProps,
+    label,
+    description: note,
+    errorMessage: error
+  });
+  const theme = useThemeWithUndefined(themeFromProps);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleChange = event => {
+    const newValue = event.target.value;
+    const selectedOption = findSelectedOption(options, newValue);
+
+    if (onChange) {
+      onChange(selectedOption);
+    }
+  };
+
+  const triggerRef = React.useRef(null);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    within: true
+  });
+  const {
+    isFocusedByLabel,
+    labelClickProps,
+    triggerFocusProps: labelFocusForTriggerProps
+  } = useLabelFocus(triggerRef);
+  const isFocused = isFocusedByLabel || isFocusVisible;
+  const emptyListMessage = getEmptyMessage({
+    isLoading,
+    isNothingFound: false,
+    noOptionsMessage
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, styles.main, SIZE_STYLES[size]),
+    id: id,
+    style: style,
+    "data-test": "native-select"
+  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+    theme: theme,
+    size: size,
+    disabled: isDisabled,
+    label: label,
+    labelProps: mergeProps(labelClickProps, labelProps),
+    boldLabel: boldLabel,
+    error: error,
+    errorMessageProps: errorMessageProps,
+    reserveErrorLine: reserveErrorLine,
+    note: note,
+    descriptionProps: descriptionProps
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, trigger ? trigger({
+    focused: isFocused,
+    hovered: isHovered,
+    selectedLabel: value === null || value === void 0 ? void 0 : value.label,
+    selectedValue: value === null || value === void 0 ? void 0 : value.value,
+    placeholder
+  }) : /*#__PURE__*/React.createElement(NativeSelectTrigger, {
+    value: value,
+    isLoading: isLoading,
+    isFocused: isFocused,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    size: size,
+    theme: theme,
+    hasError: Boolean(error),
+    placeholder: placeholder
+  }), /*#__PURE__*/React.createElement("select", { ...mergeProps(fieldProps, focusProps, labelFocusForTriggerProps, {
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    }),
+    ref: triggerRef,
+    "data-test": "native-select_select",
+    "data-rs-internal": 'select-native__select',
+    className: styles.select,
+    disabled: isDisabled ? true : undefined,
+    onChange: handleChange,
+    name: name,
+    value: (value === null || value === void 0 ? void 0 : value.value) ?? ''
+  }, /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
+    optionsWithGroups: options,
+    placeholder: placeholder,
+    emptyListMessage: emptyListMessage
+  })))));
+};
+
+NativeSelect.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  id: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([nativeOptionType, nativeOptionsGroupType])),
+  value: nativeOptionType,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  trigger: PropTypes.func,
+  error: ErrorMessage.propTypes.children,
+  label: PropTypes.node,
+  note: PropTypes.node,
+  noOptionsMessage: noOptionsMessageType,
+  name: PropTypes.string,
+  boldLabel: PropTypes.bool
+};
+export { NativeSelect, NativeSelect as default };

package/lib/parts/foldable.js

@@ -1,6 +1,5 @@
-"use client";
 import React, { Component } from 'react';
-import { throttle } from './throttle.js';
+import { throttle } from '../utils/throttle.js';
 
 function lastVisibleIndex(lens, maxLen, gap) {
   let extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -195,12 +194,11 @@ class Foldable extends Component {
       const children = React.Children.toArray(_this.props.children);
       const showLastChildIfFit = index === children.length - 2 && extra - gap - 1 > _this.childrenWidths[_this.childrenWidths.length - 1];
       const newLastVisible = index + (showLastChildIfFit ? 1 : 0);
-      const newState = {
-        lastVisible: newLastVisible,
-        renderingStage: nextStage ? nextStage : _this.state.renderingStage
-      };
 
-      _this.setState(newState);
+      _this.setState(prevState => ({ ...prevState,
+        lastVisible: newLastVisible,
+        renderingStage: nextStage ?? prevState.renderingStage
+      }));
     };
   })();
 

package/lib/parts/form-trigger-wrapper.d.ts

@@ -5,12 +5,30 @@ export declare type FormTriggerWrapperProps = {
     size?: SelectSize;
     theme?: Theme;
     className?: string;
+    disabled?: boolean;
     error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
+    errorMessageProps?: object;
     label?: React.ReactNode;
+    labelProps?: object;
     note?: React.ReactNode;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    descriptionProps?: object;
     boldLabel?: boolean;
     children?: React.ReactNode;
-};
-declare const FormTriggerWrapper: React.ForwardRefExoticComponent<FormTriggerWrapperProps & React.RefAttributes<HTMLDivElement>>;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    disabled?: boolean;
+    error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
+    errorMessageProps?: object;
+    label?: React.ReactNode;
+    labelProps?: object;
+    note?: React.ReactNode;
+    descriptionProps?: object;
+    boldLabel?: boolean;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default FormTriggerWrapper;

package/lib/parts/form-trigger-wrapper.js

@@ -1,9 +1,8 @@
-"use client";
 import React from 'react';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import WarningIcon from '../_virtual/warning.js';
-import styles from './form-trigger.p.module.css.js';
+import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
+import styles from '../styles/form-trigger.p.module.css.js';
 const SIZE_STYLES = {
   l: styles.sizeL,
   m: styles.sizeM,
@@ -13,56 +12,47 @@ const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-
-const Label = _ref => {
-  let {
-    children,
-    boldLabel
-  } = _ref;
-
-  if (!children) {
-    return null;
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.label,
-      "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label'
-    }, children);
-  }
-};
-
-const FormTriggerWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const FormTriggerWrapper = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+(_ref, ref) => {
   let {
     size,
     theme: themeFromProps,
     className,
+    disabled,
     error,
+    reserveErrorLine = false,
+    errorMessageProps,
     label,
+    labelProps,
     note,
+    descriptionProps,
     children,
-    onKeyDown,
-    boldLabel
-  } = _ref2;
+    boldLabel,
+    ...restProps
+  } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
+  const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme]),
+    className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme], Boolean(error) && styles.error, disabled && styles.disabled),
     ref: ref,
     "data-test": "select-wrapper",
-    "data-rs-internal": 'select-form-trigger-wrapper'
-  }, /*#__PURE__*/React.createElement(Label, {
-    boldLabel: boldLabel
-  }, label), /*#__PURE__*/React.createElement("div", {
-    onKeyDown: onKeyDown
-  }, children), error && /*#__PURE__*/React.createElement("div", {
+    "data-rs-internal": 'select-form-trigger-wrapper',
+    ...restProps
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: styles.label,
+    "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label',
+    ...labelProps
+  }, label), children, hasFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement(ErrorMessage, {
     className: styles.errorMessage,
-    "data-rs-internal": 'select-form-trigger-wrapper__error-message'
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    className: styles.errorIcon,
-    "data-rs-internal": 'select-form-trigger-wrapper__error-icon',
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
+    reserveLine: reserveErrorLine,
+    ...errorMessageProps
+  }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
-    "data-rs-internal": 'select-form-trigger-wrapper__note'
-  }, note));
+    "data-rs-internal": 'select-form-trigger-wrapper__note',
+    ...descriptionProps
+  }, note)));
 });
 FormTriggerWrapper.displayName = 'FormTriggerWrapper';
-export { FormTriggerWrapper as default };
+export { FormTriggerWrapper, FormTriggerWrapper as default };

package/lib/parts/icons.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ClearOrLoadingProps = {
+    isLoading: boolean;
+    canHaveClearIcon: boolean;
+    onClearClick: () => void;
+    triggerId?: string;
+    className?: string;
+};
+export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
+export declare type IconsProps = {
+    isLoading?: boolean;
+    canHaveClearIcon?: boolean;
+    onClear?: () => void;
+    triggerId?: string;
+};
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => JSX.Element;
+export {};