@rescui/select 0.15.1 → 0.16.0

package/lib/parts/form-trigger-wrapper.js

@@ -1,9 +1,8 @@
-"use client";
 import React from 'react';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
-import styles from './form-trigger.p.module.css.js';
+import styles from '../styles/form-trigger.p.module.css.js';
 const SIZE_STYLES = {
   l: styles.sizeL,
   m: styles.sizeM,
@@ -13,64 +12,47 @@ const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-
-const Label = _ref => {
-  let {
-    children,
-    boldLabel
-  } = _ref;
-
-  if (!children) {
-    return null;
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.label,
-      "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label'
-    }, children);
-  }
-};
-
 const FormTriggerWrapper = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(_ref2, ref) => {
+(_ref, ref) => {
   let {
     size,
     theme: themeFromProps,
     className,
-    id,
     disabled,
     error,
-    errorId,
     reserveErrorLine = false,
+    errorMessageProps,
     label,
+    labelProps,
     note,
+    descriptionProps,
     children,
-    onKeyDown,
     boldLabel,
     ...restProps
-  } = _ref2;
+  } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
   const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement("div", {
     className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme], Boolean(error) && styles.error, disabled && styles.disabled),
-    id: id,
     ref: ref,
     "data-test": "select-wrapper",
     "data-rs-internal": 'select-form-trigger-wrapper',
     ...restProps
-  }, /*#__PURE__*/React.createElement(Label, {
-    boldLabel: boldLabel
-  }, label), /*#__PURE__*/React.createElement("div", {
-    onKeyDown: onKeyDown
-  }, children), hasFooter && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: styles.label,
+    "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label',
+    ...labelProps
+  }, label), children, hasFooter && /*#__PURE__*/React.createElement("div", {
     className: styles.footer
   }, /*#__PURE__*/React.createElement(ErrorMessage, {
-    id: errorId,
     className: styles.errorMessage,
-    reserveLine: reserveErrorLine
+    reserveLine: reserveErrorLine,
+    ...errorMessageProps
   }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
-    "data-rs-internal": 'select-form-trigger-wrapper__note'
+    "data-rs-internal": 'select-form-trigger-wrapper__note',
+    ...descriptionProps
   }, note)));
 });
 FormTriggerWrapper.displayName = 'FormTriggerWrapper';
-export { FormTriggerWrapper as default };
+export { FormTriggerWrapper, FormTriggerWrapper as default };

package/lib/parts/hidden-select.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { SelectOption } from '../types';
+export declare type HiddenSelectProps = {
+    name?: string;
+    options: SelectOption[];
+} & ({
+    value: SelectOption[];
+    isMultiple: true;
+} | {
+    value: SelectOption;
+    isMultiple: false;
+});
+export declare const HiddenSelect: ({ name, options, value, isMultiple }: HiddenSelectProps) => JSX.Element;

package/lib/parts/hidden-select.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from '../styles/common.p.module.css.js';
+
+const HiddenSelect = _ref => {
+  let {
+    name,
+    options,
+    value,
+    isMultiple
+  } = _ref;
+  const selectProps = {
+    name,
+    'aria-hidden': true,
+    readOnly: true,
+    tabIndex: -1
+  };
+
+  if (isMultiple) {
+    selectProps.multiple = true;
+
+    if (value && value.length !== 0) {
+      selectProps.value = value.map(v => String(v.value));
+    }
+  } else if (value) {
+    const singleValue = value;
+    selectProps.value = singleValue.value;
+  }
+
+  const arrayValue = isMultiple ? value : [value]; // merge options with value in case the provided value is not included in options
+
+  const allItems = Array.from( // map will deduplicate options by values
+  new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values());
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.visuallyHidden
+  }, /*#__PURE__*/React.createElement("select", { ...selectProps
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "",
+    label: '\u00A0'
+  }, '\u00A0'), allItems.map(option => /*#__PURE__*/React.createElement("option", {
+    key: option.value,
+    value: option.value
+  }, option.label))));
+};
+
+export { HiddenSelect };

package/lib/parts/icons.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ClearOrLoadingProps = {
+    isLoading: boolean;
+    canHaveClearIcon: boolean;
+    onClearClick: () => void;
+    triggerId?: string;
+    className?: string;
+};
+export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
+export declare type IconsProps = {
+    isLoading?: boolean;
+    canHaveClearIcon?: boolean;
+    onClear?: () => void;
+    triggerId?: string;
+};
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => JSX.Element;
+export {};

