@rescui/select 0.15.1 → 0.16.0

package/lib/types.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { UseSelectPropGetters } from 'downshift';
+export declare type Key = string | number;
+export declare type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export declare type SelectSize = 'l' | 'm' | 's';
 export declare type SelectMode = 'classic' | 'rock';
 export declare type SelectOption = {
     label: React.ReactNode;
-    value?: string;
+    value?: Key;
 };
 export declare type SelectOptionsGroup = {
     label?: React.ReactNode;
@@ -11,9 +15,29 @@ export declare type SelectOptionsGroup = {
 };
 export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
 export declare type SelectOptions = SelectOptionOrGroup[];
+export declare type ListBoxOptionItem = SelectOption & {
+    index: number;
+    type: 'option';
+    key: Key;
+    disabled?: boolean;
+};
+export declare type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
+    options: ListBoxOptionItem[];
+    type: 'group';
+    key: Key;
+};
+export declare type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
+export declare type ListBoxItems = ListBoxItem[];
+export declare type ListBoxState = {
+    menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
+    getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
+    highlightedIndex: number;
+    selectedMap: Map<Key, SelectOption>;
+    menuRef?: React.RefObject<HTMLUListElement>;
+};
 export declare type NativeSelectOption = {
     label: string;
-    value?: string;
+    value?: Key;
     disabled?: boolean;
 };
 export declare type NativeSelectOptionsGroup = {
@@ -24,11 +48,155 @@ export declare type NativeSelectOptionsGroup = {
 export declare type NativeSelectOptionOrGroup = NativeSelectOption | NativeSelectOptionsGroup;
 export declare type NativeSelectOptions = NativeSelectOptionOrGroup[];
 export declare type Groups = SelectOptionsGroup[];
-export declare type Index = [number, number];
-export declare type FilterFn = (option: SelectOption) => boolean;
 export declare type NoOptionsMessageConfig = {
     noOptions: string;
     nothingFound?: string;
     loading?: string;
 };
 export declare type NoOptionsMessage = string | NoOptionsMessageConfig;
+export declare type SelectProps = {
+    /**
+     * Value of the select
+     */
+    value?: SelectOption | null;
+    /**
+     * Change value callback. `value => ...`. Pass `null` on clear.
+     */
+    onChange?: (newValue: SelectOption | null) => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    /**
+     * Array of options or option groups
+     */
+    options?: (SelectOption | SelectOptionsGroup)[] | null;
+    /**
+     * Is select supports clearing the value
+     */
+    isClearable?: boolean;
+    /**
+     * Is select supports inplace filtering
+     */
+    isSearchable?: boolean;
+    /**
+     * Is the component has been disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Is loader displayed inside the trigger part
+     */
+    isLoading?: boolean;
+    /**
+     * A hint to the user of what can be entered in the control
+     */
+    placeholder?: string;
+    /**
+     * Size
+     */
+    size?: SelectSize;
+    /**
+     * Appearance mode
+     */
+    mode?: SelectMode;
+    /**
+     * Appearance theme
+     */
+    theme?: Theme;
+    /**
+     * Error state flag or `React.ReactNode` (use with forms)
+     */
+    error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
+    /**
+     * Label element (use with forms)
+     */
+    label?: React.ReactNode;
+    /**
+     * If `true`, label will be bold
+     */
+    boldLabel?: boolean;
+    /**
+     * Placement of dropdown element
+     */
+    placement?: Placement;
+    /**
+     * Note element at the bottom (use with forms)
+     */
+    note?: React.ReactNode;
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsMessage?: NoOptionsMessage;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Maximum number of fully visible items in the dropdown list.
+     * For large lists, `n + 0.5` items will be visible at a time.
+     * If the maximum number of items in a list is exactly `n + 1`, all
+     * items will be shown instead (to avoid creating a scroll for half an item only).
+     */
+    maxVisibleItems?: number;
+};
+export declare type MultiselectProps = {
+    /**
+     * Value of the multiselect (array of selected options)
+     */
+    value?: SelectOption[] | null;
+    /**
+     * Change value callback. `value => ...`. Pass `[]` on clear.
+     */
+    onChange?: (newValue: SelectOption[]) => void;
+    /**
+     * Display tags in single line with "+N" counter
+     */
+    isSingleLine?: boolean;
+} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
+export declare type TriggerFuncProps = {
+    selectedLabel?: string;
+    selectedValue?: Key;
+    placeholder?: string;
+    hovered: boolean;
+    focused: boolean;
+};
+export declare type NativeSelectProps = {
+    options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    value?: NativeSelectOption | null;
+    onChange?: (newValue: NativeSelectOption | null) => void;
+    placeholder?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    trigger?: (props: TriggerFuncProps) => React.ReactNode;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
+    noOptionsMessage?: NoOptionsMessage;
+    name?: string;
+    boldLabel?: boolean;
+};
+export declare type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;
+export declare type DownshiftSyntheticEvent = React.SyntheticEvent & {
+    preventDownshiftDefault?: boolean;
+    nativeEvent: {
+        preventDownshiftDefault?: boolean;
+    };
+};

package/lib/utils/calculate-max-height-by-items.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+ */
+export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;

package/lib/utils/calculate-max-height-by-items.js

@@ -0,0 +1,22 @@
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+ */
+const calculateMaxHeightByItems = (itemsCount, allowedMaxVisibleItems) => {
+  const allowedFloor = Math.floor(allowedMaxVisibleItems);
+  const groupSeparatorsDelta = 0.1;
+  const partiallyVisiblePart = 0.5;
+  const upperLimit = Math.min(itemsCount + groupSeparatorsDelta, allowedFloor + 1 + groupSeparatorsDelta);
+  const delta = Math.min(Math.max(0, itemsCount - (allowedFloor + 1)), partiallyVisiblePart + groupSeparatorsDelta);
+  return Math.max(allowedFloor + partiallyVisiblePart, upperLimit - delta);
+};
+
+export { calculateMaxHeightByItems };

package/lib/utils/get-empty-message.d.ts

@@ -0,0 +1,6 @@
+import type { NoOptionsMessage } from '../types';
+export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
+    isLoading: boolean;
+    isNothingFound: boolean;
+    noOptionsMessage: NoOptionsMessage;
+}): string;

