@rescui/select 0.15.2 → 0.16.0

package/lib/parts/native-select.js

@@ -1,255 +0,0 @@
-"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 { nativeOptionType, nativeOptionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
-import SelectTrigger from './trigger.js';
-import FormTriggerWrapper from './form-trigger-wrapper.js';
-import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
-import styles from './native-select.p.module.css.js';
-const DEFAULT_NO_OPTIONS_MESSAGES = {
-  noOptions: 'No options',
-  loading: 'Loading...'
-};
-const PLACEHOLDER_VALUE = '__placeholder__';
-
-function isString(s) {
-  return Object.prototype.toString.call(s) === '[object String]';
-}
-
-const isOptionsGroup = optionOrGroup => typeof optionOrGroup.options !== 'undefined';
-
-const collectOptionGroupValues = options => options.map(_ref => {
-  let {
-    value
-  } = _ref;
-  return value;
-}).join('-');
-
-const Option = _ref2 => {
-  let {
-    value,
-    label,
-    disabled = false
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("option", {
-    value: value,
-    disabled: disabled
-  }, label);
-};
-
-const OptionGroup = _ref3 => {
-  let {
-    options = [],
-    label = '',
-    disabled = false
-  } = _ref3;
-  return /*#__PURE__*/React.createElement("optgroup", {
-    label: label,
-    disabled: disabled
-  }, options.map(_ref4 => {
-    let {
-      value,
-      label: optionLabel,
-      disabled: optionDisabled
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: value,
-      value: value,
-      label: optionLabel,
-      disabled: optionDisabled
-    });
-  }));
-};
-
-const OptionsWithGroups = _ref5 => {
-  let {
-    optionsWithGroups
-  } = _ref5;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, optionsWithGroups.map(optionOrGroup => {
-    if (isOptionsGroup(optionOrGroup)) {
-      const group = optionOrGroup;
-      return /*#__PURE__*/React.createElement(OptionGroup, {
-        key: `group--${group.label}--${collectOptionGroupValues(group.options)}`,
-        options: group.options,
-        disabled: group.disabled,
-        label: group.label
-      });
-    }
-
-    const option = optionOrGroup;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: option.value,
-      value: option.value,
-      label: optionOrGroup.label,
-      disabled: optionOrGroup.disabled
-    });
-  }));
-};
-
-function findSelectedOption(options, selectedValue) {
-  let result = null;
-
-  const checkOption = option => {
-    if (result === null || option.value === selectedValue) {
-      result = option;
-    }
-  };
-
-  options.forEach(optionOrGroup => {
-    if (isOptionsGroup(optionOrGroup)) {
-      const group = optionOrGroup;
-      group.options?.forEach(checkOption);
-    } else {
-      checkOption(optionOrGroup);
-    }
-  });
-  return result;
-}
-
-function getNoOptionsMessage(noOptionsMessage, isLoading) {
-  const {
-    noOptions,
-    loading
-  } = isString(noOptionsMessage) ? { ...DEFAULT_NO_OPTIONS_MESSAGES,
-    noOptions: noOptionsMessage
-  } : { ...DEFAULT_NO_OPTIONS_MESSAGES,
-    ...noOptionsMessage
-  };
-
-  if (isLoading) {
-    return loading;
-  } else {
-    return noOptions;
-  }
-}
-
-const SIZE_STYLES = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-}; // eslint-disable-next-line complexity
-
-const NativeSelect = _ref6 => {
-  let {
-    options = [],
-    size = 'm',
-    theme: themeFromProps,
-    className = null,
-    id,
-    style,
-    value = undefined,
-    onChange,
-    placeholder,
-    isLoading = false,
-    isDisabled = false,
-    trigger,
-    label,
-    note,
-    error,
-    reserveErrorLine = false,
-    noOptionsMessage,
-    name,
-    boldLabel = true
-  } = _ref6;
-  const theme = useThemeWithUndefined(themeFromProps);
-  const [hovered, setHovered] = useState(false);
-
-  const handleChange = event => {
-    const newValue = event.target.value;
-    const selectedOption = findSelectedOption(options, newValue);
-
-    if (onChange) {
-      onChange(selectedOption);
-    }
-  };
-
-  const optionList = /*#__PURE__*/React.createElement(OptionsWithGroups, {
-    optionsWithGroups: placeholder !== null ? [{
-      value: PLACEHOLDER_VALUE,
-      label: options.length > 0 ? placeholder : getNoOptionsMessage(noOptionsMessage, isLoading),
-      disabled: true
-    }, ...options] : options
-  });
-
-  let _trigger;
-
-  if (trigger) {
-    _trigger = trigger({
-      selectedLabel: value?.label,
-      selectedValue: value?.value,
-      placeholder,
-      hovered
-    });
-  } else {
-    _trigger = /*#__PURE__*/React.createElement(SelectTrigger, {
-      theme: theme,
-      size: size,
-      isOpen: false,
-      selected: value,
-      placeholder: placeholder,
-      searchInput: "",
-      isClearable: false,
-      isLoading: isLoading,
-      isDisabled: isDisabled,
-      error: Boolean(error)
-    });
-  }
-
-  const currentId = `native-select-${useBackwardCompatibleId()}`;
-  const errorId = `${id ? id : currentId}-error`;
-  return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-    className: cn(className, styles.main, SIZE_STYLES[size]),
-    id: id,
-    theme: theme,
-    size: size,
-    disabled: isDisabled,
-    error: error,
-    errorId: errorId,
-    reserveErrorLine: reserveErrorLine,
-    label: label,
-    note: note,
-    onKeyDown: () => false,
-    boldLabel: boldLabel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper,
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-    style: style,
-    "data-test": "native-select"
-  }, _trigger, /*#__PURE__*/React.createElement("select", {
-    "data-test": "native-select_select",
-    "data-rs-internal": 'select-native__select',
-    className: styles.select,
-    disabled: isDisabled ? true : undefined,
-    onChange: handleChange,
-    name: name,
-    value: value?.label !== '' ? value?.value : PLACEHOLDER_VALUE,
-    "aria-errormessage": error ? errorId : undefined,
-    "aria-invalid": Boolean(error)
-  }, optionList)));
-};
-
-NativeSelect.propTypes = {
-  className: PropTypes.string,
-  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,
-  style: PropTypes.object,
-  name: PropTypes.string,
-  boldLabel: PropTypes.bool
-};
-export { NativeSelect as default };

