DocSpace-client/packages/shared/components/combobox

ComboBox

Custom combo box input

Usage

import { ComboBox } from "@docspace/shared/components/combobox";
import NavLogoReactSvg from "PUBLIC_DIR/images/nav.logo.react.svg";
import CatalogEmployeeReactSvg from "PUBLIC_DIR/images/catalog.employee.react.svg?url";

const options = [
  {
    key: 1,
    icon: CatalogEmployeeReactSvg, // optional item
    label: "Option 1",
    disabled: false, // optional item
    onClick: clickFunction, // optional item
  },
];

<ComboBox
  options={options}
  isDisabled={false}
  selectedOption={{
    key: 0,
    label: "Select",
  }}
  dropDownMaxHeight={200}
  noBorder={false}
  scale={true}
  scaledOptions={true}
  size="content"
  onSelect={(option) => console.log("selected", option)}
/>

Options have options:

• key - Item key, may be a string or a number
• label - Display text
• icon - Optional name of icon that will be displayed before label
• disabled - Make option disabled
• onClick - On click function

ComboBox perceives all property`s for positioning from DropDown!

If you need to display a custom list of options, you must use advancedOptions property. Like this:

const advancedOptions = (
  <>
    <DropDownItem>
      <RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
    </DropDownItem>
    <DropDownItem>
      <RadioButton value="desc" name="first" label="Z-A" />
    </DropDownItem>
    <DropDownItem isSeparator />
    <DropDownItem>
      <RadioButton value="first" name="second" label="First name" />
    </DropDownItem>
    <DropDownItem>
      <RadioButton
        value="last"
        name="second"
        label="Last name"
        isChecked={true}
      />
    </DropDownItem>
  </>
);

<ComboBox
  options={[]} // An empty array will enable advancedOptions
  advancedOptions={advancedOptions}
  onSelect={(option) => console.log("Selected option", option)}
  selectedOption={{
    key: 0,
    label: "Select",
  }}
  isDisabled={false}
  scaled={false}
  size="content"
  directionX="right"
>
  <NavLogoReactSvg size="medium" key="comboIcon" />
</ComboBox>

To use Combobox as a toggle button, you must declare it according to the parameters:

<ComboBox
  options={[]} // Required to display correctly
  selectedOption={{
    key: 0,
    label: "Selected option",
  }}
  scaled={false}
  size="content"
  displayType="toggle"
  onToggle={alert("action")}
>
  <NavLogoReactSvg size="medium" key="comboIcon" />
</ComboBox>

Properties

Props	Type	Required	Values	Default	Description
advancedOptions	element	-	-	-	If you need display options not basic options
className	string	-	-	-	Accepts class
displayType	oneOf	-	default, toggle	default	Component Display Type
dropDownMaxHeight	number	-	-	-	Height of Dropdown
id	string	-	-	-	Accepts id
isDisabled	bool	-	-	false	Indicates that component is disabled
noBorder	bool	-	-	false	Indicates that component is displayed without borders
onSelect	func	-	-	-	Will be triggered whenever an ComboBox is selected option
options	array	✅	-	-	Combo box options
scaledOptions	bool	-	-	false	Indicates that component`s options is scaled by ComboButton
scaled	bool	-	-	true	Indicates that component is scaled by parent
selectedOption	object	✅	-	-	Selected option
size	oneOf	-	base, middle, big, huge, content	base	Select component width, one of default
style	obj, array	-	-	-	Accepts css style
onToggle	func	-	-	-	The event will be raised when using displayType: toggle when clicking on a component
withBackdrop	bool	-	-	true	Indicates that component contains a backdrop
onBackdropClick	func	-	-	-	The event is triggered by clicking outside the component when withBackdrop: true
showDisabledItems	bool	-	-	false	Display disabled items or not when displayType !== toggle