package/lib/parts/icons.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import cn from 'classnames';
+import CloseOutlineIcon from '../_virtual/close-outline.js';
+import LoadingOutlineIcon from '../_virtual/loading-outline.js';
+import DownOutlineIcon from '../_virtual/down-outline.js';
+import styles from '../styles/common.p.module.css.js';
+
+const ClearOrLoading = _ref => {
+  let {
+    isLoading,
+    canHaveClearIcon,
+    onClearClick,
+    triggerId,
+    className
+  } = _ref;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+      style: {
+        pointerEvents: 'none'
+      },
+      className: cn(className, styles.icon),
+      "data-test": "loading-icon",
+      "data-render-all-sizes": true
+    });
+  } else if (canHaveClearIcon) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: cn(className, styles.icon, styles.clearIcon),
+      "data-test": "clear-icon",
+      onClick: e => {
+        e.stopPropagation();
+        onClearClick();
+      },
+      onPointerDown: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation(),
+      onKeyDown: e => e.stopPropagation(),
+      "aria-label": "Clear",
+      "aria-controls": triggerId
+    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
+      "data-render-all-sizes": true
+    }));
+  } else {
+    return null;
+  }
+};
+
+const Icons = _ref2 => {
+  let {
+    isLoading,
+    canHaveClearIcon,
+    onClear,
+    triggerId
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.iconsWrapper
+  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
+    isLoading: isLoading,
+    canHaveClearIcon: canHaveClearIcon,
+    onClearClick: onClear,
+    triggerId: triggerId
+  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
+    className: styles.toggle,
+    "data-test": "toggle-icon",
+    "data-render-all-sizes": true
+  }));
+};
+
+export { ClearOrLoading, Icons };

package/lib/parts/list-box.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SelectSize, SelectMode, ListBoxItem, ListBoxState } from '../types';
+export declare type ListBoxProps = {
+    state: ListBoxState;
+    items: ListBoxItem[];
+    size?: SelectSize;
+    mode?: SelectMode;
+    className?: string;
+    maxVisibleItems?: number;
+    emptyListMessage: string;
+    isPrimaryContrast?: boolean;
+};
+export declare function ListBox({ state, items, size, mode, maxVisibleItems, emptyListMessage, isPrimaryContrast }: ListBoxProps): JSX.Element;

package/lib/parts/list-box.js

@@ -0,0 +1,120 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import styles from '../styles/list-box.p.module.css.js';
+import { calculateMaxHeightByItems } from '../utils/calculate-max-height-by-items.js';
+import { getRealItemsCnt } from '../utils/get-real-items-cnt.js';
+import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
+import CheckOutlineIcon from '../_virtual/check-outline.js';
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
+
+function Option(_ref) {
+  let {
+    item,
+    state
+  } = _ref;
+  // Get props for the option element
+  const ref = useRef(null);
+  const {
+    selectedMap,
+    getItemProps,
+    highlightedIndex
+  } = state;
+  const index = item.index;
+  const isSelected = selectedMap.has(item.key);
+  const isHighlighted = highlightedIndex === item.index;
+  const isDisabled = item.disabled;
+  return /*#__PURE__*/React.createElement("li", { ...getItemProps({
+      item,
+      index,
+      'aria-selected': isSelected,
+      'tab-index': isHighlighted ? 0 : -1,
+      ref
+    }),
+    className: cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled),
+    "data-rs-internal": "select-list-box__item",
+    "data-focused": isHighlighted,
+    "data-test": `select-options-list__item_${item.key}`
+  }, /*#__PURE__*/React.createElement("span", null, item.label), /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+    "data-rs-internal": "select-list-box__check-icon",
+    className: cn(styles.checkIcon, isSelected && styles.visible)
+  }));
+}
+
+function ListBoxGroup(_ref2) {
+  let {
+    item,
+    isFirst,
+    state
+  } = _ref2;
+  const hasHeading = item.label !== null && item.label !== undefined;
+  const hasDivider = !isFirst && !hasHeading; // If the section is not the first, add a divider for visual separation
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasDivider && /*#__PURE__*/React.createElement("hr", {
+    className: styles.divider
+  }), /*#__PURE__*/React.createElement("li", {
+    role: "presentation"
+  }, hasHeading && /*#__PURE__*/React.createElement("span", {
+    className: styles.groupHeader,
+    role: "presentation",
+    "data-rs-internal": "select-list-box__group-header"
+  }, item.label), /*#__PURE__*/React.createElement("ul", {
+    role: "group",
+    "aria-label": hasHeading ? getTextFromNodes(item.label) : undefined,
+    style: {
+      padding: 0,
+      listStyle: 'none'
+    }
+  }, item.options.map(option => /*#__PURE__*/React.createElement(Option, {
+    key: option.key,
+    item: option,
+    state: state
+  })))));
+}
+
+function ListBox(_ref3) {
+  let {
+    state,
+    items,
+    size,
+    mode,
+    maxVisibleItems = 5,
+    emptyListMessage,
+    isPrimaryContrast = false
+  } = _ref3;
+  const {
+    menuProps
+  } = state;
+  const firstGroupKey = items.find(item => item.type === 'group')?.key;
+  const itemsCount = getRealItemsCnt(items);
+  return /*#__PURE__*/React.createElement("ul", { ...menuProps,
+    className: cn(styles.listBox, SIZE_STYLES[size], MODE_STYLES[mode]),
+    style: {
+      '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems),
+      '--rs-select-contrast-primary': isPrimaryContrast ? '1' : '0'
+    },
+    "data-rs-internal": "select-list-box",
+    "data-test": "select-options-list"
+  }, itemsCount === 0 ? /*#__PURE__*/React.createElement("li", {
+    className: cn(styles.item, styles.disabled),
+    "data-rs-internal": "select-list-box__item"
+  }, /*#__PURE__*/React.createElement("span", null, emptyListMessage)) : items.map(item => item.type === 'group' ? /*#__PURE__*/React.createElement(ListBoxGroup, {
+    key: item.key,
+    item: item,
+    state: state,
+    isFirst: item.key === firstGroupKey
+  }) : /*#__PURE__*/React.createElement(Option, {
+    key: item.key,
+    item: item,
+    state: state
+  })));
+}
+
+export { ListBox };