package/lib/parts/native-select.p.module.css.js

@@ -1,9 +0,0 @@
-var styles = {
-  "sizeS": "_sizeS_1jac8uu_6",
-  "sizeM": "_sizeM_1jac8uu_9",
-  "sizeL": "_sizeL_1jac8uu_12",
-  "main": "_main_1jac8uu_16",
-  "wrapper": "_wrapper_1jac8uu_20",
-  "select": "_select_1jac8uu_24"
-};
-export { styles as default };

package/lib/parts/throttle.d.ts

@@ -1 +0,0 @@
-export declare function throttle<A extends unknown[], R extends unknown>(func: (...args: A) => R, wait: number): (...args: A) => R;

package/lib/parts/trigger.d.ts

@@ -1,37 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import type { SelectOption, SelectSize, SelectMode } from '../types';
-declare type SelectTriggerPropsOwn = {
-    size: SelectSize;
-    mode?: SelectMode;
-    theme?: Theme;
-    className?: string;
-    triggerRef?: React.Ref<HTMLDivElement>;
-    isOpen?: boolean;
-    selected?: unknown;
-    placeholder?: string;
-    isClearable?: boolean;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    isSingleLine?: boolean;
-    searchInput?: string;
-    isSearchable?: boolean;
-    onClearClick?: () => void;
-    onItemClearClick?: (s: SelectOption) => void;
-    onSearchChange?: (newValue: string) => void;
-    error?: boolean;
-};
-export declare type SelectTriggerProps = SelectTriggerPropsOwn & Omit<HTMLAttributes<HTMLDivElement>, keyof SelectTriggerPropsOwn>;
-export declare type SelectedOptionProps = {
-    selected: SelectOption;
-    searchInput?: string;
-    placeholder?: string;
-    isSearchable?: boolean;
-    isDisabled?: boolean;
-    inputRef: React.Ref<HTMLInputElement>;
-    handleBlur: React.FocusEventHandler<HTMLInputElement>;
-    handleFocus: React.FocusEventHandler<HTMLInputElement>;
-    handleChange: React.ChangeEventHandler<HTMLInputElement>;
-};
-declare const SelectTrigger: React.FC<SelectTriggerProps>;
-export default SelectTrigger;

