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

package/lib/parts/icons.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import cn from 'classnames';
+import { useFocusRing } from 'react-aria';
+import CloseOutlineIcon from '../_virtual/close-outline.js';
+import LoadingOutlineIcon from '../_virtual/loading-outline.js';
+import DownOutlineIcon from '../_virtual/down-outline.js';
+import styles from '../styles/common.p.module.css.js';
+
+const ClearOrLoading = _ref => {
+  let {
+    isLoading,
+    canHaveClearIcon,
+    onClearClick,
+    triggerId,
+    className
+  } = _ref;
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+      style: {
+        pointerEvents: 'none'
+      },
+      className: cn(className, styles.icon),
+      "data-test": "loading-icon",
+      "data-render-all-sizes": true
+    });
+  } else if (canHaveClearIcon) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: cn(className, styles.icon, styles.clearIcon, isFocusVisible && styles.clearIconFocusVisible),
+      "data-test": "clear-icon",
+      onClick: e => {
+        e.stopPropagation();
+        onClearClick();
+      },
+      onPointerDown: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation(),
+      onKeyDown: e => e.stopPropagation(),
+      "aria-label": "Clear",
+      "aria-controls": triggerId,
+      ...focusProps
+    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
+      "data-render-all-sizes": true
+    }));
+  } else {
+    return null;
+  }
+};
+
+const Icons = _ref2 => {
+  let {
+    isLoading,
+    canHaveClearIcon,
+    onClear,
+    triggerId
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.iconsWrapper
+  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
+    isLoading: isLoading,
+    canHaveClearIcon: canHaveClearIcon,
+    onClearClick: onClear,
+    triggerId: triggerId
+  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
+    className: styles.toggle,
+    "data-test": "toggle-icon",
+    "data-render-all-sizes": true
+  }));
+};
+
+export { ClearOrLoading, Icons };

package/lib/parts/list-box.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { AriaListBoxOptions } from 'react-aria';
+import type { ListState } from 'react-stately';
+import type { SelectSize, SelectMode } from '../types';
+export declare type ListBoxProps<T extends object> = {
+    listBoxRef?: React.RefObject<HTMLUListElement>;
+    state: ListState<T>;
+    ariaListBoxProps?: AriaListBoxOptions<T>;
+    size?: SelectSize;
+    mode?: SelectMode;
+    className?: string;
+    maxVisibleItems?: number;
+    selectionMode?: 'single' | 'multiple';
+};
+export declare function ListBox<T extends object>({ listBoxRef: listBoxRefFromProps, state, ariaListBoxProps, size, mode, maxVisibleItems, selectionMode }: ListBoxProps<T>): JSX.Element;
+export declare type EmptyListBoxProps<T extends object> = {
+    emptyListMessage: string;
+} & Omit<ListBoxProps<T>, 'state'>;
+export declare const EmptyListBox: <T extends object>({ emptyListMessage, ...props }: EmptyListBoxProps<T>) => JSX.Element;

package/lib/parts/list-box.js

