@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2

package/lib/parts/native-select.js

@@ -0,0 +1,255 @@
+"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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,255 @@
+"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

@@ -0,0 +1,31 @@
+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-observable-force-rerender.d.ts

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

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

@@ -0,0 +1,16 @@
+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 };