package/lib/utils/get-empty-message.js

@@ -0,0 +1,32 @@
+import { DEFAULT_NO_OPTIONS_MESSAGES } from '../constants.js';
+
+function isString(s) {
+  return Object.prototype.toString.call(s) === '[object String]';
+}
+
+function getEmptyMessage(_ref) {
+  let {
+    isLoading,
+    isNothingFound,
+    noOptionsMessage
+  } = _ref;
+  const {
+    noOptions,
+    nothingFound,
+    loading
+  } = isString(noOptionsMessage) ? { ...DEFAULT_NO_OPTIONS_MESSAGES,
+    noOptions: noOptionsMessage
+  } : { ...DEFAULT_NO_OPTIONS_MESSAGES,
+    ...noOptionsMessage
+  };
+
+  if (isLoading) {
+    return loading;
+  } else if (isNothingFound) {
+    return nothingFound;
+  } else {
+    return noOptions;
+  }
+}
+
+export { getEmptyMessage };

package/lib/utils/get-option-value.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOption, Key } from '../types';
+export declare function getOptionValue(option?: SelectOption): Key | null;

package/lib/utils/get-option-value.js

@@ -0,0 +1,11 @@
+import { getTextFromNodes } from './get-text-from-nodes.js';
+
+function getOptionValue(option) {
+  if (!option) {
+    return null;
+  }
+
+  return typeof option.value === 'string' || typeof option.value === 'number' ? option.value : getTextFromNodes(option.label);
+}
+
+export { getOptionValue };

package/lib/utils/get-real-items-cnt.d.ts

@@ -0,0 +1,2 @@
+import { ListBoxItem } from '../types';
+export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;

package/lib/utils/get-real-items-cnt.js

@@ -0,0 +1,19 @@
+const getRealItemsCnt = items => {
+  // Count total number of items
+  return items.reduce((count, item) => {
+    if (item.type === 'group') {
+      const groupOptions = item.options;
+      const hasHeading = item.label !== null && item.label !== undefined; // Count heading (if present) + all options in the section
+
+      return count + (hasHeading ? 1 : 0) + groupOptions.length;
+    }
+
+    if (item.type === 'option') {
+      return count + 1;
+    }
+
+    return count;
+  }, 0);
+};
+
+export { getRealItemsCnt };

package/lib/utils/get-text-from-nodes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;