package/lib/parts/trigger.js

@@ -1,255 +0,0 @@
-"use client";
-import React, { useRef, useState } from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-import { RemovableTag, Tag } from '@rescui/tag';
-import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import DownOutlineIcon from '../_virtual/down-outline.js';
-import CloseOutlineIcon from '../_virtual/close-outline.js';
-import LoadingOutlineIcon from '../_virtual/loading-outline.js';
-import { optionType } from '../common-prop-types.js';
-import { getOptionValue } from '../utils.js';
-import Foldable from './foldable.js';
-import styles from './trigger.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
-};
-
-const MultiselectOptions = _ref => {
-  let {
-    isSingleLine,
-    selected,
-    isDisabled,
-    onItemClearClick
-  } = _ref;
-  const selectedOptions = selected.map(s => {
-    const key = getOptionValue(s);
-    return /*#__PURE__*/React.createElement(RemovableTag, {
-      key: key,
-      "data-test": `selected-tag-${key}`,
-      className: styles.tag,
-      disabled: isDisabled,
-      onRemoveClick: () => onItemClearClick(s),
-      "data-rs-internal": 'select-trigger__removable-tag',
-      wrap: !isSingleLine
-    }, s.label);
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.multi,
-    "data-test": "multi"
-  }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
-    className: styles.tagsContainer,
-    renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
-      className: cn(styles.tag, styles.filledTag),
-      key: "+",
-      ref: ref,
-      "data-rs-internal": 'select-trigger__tag'
-    }, `+${n}`)
-  }, selectedOptions) : /*#__PURE__*/React.createElement("div", {
-    className: styles.tagsContainer
-  }, selectedOptions));
-};
-
-function isSelectedEmpty(selected) {
-  if (Array.isArray(selected)) {
-    return selected.length === 0;
-  } else {
-    return !selected;
-  }
-} // eslint-disable-next-line complexity
-
-
-const SelectedOption = _ref2 => {
-  let {
-    selected,
-    searchInput = '',
-    placeholder = '',
-    isSearchable,
-    isDisabled,
-    inputRef,
-    handleBlur,
-    handleFocus,
-    handleChange
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.labelWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.label, isSelectedEmpty(selected) && styles.labelNotSelected),
-    "data-test": "select-content"
-  }, searchInput === '' ? selected && selected.label ? selected.label : placeholder : ''), isSearchable && !isDisabled && /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    tabIndex: isSearchable ? 0 : -1,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    className: styles.searchInput,
-    autoCapitalize: "none",
-    autoComplete: "off",
-    autoCorrect: "off",
-    spellCheck: "false",
-    type: "text",
-    value: searchInput,
-    onChange: handleChange,
-    "data-test": "search-input"
-  }));
-};
-
-const ClearOrLoading = _ref3 => {
-  let {
-    isClearable,
-    isLoading,
-    isDisabled,
-    onClearClick,
-    selected
-  } = _ref3;
-
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-      style: {
-        pointerEvents: 'none'
-      },
-      className: styles.icon,
-      "data-test": "loading-icon",
-      "data-render-all-sizes": true
-    });
-  } else if (isClearable && !isDisabled && !isSelectedEmpty(selected)) {
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: cn(styles.icon, styles.clearIcon),
-      "data-test": "clear-icon",
-      onClick: e => {
-        e.stopPropagation();
-        onClearClick();
-      }
-    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
-      "data-render-all-sizes": true
-    }));
-  } else {
-    return null;
-  }
-}; // eslint-disable-next-line complexity
-
-
-const SelectTrigger = /*#__PURE__*/React.memo(props => {
-  const {
-    size,
-    mode,
-    theme: themeFromProps,
-    className,
-    triggerRef,
-    isOpen,
-    selected = null,
-    placeholder,
-    isClearable,
-    isLoading,
-    isDisabled,
-    isSingleLine,
-    searchInput,
-    isSearchable,
-    onClearClick,
-    onItemClearClick,
-    onSearchChange,
-    error,
-    ...restProps
-  } = props;
-  const theme = useThemeWithUndefined(themeFromProps);
-  const inputRef = useRef(null);
-  const [isSearchFocused, setIsSearchFocused] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isSearchKeyFocused, setIsSearchKeyFocused] = useState(false);
-  const isMulti = selected ? Boolean(selected.length) : false;
-
-  const handleChange = event => {
-    const newValue = event.target.value;
-    onSearchChange(newValue);
-  };
-
-  const handleBlur = () => {
-    if (isSearchable && inputRef.current) {
-      setIsSearchFocused(false);
-      setIsSearchKeyFocused(false);
-    }
-  };
-
-  const handleFocus = e => {
-    if (isSearchable && inputRef.current) {
-      setIsSearchFocused(true);
-      const target = e.target;
-      setIsSearchKeyFocused(target.getAttribute('data-focus-method') === 'key');
-    }
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    tabIndex: isSearchable || isDisabled ? -1 : 0,
-    className: cn(styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], isMulti && styles.isMulti, isSearchFocused && styles.searchFocused, isSearchKeyFocused && styles.searchKeyFocused, isOpen && styles.open, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error, isFocused && styles.focused, className),
-    onFocus: e => {
-      const target = e.target;
-      setIsFocused(target.getAttribute('data-focus-method') === 'key');
-    },
-    onBlur: () => setIsFocused(false),
-    ref: triggerRef,
-    "data-test": "select",
-    "data-rs-internal": 'select-trigger',
-    ...restProps
-  }, isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
-    selected: selected,
-    isDisabled: isDisabled,
-    isSingleLine: isSingleLine,
-    onItemClearClick: onItemClearClick
-  }) : /*#__PURE__*/React.createElement(SelectedOption, {
-    selected: selected,
-    placeholder: placeholder,
-    searchInput: searchInput,
-    isSearchable: isSearchable,
-    isDisabled: isDisabled,
-    inputRef: inputRef,
-    handleBlur: handleBlur,
-    handleFocus: handleFocus,
-    handleChange: handleChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
-  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
-    isLoading: isLoading,
-    isDisabled: isDisabled,
-    isClearable: isClearable,
-    onClearClick: onClearClick,
-    selected: selected
-  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
-    className: styles.toggle,
-    "data-test": "down-icon",
-    "data-render-all-sizes": true
-  })));
-});
-SelectTrigger.displayName = 'SelectTrigger';
-SelectTrigger.propTypes = {
-  size: PropTypes.oneOf(['m', 's', 'l']),
-  mode: PropTypes.oneOf(['classic', 'rock']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  className: PropTypes.string,
-  isOpen: PropTypes.bool,
-  selected: PropTypes.oneOfType([optionType, PropTypes.arrayOf(optionType)]),
-  placeholder: PropTypes.string,
-  isClearable: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  isSingleLine: PropTypes.bool,
-  onClearClick: PropTypes.func,
-  onItemClearClick: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  error: PropTypes.bool,
-  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  searchInput: PropTypes.string
-};
-export { SelectTrigger as default };

package/lib/parts/trigger.p.module.css.js

@@ -1,31 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_1tjfs31_6",
-  "themeDark": "_themeDark_1tjfs31_9",
-  "sizeS": "_sizeS_1tjfs31_13",
-  "sizeM": "_sizeM_1tjfs31_16",
-  "sizeL": "_sizeL_1tjfs31_19",
-  "classic": "_classic_1tjfs31_23",
-  "rock": "_rock_1tjfs31_26",
-  "main": "_main_1tjfs31_30",
-  "open": "_open_1tjfs31_60",
-  "searchKeyFocused": "_searchKeyFocused_1tjfs31_65",
-  "error": "_error_1tjfs31_69",
-  "disabled": "_disabled_1tjfs31_75",
-  "enabled": "_enabled_1tjfs31_83",
-  "searchFocused": "_searchFocused_1tjfs31_84",
-  "focused": "_focused_1tjfs31_85",
-  "isMulti": "_isMulti_1tjfs31_118",
-  "iconsWrapper": "_iconsWrapper_1tjfs31_122",
-  "labelWrapper": "_labelWrapper_1tjfs31_137",
-  "label": "_label_1tjfs31_137",
-  "labelNotSelected": "_labelNotSelected_1tjfs31_177",
-  "searchInput": "_searchInput_1tjfs31_190",
-  "multi": "_multi_1tjfs31_220",
-  "tagsContainer": "_tagsContainer_1tjfs31_236",
-  "tag": "_tag_1tjfs31_236",
-  "filledTag": "_filledTag_1tjfs31_259",
-  "toggle": "_toggle_1tjfs31_266",
-  "icon": "_icon_1tjfs31_122",
-  "clearIcon": "_clearIcon_1tjfs31_333"
-};
-export { styles as default };