@@ -0,0 +1,146 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useListState, Item } from 'react-stately';
+import { useListBox, useOption, mergeProps, useListBoxSection } from 'react-aria';
+import styles from '../styles/list-box.p.module.css.js';
+import { calculateMaxHeightByItems } from '../utils/calculate-max-height-by-items.js';
+import { getRealItemsCnt } from '../utils/get-real-items-cnt.js';
+import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
+import CheckOutlineIcon from '../_virtual/check-outline.js';
+const MODE_STYLES = {
+  classic: styles.modeClassic,
+  rock: styles.modeRock
+};
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+
+function Option(_ref) {
+  let {
+    item,
+    state,
+    selectionMode
+  } = _ref;
+  // Get props for the option element
+  const ref = useRef(null);
+  const {
+    optionProps,
+    isSelected,
+    isFocused,
+    isDisabled
+  } = useOption({
+    key: item.key
+  }, state, ref);
+  return /*#__PURE__*/React.createElement("li", { ...mergeProps(optionProps),
+    ref: ref,
+    className: cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled),
+    "data-rs-internal": "select-list-box__item",
+    "data-focused": isFocused,
+    "data-test": `select-options-list__item_${item.key}`
+  }, /*#__PURE__*/React.createElement("span", null, item.rendered), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+    "data-rs-internal": "select-list-box__check-icon",
+    className: cn(styles.checkIcon, isSelected && styles.visible)
+  }));
+}
+
+function ListBoxSection(_ref2) {
+  let {
+    section,
+    state,
+    isFirst,
+    selectionMode
+  } = _ref2;
+  const {
+    itemProps,
+    headingProps,
+    groupProps
+  } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label']
+  });
+  const hasHeading = section.rendered !== null && section.rendered !== undefined;
+  const hasDivider = !isFirst && !hasHeading; // If the section is not the first, add a divider for visual separation
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasDivider && /*#__PURE__*/React.createElement("hr", {
+    className: styles.divider
+  }), /*#__PURE__*/React.createElement("li", { ...itemProps
+  }, hasHeading && /*#__PURE__*/React.createElement("span", {
+    className: styles.groupHeader,
+    ...headingProps,
+    "data-rs-internal": "select-list-box__group-header"
+  }, section.rendered), /*#__PURE__*/React.createElement("ul", { ...groupProps,
+    style: {
+      padding: 0,
+      listStyle: 'none'
+    }
+  }, [...state.collection.getChildren(section.key)].map(node => /*#__PURE__*/React.createElement(Option, {
+    key: node.key,
+    item: node,
+    state: state,
+    selectionMode: selectionMode
+  })))));
+}
+
+function ListBox(_ref3) {
+  var _items$find;
+
+  let {
+    listBoxRef: listBoxRefFromProps,
+    state,
+    ariaListBoxProps,
+    size,
+    mode,
+    maxVisibleItems = 5,
+    selectionMode
+  } = _ref3;
+  const ref = useRef(null);
+  const listBoxRef = listBoxRefFromProps ?? ref;
+  const {
+    listBoxProps
+  } = useListBox(ariaListBoxProps, state, listBoxRef);
+  const items = [...state.collection].filter(item => item.key !== VIRTUAL_ITEMS_SECTION_KEY);
+  const firstSectionKey = (_items$find = items.find(item => item.type === 'section')) === null || _items$find === void 0 ? void 0 : _items$find.key;
+  const itemsCount = getRealItemsCnt(state);
+  return /*#__PURE__*/React.createElement("ul", { ...listBoxProps,
+    className: cn(styles.listBox, MODE_STYLES[mode], SIZE_STYLES[size]),
+    ref: listBoxRef,
+    style: {
+      '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems)
+    },
+    "data-rs-internal": "select-list-box",
+    "data-test": "select-options-list"
+  }, items.map(item => item.type === 'section' ? /*#__PURE__*/React.createElement(ListBoxSection, {
+    key: item.key,
+    section: item,
+    state: state,
+    isFirst: item.key === firstSectionKey,
+    selectionMode: selectionMode
+  }) : /*#__PURE__*/React.createElement(Option, {
+    key: item.key,
+    item: item,
+    state: state,
+    selectionMode: selectionMode
+  })));
+}
+
+const EmptyListBox = _ref4 => {
+  let {
+    emptyListMessage,
+    ...props
+  } = _ref4;
+  const emptyListState = useListState({
+    children: [/*#__PURE__*/React.createElement(Item, {
+      key: "no-results",
+      textValue: emptyListMessage
+    }, emptyListMessage)],
+    disabledKeys: ['no-results'],
+    selectionMode: 'none'
+  });
+  return /*#__PURE__*/React.createElement(ListBox, { ...props,
+    state: emptyListState
+  });
+};
+
+export { EmptyListBox, ListBox };