package/lib/utils/get-text-from-nodes.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const getTextFromNodes = function (node) {
+  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return node.toString();
+  }
+
+  if (depth > 15) {
+    console.warn('Max depth reached while getting text from nodes');
+    return '';
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(n => getTextFromNodes(n, depth + 1)).join('');
+  }
+
+  if ( /*#__PURE__*/React.isValidElement(node) && node?.type?.toString()?.toLowerCase() !== 'svg') {
+    return getTextFromNodes(node.props.children, depth + 1);
+  }
+
+  return '';
+};
+
+export { getTextFromNodes };

package/lib/utils/is-option-a-group.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
+export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;

package/lib/utils/is-option-a-group.js

@@ -0,0 +1,5 @@
+const isOptionAGroup = optionOrGroup => {
+  return 'options' in optionOrGroup && typeof optionOrGroup.options !== 'undefined';
+};
+
+export { isOptionAGroup };

package/lib/utils/item-to-string.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOption } from '../types';
+export declare function itemToString(item: SelectOption): string;

package/lib/utils/item-to-string.js

@@ -0,0 +1,7 @@
+import { getTextFromNodes } from './get-text-from-nodes.js';
+
+function itemToString(item) {
+  return item ? getTextFromNodes(item.label) : '';
+}
+
+export { itemToString };

package/lib/utils/merge-props.d.ts

@@ -0,0 +1,19 @@
+import { RefCallback } from 'react';
+declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Combines multiple sets of props into a single object:
+ *  - conflicting `className` values are joined with a space
+ *  - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
+ *  - conflicting function props (event handlers) are composed and called left to right
+ *  - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
+ *    callback ref that assigns all of them; cleanup functions returned by callback refs are
+ *    collected and called together on detach
+ *  - any other conflicting prop is resolved by taking the value from the rightmost props object
+ * @param props One or more props objects to merge. Props further to the right take precedence.
+ */
+export declare function mergeProps<T extends object[]>(...props: T): {
+    [K in keyof UnionToIntersection<T[number]>]: K extends 'className' ? string : K extends 'style' ? UnionToIntersection<T[number]>[K] : K extends 'ref' ? RefCallback<any> : Exclude<Extract<T[number], {
+        [Q in K]: unknown;
+    }>[K], undefined>;
+};
+export {};

package/lib/utils/merge-props.js

@@ -0,0 +1,104 @@
+import cn from 'classnames';
+/**
+ * Assigns a value to a single ref — handles callback refs, object refs, null, and undefined.
+ * Returns the cleanup function if the callback ref returned one.
+ */
+
+function assignRef(ref, value) {
+  if (ref == null) {
+    return;
+  }
+
+  if (typeof ref === 'function') {
+    return ref(value);
+  }
+
+  ref.current = value;
+}
+/**
+ * Merges multiple refs into a single callback ref.
+ * All provided refs are assigned in left-to-right order.
+ * Cleanup functions returned by callback refs are called on detach.
+ */
+
+
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return value => {
+    const cleanups = refs.map(ref => assignRef(ref, value)); // return a combined cleanup only if at least one callback ref provided one.
+    // when React uses the cleanup API it will NOT call our merged ref with null on unmount,
+    // so we must manually null-out every ref that had no cleanup of its own.
+
+    if (cleanups.some(Boolean)) {
+      return () => cleanups.forEach((cleanup, i) => {
+        if (typeof cleanup === 'function') {
+          cleanup();
+        } else {
+          // simulate the ref(null) call that React skips when a cleanup is returned
+          assignRef(refs[i], null);
+        }
+      });
+    }
+  };
+}
+
+function pushProp(target, key, value) {
+  if (key === 'ref') {
+    target.ref = target.ref ? mergeRefs(target.ref, value) : value;
+  } else if (key === 'className') {
+    target.className = cn(target.className, value);
+  } else if (key === 'style') {
+    target.style = { ...target.style,
+      ...value
+    };
+  } else if (typeof value === 'function') {
+    const oldFn = target[key];
+    target[key] = oldFn ? function () {
+      oldFn(...arguments);
+      value(...arguments);
+    } : value;
+  } else if (!(key in target) || value !== undefined) {
+    // for any other duplicate prop, the value from the later object takes precedence;
+    // undefined is ignored on duplicated so it cannot erase an existing value
+    target[key] = value;
+  }
+}
+/**
+ * Combines multiple sets of props into a single object:
+ *  - conflicting `className` values are joined with a space
+ *  - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
+ *  - conflicting function props (event handlers) are composed and called left to right
+ *  - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
+ *    callback ref that assigns all of them; cleanup functions returned by callback refs are
+ *    collected and called together on detach
+ *  - any other conflicting prop is resolved by taking the value from the rightmost props object
+ * @param props One or more props objects to merge. Props further to the right take precedence.
+ */
+
+
+function mergeProps() {
+  for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    props[_key2] = arguments[_key2];
+  }
+
+  if (props.length === 1) {
+    return props[0];
+  }
+
+  return props.reduce((merged, ps) => {
+    for (const key in ps) {
+      if (!ps.hasOwnProperty(key)) {
+        continue;
+      }
+
+      pushProp(merged, key, ps[key]);
+    }
+
+    return merged;
+  }, {});
+}
+
+export { mergeProps };

