@rescui/select 0.15.0 → 0.15.1-RUI-280-Update-select-component-026338d06.52

package/lib/select-basic.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InnerSingleComponentProps } from './types';
+export declare function SelectBasic<T extends object>({ id, size, mode, theme, style, className, isClearable, isLoading, placement, boldLabel, reserveErrorLine, noOptionsMessage, maxVisibleItems, ...ariaProps }: InnerSingleComponentProps<T>): JSX.Element;

package/lib/select-basic.js

@@ -0,0 +1,143 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useSelectState } from 'react-stately';
+import { useSelect, useButton, useFocusRing, mergeProps, HiddenSelect } from 'react-aria';
+import { PopupContent } from './parts/popup-content.js';
+import { Icons } from './parts/icons.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { getEmptyMessage } from './utils/get-empty-message.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 SelectBasic(_ref) {
+  var _state$selectedItems$;
+
+  let {
+    id,
+    size,
+    mode,
+    theme,
+    style,
+    className,
+    isClearable,
+    isLoading,
+    placement,
+    boldLabel,
+    reserveErrorLine,
+    noOptionsMessage,
+    maxVisibleItems,
+    ...ariaProps
+  } = _ref;
+  // Create state based on the incoming props
+  const state = useSelectState({ ...ariaProps,
+    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,
+    onKeyDown: e => {
+      if (isClearable && hasValue) {
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+          state.setValue(null);
+          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": "select"
+  }, /*#__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: styles.trigger,
+    "data-open": isOpen,
+    "data-focus-visible": isFocusVisible,
+    "data-label-focused": isFocusedByLabel,
+    "data-test": "select__trigger"
+  }, /*#__PURE__*/React.createElement("span", { ...valueProps,
+    className: cn(styles.triggerText, !hasValue && styles.labelNotSelected),
+    "data-test": "select__trigger_content"
+  }, ((_state$selectedItems$ = state.selectedItems[0]) === null || _state$selectedItems$ === void 0 ? void 0 : _state$selectedItems$.rendered) ?? ariaProps.placeholder), /*#__PURE__*/React.createElement(Icons, {
+    isLoading: isLoading,
+    canHaveClearIcon: isClearable && !isDisabled && hasValue,
+    onClear: () => {
+      var _triggerRef$current;
+
+      state.setValue(null);
+      (_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
+  })));
+}
+
+export { SelectBasic };

package/lib/select-searchable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InnerSingleComponentProps } from './types';
+export declare function SelectSearchable<T extends object>({ id, size, mode, theme, className, style, isClearable, isLoading, placement, boldLabel, reserveErrorLine, noOptionsMessage, maxVisibleItems, ...ariaProps }: InnerSingleComponentProps<T>): JSX.Element;

package/lib/select-searchable.js

@@ -0,0 +1,168 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useComboBoxState } from 'react-stately';
+import { useComboBox, useButton, useFocusRing, mergeProps, HiddenSelect } from 'react-aria';
+import { PopupContent } from './parts/popup-content.js';
+import { Icons } from './parts/icons.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { getEmptyMessage } from './utils/get-empty-message.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
+}; // Do not use useFilter from 'react-aria' package as it's much slower for most cases
+
+const contains = (string, substring) => {
+  var _context;
+
+  if (substring.length === 0) {
+    return true;
+  }
+
+  return _includesInstanceProperty(_context = string.toLowerCase()).call(_context, substring.toLowerCase());
+}; // eslint-disable-next-line complexity
+
+
+function SelectSearchable(_ref) {
+  var _state$inputValue;
+
+  let {
+    id,
+    size,
+    mode,
+    theme,
+    className,
+    style,
+    isClearable,
+    isLoading,
+    placement,
+    boldLabel,
+    reserveErrorLine,
+    noOptionsMessage,
+    maxVisibleItems,
+    ...ariaProps
+  } = _ref;
+  // Create state based on the incoming props
+  const state = useComboBoxState({ ...ariaProps,
+    defaultFilter: contains,
+    allowsEmptyCollection: true
+  });
+  const hasValue = state.selectedItems.length > 0; // Setup refs and get props for child elements.
+
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const listBoxRef = useRef(null);
+  const popoverRef = useRef(null);
+  const {
+    labelProps,
+    buttonProps: triggerProps,
+    listBoxProps,
+    inputProps: inputPropsWithName,
+    errorMessageProps,
+    descriptionProps
+  } = useComboBox({ ...ariaProps,
+    inputRef,
+    buttonRef: triggerRef,
+    listBoxRef,
+    popoverRef
+  }, state); // Extract name from inputProps to use with HiddenSelect instead
+
+  const {
+    name,
+    ...inputProps
+  } = inputPropsWithName;
+  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: ((_state$inputValue = state.inputValue) === null || _state$inputValue === void 0 ? void 0 : _state$inputValue.length) > 0,
+    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": "select"
+  }, /*#__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, {
+    state: state,
+    triggerRef: triggerRef,
+    label: ariaProps.label,
+    name: name,
+    isDisabled: isDisabled
+  }), /*#__PURE__*/React.createElement("div", { ...mergeProps(buttonProps, focusProps, labelFocusForTriggerProps),
+    ref: triggerRef,
+    className: styles.trigger,
+    "data-open": isOpen,
+    "data-focus-visible": isFocusVisible,
+    "data-label-focused": isFocusedByLabel,
+    "data-test": "select__trigger"
+  }, /*#__PURE__*/React.createElement("input", { ...inputProps,
+    ref: inputRef,
+    className: styles.searchInput,
+    value: inputProps.value,
+    "data-test": "select__trigger_input"
+  }), /*#__PURE__*/React.createElement(Icons, {
+    isLoading: isLoading,
+    canHaveClearIcon: isClearable && !isDisabled && hasValue,
+    onClear: () => {
+      var _inputRef$current;
+
+      state.setValue(null);
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    },
+    triggerId: triggerProps.id
+  })), /*#__PURE__*/React.createElement(PopupContent, {
+    theme: theme,
+    state: state,
+    triggerRef: triggerRef,
+    popoverRef: popoverRef,
+    listBoxRef: listBoxRef,
+    placement: placement,
+    size: size,
+    mode: mode,
+    listBoxProps: listBoxProps,
+    emptyListMessage: emptyListMessage,
+    maxVisibleItems: maxVisibleItems
+  })));
+}
+
+export { SelectSearchable };

