@rescui/select 0.15.1-RUI-280-Update-select-component-separate-components-e772abaa1.56 → 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67

package/lib/hooks/use-multi-option-serialization.js

@@ -1,82 +0,0 @@
-import { useMemo } from 'react';
-import { isOptionAGroup } from '../utils/is-option-a-group.js';
-import { getOptionValue } from '../utils/get-option-value.js';
-
-function useMultiOptionSerialization(options, value) {
-  // Create a map of keys to option objects for O(1) lookup
-  const optionsMap = useMemo(() => {
-    const map = new Map();
-    options.forEach(item => {
-      if (isOptionAGroup(item)) {
-        item.options.forEach(option => {
-          const key = getOptionValue(option);
-          map.set(key, {
-            option,
-            isVirtual: false
-          });
-        });
-      } else {
-        const key = getOptionValue(item);
-        map.set(key, {
-          option: item,
-          isVirtual: false
-        });
-      }
-    });
-
-    if (value && Array.isArray(value)) {
-      value.forEach(option => {
-        const key = getOptionValue(option);
-
-        if (!map.has(key)) {
-          map.set(key, {
-            option,
-            isVirtual: true
-          });
-        }
-      });
-    }
-
-    return map;
-  }, [options, value]); // Convert selected option objects array to Set of keys
-
-  const selectedKeys = [];
-  const virtualOptions = [];
-
-  if (value && Array.isArray(value)) {
-    value.forEach(option => {
-      const key = getOptionValue(option);
-      selectedKeys.push(key);
-      const {
-        isVirtual
-      } = optionsMap.get(key);
-
-      if (isVirtual) {
-        virtualOptions.push(option);
-      }
-    });
-  } // Helper function to find options by Set of keys
-
-
-  const findOptionsByKeys = keys => {
-    const foundOptions = [];
-    keys.forEach(key => {
-      if (optionsMap.has(key)) {
-        const {
-          option
-        } = optionsMap.get(key);
-        foundOptions.push(option);
-      }
-    });
-    return foundOptions;
-  };
-
-  return {
-    optionsMap,
-    selectedKeys,
-    findOptionsByKeys,
-    virtualOptions
-  };
-}
-
-export { useMultiOptionSerialization };

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

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

package/lib/hooks/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/hooks/use-option-serialization.d.ts

@@ -1,10 +0,0 @@
-import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
-export declare function useOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption | null): {
-    optionsMap: Map<Key, {
-        option: SelectOption;
-        isVirtual: boolean;
-    }>;
-    selectedKey: Key;
-    findOptionByKey: (key: Key | null) => SelectOption | null;
-    virtualOption: SelectOption;
-};

package/lib/hooks/use-option-serialization.js

@@ -1,59 +0,0 @@
-import { useMemo } from 'react';
-import { isOptionAGroup } from '../utils/is-option-a-group.js';
-import { getOptionValue } from '../utils/get-option-value.js';
-
-function useOptionSerialization(options, value) {
-  // Create a map of keys to option objects for O(1) lookup
-  const optionsMap = useMemo(() => {
-    const map = new Map();
-    options.forEach(item => {
-      if (isOptionAGroup(item)) {
-        item.options.forEach(option => {
-          const key = getOptionValue(option);
-          map.set(key, {
-            option,
-            isVirtual: false
-          });
-        });
-      } else {
-        const key = getOptionValue(item);
-        map.set(key, {
-          option: item,
-          isVirtual: false
-        });
-      }
-    });
-
-    if (value) {
-      const key = getOptionValue(value);
-
-      if (!map.has(key)) {
-        map.set(key, {
-          option: value,
-          isVirtual: true
-        });
-      }
-    }
-
-    return map;
-  }, [options, value]); // Convert selected option object to key
-
-  const selectedKey = value ? getOptionValue(value) : null;
-  const virtualOption = value && optionsMap.get(selectedKey).isVirtual ? value : null; // Helper function to find option by key
-
-  const findOptionByKey = key => {
-    var _optionsMap$get;
-
-    if (key === null) return null;
-    return ((_optionsMap$get = optionsMap.get(key)) === null || _optionsMap$get === void 0 ? void 0 : _optionsMap$get.option) || null;
-  };
-
-  return {
-    optionsMap,
-    selectedKey,
-    findOptionByKey,
-    virtualOption
-  };
-}
-
-export { useOptionSerialization };

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

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { OverlayTriggerState } from '@react-stately/overlays';
-import type { AriaPopoverProps } from '@react-aria/overlays';
-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

@@ -1,64 +0,0 @@
-import React, { useRef } from 'react';
-import cn from 'classnames';
-import { usePopover, Overlay, DismissButton } from '@react-aria/overlays';
-import { useInteractOutside } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-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

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { AriaListBoxOptions } from '@react-aria/listbox';
-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

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

package/lib/styles/native-select-trigger.p.module.css.js

