@rescui/select 0.15.1-RUI-280-Update-select-component-e516591ed.54 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_1ouylgb_4",
-  "sizeXS": "_sizeXS_1ouylgb_14",
-  "sizeS": "_sizeS_1ouylgb_18",
-  "sizeM": "_sizeM_1ouylgb_22",
-  "sizeL": "_sizeL_1ouylgb_26",
-  "light": "_light_1ouylgb_30",
-  "dark": "_dark_1ouylgb_34",
-  "allVariants": "_allVariants_1ouylgb_48",
-  "variant16": "_variant16_1ouylgb_53",
-  "variant20": "_variant20_1ouylgb_54",
-  "variant24": "_variant24_1ouylgb_55",
-  "variant28": "_variant28_1ouylgb_58"
+  "icon": "_icon_3cnwak_4",
+  "sizeXS": "_sizeXS_3cnwak_14",
+  "sizeS": "_sizeS_3cnwak_18",
+  "sizeM": "_sizeM_3cnwak_22",
+  "sizeL": "_sizeL_3cnwak_26",
+  "light": "_light_3cnwak_30",
+  "dark": "_dark_3cnwak_34",
+  "allVariants": "_allVariants_3cnwak_48",
+  "variant16": "_variant16_3cnwak_53",
+  "variant20": "_variant20_3cnwak_54",
+  "variant24": "_variant24_3cnwak_55",
+  "variant28": "_variant28_3cnwak_58"
 };
 export { styles as default };

package/lib/constants.d.ts

@@ -1,4 +1,3 @@
-export declare const VIRTUAL_ITEMS_SECTION_KEY = "\0__rs_hidden_section_virtual_items__";
 export declare const NO_OPTIONS_VALUE = "\0__rs_select_no_options__";
 export declare const DEFAULT_NO_OPTIONS_MESSAGES: {
     noOptions: string;

package/lib/constants.js

@@ -1,8 +1,7 @@
-const VIRTUAL_ITEMS_SECTION_KEY = `\0__rs_hidden_section_virtual_items__`;
 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, VIRTUAL_ITEMS_SECTION_KEY };
+export { DEFAULT_NO_OPTIONS_MESSAGES, NO_OPTIONS_VALUE };

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

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

package/lib/hooks/use-a11y.js

@@ -0,0 +1,53 @@
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js'; // eslint-disable-next-line complexity
+
+const useA11y = _ref => {
+  let {
+    baseId: baseIdFromProps,
+    prefix = '',
+    description,
+    error,
+    label,
+    fieldRef
+  } = _ref;
+  const uniqueId = `${prefix ? `${prefix}-` : ''}${useBackwardCompatibleId()}`;
+  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 (fieldRef !== null && fieldRef !== void 0 && fieldRef.current) {
+        fieldRef.current.focus();
+      } else {
+        var _document$getElementB;
+
+        (_document$getElementB = document.getElementById(fieldId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+      }
+    }
+  };
+  return {
+    baseId,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    labelProps
+  };
+};
+
+export { useA11y };

package/lib/hooks/use-backward-compatible-id.d.ts

@@ -0,0 +1,4 @@
+export declare const useBackwardCompatibleId: {
+    (): string | number;
+    counter: number;
+};

package/lib/hooks/use-backward-compatible-id.js

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

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

@@ -1,8 +1,6 @@
-import React from 'react';
-export declare const useLabelFocus: (triggerRef: React.RefObject<HTMLElement>) => {
+export declare const useLabelFocus: () => {
     isFocusedByLabel: boolean;
     triggerFocusProps: {
-        onFocus: () => void;
         onBlur: () => void;
     };
     labelClickProps: {

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

@@ -1,21 +1,15 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 
-const useLabelFocus = triggerRef => {
-  const isLabelClick = useRef(false);
+const useLabelFocus = () => {
   const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
   const triggerFocusProps = {
-    onFocus: () => {
-      setIsFocusedByLabel(isLabelClick.current);
-    },
     onBlur: () => {
       setIsFocusedByLabel(false);
     }
   };
   const labelClickProps = {
     onClick: () => {
-      isLabelClick.current = true;
-      triggerRef.current.focus();
-      isLabelClick.current = false;
+      setIsFocusedByLabel(true);
     }
   };
   return {

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,48 @@
+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 => {
+    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]);
+  }, [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 => {
+      let [k] = _ref2;
+      return k !== key;
+    }).map(_ref3 => {
+      let [, v] = _ref3;
+      return v;
+    }));
+  }, [selectedMap]);
+
+  const removeAllItems = () => {
+    var _onChangeRef$current3;
+
+    (_onChangeRef$current3 = onChangeRef.current) === null || _onChangeRef$current3 === void 0 || _onChangeRef$current3.call(onChangeRef, []);
+  };
+
+  return {
+    selectedMap,
+    addItem,
+    removeItem,
+    removeAllItems
+  };
+};
+
+export { useMultiHandlers };

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

@@ -0,0 +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[];
+};

package/lib/hooks/use-options.js

@@ -0,0 +1,89 @@
+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
+  };
+};
+
+export { useOptions };