package/lib/parts/multi-trigger.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectOption } from '../types';
+export interface MultiTriggerProps {
+    selectedItems: SelectOption[];
+    removeSelectedItem: (item: SelectOption) => void;
+    valueProps: object;
+    isSingleLine: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    triggerRef?: React.RefObject<HTMLDivElement>;
+}
+export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): JSX.Element;

package/lib/parts/multi-trigger.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import cn from 'classnames';
+import { RemovableTag, Tag } from '@rescui/tag';
+import styles from '../styles/common.p.module.css.js';
+import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
+import { getOptionValue } from '../utils/get-option-value.js';
+import Foldable from './foldable.js';
+
+function MultiTrigger(_ref) {
+  let {
+    selectedItems,
+    valueProps,
+    isSingleLine,
+    isDisabled,
+    placeholder,
+    triggerRef,
+    removeSelectedItem
+  } = _ref;
+  const hasValue = selectedItems.length > 0;
+
+  if (!hasValue) {
+    return /*#__PURE__*/React.createElement("div", { ...valueProps,
+      className: cn(styles.triggerText, styles.labelNotSelected),
+      "data-test": 'multiselect__trigger_content'
+    }, placeholder);
+  }
+
+  const tags = selectedItems.map(option => {
+    const key = getOptionValue(option);
+    return /*#__PURE__*/React.createElement(RemovableTag, {
+      key: key,
+      tabIndex: -1,
+      "data-test": `selected-tag-${key}`,
+      className: styles.tag,
+      disabled: isDisabled,
+      onRemoveClick: () => {
+        removeSelectedItem(option);
+        triggerRef.current?.focus({
+          focusVisible: false
+        });
+      },
+      "data-rs-internal": "select-trigger__removable-tag",
+      wrap: !isSingleLine,
+      "aria-label": getTextFromNodes(option.label),
+      onFocus: e => {
+        if (e.target.getAttribute('tabindex') === '-1') {
+          triggerRef.current?.focus({
+            focusVisible: false
+          });
+        }
+      }
+    }, option.label);
+  });
+  return /*#__PURE__*/React.createElement("div", { ...valueProps,
+    className: styles.multi,
+    "data-test": "multiselect__trigger_content"
+  }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
+    className: styles.tagsContainer,
+    renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
+      className: cn(styles.tag, styles.filledTag),
+      key: "+",
+      ref: ref,
+      "data-rs-internal": "select-trigger__tag"
+    }, "+", n)
+  }, tags) : /*#__PURE__*/React.createElement("div", {
+    className: styles.tagsContainer
+  }, tags));
+}
+
+export { MultiTrigger };

package/lib/parts/native-select-options-with-groups.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NativeSelectOptionOrGroup } from '../types';
+export declare type NativeSelectOptionsWithGroupsProps = {
+    optionsWithGroups: NativeSelectOptionOrGroup[];
+    placeholder?: string;
+    emptyListMessage?: string;
+};
+export declare const NativeSelectOptionsWithGroups: React.FC<NativeSelectOptionsWithGroupsProps>;

