@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_1oaepe8_4",
-  "sizeXS": "_sizeXS_1oaepe8_14",
-  "sizeS": "_sizeS_1oaepe8_18",
-  "sizeM": "_sizeM_1oaepe8_22",
-  "sizeL": "_sizeL_1oaepe8_26",
-  "light": "_light_1oaepe8_30",
-  "dark": "_dark_1oaepe8_34",
-  "allVariants": "_allVariants_1oaepe8_48",
-  "variant16": "_variant16_1oaepe8_53",
-  "variant20": "_variant20_1oaepe8_54",
-  "variant24": "_variant24_1oaepe8_55",
-  "variant28": "_variant28_1oaepe8_58"
+  "icon": "_icon_m1f5bg_4",
+  "sizeXS": "_sizeXS_m1f5bg_14",
+  "sizeS": "_sizeS_m1f5bg_18",
+  "sizeM": "_sizeM_m1f5bg_22",
+  "sizeL": "_sizeL_m1f5bg_26",
+  "light": "_light_m1f5bg_30",
+  "dark": "_dark_m1f5bg_34",
+  "allVariants": "_allVariants_m1f5bg_48",
+  "variant16": "_variant16_m1f5bg_53",
+  "variant20": "_variant20_m1f5bg_54",
+  "variant24": "_variant24_m1f5bg_55",
+  "variant28": "_variant28_m1f5bg_58"
 };
 export { styles as default };

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

@@ -1,30 +1,29 @@
-import React from 'react';
-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 | 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 | number>;
-    }>[]>;
-}>>;
-export declare const nativeOptionType: PropTypes.Requireable<PropTypes.InferProps<{
-    label: PropTypes.Validator<string>;
-    value: PropTypes.Requireable<string | number>;
-    disabled: PropTypes.Requireable<boolean>;
-}>>;
-export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
-    label: PropTypes.Requireable<string>;
-    disabled: PropTypes.Requireable<boolean>;
-    options: PropTypes.Requireable<PropTypes.InferProps<{
-        label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string | number>;
-    }>[]>;
-}>>;
-export declare const noOptionsMessageConfigType: React.Validator<NoOptionsMessageConfig>;
-export declare const noOptionsMessageType: React.Validator<NoOptionsMessage>;
+import PropTypes from 'prop-types';
+import type { NoOptionsMessage, NoOptionsMessageConfig } from './types';
+export declare const keyType: PropTypes.Requireable<NonNullable<string | number>>;
+export declare const optionType: PropTypes.Requireable<PropTypes.InferProps<{
+    label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    value: PropTypes.Requireable<NonNullable<string | number>>;
+}>>;
+export declare const optionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
+    label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    options: PropTypes.Requireable<PropTypes.InferProps<{
+        label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        value: PropTypes.Requireable<NonNullable<string | number>>;
+    }>[]>;
+}>>;
+export declare const nativeOptionType: PropTypes.Requireable<PropTypes.InferProps<{
+    label: PropTypes.Validator<string>;
+    value: PropTypes.Requireable<NonNullable<string | number>>;
+    disabled: PropTypes.Requireable<boolean>;
+}>>;
+export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
+    label: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    options: PropTypes.Requireable<PropTypes.InferProps<{
+        label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        value: PropTypes.Requireable<NonNullable<string | number>>;
+    }>[]>;
+}>>;
+export declare const noOptionsMessageConfigType: PropTypes.Validator<NoOptionsMessageConfig>;
+export declare const noOptionsMessageType: PropTypes.Validator<NoOptionsMessage>;

package/lib/constants.d.ts

@@ -1,6 +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;
-};
+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/hooks/use-a11y.d.ts

@@ -1,29 +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>;
-};
-export declare const useA11y: ({ baseId: baseIdFromProps, prefix, description, error, label, fieldRef }: 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;
-    };
-};
+import React from 'react';
+export 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

@@ -1,4 +1,4 @@
-import { useBackwardCompatibleId } from './use-backward-compatible-id.js'; // eslint-disable-next-line complexity
+import { useSafeId } from './use-safe-id.js'; // eslint-disable-next-line complexity
 
 const useA11y = _ref => {
   let {
@@ -7,9 +7,10 @@ const useA11y = _ref => {
     description,
     error,
     label,
-    fieldRef
+    fieldRef,
+    isDisabled = false
   } = _ref;
-  const uniqueId = `${prefix ? `${prefix}-` : ''}${useBackwardCompatibleId()}`;
+  const uniqueId = `${prefix ? `${prefix}-` : ''}${useSafeId()}`;
   const baseId = baseIdFromProps ?? uniqueId;
   const fieldId = `${baseId}-field`;
   const descriptionId = description ? `${baseId}-description` : undefined;
@@ -32,12 +33,14 @@ const useA11y = _ref => {
     id: labelId,
     htmlFor: fieldId,
     onClick: () => {
-      if (fieldRef !== null && fieldRef !== void 0 && fieldRef.current) {
+      if (isDisabled) {
+        return;
+      }
+
+      if (fieldRef?.current) {
         fieldRef.current.focus();
       } else {
-        var _document$getElementB;
-
-        (_document$getElementB = document.getElementById(fieldId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+        document.getElementById(fieldId)?.focus();
       }
     }
   };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SelectSize } from '../types';
+export type UseActualSizeFromCssParams = {
+    sizeFromProps: SelectSize;
+    triggerRef: React.RefObject<HTMLElement>;
+};
+export declare const useActualSizeFromCss: ({ sizeFromProps, triggerRef }: UseActualSizeFromCssParams) => {
+    observableRef: React.RefObject<HTMLDivElement>;
+    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(null);
+  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

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

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

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

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

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

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

@@ -1,11 +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;
-};
+import type { SelectOption } from '../types';
+export 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

@@ -10,31 +10,27 @@ const useMultiHandlers = _ref => {
   onChangeRef.current = onChange;
   const selectedMap = useMemo(() => new Map(selectedItems.map(item => [getOptionValue(item), item])), [selectedItems]);
   const addItem = useCallback(item => {
-    var _onChangeRef$current;
-
     if (selectedMap.has(getOptionValue(item))) {
       return;
     }
 
-    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, [...selectedMap.values(), item]);
+    const newValues = [...selectedMap.values(), item];
+    onChangeRef.current?.(newValues);
   }, [selectedMap]);
   const removeItem = useCallback(item => {
-    var _onChangeRef$current2;
-
     const key = getOptionValue(item);
-    (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, [...selectedMap.entries()].filter(_ref2 => {
+    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 = () => {
-    var _onChangeRef$current3;
-
-    (_onChangeRef$current3 = onChangeRef.current) === null || _onChangeRef$current3 === void 0 || _onChangeRef$current3.call(onChangeRef, []);
+    onChangeRef.current?.([]);
   };
 
   return {

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

@@ -1,13 +1,13 @@
-/// <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>>;
-    flattenedOptions: SelectOption[];
-    listBoxItems: ListBoxItem[];
-};
+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

@@ -16,11 +16,11 @@ const createFilter = substring => {
     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
+/**
+ * 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
  */
 
 
@@ -82,7 +82,8 @@ const useOptions = options => {
     };
   }, [options, filterFn]);
   return { ...processedOptions,
-    setFilterString
+    setFilterString,
+    filterString
   };
 };
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export 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 };