package/lib/parts/multi-trigger.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SelectState } from 'react-stately';
+export interface MultiTriggerProps<T extends object> {
+    state: SelectState<T, 'multiple'>;
+    valueProps: object;
+    isSingleLine: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    triggerRef?: React.RefObject<HTMLDivElement>;
+}
+export declare function MultiTrigger<T extends object>({ state, valueProps, isSingleLine, isDisabled, placeholder, triggerRef }: MultiTriggerProps<T>): JSX.Element;

package/lib/parts/multi-trigger.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import cn from 'classnames';
+import { RemovableTag, Tag } from '@rescui/tag';
+import styles from '../styles/common.p.module.css.js';
+import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
+import Foldable from './foldable.js';
+
+function MultiTrigger(_ref) {
+  let {
+    state,
+    valueProps,
+    isSingleLine,
+    isDisabled,
+    placeholder,
+    triggerRef
+  } = _ref;
+  const hasValue = state.selectedItems.length > 0;
+
+  if (!hasValue) {
+    return /*#__PURE__*/React.createElement("div", { ...valueProps,
+      className: cn(styles.triggerText, styles.labelNotSelected),
+      "data-test": 'multiselect__trigger_content'
+    }, placeholder);
+  }
+
+  const handleRemoveItem = key => {
+    var _triggerRef$current;
+
+    state.setValue([...state.selectedItems].map(item => item.key).filter(itemKey => itemKey !== key));
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+  };
+
+  const tags = [...state.selectedItems].map(item => {
+    const key = item.key;
+    return /*#__PURE__*/React.createElement(RemovableTag, {
+      key: key,
+      "data-test": `selected-tag-${key}`,
+      className: styles.tag,
+      disabled: isDisabled,
+      onRemoveClick: () => handleRemoveItem(key),
+      "data-rs-internal": "select-trigger__removable-tag",
+      wrap: !isSingleLine,
+      "aria-label": getTextFromNodes(item.rendered)
+    }, item.rendered);
+  });
+  return /*#__PURE__*/React.createElement("div", { ...valueProps,
+    className: styles.multi,
+    "data-test": "multiselect__trigger_content"
+  }, 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)
+  }, tags) : /*#__PURE__*/React.createElement("div", {
+    className: styles.tagsContainer
+  }, tags));
+}
+
+export { MultiTrigger };

package/lib/parts/native-select-options-with-groups.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NativeSelectOptionOrGroup } from '../types';
+export declare type NativeSelectOptionsWithGroupsProps = {
+    optionsWithGroups: NativeSelectOptionOrGroup[];
+    placeholder?: string;
+    emptyListMessage?: string;
+};
+export declare const NativeSelectOptionsWithGroups: React.FC<NativeSelectOptionsWithGroupsProps>;

package/lib/parts/native-select-options-with-groups.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { NO_OPTIONS_VALUE } from '../constants.js';
+import { isOptionAGroup } from '../utils/is-option-a-group.js';
+
+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(option => /*#__PURE__*/React.createElement(Option, {
+    key: option.value,
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled
+  })));
+};
+
+const NativeSelectOptionsWithGroups = _ref4 => {
+  let {
+    optionsWithGroups,
+    placeholder,
+    emptyListMessage
+  } = _ref4;
+  const hasOptions = optionsWithGroups.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
+    value: '',
+    disabled: true,
+    hidden: true
+  }, hasOptions ? placeholder : emptyListMessage), !hasOptions && /*#__PURE__*/React.createElement("option", {
+    value: NO_OPTIONS_VALUE,
+    disabled: true
+  }, emptyListMessage), optionsWithGroups.map(optionOrGroup => {
+    if (isOptionAGroup(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: option.label,
+      disabled: option.disabled
+    });
+  }));
+};
+
+export { NativeSelectOptionsWithGroups };