package/lib/utils/throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle<A extends unknown[], R>(func: (...args: A) => R, wait: number): (...args: A) => R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.9.5",
-    "@rescui/form-field": "^0.1.1",
-    "@rescui/menu": "^0.13.3",
-    "@rescui/tag": "^0.13.5",
+    "@rescui/dropdown": "^0.9.7",
+    "@rescui/form-field": "^0.1.2",
+    "@rescui/tag": "^0.13.7",
     "@rescui/use-resize-observer": "^0.3.0",
     "classnames": "^2.2.6",
-    "scroll-into-view-if-needed": "2.2.20"
+    "downshift": "^9.3.2",
+    "scroll-into-view-if-needed": "3.1.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@rescui/colors": "^0.3.0",
     "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.25.0",
+    "@rescui/typography": "^0.26.0",
     "@rescui/visual-regression": "^0.1.4",
     "sniffr": "^1.2.0"
   },
@@ -41,5 +41,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "59db2e6ea5eabdcabc035779df2611d0df5a0cbe"
+  "gitHead": "fcf55336342c842c02c07a178e9bacb9a033ef83"
 }

package/lib/key-codes.d.ts

@@ -1,7 +0,0 @@
-export declare const ARROW_UP = "ArrowUp";
-export declare const ARROW_DOWN = "ArrowDown";
-export declare const SPACE = " ";
-export declare const ESCAPE = "Escape";
-export declare const ENTER = "Enter";
-export declare const TAB = "Tab";
-export declare const BACKSPACE = "Backspace";

package/lib/key-codes.js

@@ -1,8 +0,0 @@
-const ARROW_UP = 'ArrowUp';
-const ARROW_DOWN = 'ArrowDown';
-const SPACE = ' ';
-const ESCAPE = 'Escape';
-const ENTER = 'Enter';
-const TAB = 'Tab';
-const BACKSPACE = 'Backspace';
-export { ARROW_DOWN, ARROW_UP, BACKSPACE, ENTER, ESCAPE, SPACE, TAB };

package/lib/parts/common-select.p.module.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "sizeS": "_sizeS_rry63p_3",
-  "sizeM": "_sizeM_rry63p_6",
-  "sizeL": "_sizeL_rry63p_9",
-  "menu": "_menu_rry63p_13",
-  "menuSizeS": "_menuSizeS_rry63p_26",
-  "menuSizeM": "_menuSizeM_rry63p_30",
-  "menuSizeL": "_menuSizeL_rry63p_34",
-  "withGroupsLabel": "_withGroupsLabel_rry63p_40",
-  "lastOption": "_lastOption_rry63p_39",
-  "divider": "_divider_rry63p_45",
-  "checkIcon": "_checkIcon_rry63p_51",
-  "observable": "_observable_rry63p_56"
-};
-export { styles as default };

package/lib/parts/form-trigger.p.module.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_mvyt33_6",
-  "themeDark": "_themeDark_mvyt33_9",
-  "sizeS": "_sizeS_mvyt33_13",
-  "sizeM": "_sizeM_mvyt33_16",
-  "sizeL": "_sizeL_mvyt33_19",
-  "main": "_main_mvyt33_23",
-  "label": "_label_mvyt33_27",
-  "disabled": "_disabled_mvyt33_33",
-  "footer": "_footer_mvyt33_38",
-  "errorMessage": "_errorMessage_mvyt33_45",
-  "error": "_error_mvyt33_45",
-  "note": "_note_mvyt33_54"
-};
-export { styles as default };