@rescui/select 0.15.1 → 0.16.0

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_e0n0cr_4",
-  "sizeXS": "_sizeXS_e0n0cr_14",
-  "sizeS": "_sizeS_e0n0cr_18",
-  "sizeM": "_sizeM_e0n0cr_22",
-  "sizeL": "_sizeL_e0n0cr_26",
-  "light": "_light_e0n0cr_30",
-  "dark": "_dark_e0n0cr_34",
-  "allVariants": "_allVariants_e0n0cr_48",
-  "variant16": "_variant16_e0n0cr_53",
-  "variant20": "_variant20_e0n0cr_54",
-  "variant24": "_variant24_e0n0cr_55",
-  "variant28": "_variant28_e0n0cr_58"
+  "icon": "_icon_q2bqnl_4",
+  "sizeXS": "_sizeXS_q2bqnl_14",
+  "sizeS": "_sizeS_q2bqnl_18",
+  "sizeM": "_sizeM_q2bqnl_22",
+  "sizeL": "_sizeL_q2bqnl_26",
+  "light": "_light_q2bqnl_30",
+  "dark": "_dark_q2bqnl_34",
+  "allVariants": "_allVariants_q2bqnl_48",
+  "variant16": "_variant16_q2bqnl_53",
+  "variant20": "_variant20_q2bqnl_54",
+  "variant24": "_variant24_q2bqnl_55",
+  "variant28": "_variant28_q2bqnl_58"
 };
 export { styles as default };

package/lib/common-prop-types.d.ts

@@ -1,18 +1,20 @@
 import PropTypes from 'prop-types';
+import type { NoOptionsMessage, NoOptionsMessageConfig } from './types';
+export declare const keyType: PropTypes.Requireable<string | number>;
 export declare const optionType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-    value: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string | number>;
 }>>;
 export declare const optionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     options: PropTypes.Requireable<PropTypes.InferProps<{
         label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number>;
     }>[]>;
 }>>;
 export declare const nativeOptionType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Validator<string>;
-    value: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string | number>;
     disabled: PropTypes.Requireable<boolean>;
 }>>;
 export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
@@ -20,16 +22,8 @@ export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.Inf
     disabled: PropTypes.Requireable<boolean>;
     options: PropTypes.Requireable<PropTypes.InferProps<{
         label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number>;
     }>[]>;
 }>>;
-export declare const noOptionsMessageConfigType: PropTypes.Requireable<PropTypes.InferProps<{
-    noOptions: PropTypes.Validator<string>;
-    nothingFound: PropTypes.Requireable<string>;
-    loading: PropTypes.Requireable<string>;
-}>>;
-export declare const noOptionsMessageType: PropTypes.Requireable<string | PropTypes.InferProps<{
-    noOptions: PropTypes.Validator<string>;
-    nothingFound: PropTypes.Requireable<string>;
-    loading: PropTypes.Requireable<string>;
-}>>;
+export declare const noOptionsMessageConfigType: PropTypes.Validator<NoOptionsMessageConfig>;
+export declare const noOptionsMessageType: PropTypes.Validator<NoOptionsMessage>;