package/lib/select.d.ts

@@ -1,92 +1,28 @@
 import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import type { SelectOption, NoOptionsMessage, SelectOptionOrGroup, SelectSize, SelectMode } from './types';
-export interface CustomTriggerOptions {
-    selectedLabel?: string;
-    selectedValue: string;
-    placeholder?: string;
-    hovered: boolean;
-}
-export interface SelectProps {
-    /**
-     * Additional class name
-     */
-    className?: string;
-    id?: string;
-    /**
-     * Array of options or option groups
-     */
-    options: SelectOptionOrGroup[];
-    /**
-     * Is select supports clear the value
-     */
-    isClearable?: boolean;
-    /**
-     * Is select supports inplace filtering
-     */
-    isSearchable?: boolean;
-    /**
-     * Is select has been disabled
-     */
-    isDisabled?: boolean;
-    /**
-     *  Is loader displayed inside select
-     */
-    isLoading?: boolean;
-    /**
-     * A hint to the user of what can be entered in the control
-     */
-    placeholder?: string;
-    /**
-     * Size
-     */
-    size?: SelectSize;
-    /**
-     * Appearance mode
-     */
-    mode?: SelectMode;
-    /**
-     * Appearance theme
-     */
-    theme?: Theme;
-    /**
-     * Value of the select
-     */
-    value: SelectOption;
-    /**
-     * Change value callback. `value => ...`
-     */
-    onChange?: (newValue: SelectOption) => void;
-    /**
-     * Error state flag or React.ReactNode (use with forms)
-     */
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    /**
-     * Label element upper then Select element (use with forms)
-     */
-    label?: React.ReactNode;
-    /**
-     * Placement of dropdown element
-     */
-    placement?: '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';
-    /**
-     * Note element below then Select element (use with forms)
-     */
-    note?: React.ReactNode;
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsMessage?: NoOptionsMessage;
-    /**
-     * Input name attribute
-     */
-    name?: string;
-    boldLabel?: boolean;
-}
-declare const Select: React.FC<SelectProps>;
-export default Select;
+import PropTypes from 'prop-types';
+import type { SelectProps, SelectOption, SelectOptionOrGroup } from './types';
+export declare const Select: {
+    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, ...restProps }: SelectProps): JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        options: PropTypes.Validator<SelectOptionOrGroup[]>;
+        value: PropTypes.Validator<SelectOption>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        isClearable: PropTypes.Requireable<boolean>;
+        isSearchable: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+        error: React.Validator<React.ReactNode>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        noOptionsMessage: React.Validator<import("./types").NoOptionsMessage>;
+        placement: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+    };
+};