@@ -1,17 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_1ru28db_6",
-  "themeDark": "_themeDark_1ru28db_9",
-  "sizeS": "_sizeS_1ru28db_13",
-  "sizeM": "_sizeM_1ru28db_16",
-  "sizeL": "_sizeL_1ru28db_19",
-  "trigger": "_trigger_1ru28db_23",
-  "error": "_error_1ru28db_61",
-  "enabled": "_enabled_1ru28db_66",
-  "disabled": "_disabled_1ru28db_70",
-  "iconsWrapper": "_iconsWrapper_1ru28db_103",
-  "triggerText": "_triggerText_1ru28db_118",
-  "labelNotSelected": "_labelNotSelected_1ru28db_144",
-  "toggle": "_toggle_1ru28db_155",
-  "icon": "_icon_1ru28db_103"
-};
-export { styles as default };

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

@@ -1,9 +0,0 @@
-var styles = {
-  "sizeS": "_sizeS_4fpmyy_6",
-  "sizeM": "_sizeM_4fpmyy_9",
-  "sizeL": "_sizeL_4fpmyy_12",
-  "main": "_main_4fpmyy_16",
-  "wrapper": "_wrapper_4fpmyy_20",
-  "select": "_select_4fpmyy_24"
-};
-export { styles as default };

package/lib/styles/popover.p.module.css.js

@@ -1,10 +0,0 @@
-var styles = {
-  "classic": "_classic_fve5ja_32",
-  "rock": "_rock_fve5ja_35",
-  "popover": "_popover_fve5ja_39",
-  "contentWrapper": "_contentWrapper_fve5ja_46",
-  "fadeInBottomToTop": "_fadeInBottomToTop_fve5ja_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_fve5ja_1",
-  "observable": "_observable_fve5ja_62"
-};
-export { styles as default };

package/lib/utils/convert-options.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { SelectOption, SelectOptionOrGroup } from '../types';
-export declare const convertOptions: (options: SelectOptionOrGroup[], virtualOptions: SelectOption[]) => JSX.Element[];

package/lib/utils/convert-options.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Section, Item } from 'react-stately';
-import { getOptionValue } from './get-option-value.js';
-import { getTextFromNodes } from './get-text-from-nodes.js';
-import { isOptionAGroup } from './is-option-a-group.js';
-import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
-
-const convertOptions = (options, virtualOptions) => [...options.map((item, index) => {
-  // Check if it's a group
-  if (isOptionAGroup(item)) {
-    const group = item;
-
-    if (!group.options || group.options.length === 0) {
-      return null;
-    } // Render as Section (with or without label)
-
-
-    const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
-
-    const sectionKey = `\0__rs_section_${index}_${groupLabelText}`;
-    return /*#__PURE__*/React.createElement(Section, {
-      key: sectionKey,
-      title: group.label,
-      "aria-label": groupLabelText || undefined
-    }, group.options.map(option => {
-      const key = getOptionValue(option);
-      return /*#__PURE__*/React.createElement(Item, {
-        key: key,
-        textValue: getTextFromNodes(option.label)
-      }, option.label);
-    }));
-  } // It's a single option
-
-
-  const option = item;
-  const key = getOptionValue(option);
-  return /*#__PURE__*/React.createElement(Item, {
-    key: key,
-    textValue: getTextFromNodes(option.label)
-  }, option.label);
-}), virtualOptions.length > 0 && /*#__PURE__*/React.createElement(Section, {
-  key: VIRTUAL_ITEMS_SECTION_KEY,
-  title: ''
-}, virtualOptions.map(option => {
-  const key = getOptionValue(option);
-  return /*#__PURE__*/React.createElement(Item, {
-    key: key,
-    textValue: getTextFromNodes(option.label)
-  }, option.label);
-}))].filter(Boolean);
-
-export { convertOptions };

package/lib/utils/convert-placement.d.ts

@@ -1,3 +0,0 @@
-import { type AriaPositionProps } from 'react-aria';
-import { Placement } from '../types';
-export declare const convertPlacement: (outsidePlacement: Placement) => AriaPositionProps['placement'];

package/lib/utils/convert-placement.js

@@ -1,22 +0,0 @@
-const convertPlacement = outsidePlacement => {
-  const placementMap = {
-    top: 'top',
-    'top-start': 'top start',
-    'top-end': 'top end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom start',
-    'bottom-end': 'bottom end',
-    left: 'left',
-    'left-start': 'left top',
-    'left-end': 'left bottom',
-    right: 'right',
-    'right-start': 'right top',
-    'right-end': 'right bottom',
-    auto: null,
-    'auto-start': 'start',
-    'auto-end': 'end'
-  };
-  return placementMap[outsidePlacement] || 'bottom';
-};
-
-export { convertPlacement };

package/lib/utils/css-vars-utils.d.ts

@@ -1,3 +0,0 @@
-export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";

package/lib/utils/css-vars-utils.js

@@ -1,20 +0,0 @@
-const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
-
-const extractPrimaryColors = styles => {
-  const colors = {};
-  PRIMARY_COLORS.forEach(varName => {
-    colors[varName] = styles.getPropertyValue(varName) || 'initial';
-  });
-  return colors;
-};
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-
-
-const extractThemeFromCss = styles => {
-  const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
-  const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
-  const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
-  return themeDarkCoefficient === 1 ? 'dark' : 'light';
-};
-
-export { extractPrimaryColors, extractThemeFromCss };