package/lib/parts/use-backward-compatible-id.d.ts

@@ -1,4 +0,0 @@
-export declare const useBackwardCompatibleId: {
-    (): string | number;
-    counter: number;
-};

package/lib/parts/use-backward-compatible-id.js

@@ -1,14 +0,0 @@
-import React, { useRef } from 'react';
-
-const useBackwardCompatibleId = () => {
-  const id = useRef(null);
-
-  if (id.current === null) {
-    id.current = useBackwardCompatibleId.counter++;
-  }
-
-  return (React.useId ? React.useId : () => id.current)();
-};
-
-useBackwardCompatibleId.counter = 0;
-export { useBackwardCompatibleId };

package/lib/parts/use-observable-force-rerender.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const useObservableForceRerender: () => import("react").MutableRefObject<HTMLDivElement>;

package/lib/parts/use-observable-force-rerender.js

@@ -1,16 +0,0 @@
-import { useRef, useState } from 'react';
-import { useResizeObserver } from '@rescui/use-resize-observer';
-
-const useObservableForceRerender = () => {
-  const observableRef = useRef(null);
-  const [, setDummyState] = useState(false);
-  useResizeObserver(observableRef, () => {
-    //force rerender
-    setDummyState(s => !s);
-  }, {
-    ignoreFirstCall: true
-  });
-  return observableRef;
-};
-
-export { useObservableForceRerender };

