@rescui/select 0.17.2 → 0.18.0

package/lib/multiselect.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MultiselectProps } from './types';
-export declare function Multiselect({ options, value, onChange, error, label, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): React.JSX.Element;
+export declare function Multiselect({ options, value, onChange, error, label, note, size, mode, theme: themeFromProps, placement, renderInTrigger, disableFlip, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): React.JSX.Element;

package/lib/multiselect.js

@@ -69,6 +69,8 @@ function Multiselect(_ref) {
     mode = 'classic',
     theme: themeFromProps,
     placement = 'bottom',
+    renderInTrigger = false,
+    disableFlip = false,
     isSingleLine = false,
     boldLabel = true,
     reserveErrorLine = false,
@@ -261,6 +263,8 @@ function Multiselect(_ref) {
     dropdownRef: dropdownRef,
     triggerRef: triggerRef,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     isOpen: isOpen,
     listBoxState: listBoxState,
     maxVisibleItems: maxVisibleItems,

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

@@ -14,7 +14,9 @@ export type PopupContentProps = {
     emptyListMessage: string;
     maxVisibleItems?: number;
     trigger?: DropdownProps['trigger'];
+    renderInTrigger?: boolean;
+    disableFlip?: boolean;
     isOpen?: boolean;
     dropdownUpdateDeps?: unknown[];
 };
-export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;
+export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;

package/lib/parts/popup-content.js

@@ -18,6 +18,8 @@ const PopupContent = _ref => {
     emptyListMessage,
     maxVisibleItems,
     trigger,
+    renderInTrigger,
+    disableFlip,
     isOpen,
     dropdownUpdateDeps = []
   } = _ref;
@@ -53,6 +55,8 @@ const PopupContent = _ref => {
     isOpen: isOpen,
     cancelCloseAnimation: true,
     disableFocusLock: true,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     trigger: trigger
   }, /*#__PURE__*/React.createElement(ListBox, {
     state: listBoxState,

package/lib/select-basic.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { InnerSingleComponentProps } from './types';
-export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;
+export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-basic.js

@@ -28,6 +28,8 @@ function SelectBasic(_ref) {
     mode,
     theme,
     placement,
+    renderInTrigger,
+    disableFlip,
     boldLabel,
     reserveErrorLine,
     maxVisibleItems,
@@ -167,6 +169,8 @@ function SelectBasic(_ref) {
     maxVisibleItems: maxVisibleItems,
     emptyListMessage: emptyListMessage,
     listBoxItems: listBoxItems,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     trigger: _ref3 => {
       let {
         ref: triggerRefForDropdown

package/lib/select-searchable.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { InnerSingleComponentProps } from './types';
-export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;
+export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-searchable.js

@@ -27,6 +27,8 @@ function SelectSearchable(_ref) {
     mode,
     theme,
     placement,
+    renderInTrigger,
+    disableFlip,
     boldLabel,
     reserveErrorLine,
     maxVisibleItems,
@@ -198,6 +200,8 @@ function SelectSearchable(_ref) {
     dropdownRef: dropdownRef,
     triggerRef: inputRef,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     isOpen: isOpen,
     listBoxState: listBoxState,
     maxVisibleItems: maxVisibleItems,

package/lib/select.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { SelectProps, SelectOption, SelectOptionOrGroup } from './types';
 export declare const Select: {
-    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): React.JSX.Element;
+    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): React.JSX.Element;
     propTypes: {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
@@ -23,6 +23,8 @@ export declare const Select: {
         note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         noOptionsMessage: PropTypes.Validator<import("./types").NoOptionsMessage>;
         placement: PropTypes.Requireable<string>;
+        renderInTrigger: PropTypes.Requireable<boolean>;
+        disableFlip: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
     };
 };

package/lib/select.js

@@ -40,6 +40,8 @@ const Select = _ref => {
     noOptionsMessage,
     error,
     placement = 'bottom',
+    renderInTrigger = false,
+    disableFlip = false,
     boldLabel = true,
     reserveErrorLine = false,
     note,
@@ -71,6 +73,8 @@ const Select = _ref => {
     noOptionsMessage: noOptionsMessage,
     error: error,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     boldLabel: boldLabel,
     reserveErrorLine: reserveErrorLine,
     note: note,
@@ -98,6 +102,8 @@ Select.propTypes = {
   note: PropTypes.node,
   noOptionsMessage: noOptionsMessageType,
   placement: PropTypes.oneOf(['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']),
+  renderInTrigger: PropTypes.bool,
+  disableFlip: PropTypes.bool,
   name: PropTypes.string
 };
 export { Select };

package/lib/styles/common.p.module.css.js

@@ -1,32 +1,32 @@
 var styles = {
-  "themeLight": "_themeLight_f1140c_6",
-  "themeDark": "_themeDark_f1140c_9",
-  "sizeS": "_sizeS_f1140c_13",
-  "sizeM": "_sizeM_f1140c_16",
-  "sizeL": "_sizeL_f1140c_19",
-  "classic": "_classic_f1140c_23",
-  "rock": "_rock_f1140c_26",
-  "root": "_root_f1140c_30",
-  "triggerContainer": "_triggerContainer_f1140c_36",
-  "disabled": "_disabled_f1140c_41",
-  "trigger": "_trigger_f1140c_36",
-  "error": "_error_f1140c_78",
-  "enabled": "_enabled_f1140c_83",
-  "searchable": "_searchable_f1140c_98",
-  "canBeMultiline": "_canBeMultiline_f1140c_125",
-  "triggerText": "_triggerText_f1140c_129",
-  "searchInput": "_searchInput_f1140c_130",
-  "labelNotSelected": "_labelNotSelected_f1140c_161",
-  "multi": "_multi_f1140c_217",
-  "tagsContainer": "_tagsContainer_f1140c_234",
-  "tag": "_tag_f1140c_234",
-  "filledTag": "_filledTag_f1140c_256",
-  "iconsWrapper": "_iconsWrapper_f1140c_264",
-  "toggle": "_toggle_f1140c_282",
-  "icon": "_icon_f1140c_264",
-  "clearIcon": "_clearIcon_f1140c_356",
-  "visuallyHidden": "_visuallyHidden_f1140c_416",
-  "select": "_select_f1140c_433",
-  "observable": "_observable_f1140c_455"
+  "themeLight": "_themeLight_1ph90r1_6",
+  "themeDark": "_themeDark_1ph90r1_9",
+  "sizeS": "_sizeS_1ph90r1_13",
+  "sizeM": "_sizeM_1ph90r1_16",
+  "sizeL": "_sizeL_1ph90r1_19",
+  "classic": "_classic_1ph90r1_23",
+  "rock": "_rock_1ph90r1_26",
+  "root": "_root_1ph90r1_30",
+  "triggerContainer": "_triggerContainer_1ph90r1_36",
+  "disabled": "_disabled_1ph90r1_41",
+  "trigger": "_trigger_1ph90r1_36",
+  "error": "_error_1ph90r1_78",
+  "enabled": "_enabled_1ph90r1_83",
+  "searchable": "_searchable_1ph90r1_98",
+  "canBeMultiline": "_canBeMultiline_1ph90r1_125",
+  "triggerText": "_triggerText_1ph90r1_129",
+  "searchInput": "_searchInput_1ph90r1_130",
+  "labelNotSelected": "_labelNotSelected_1ph90r1_161",
+  "multi": "_multi_1ph90r1_217",
+  "tagsContainer": "_tagsContainer_1ph90r1_234",
+  "tag": "_tag_1ph90r1_234",
+  "filledTag": "_filledTag_1ph90r1_256",
+  "iconsWrapper": "_iconsWrapper_1ph90r1_264",
+  "toggle": "_toggle_1ph90r1_282",
+  "icon": "_icon_1ph90r1_264",
+  "clearIcon": "_clearIcon_1ph90r1_356",
+  "visuallyHidden": "_visuallyHidden_1ph90r1_416",
+  "select": "_select_1ph90r1_433",
+  "observable": "_observable_1ph90r1_455"
 };
 export { styles as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_1439i0c_6",
-  "themeDark": "_themeDark_1439i0c_9",
-  "sizeS": "_sizeS_1439i0c_13",
-  "sizeM": "_sizeM_1439i0c_16",
-  "sizeL": "_sizeL_1439i0c_19",
-  "main": "_main_1439i0c_23",
-  "label": "_label_1439i0c_27",
-  "disabled": "_disabled_1439i0c_33",
-  "footer": "_footer_1439i0c_38",
-  "errorMessage": "_errorMessage_1439i0c_45",
-  "error": "_error_1439i0c_45",
-  "note": "_note_1439i0c_54"
+  "themeLight": "_themeLight_13ylg3x_6",
+  "themeDark": "_themeDark_13ylg3x_9",
+  "sizeS": "_sizeS_13ylg3x_13",
+  "sizeM": "_sizeM_13ylg3x_16",
+  "sizeL": "_sizeL_13ylg3x_19",
+  "main": "_main_13ylg3x_23",
+  "label": "_label_13ylg3x_27",
+  "disabled": "_disabled_13ylg3x_33",
+  "footer": "_footer_13ylg3x_38",
+  "errorMessage": "_errorMessage_13ylg3x_45",
+  "error": "_error_13ylg3x_45",
+  "note": "_note_13ylg3x_54"
 };
 export { styles as default };

package/lib/styles/list-box.p.module.css.js

@@ -1,16 +1,16 @@
 var styles = {
-  "sizeS": "_sizeS_1s11z1a_6",
-  "sizeM": "_sizeM_1s11z1a_9",
-  "sizeL": "_sizeL_1s11z1a_12",
-  "classic": "_classic_1s11z1a_16",
-  "rock": "_rock_1s11z1a_19",
-  "listBox": "_listBox_1s11z1a_23",
-  "item": "_item_1s11z1a_39",
-  "selected": "_selected_1s11z1a_77",
-  "disabled": "_disabled_1s11z1a_91",
-  "checkIcon": "_checkIcon_1s11z1a_98",
-  "visible": "_visible_1s11z1a_105",
-  "divider": "_divider_1s11z1a_112",
-  "groupHeader": "_groupHeader_1s11z1a_126"
+  "sizeS": "_sizeS_19aocyn_6",
+  "sizeM": "_sizeM_19aocyn_9",
+  "sizeL": "_sizeL_19aocyn_12",
+  "classic": "_classic_19aocyn_16",
+  "rock": "_rock_19aocyn_19",
+  "listBox": "_listBox_19aocyn_23",
+  "item": "_item_19aocyn_39",
+  "selected": "_selected_19aocyn_77",
+  "disabled": "_disabled_19aocyn_91",
+  "checkIcon": "_checkIcon_19aocyn_98",
+  "visible": "_visible_19aocyn_105",
+  "divider": "_divider_19aocyn_112",
+  "groupHeader": "_groupHeader_19aocyn_126"
 };
 export { styles as default };

package/lib/types.d.ts

@@ -126,6 +126,14 @@ export type SelectProps = {
      * Placement of dropdown element
      */
     placement?: Placement;
+    /**
+     * Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout or popovers.
+     * */
+    renderInTrigger?: boolean;
+    /**
+     * Disable dropdown flip behavior. By default dropdown will flip its position if it's not fully visible.
+     * */
+    disableFlip?: boolean;
     /**
      * Note element at the bottom (use with forms)
      */

package/llm/components/multiselect.md

@@ -0,0 +1,282 @@
+# Multiselect
+
+Multiselect is a control that allows users to select multiple options from a list.
+
+## Usage
+
+### Features showcase
+
+#### Example:
+
+You can control what has been selected through `value`/`onChange` props combination. The state represents the collection of options displayed in the select box. The empty state represents by `[]`.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'St. Petersburg', value: 'spb' },
+  { label: 'Moscow', value: 'msk' },
+  { label: 'Novosibirsk', value: 'nsk' },
+  { label: 'Prague', value: 'prg' },
+  { label: 'Boston', value: 'bos' },
+  { label: 'Munich', value: 'muc' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState([options[0], options[5]]);
+
+  return (
+    <div>
+      <span>Selected cities: </span>
+      <code>{JSON.stringify(selected)}</code>
+      <div style={{ maxWidth: '380px', marginTop: '24px' }}>
+        <Multiselect
+          options={options}
+          value={selected}
+          onChange={value => {
+            console.log('value', value);
+            setSelected(value);
+          }}
+          size="m"
+          placeholder="Сhoose your favorite cities..."
+          aria-label="Сhoose your favorite cities"
+        />
+      </div>
+    </div>
+  );
+};
+
+render(<MySelect />);
+```
+
+#### SingleLine mode:
+
+You can use the `isSingleLine` prop to limit from grow and force it to be always single line. In this case extra tags is hidden and display the count of hidden tags instead.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'Blue', value: 'blue' },
+  { label: 'Black', value: 'black' },
+  { label: 'Red', value: 'red' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Yellow', value: 'yellow' },
+  { label: 'White', value: 'white' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState([options[1], options[5]]);
+
+  return (
+    <div style={{ maxWidth: '380px' }}>
+      <Multiselect
+        className="clazz"
+        options={options}
+        value={selected}
+        onChange={value => setSelected(value)}
+        isSingleLine
+        size="m"
+        placeholder="Select colors..."
+        aria-label="Select colors"
+      />
+    </div>
+  );
+};
+
+render(<MySelect />);
+```
+
+#### Contrast primary color
+
+If your primary color background requires dark text color, use `--rs-select-contrast-primary` CSS variable.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'St. Petersburg', value: 'spb' },
+  { label: 'Moscow', value: 'msk' },
+  { label: 'Novosibirsk', value: 'nsk' },
+  { label: 'Prague', value: 'prg' },
+  { label: 'Boston', value: 'bos' },
+  { label: 'Munich', value: 'muc' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState([options[0], options[5]]);
+
+  return (
+    <div>
+      <span>Selected cities: </span>
+      <code>{JSON.stringify(selected)}</code>
+      <div
+        style={{ maxWidth: '380px', marginTop: '24px' }}
+        className="light-green-primary"
+      >
+        <Multiselect
+          options={options}
+          value={selected}
+          onChange={setSelected}
+          size="m"
+          className="select-with-contrast-primary"
+          placeholder="Сhoose your favorite cities..."
+          aria-label="Сhoose your favorite cities"
+        />
+      </div>
+    </div>
+  );
+};
+
+render(<MySelect />);
+```
+
+```postcss attached
+.select-with-contrast-primary {
+  --rs-select-contrast-primary: 1;
+}
+
+.light-green-primary {
+  --rs-color-primary-light-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
+}
+```
+
+#### In the native dialog element
+
+Because the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using) places the dialog element on the Top Layer, any value of `z-index` for the options list will be ignored.
+
+To work around this, we can use the `renderInTrigger` prop to render the popover in the dialog element instead of the bottom of the `body`.
+
+Also use `disableFlip` prop and `overflow: visible` css on the dialog if options will overflow it.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'Blue', value: 'blue' },
+  { label: 'Black', value: 'black' },
+  { label: 'Red', value: 'red' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Yellow', value: 'yellow' },
+  { label: 'White', value: 'white' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState([options[1], options[5]]);
+
+  return (
+    <div style={{ maxWidth: '380px' }}>
+      <Multiselect
+        className="clazz"
+        options={options}
+        value={selected}
+        onChange={value => setSelected(value)}
+        isSingleLine
+        size="m"
+        placeholder="Select colors..."
+        aria-label="Select colors"
+        renderInTrigger
+        disableFlip
+      />
+    </div>
+  );
+};
+
+render(
+  <>
+    <button command="show-modal" commandfor="my-dialog">
+      Open dialog
+    </button>
+
+    <dialog id="my-dialog" style={{ width: 500, overflow: 'visible' }}>
+      <div>
+        <button commandfor="my-dialog" command="close">
+          Close
+        </button>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <MySelect />
+      </div>
+    </dialog>
+  </>
+);
+```
+
+## CSS Mixins API
+
+#### `Multiselect` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-multiselect-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-multiselect-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-multiselect-size-l` | prop: `size`<br><br>value: `"l"` |
+
+#### Demo
+
+Use the controls to see the effect at different viewport widths.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'St. Petersburg', value: 'spb' },
+  { label: 'Moscow', value: 'msk' },
+  { label: 'Novosibirsk', value: 'nsk' },
+  { label: 'Prague', value: 'prg' },
+  { label: 'Boston', value: 'bos' },
+  { label: 'Munich', value: 'muc' }
+];
+
+const MyMultiselect = ({ className }) => {
+  const [selected, setSelected] = useState([options[0], options[5]]);
+
+  return (
+    <div style={{ maxWidth: 380, height: 380 }}>
+      <Multiselect
+        options={options}
+        value={selected}
+        onChange={value => setSelected(value)}
+        size="m"
+        placeholder="Сhoose your favorite cities..."
+        aria-label="Choose your favorite cities"
+        className={className}
+      />
+    </div>
+  );
+};
+
+render(<MyMultiselect className="my-multiselect" />);
+```
+
+```postcss
+@import '@rescui/select/lib/public-api.p.css';
+
+.my-multiselect {
+  @media (max-width: 640px) {
+    @mixin rs-multiselect-size-l;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-multiselect-size-s;
+  }
+}
+```
+
+#### `Select` CSS Vars
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-select-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
+
+Check out [this example](/components/multiselect/#contrast-primary-color) for contrast primary.