package/lib/parts/native-select-trigger.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { Theme } from '@rescui/ui-contexts';
+import { Key, SelectSize } from '../types';
+export declare type NativeSelectDefaultTriggerProps = {
+    isFocused: boolean;
+    isHovered: boolean;
+    isLoading: boolean;
+    isDisabled: boolean;
+    size: SelectSize;
+    theme?: Theme;
+    hasError: boolean;
+    placeholder?: string;
+    value: {
+        value?: Key;
+        label: string;
+    };
+};
+export declare const NativeSelectTrigger: ({ isFocused, isHovered, isLoading, isDisabled, hasError, size, theme, placeholder, value }: NativeSelectDefaultTriggerProps) => JSX.Element;

package/lib/parts/native-select-trigger.js

@@ -0,0 +1,54 @@
+import cn from 'classnames';
+import React from 'react';
+import LoadingOutlineIcon from '../_virtual/loading-outline.js';
+import DownOutlineIcon from '../_virtual/down-outline.js';
+import styles from '../styles/native-select-trigger.p.module.css.js';
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+
+const NativeSelectTrigger = _ref => {
+  let {
+    isFocused,
+    isHovered,
+    isLoading,
+    isDisabled,
+    hasError,
+    size,
+    theme,
+    placeholder,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: cn(styles.trigger, SIZE_STYLES[size], THEME_STYLES[theme], isDisabled ? styles.disabled : styles.enabled, hasError && styles.error),
+    "data-focused": isFocused,
+    "data-hovered": isHovered,
+    "data-test": 'native-select_trigger',
+    "data-rs-internal": 'select-native-trigger'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.triggerText, !(value !== null && value !== void 0 && value.value) && styles.labelNotSelected),
+    "data-test": 'native-select_trigger_text'
+  }, (value === null || value === void 0 ? void 0 : value.label) ?? placeholder), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconsWrapper
+  }, isLoading && /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+    style: {
+      pointerEvents: 'none'
+    },
+    className: styles.icon,
+    "data-test": "loading-icon",
+    "data-render-all-sizes": true
+  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
+    className: styles.toggle,
+    "data-test": "down-icon",
+    "data-render-all-sizes": true
+  })));
+};
+
+export { NativeSelectTrigger };

package/lib/parts/popover.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { AriaPopoverProps } from 'react-aria';
+import type { OverlayTriggerState } from 'react-stately';
+import type { SelectMode } from '../types';
+export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'isNonModal'> {
+    children: React.ReactNode;
+    state: OverlayTriggerState;
+    style?: React.CSSProperties;
+    popoverRef?: React.RefObject<HTMLDivElement | null>;
+    mode?: SelectMode;
+}
+export declare function Popover({ children, state, style, triggerRef, mode, ...props }: PopoverProps): JSX.Element;

package/lib/parts/popover.js

@@ -0,0 +1,62 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { usePopover, useInteractOutside, Overlay, mergeProps, DismissButton } from 'react-aria';
+import styles from '../styles/popover.p.module.css.js';
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
+
+function Popover(_ref) {
+  let {
+    children,
+    state,
+    style,
+    triggerRef,
+    mode,
+    ...props
+  } = _ref;
+  const popoverRefLocal = useRef(null);
+  const popoverRef = props.popoverRef ?? popoverRefLocal;
+  const {
+    popoverProps,
+    placement: realPlacement
+  } = usePopover({ ...props,
+    offset: 8,
+    popoverRef,
+    triggerRef,
+    isNonModal: true
+  }, state);
+  useInteractOutside({
+    ref: popoverRef,
+    onInteractOutside: state.close
+  });
+
+  const handleKeyDown = e => {
+    // Block default browser behavior for arrow keys
+    // This will prevent the page from scrolling when we focus on the edges of the list.
+    // Relevant only for useSelect usage
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement("div", { ...mergeProps(popoverProps, {
+      onKeyDown: handleKeyDown
+    }),
+    ref: popoverRef,
+    className: cn(styles.popover, MODE_STYLES[mode]),
+    style: { ...popoverProps.style,
+      ...style
+    },
+    "data-popover-placement": realPlacement
+  }, /*#__PURE__*/React.createElement(DismissButton, {
+    onDismiss: state.close
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.contentWrapper
+  }, children), /*#__PURE__*/React.createElement(DismissButton, {
+    onDismiss: state.close
+  })));
+}
+
+export { Popover };

package/lib/parts/popup-content.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { AriaListBoxOptions } from 'react-aria';
+import type { Theme } from '@rescui/ui-contexts';
+import type { CommonState, SelectMode, SelectSize, AriaPlacement } from '../types';
+export declare type PopupContentProps<T extends object> = {
+    theme: Theme;
+    state: CommonState<T>;
+    triggerRef: React.RefObject<HTMLElement>;
+    popoverRef?: React.RefObject<HTMLDivElement>;
+    listBoxRef?: React.RefObject<HTMLUListElement>;
+    placement: AriaPlacement;
+    size?: SelectSize;
+    mode?: SelectMode;
+    listBoxProps: AriaListBoxOptions<T>;
+    emptyListMessage: string;
+    maxVisibleItems?: number;
+    selectionMode?: 'single' | 'multiple';
+};
+export declare const PopupContent: <T extends object>({ theme: themeFromProps, state, triggerRef, popoverRef, listBoxRef, placement, size: sizeFromProps, mode, listBoxProps, emptyListMessage, maxVisibleItems, selectionMode }: PopupContentProps<T>) => JSX.Element;

package/lib/parts/popup-content.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+import { useObservableForceRerender } from '../hooks/use-observable-force-rerender.js';
+import { useCssContextTransfer } from '../hooks/use-css-context-transfer.js';
+import { getRealItemsCnt } from '../utils/get-real-items-cnt.js';
+import styles from '../styles/popover.p.module.css.js';
+import { Popover } from './popover.js';
+import { ListBox, EmptyListBox } from './list-box.js'; // eslint-disable-next-line complexity
+
+const PopupContent = _ref => {
+  let {
+    theme: themeFromProps,
+    state,
+    triggerRef,
+    popoverRef,
+    listBoxRef,
+    placement,
+    size: sizeFromProps,
+    mode,
+    listBoxProps,
+    emptyListMessage,
+    maxVisibleItems = 5,
+    selectionMode
+  } = _ref;
+  const isOpen = state.isOpen;
+  const [triggerWidth, setTriggerWidth] = React.useState(null);
+  useResizeObserver(triggerRef, () => {
+    setTriggerWidth(`${triggerRef.current.offsetWidth}px`);
+  }); // We use invisible and "untouchable" dummy element to observe `size` changes from css to trigger force rerenders
+
+  const observableRef = useObservableForceRerender();
+  const {
+    theme,
+    size,
+    primaryColors
+  } = useCssContextTransfer({
+    triggerRef,
+    isOpen,
+    themeFromProps,
+    sizeFromProps
+  });
+  const isEmpty = getRealItemsCnt(state) === 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: observableRef,
+    className: styles.observable
+  }), isOpen && /*#__PURE__*/React.createElement(Popover, {
+    state: state,
+    triggerRef: triggerRef,
+    popoverRef: popoverRef,
+    placement: placement,
+    style: {
+      '--_rs-select-trigger-width': triggerWidth || 'auto',
+      '--rs-theme-dark': theme === 'dark' ? '1' : '0',
+      ...primaryColors
+    },
+    mode: mode
+  }, !isEmpty ? /*#__PURE__*/React.createElement(ListBox, {
+    listBoxRef: listBoxRef,
+    ariaListBoxProps: listBoxProps,
+    size: size,
+    mode: mode,
+    state: state,
+    maxVisibleItems: maxVisibleItems,
+    selectionMode: selectionMode
+  }) : /*#__PURE__*/React.createElement(EmptyListBox, {
+    listBoxRef: listBoxRef,
+    ariaListBoxProps: listBoxProps,
+    size: size,
+    mode: mode,
+    emptyListMessage: emptyListMessage,
+    maxVisibleItems: maxVisibleItems,
+    selectionMode: selectionMode
+  })));
+};
+
+export { PopupContent };