package/lib/utils.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { SelectOptionOrGroup, SelectOptionsGroup, NoOptionsMessage, SelectSize } from './types';
-import { Groups, Index, SelectOption } from './types';
-export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;
-export declare function shouldOpenSelect(key: string, isTriggerTarget?: boolean): boolean;
-export declare function getEmptyMessage(isLoading: boolean, isNothingFound: boolean, noOptionsMessage: NoOptionsMessage): string;
-export declare function escapeRegex(str: string): string;
-export declare function convertToOptionGroupsIfNeeded(optionsOrGroups?: SelectOptionOrGroup[]): SelectOptionsGroup[];
-export declare const calculateMaxHeight: (size: SelectSize) => number;
-export declare function getOptionValue(option: SelectOption): string;
-export declare const OptionGroupTypes: {
-    HEADER: string;
-    OPTION: string;
-    DIVIDER: string;
-};
-export declare const getDefaultCursorIndex: (groups: Groups) => Index;
-export declare const getPlainOptionsFromGroups: (groups: Groups) => any[];
-export declare function isGroupsEmpty(groups: Groups): boolean;
-export declare function useStrongMemo<T>(callback: () => T, deps: unknown[]): T;
-export declare function getMovedCursorIndex(groups: Groups, currentCursorIndex: Index, isDownDirection: boolean): Index;
-export declare const isIndexMatchCursor: (cursorIndex: Index, index: Index) => boolean;
-export declare const withoutGroupsLabel: (groups: Groups) => boolean;