@paprika/list-box

Description

The ListBox component allows users to select one or more options from a list contained within the component

Installation

yarn add @paprika/list-box

or with npm:

npm install @paprika/list-box

Props

ListBox

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|arrayOf|false|null| Child of type <ListBox.Option />, <ListBox.Divider />, etc| |hasError|bool|false|false| If ListBox is in an error state| |hasTag|bool|false|false| If there is a tag| |hasImplicitAll|bool|false|false| Has implicit "All items selected" value when no item is selected| |height|[string,number]|false|200| The maximum height for the options container. Using a number implies px units.| |isDisabled|bool|false|false| Disables the ListBox if true| |isInline|bool|false|false| This options will display the list-box without the Popover| |isMulti|bool|false|false| Let the user to select multiple options at same time| |isOpen|bool|false|false| Indicates if the popover is visible| |isReadOnly|bool|false|false| The ListBox will not allow value to be changed| |onChange|func|false|() => {}| Callback returning the current selection on the ListBox| |placeholder|string|false|null| Default label for trigger when the ListBox has no option selected| |size|[ ListBoxContainer.types.size.SMALL, ListBoxContainer.types.size.MEDIUM, ListBoxContainer.types.size.LARGE]|false|ListBoxContainer.types.size.MEDIUM| Size of the trigger and options (font size, height, padding, etc).| |contentOffsetX|number|false|0| Lets the user control the X-axis offset for the ListBox content| |contentOffsetY|number|false|0| Lets the user control the Y-axis offset for the ListBox content|

ListBox.A11y

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |id|string|false|null| DOM id attribute for focussable control (trigger element or ul element if isInline=true)| |refLabel|custom|false|null| Ref for a DOM element containing the label for this component|

ListBox.Box

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|false|null| Body content of the box.|

ListBox.Divider

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |isDisabled|bool|false|true| isDisable is use internally as a default prop the prop is read by the option/helpers/optionState.js which is assigned in the store it helps to ignore the divider while using the keyboard. see: options/helpers/options.js| |children|node|false|null| |

ListBox.Filter

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |a11yText|string|false|null| Descriptive a11y text for assistive technologies. By default, text from children node will be used.| |filter|func|false|null| Filters the list| |hasSearchIcon|bool|false|true| If true displays a search icon| |noResultsMessage|string|false|null| Message displayed if no results are found| |onChangeFilter|func|false|null| Callback to be executed when the value is changed| |onKeyDown|func|false|null| Callback to be executed when a key is pressed| |placeholder|string|false|null| Displays a placeholder| |renderFilter|func|false|null| Render function for filter| |value|string|false|null| Sets a value for filter|

ListBox.Footer

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |isAcceptVisible|bool|false|true| If true it makes the accept button visible| |isCancelVisible|bool|false|true| If true it makes the cancel button visible| |isClearVisible|bool|false|true| If true it makes the clear button visible| |isDisabled|bool|false|false| If true it makes the footer disabled| |kindAccept|[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]|false|Button.types.kind.PRIMARY| Sets what kind the accept button will be| |kindCancel|[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]|false|Button.types.kind.MINOR| Sets what kind the cancel button will be| |kindClear|[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]|false|Button.types.kind.MINOR| Sets what kind the cancel button will be| |labelAccept|string|false|null| Sets the label for the accept button| |labelCancel|string|false|null| Sets the label for the cancel button| |labelClear|string|false|null| Sets the label for the clear button| |onClickAccept|func|false|null| Callback to be executed when the accept button is clicked or activated by keyboard.| |onClickCancel|func|false|null| Callback to be executed when the cancel button is clicked or activated by keyboard.| |onClickClear|func|false|null| Callback to be executed when the clear button is clicked or activated by keyboard.| |renderExtraButton|func|false|() => {}| Render an extra button beside the clear button| |size|[ Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGE]|false|Button.types.size.MEDIUM| Determines the size of the footer|

ListBox.Option

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|[node,func]|true|-| String, number or JSX content| |isSelected|bool|false|null| | |defaultIsSelected|bool|false|null| Describe if the option started as selected or not| |hasNoIcon|bool|false|false| When no PlusIcon or CheckBox are needed| |isDisabled|bool|false|false| Describe if the option is enable or not| |isHidden|bool|false|false| Describe if the option is hidden or not| |label|string|false|null| When the children are not a String, label should need to be add so the filter can work| |onClick|func|false|null| Callback for the clicking event| |value|any|false|null| Value of your option this can be any data structure| |internalHandleOnClick|func|false|() => null| Internal prop, which shouldn't be documented| |id|string|false|""| Internal prop, which shouldn't be documented| |preventDefaultOnSelect|bool|false|false| Internal prop, which shouldn't be documented|

ListBox.Popover

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|false|-| Body content of the PopOver.| |zIndex|number|false|100| Sets the z-index value of the PopOver|

ListBox.RawItem

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |preventDefaultOnSelect|bool|false|true| |

ListBox.Trigger

| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |clearIcon|node|false|null| Custom clear icon| |children|[node,func]|false|<></>| Body content of the trigger.| |hasClearButton|bool|false|true| If true it adds a clear button| |hasImplicitAll|bool|false|false| Has implicit "All items selected" value when no item is selected| |label|string|false|null| Override the label with a custom one.| |onClickClear|func|false|null| Callback to be executed when the clear button is clicked or activated by keyboard.| |onClickFooterAccept|func|false|null| Callback to be executed when the accept button is clicked or activated by keyboard.| |placeholder|string|false|null| Sets a placeholder for the trigger| |isHidden|bool|false|false| If true the trigger will be hidden|

For a basic ListBox

import ListBox from "@paprika/list-box";

function Component() {
  return (
    <ListBox onChange={changeHandler}>
      <ListBox.Option>Option 1</ListBox.Option>
      <ListBox.Option>Option 2</ListBox.Option>
    </ListBox>
  );
}

With Filter

import ListBox from "@paprika/list-box";

function Component() {
  return (
    <ListBox onChange={changeHandler}>
      <ListBox.Filter />
      <ListBox.Option>Option 1</ListBox.Option>
      <ListBox.Option>Option 2</ListBox.Option>
    </ListBox>
  );
}

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG