New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@paprika/list-box

Package Overview
Dependencies
Maintainers
4
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@paprika/list-box

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

  • 7.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.7K
decreased by-34.49%
Maintainers
4
Weekly downloads
 
Created
Source

@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

PropTyperequireddefaultDescription
childrenarrayOffalsenullChild of type <ListBox.Option />, <ListBox.Divider />, etc
hasErrorboolfalsefalseIf ListBox is in an error state
hasTagboolfalsefalseIf there is a tag
hasImplicitAllboolfalsefalseHas implicit "All items selected" value when no item is selected
height[string,number]false200The maximum height for the options container. Using a number implies px units.
isDisabledboolfalsefalseDisables the ListBox if true
isInlineboolfalsefalseThis options will display the list-box without the Popover
isMultiboolfalsefalseLet the user to select multiple options at same time
isOpenboolfalsefalseIndicates if the popover is visible
isReadOnlyboolfalsefalseThe ListBox will not allow value to be changed
onChangefuncfalse() => {}Callback returning the current selection on the ListBox
placeholderstringfalsenullDefault label for trigger when the ListBox has no option selected
size[ ListBoxContainer.types.size.SMALL, ListBoxContainer.types.size.MEDIUM, ListBoxContainer.types.size.LARGE]falseListBoxContainer.types.size.MEDIUMSize of the trigger and options (font size, height, padding, etc).
contentOffsetXnumberfalse0Lets the user control the X-axis offset for the ListBox content
contentOffsetYnumberfalse0Lets the user control the Y-axis offset for the ListBox content

ListBox.A11y

PropTyperequireddefaultDescription
idstringfalsenullDOM id attribute for focussable control (trigger element or ul element if isInline=true)
refLabelcustomfalsenullRef for a DOM element containing the label for this component

ListBox.Box

PropTyperequireddefaultDescription
childrennodefalsenullBody content of the box.

ListBox.Divider

PropTyperequireddefaultDescription
isDisabledboolfalsetrueisDisable 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

PropTyperequireddefaultDescription
a11yTextstringfalsenullDescriptive a11y text for assistive technologies. By default, text from children node will be used.
filterfuncfalsenullFilters the list
hasSearchIconboolfalsetrueIf true displays a search icon
noResultsMessagestringfalsenullMessage displayed if no results are found
onChangeFilterfuncfalsenullCallback to be executed when the value is changed
onKeyDownfuncfalsenullCallback to be executed when a key is pressed
placeholderstringfalsenullDisplays a placeholder
renderFilterfuncfalsenullRender function for filter
valuestringfalsenullSets a value for filter

ListBox.Footer

PropTyperequireddefaultDescription
isAcceptVisibleboolfalsetrueIf true it makes the accept button visible
isCancelVisibleboolfalsetrueIf true it makes the cancel button visible
isClearVisibleboolfalsetrueIf true it makes the clear button visible
isDisabledboolfalsefalseIf true it makes the footer disabled
kindAccept[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]falseButton.types.kind.PRIMARYSets what kind the accept button will be
kindCancel[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]falseButton.types.kind.MINORSets what kind the cancel button will be
kindClear[ Button.types.kind.PRIMARY, Button.types.kind.MINOR]falseButton.types.kind.MINORSets what kind the cancel button will be
labelAcceptstringfalsenullSets the label for the accept button
labelCancelstringfalsenullSets the label for the cancel button
labelClearstringfalsenullSets the label for the clear button
onClickAcceptfuncfalsenullCallback to be executed when the accept button is clicked or activated by keyboard.
onClickCancelfuncfalsenullCallback to be executed when the cancel button is clicked or activated by keyboard.
onClickClearfuncfalsenullCallback to be executed when the clear button is clicked or activated by keyboard.
renderExtraButtonfuncfalse() => {}Render an extra button beside the clear button
size[ Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGE]falseButton.types.size.MEDIUMDetermines the size of the footer

ListBox.Option

PropTyperequireddefaultDescription
children[node,func]true-String, number or JSX content
isSelectedboolfalsenull
defaultIsSelectedboolfalsenullDescribe if the option started as selected or not
hasNoIconboolfalsefalseWhen no PlusIcon or CheckBox are needed
isDisabledboolfalsefalseDescribe if the option is enable or not
isHiddenboolfalsefalseDescribe if the option is hidden or not
labelstringfalsenullWhen the children are not a String, label should need to be add so the filter can work
onClickfuncfalsenullCallback for the clicking event
valueanyfalsenullValue of your option this can be any data structure
internalHandleOnClickfuncfalse() => nullInternal prop, which shouldn't be documented
idstringfalse""Internal prop, which shouldn't be documented
preventDefaultOnSelectboolfalsefalseInternal prop, which shouldn't be documented

ListBox.Popover

PropTyperequireddefaultDescription
childrennodefalse-Body content of the PopOver.
zIndexnumberfalse100Sets the z-index value of the PopOver

ListBox.RawItem

PropTyperequireddefaultDescription
preventDefaultOnSelectboolfalsetrue

ListBox.Trigger

PropTyperequireddefaultDescription
clearIconnodefalsenullCustom clear icon
children[node,func]false<></>Body content of the trigger.
hasClearButtonboolfalsetrueIf true it adds a clear button
hasImplicitAllboolfalsefalseHas implicit "All items selected" value when no item is selected
labelstringfalsenullOverride the label with a custom one.
onClickClearfuncfalsenullCallback to be executed when the clear button is clicked or activated by keyboard.
onClickFooterAcceptfuncfalsenullCallback to be executed when the accept button is clicked or activated by keyboard.
placeholderstringfalsenullSets a placeholder for the trigger
isHiddenboolfalsefalseIf 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>
  );
}
  • Storybook Showcase
  • GitHub source code
  • Create GitHub issue
  • CHANGELOG

FAQs

Package last updated on 06 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc