@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2

package/lib/index.d.ts

@@ -1,4 +1,6 @@
-export { Select } from './select';
-export { Multiselect } from './multiselect';
-export { NativeSelect } from './native-select';
-export type { SelectProps, MultiselectProps, NativeSelectProps, SelectOption, Key } from './types';
+export { default as Select } from './select';
+export type { SelectProps } from './select';
+export { default as NativeSelect } from './parts/native-select';
+export type { NativeSelectProps } from './parts/native-select';
+export { default as Multiselect } from './parts/multiselect';
+export type { MultiselectProps } from './parts/multiselect';

package/lib/index.js

@@ -1,4 +1,4 @@
 import './index.css';
-export { Select } from './select.js';
-export { Multiselect } from './multiselect.js';
-export { NativeSelect } from './native-select.js';
+export { default as Select } from './select.js';
+export { default as NativeSelect } from './parts/native-select.js';
+export { default as Multiselect } from './parts/multiselect.js';

package/lib/key-codes.d.ts

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,15 @@
+var styles = {
+  "sizeS": "_sizeS_1kt3z5d_3",
+  "sizeM": "_sizeM_1kt3z5d_6",
+  "sizeL": "_sizeL_1kt3z5d_9",
+  "menu": "_menu_1kt3z5d_13",
+  "menuSizeS": "_menuSizeS_1kt3z5d_26",
+  "menuSizeM": "_menuSizeM_1kt3z5d_30",
+  "menuSizeL": "_menuSizeL_1kt3z5d_34",
+  "withGroupsLabel": "_withGroupsLabel_1kt3z5d_40",
+  "lastOption": "_lastOption_1kt3z5d_39",
+  "divider": "_divider_1kt3z5d_45",
+  "checkIcon": "_checkIcon_1kt3z5d_51",
+  "observable": "_observable_1kt3z5d_56"
+};
+export { styles as default };

package/lib/parts/foldable.js

@@ -1,5 +1,6 @@
+"use client";
 import React, { Component } from 'react';
-import { throttle } from '../utils/throttle.js';
+import { throttle } from './throttle.js';
 
 function lastVisibleIndex(lens, maxLen, gap) {
   let extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

package/lib/parts/form-trigger-wrapper.d.ts

@@ -5,29 +5,29 @@ export declare type FormTriggerWrapperProps = {
     size?: SelectSize;
     theme?: Theme;
     className?: string;
+    id?: string;
     disabled?: boolean;
+    errorId?: string;
     error?: boolean | React.ReactNode;
     reserveErrorLine?: boolean;
-    errorMessageProps?: object;
     label?: React.ReactNode;
-    labelProps?: object;
     note?: React.ReactNode;
-    descriptionProps?: object;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     boldLabel?: boolean;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
+declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
     size?: SelectSize;
     theme?: Theme;
     className?: string;
+    id?: string;
     disabled?: boolean;
+    errorId?: string;
     error?: boolean | React.ReactNode;
     reserveErrorLine?: boolean;
-    errorMessageProps?: object;
     label?: React.ReactNode;
-    labelProps?: object;
     note?: React.ReactNode;
-    descriptionProps?: object;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     boldLabel?: boolean;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
+"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 '../styles/form-trigger.p.module.css.js';
+import styles from './form-trigger.p.module.css.js';
 const SIZE_STYLES = {
   l: styles.sizeL,
   m: styles.sizeM,
@@ -12,47 +13,64 @@ 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
-(_ref, ref) => {
+(_ref2, ref) => {
   let {
     size,
     theme: themeFromProps,
     className,
+    id,
     disabled,
     error,
+    errorId,
     reserveErrorLine = false,
-    errorMessageProps,
     label,
-    labelProps,
     note,
-    descriptionProps,
     children,
+    onKeyDown,
     boldLabel,
     ...restProps
-  } = _ref;
+  } = _ref2;
   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
-  }, 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", {
+  }, /*#__PURE__*/React.createElement(Label, {
+    boldLabel: boldLabel
+  }, label), /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onKeyDown
+  }, children), hasFooter && /*#__PURE__*/React.createElement("div", {
     className: styles.footer
   }, /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId,
     className: styles.errorMessage,
-    reserveLine: reserveErrorLine,
-    ...errorMessageProps
+    reserveLine: reserveErrorLine
   }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
-    "data-rs-internal": 'select-form-trigger-wrapper__note',
-    ...descriptionProps
+    "data-rs-internal": 'select-form-trigger-wrapper__note'
   }, note)));
 });
 FormTriggerWrapper.displayName = 'FormTriggerWrapper';
-export { FormTriggerWrapper, FormTriggerWrapper as default };
+export { FormTriggerWrapper as default };

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

@@ -0,0 +1,15 @@
+var styles = {
+  "themeLight": "_themeLight_1bgbtrf_6",
+  "themeDark": "_themeDark_1bgbtrf_9",
+  "sizeS": "_sizeS_1bgbtrf_13",
+  "sizeM": "_sizeM_1bgbtrf_16",
+  "sizeL": "_sizeL_1bgbtrf_19",
+  "main": "_main_1bgbtrf_23",
+  "label": "_label_1bgbtrf_27",
+  "disabled": "_disabled_1bgbtrf_33",
+  "footer": "_footer_1bgbtrf_38",
+  "errorMessage": "_errorMessage_1bgbtrf_45",
+  "error": "_error_1bgbtrf_45",
+  "note": "_note_1bgbtrf_54"
+};
+export { styles as default };

package/lib/parts/multiselect.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { SelectOptionOrGroup, SelectOption, SelectSize, SelectMode, NoOptionsMessage } from '../types';
+export interface MultiselectProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    id?: string;
+    /**
+     * Array of options
+     */
+    options: SelectOptionOrGroup[];
+    /**
+     * Is Multiselect preserve single string
+     */
+    isSingleLine?: boolean;
+    /**
+     * Is Multiselect supports clear the value
+     */
+    isClearable?: boolean;
+    /**
+     * Is Multiselect has been disabled
+     */
+    isDisabled?: boolean;
+    /**
+     *  Is loader displayed inside select
+     */
+    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;
+    /**
+     * Value of the select
+     */
+    value: SelectOption[];
+    /**
+     * Change value callback. `value => ...`
+     */
+    onChange?: (newValue: SelectOption[]) => void;
+    /**
+     * 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 upper then Multiselect element (use with forms)
+     */
+    label?: React.ReactNode;
+    /**
+     * Placement of dropdown element
+     */
+    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';
+    /**
+     * Note element below then Multiselect element (use with forms)
+     */
+    note?: React.ReactNode;
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsMessage?: NoOptionsMessage;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    boldLabel?: boolean;
+}
+declare const Multiselect: React.FC<MultiselectProps>;
+export default Multiselect;