package/lib/common-prop-types.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
+const keyType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const optionType = PropTypes.shape({
   label: PropTypes.node.isRequired,
-  value: PropTypes.string
+  value: keyType
 });
 const optionsGroupType = PropTypes.shape({
   label: PropTypes.node,
@@ -9,7 +10,7 @@ const optionsGroupType = PropTypes.shape({
 });
 const nativeOptionType = PropTypes.shape({
   label: PropTypes.string.isRequired,
-  value: PropTypes.string,
+  value: keyType,
   disabled: PropTypes.bool
 });
 const nativeOptionsGroupType = PropTypes.shape({
@@ -23,4 +24,4 @@ const noOptionsMessageConfigType = PropTypes.shape({
   loading: PropTypes.string
 });
 const noOptionsMessageType = PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]);
-export { nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };
+export { keyType, nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };

package/lib/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const NO_OPTIONS_VALUE = "\0__rs_select_no_options__";
+export declare const DEFAULT_NO_OPTIONS_MESSAGES: {
+    noOptions: string;
+    nothingFound: string;
+    loading: string;
+};

package/lib/constants.js

@@ -0,0 +1,7 @@
+const NO_OPTIONS_VALUE = '\0__rs_select_no_options__';
+const DEFAULT_NO_OPTIONS_MESSAGES = {
+  noOptions: 'No options',
+  nothingFound: 'Nothing found',
+  loading: 'Loading...'
+};
+export { DEFAULT_NO_OPTIONS_MESSAGES, NO_OPTIONS_VALUE };

package/lib/hooks/use-a11y.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare type UseA11yArgs = {
+    prefix?: string;
+    baseId?: string;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    label?: React.ReactNode;
+    fieldRef?: React.RefObject<HTMLElement>;
+    isDisabled?: boolean;
+};
+export declare const useA11y: ({ baseId: baseIdFromProps, prefix, description, error, label, fieldRef, isDisabled }: UseA11yArgs) => {
+    baseId: string;
+    fieldProps: {
+        'aria-invalid': boolean;
+        'aria-describedby': string;
+        'aria-labelledby': string;
+        id: string;
+    };
+    descriptionProps: {
+        id: string;
+    };
+    errorMessageProps: {
+        id: string;
+    };
+    labelProps: {
+        id: string;
+        htmlFor: string;
+        onClick: () => void;
+    };
+};

package/lib/hooks/use-a11y.js

@@ -0,0 +1,56 @@
+import { useSafeId } from './use-safe-id.js'; // eslint-disable-next-line complexity
+
+const useA11y = _ref => {
+  let {
+    baseId: baseIdFromProps,
+    prefix = '',
+    description,
+    error,
+    label,
+    fieldRef,
+    isDisabled = false
+  } = _ref;
+  const uniqueId = `${prefix ? `${prefix}-` : ''}${useSafeId()}`;
+  const baseId = baseIdFromProps ?? uniqueId;
+  const fieldId = `${baseId}-field`;
+  const descriptionId = description ? `${baseId}-description` : undefined;
+  const errorId = error ? `${baseId}-error` : undefined;
+  const labelId = label ? `${baseId}-label` : undefined;
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
+  const fieldProps = {
+    'aria-invalid': Boolean(error),
+    'aria-describedby': describedBy,
+    'aria-labelledby': labelId,
+    id: fieldId
+  };
+  const errorMessageProps = {
+    id: errorId
+  };
+  const descriptionProps = {
+    id: descriptionId
+  };
+  const labelProps = {
+    id: labelId,
+    htmlFor: fieldId,
+    onClick: () => {
+      if (isDisabled) {
+        return;
+      }
+
+      if (fieldRef?.current) {
+        fieldRef.current.focus();
+      } else {
+        document.getElementById(fieldId)?.focus();
+      }
+    }
+  };
+  return {
+    baseId,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    labelProps
+  };
+};
+
+export { useA11y };

package/lib/hooks/use-actual-size-from-css.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SelectSize } from '../types';
+export declare type UseActualSizeFromCssParams = {
+    sizeFromProps: SelectSize;
+    triggerRef: React.RefObject<HTMLElement>;
+};
+export declare const useActualSizeFromCss: ({ sizeFromProps, triggerRef }: UseActualSizeFromCssParams) => {
+    observableRef: React.MutableRefObject<undefined>;
+    size: "l" | "m" | "s";
+};

package/lib/hooks/use-actual-size-from-css.js

@@ -0,0 +1,27 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import { useRef, useState } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+
+const useActualSizeFromCss = _ref => {
+  let {
+    sizeFromProps,
+    triggerRef
+  } = _ref;
+  // We use invisible and "untouchable" dummy element to observe `size` changes from css to fetch the actual size
+  const observableRef = useRef();
+  const [size, setSize] = useState(sizeFromProps);
+  useResizeObserver(observableRef, () => {
+    var _context;
+
+    const triggerFormWrapperStyles = getComputedStyle(triggerRef.current);
+    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    const sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
+    setSize(sizeFromCss || sizeFromProps);
+  });
+  return {
+    observableRef,
+    size
+  };
+};
+
+export { useActualSizeFromCss };

package/lib/hooks/use-focus.d.ts

@@ -0,0 +1,10 @@
+export declare type UseFocusParams = {
+    isDisabled?: boolean;
+};
+export declare const useFocus: ({ isDisabled }: UseFocusParams) => {
+    isFocused: boolean;
+    focusProps: {
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};

package/lib/hooks/use-focus.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+const useFocus = _ref => {
+  let {
+    isDisabled
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  return {
+    isFocused,
+    focusProps: {
+      onFocus: () => setIsFocused(!isDisabled),
+      onBlur: () => setIsFocused(false)
+    }
+  };
+};
+
+export { useFocus };

package/lib/hooks/use-hover.d.ts

@@ -0,0 +1,10 @@
+export declare type UseHoverParams = {
+    isDisabled?: boolean;
+};
+export declare const useHover: ({ isDisabled }: UseHoverParams) => {
+    isHovered: boolean;
+    hoverProps: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};

package/lib/hooks/use-hover.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+const useHover = _ref => {
+  let {
+    isDisabled
+  } = _ref;
+  const [isHovered, setIsHovered] = useState(false);
+  return {
+    isHovered,
+    hoverProps: {
+      onMouseEnter: () => setIsHovered(!isDisabled),
+      onMouseLeave: () => setIsHovered(false)
+    }
+  };
+};
+
+export { useHover };

package/lib/hooks/use-label-focus.d.ts

@@ -0,0 +1,9 @@
+export declare const useLabelFocus: () => {
+    isFocusedByLabel: boolean;
+    triggerFocusProps: {
+        onBlur: () => void;
+    };
+    labelClickProps: {
+        onClick: () => void;
+    };
+};

package/lib/hooks/use-label-focus.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const useLabelFocus = () => {
+  const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
+  const triggerFocusProps = {
+    onBlur: () => {
+      setIsFocusedByLabel(false);
+    }
+  };
+  const labelClickProps = {
+    onClick: () => {
+      setIsFocusedByLabel(true);
+    }
+  };
+  return {
+    isFocusedByLabel,
+    triggerFocusProps,
+    labelClickProps
+  };
+};
+
+export { useLabelFocus };

package/lib/hooks/use-multi-handlers.d.ts

@@ -0,0 +1,11 @@
+import type { SelectOption } from '../types';
+export declare type UseMultiHandlersArgs = {
+    selectedItems: SelectOption[];
+    onChange: (value: SelectOption[]) => void;
+};
+export declare const useMultiHandlers: ({ selectedItems, onChange }: UseMultiHandlersArgs) => {
+    selectedMap: Map<import("../types").Key, SelectOption>;
+    addItem: (item: SelectOption) => void;
+    removeItem: (item: SelectOption) => void;
+    removeAllItems: () => void;
+};

package/lib/hooks/use-multi-handlers.js

@@ -0,0 +1,44 @@
+import { useRef, useMemo, useCallback } from 'react';
+import { getOptionValue } from '../utils/get-option-value.js';
+
+const useMultiHandlers = _ref => {
+  let {
+    selectedItems,
+    onChange
+  } = _ref;
+  const onChangeRef = useRef(null);
+  onChangeRef.current = onChange;
+  const selectedMap = useMemo(() => new Map(selectedItems.map(item => [getOptionValue(item), item])), [selectedItems]);
+  const addItem = useCallback(item => {
+    if (selectedMap.has(getOptionValue(item))) {
+      return;
+    }
+
+    const newValues = [...selectedMap.values(), item];
+    onChangeRef.current?.(newValues);
+  }, [selectedMap]);
+  const removeItem = useCallback(item => {
+    const key = getOptionValue(item);
+    const newValues = [...selectedMap.entries()].filter(_ref2 => {
+      let [k] = _ref2;
+      return k !== key;
+    }).map(_ref3 => {
+      let [, v] = _ref3;
+      return v;
+    });
+    onChangeRef.current?.(newValues);
+  }, [selectedMap]);
+
+  const removeAllItems = () => {
+    onChangeRef.current?.([]);
+  };
+
+  return {
+    selectedMap,
+    addItem,
+    removeItem,
+    removeAllItems
+  };
+};
+
+export { useMultiHandlers };

package/lib/hooks/use-options.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { SelectOptionOrGroup, SelectOption, ListBoxItem } from '../types';
+/**
+ * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
+ * Also creating a list for ListBox component with indexes and keys.
+ * Supports filtering by returning the setFilterString function.
+ * @param options
+ */
+export declare const useOptions: (options: SelectOptionOrGroup[]) => {
+    setFilterString: import("react").Dispatch<import("react").SetStateAction<string>>;
+    filterString: string;
+    flattenedOptions: SelectOption[];
+    listBoxItems: ListBoxItem[];
+};

package/lib/hooks/use-options.js

@@ -0,0 +1,90 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import { useState, useMemo } from 'react';
+import { isOptionAGroup } from '../utils/is-option-a-group.js';
+import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
+import { getOptionValue } from '../utils/get-option-value.js';
+
+const createFilter = substring => {
+  if (substring.length === 0) {
+    return () => true;
+  }
+
+  const lowerSubstring = substring.toLowerCase();
+  return string => {
+    var _context;
+
+    return _includesInstanceProperty(_context = string.toLowerCase()).call(_context, lowerSubstring);
+  };
+};
+/**
+ * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
+ * Also creating a list for ListBox component with indexes and keys.
+ * Supports filtering by returning the setFilterString function.
+ * @param options
+ */
+
+
+const useOptions = options => {
+  const [filterString, setFilterString] = useState('');
+  const filterFn = useMemo(() => createFilter(filterString), [filterString]);
+  const processedOptions = useMemo(() => {
+    const flattenedOptions = [];
+    const listBoxItems = [];
+    let index = 0;
+
+    const createOptionItem = option => {
+      return { ...option,
+        index: index++,
+        type: 'option',
+        key: getOptionValue(option)
+      };
+    };
+
+    options.forEach((optionOrGroup, arrayIndex) => {
+      if (isOptionAGroup(optionOrGroup)) {
+        const group = optionOrGroup;
+
+        if (!group.options || group.options.length === 0) {
+          return;
+        } // Render as Group (with or without label)
+
+
+        const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
+
+        const groupKey = `\0__rs_select_group_${arrayIndex}_${groupLabelText}`;
+        const listBoxGroupItem = { ...group,
+          type: 'group',
+          options: [],
+          key: groupKey
+        };
+        group.options.forEach(option => {
+          if (filterFn(getTextFromNodes(option.label))) {
+            flattenedOptions.push(option);
+            listBoxGroupItem.options.push(createOptionItem(option));
+          }
+        });
+
+        if (listBoxGroupItem.options.length > 0) {
+          listBoxItems.push(listBoxGroupItem);
+        }
+
+        return;
+      }
+
+      if (filterFn(getTextFromNodes(optionOrGroup.label))) {
+        flattenedOptions.push(optionOrGroup);
+        listBoxItems.push(createOptionItem(optionOrGroup));
+      }
+    });
+    return {
+      flattenedOptions,
+      listBoxItems
+    };
+  }, [options, filterFn]);
+  return { ...processedOptions,
+    setFilterString,
+    filterString
+  };
+};
+
+export { useOptions };

package/lib/hooks/use-primary-contrast-css-var-transfer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type UsePrimaryContrastCssVarTransferParams = {
+    triggerRef: React.RefObject<HTMLElement>;
+    isOpen: boolean;
+};
+/**
+ * Transfer primary contrast css var to the dropdown, but only when the dropdown opens
+ */
+export declare const usePrimaryContrastCssVarTransfer: ({ triggerRef, isOpen }: UsePrimaryContrastCssVarTransferParams) => {
+    isPrimaryContrast: boolean;
+};

package/lib/hooks/use-primary-contrast-css-var-transfer.js

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+/**
+ * Transfer primary contrast css var to the dropdown, but only when the dropdown opens
+ */
+
+const usePrimaryContrastCssVarTransfer = _ref => {
+  let {
+    triggerRef,
+    isOpen
+  } = _ref;
+  const prevIsOpenRef = useRef(false);
+  const isPrimaryContrastRef = useRef(false);
+
+  if (prevIsOpenRef.current !== isOpen && isOpen && triggerRef.current && typeof window !== 'undefined') {
+    const isPrimaryContrastFromCss = getComputedStyle(triggerRef.current)?.getPropertyValue('--rs-select-contrast-primary');
+    isPrimaryContrastRef.current = isPrimaryContrastFromCss.toString() === '1';
+    prevIsOpenRef.current = true;
+  }
+
+  if (!isOpen) {
+    prevIsOpenRef.current = false;
+  }
+
+  return {
+    isPrimaryContrast: isPrimaryContrastRef.current
+  };
+};
+
+export { usePrimaryContrastCssVarTransfer };

package/lib/hooks/use-safe-id.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const useFallbackId: {
+    (): string;
+    counter: number;
+};
+export declare const useSafeId: typeof React.useId;

package/lib/hooks/use-safe-id.js

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