package/lib/parts/native-select-options-with-groups.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { NO_OPTIONS_VALUE } from '../constants.js';
+import { isOptionAGroup } from '../utils/is-option-a-group.js';
+
+const collectOptionGroupValues = options => options.map(_ref => {
+  let {
+    value
+  } = _ref;
+  return value;
+}).join('-');
+
+const Option = _ref2 => {
+  let {
+    value,
+    label,
+    disabled = false
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("option", {
+    value: value,
+    disabled: disabled
+  }, label);
+};
+
+const OptionGroup = _ref3 => {
+  let {
+    options = [],
+    label = '',
+    disabled = false
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("optgroup", {
+    label: label,
+    disabled: disabled
+  }, options.map(option => /*#__PURE__*/React.createElement(Option, {
+    key: option.value,
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled
+  })));
+};
+
+const NativeSelectOptionsWithGroups = _ref4 => {
+  let {
+    optionsWithGroups,
+    placeholder,
+    emptyListMessage
+  } = _ref4;
+  const hasOptions = optionsWithGroups.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
+    value: '',
+    disabled: true,
+    hidden: true
+  }, hasOptions ? placeholder : emptyListMessage), !hasOptions && /*#__PURE__*/React.createElement("option", {
+    value: NO_OPTIONS_VALUE,
+    disabled: true
+  }, emptyListMessage), optionsWithGroups.map(optionOrGroup => {
+    if (isOptionAGroup(optionOrGroup)) {
+      const group = optionOrGroup;
+      return /*#__PURE__*/React.createElement(OptionGroup, {
+        key: `group--${group.label}--${collectOptionGroupValues(group.options)}`,
+        options: group.options,
+        disabled: group.disabled,
+        label: group.label
+      });
+    }
+
+    const option = optionOrGroup;
+    return /*#__PURE__*/React.createElement(Option, {
+      key: option.value,
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled
+    });
+  }));
+};
+
+export { NativeSelectOptionsWithGroups };

package/lib/parts/popup-content.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { DropdownProps, DropdownImperativeHandle } from '@rescui/dropdown';
+import type { SelectMode, SelectSize, ListBoxState, ListBoxItem, Placement } from '../types';
+export declare type PopupContentProps = {
+    theme: Theme;
+    listBoxState: ListBoxState;
+    triggerRef: React.RefObject<HTMLElement>;
+    dropdownRef?: React.RefObject<DropdownImperativeHandle>;
+    listBoxItems?: ListBoxItem[];
+    placement: Placement;
+    size?: SelectSize;
+    mode?: SelectMode;
+    emptyListMessage: string;
+    maxVisibleItems?: number;
+    trigger?: DropdownProps['trigger'];
+    isOpen?: boolean;
+    dropdownUpdateDeps?: unknown[];
+};
+export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, isOpen, dropdownUpdateDeps }: PopupContentProps) => JSX.Element;

package/lib/parts/popup-content.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { Dropdown } from '@rescui/dropdown';
+import { useActualSizeFromCss } from '../hooks/use-actual-size-from-css.js';
+import { usePrimaryContrastCssVarTransfer } from '../hooks/use-primary-contrast-css-var-transfer.js';
+import styles from '../styles/common.p.module.css.js';
+import { ListBox } from './list-box.js'; // eslint-disable-next-line complexity
+
+const PopupContent = _ref => {
+  let {
+    theme,
+    listBoxState,
+    triggerRef,
+    dropdownRef,
+    listBoxItems,
+    placement,
+    size: sizeFromProps,
+    mode,
+    emptyListMessage,
+    maxVisibleItems,
+    trigger,
+    isOpen,
+    dropdownUpdateDeps = []
+  } = _ref;
+  const {
+    size,
+    observableRef
+  } = useActualSizeFromCss({
+    sizeFromProps,
+    triggerRef
+  });
+  const {
+    isPrimaryContrast
+  } = usePrimaryContrastCssVarTransfer({
+    isOpen,
+    triggerRef
+  });
+  useEffect(() => {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [listBoxItems, size, ...dropdownUpdateDeps]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: observableRef,
+    className: styles.observable
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    theme: theme,
+    ref: dropdownRef,
+    placement: placement,
+    maxWidth: "trigger",
+    minWidth: "trigger",
+    leastMaxHeight: 999999,
+    isOpen: isOpen,
+    cancelCloseAnimation: true,
+    disableFocusLock: true,
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement(ListBox, {
+    state: listBoxState,
+    size: size,
+    mode: mode,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    items: listBoxItems,
+    isPrimaryContrast: isPrimaryContrast
+  })));
+};
+
+export { PopupContent };