@darajs/ui-components 1.0.0-a.1

package/dist/combo-box/combo-box.d.ts

@@ -0,0 +1,328 @@
+/// <reference types="react" />
+import { InteractiveComponentProps, Item } from '../types';
+interface WrapperProps {
+    isDisabled: boolean;
+    isErrored: boolean;
+    isOpen: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, WrapperProps, never>;
+interface InputWrapperProps {
+    disabled: boolean;
+    isOpen: boolean;
+}
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, InputWrapperProps, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("@darajs/styled-components").DefaultTheme, {}, never>;
+export declare const NoItemsLabel: import("styled-components").StyledComponent<"span", import("@darajs/styled-components").DefaultTheme, {}, never>;
+export declare const ChevronButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, import("@darajs/styled-components").DefaultTheme, {
+    styling: "ghost";
+    autoFocus?: boolean;
+    children: import("react").ReactNode;
+    className?: string;
+    disabled?: boolean;
+    download?: string;
+    href?: string;
+    id?: string;
+    loading?: boolean;
+    onClick?: (e?: import("react").SyntheticEvent<HTMLButtonElement, Event>) => void | Promise<void>;
+    outline?: boolean;
+    style?: import("react").CSSProperties;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    type?: "button" | "reset" | "submit";
+    value?: string | number | readonly string[];
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    contentEditable?: "inherit" | (boolean | "false" | "true");
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "false" | "true";
+    hidden?: boolean;
+    lang?: string;
+    nonce?: string;
+    placeholder?: string;
+    slot?: string;
+    spellCheck?: boolean | "false" | "true";
+    tabIndex?: number;
+    title?: string;
+    translate?: "no" | "yes";
+    radioGroup?: string;
+    role?: import("react").AriaRole;
+    about?: string;
+    content?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    rel?: string;
+    resource?: string;
+    rev?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "false" | "true";
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list";
+    'aria-braillelabel'?: string;
+    'aria-brailleroledescription'?: string;
+    'aria-busy'?: boolean | "false" | "true";
+    'aria-checked'?: boolean | "mixed" | "false" | "true";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colindextext'?: string;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "date" | "location";
+    'aria-describedby'?: string;
+    'aria-description'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "false" | "true";
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "false" | "true";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "false" | "true";
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+    'aria-hidden'?: boolean | "false" | "true";
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "false" | "true";
+    'aria-multiline'?: boolean | "false" | "true";
+    'aria-multiselectable'?: boolean | "false" | "true";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true";
+    'aria-readonly'?: boolean | "false" | "true";
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "false" | "true";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowindextext'?: string;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "false" | "true";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    };
+    onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onCut?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onPaste?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLButtonElement>;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLButtonElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLButtonElement>;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLButtonElement>;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement>;
+    onChange?: import("react").FormEventHandler<HTMLButtonElement>;
+    onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onBeforeInput?: import("react").FormEventHandler<HTMLButtonElement>;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onInput?: import("react").FormEventHandler<HTMLButtonElement>;
+    onInputCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onReset?: import("react").FormEventHandler<HTMLButtonElement>;
+    onResetCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onSubmit?: import("react").FormEventHandler<HTMLButtonElement>;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onInvalid?: import("react").FormEventHandler<HTMLButtonElement>;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLButtonElement>;
+    onLoad?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onError?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLButtonElement>;
+    onAbort?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onCanPlay?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onDurationChange?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEmptied?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEncrypted?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEnded?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadedData?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadStart?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPause?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPlay?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPlaying?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onProgress?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onRateChange?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onResize?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSeeked?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSeeking?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onStalled?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSuspend?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onWaiting?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragEnter?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragExit?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragLeave?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragOver?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDrop?: import("react").DragEventHandler<HTMLButtonElement>;
+    onDropCapture?: import("react").DragEventHandler<HTMLButtonElement>;
+    onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseOver?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseUp?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLButtonElement>;
+    onSelect?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLButtonElement>;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchMove?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchStart?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLButtonElement>;
+    onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerMove?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerUp?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement>;
+    onScroll?: import("react").UIEventHandler<HTMLButtonElement>;
+    onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement>;
+    onWheel?: import("react").WheelEventHandler<HTMLButtonElement>;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement>;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement>;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement>;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement>;
+    ref?: import("react").Ref<HTMLButtonElement>;
+    key?: import("react").Key;
+    theme: import("@darajs/styled-components").DefaultTheme;
+}, "form" | "slot" | "style" | "title" | "type" | "name" | "theme" | "ref" | "children" | "suppressHydrationWarning" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "disabled" | "hidden" | "content" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "outline" | "download" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "loading" | "styling">;
+export interface ComboBoxProps extends InteractiveComponentProps<Item> {
+    /** Whether to open the select dropdown on load or not, defaults to false */
+    initialIsOpen?: boolean;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** An optional onSelect handler for listening to changes in the selected item */
+    onSelect?: (item: Item) => void | Promise<void>;
+    /** An optional placeholder for the input field to display when nothing is selected, defaults to '' */
+    placeholder?: string;
+    /** Set the selected value to a specific value, will put the component in controlled mode. Set to `null` to reset the value. */
+    selectedItem?: Item;
+    /** Font size in rem to show in the Select */
+    size?: number;
+    /** Pass through of style property to the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * A single select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Allows to search for item by typing in combo box.
+ *
+ * @param {ComboBoxProps} props - the component props
+ */
+declare function ComboBox(props: ComboBoxProps): JSX.Element;
+export default ComboBox;
+//# sourceMappingURL=combo-box.d.ts.map

package/dist/combo-box/combo-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../src/combo-box/combo-box.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAK3D,UAAU,YAAY;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,2HAgCnB,CAAC;AAEF,UAAU,iBAAiB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,gIAsBxB,CAAC;AAEF,eAAO,MAAM,KAAK,mHAuBjB,CAAC;AAEF,eAAO,MAAM,YAAY,kHAYxB,CAAC;AAQF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;k5JAOzB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,IAAI,CAAC;IAClE,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+HAA+H;IAC/H,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsKnD;AAED,eAAe,QAAQ,CAAC"}

package/dist/combo-box/combo-box.js

@@ -0,0 +1,213 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCombobox } from 'downshift';
+import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import styled from '@darajs/styled-components';
+import Button from '../button/button';
+import Tooltip from '../tooltip/tooltip';
+import { Chevron, List, ListItem, sameWidthModifier } from '../utils';
+const { stateChangeTypes } = useCombobox;
+export const Wrapper = styled.div `
+    display: inline-flex;
+
+    width: 100%;
+    min-width: 4rem;
+    height: 2.5rem;
+
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0px 0px' : '0.25rem')};
+
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                border: 1px solid ${props.theme.colors.grey2};
+
+                svg {
+                    color: ${props.theme.colors.grey2};
+                }
+            `;
+    }
+    if (props.isErrored) {
+        return `border: 1px solid ${props.theme.colors.error};`;
+    }
+    return `
+            border: 1px solid ${props.isOpen ? props.theme.colors.grey3 : props.theme.colors.grey1};
+            :hover {
+                border: 1px solid ${props.theme.colors.grey3};
+
+            }
+        `;
+}}
+`;
+export const InputWrapper = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+
+    width: calc(100% - 1rem);
+    height: 100%;
+    padding: 0 0.25rem 0 1rem;
+
+    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : props.theme.colors.text)};
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border: none;
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0px 0px' : '0.25rem')};
+
+    :hover {
+        background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+    }
+    svg {
+        height: 0.8rem;
+    }
+`;
+export const Input = styled.input `
+    overflow: hidden;
+    flex: 1 1 auto;
+
+    height: 100%;
+    margin-right: 0.5rem;
+    padding: 0rem;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : props.theme.font.size)};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.text};
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: transparent;
+    border: none;
+    outline: 0;
+
+    :disabled {
+        cursor: not-allowed;
+        color: ${(props) => props.theme.colors.grey2};
+    }
+`;
+export const NoItemsLabel = styled.span `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+
+    height: 2rem;
+
+    font-size: 1rem;
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+`;
+const DropdownList = styled(List) `
+    margin-left: -1px;
+    border-radius: 0px 0px 0.25rem 0.25rem;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+export const ChevronButton = styled(Button).attrs((attrs) => (Object.assign(Object.assign({}, attrs), { styling: 'ghost' }))) `
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0 0.25rem;
+
+    background-color: transparent !important;
+`;
+/**
+ * A single select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Allows to search for item by typing in combo box.
+ *
+ * @param {ComboBoxProps} props - the component props
+ */
+function ComboBox(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const referenceElement = useRef(null);
+    const popperElement = useRef(null);
+    const { styles, attributes, update } = usePopper(referenceElement.current, popperElement.current, {
+        modifiers: [sameWidthModifier],
+        placement: 'bottom-start',
+    });
+    const [inputValue, setInputValue] = useState((_d = (_b = (_a = props.initialValue) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = props.selectedItem) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : '');
+    const [pendingHighlight, setPendingHighlight] = useState(null);
+    const filteredItems = props.items.filter((item) => { var _a; return inputValue ? (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) : true; });
+    const { selectedItem, isOpen, getMenuProps, getInputProps, getToggleButtonProps, highlightedIndex, getItemProps, setHighlightedIndex, } = useCombobox(Object.assign({ initialIsOpen: props.initialIsOpen, initialSelectedItem: (_e = props.initialValue) !== null && _e !== void 0 ? _e : props.selectedItem, itemToString: (item) => (item ? item.label : ''), items: filteredItems, onInputValueChange: (change) => {
+            setInputValue(change.inputValue);
+        }, onSelectedItemChange: (changes) => {
+            var _a, _b;
+            if (props.onSelect) {
+                if ((props.selectedItem && ((_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.value) !== ((_b = props.selectedItem) === null || _b === void 0 ? void 0 : _b.value)) ||
+                    !props.selectedItem) {
+                    props.onSelect(changes.selectedItem);
+                }
+            }
+        }, stateReducer: (state, { changes, type }) => {
+            var _a;
+            // This resets the input when the dropdown is opened
+            if (type === stateChangeTypes.InputFocus ||
+                (type === stateChangeTypes.ToggleButtonClick && changes.isOpen) ||
+                (type === stateChangeTypes.ControlledPropUpdatedSelectedItem && changes.isOpen)) {
+                // This is a hack to change the highlight in the next render cycle so filteredItems had time to update
+                setPendingHighlight(changes.selectedItem ? props.items.findIndex((i) => i.value === changes.selectedItem.value) : 0);
+                return Object.assign(Object.assign({}, changes), { inputValue: '' });
+            }
+            // This restores the input value when the dropdown is closed or an item is picked
+            if ([
+                stateChangeTypes.InputKeyDownEnter,
+                stateChangeTypes.ItemClick,
+                stateChangeTypes.InputBlur,
+                stateChangeTypes.InputKeyDownEscape,
+                stateChangeTypes.ToggleButtonClick,
+            ].includes(type)) {
+                return Object.assign(Object.assign({}, changes), { inputValue: ((_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.label) || '' });
+            }
+            return changes;
+        } }, ('selectedItem' in props && { selectedItem: props.selectedItem })));
+    useEffect(() => {
+        if (isOpen && pendingHighlight !== null) {
+            setHighlightedIndex(pendingHighlight);
+            setPendingHighlight(null);
+        }
+    }, [isOpen, pendingHighlight, setHighlightedIndex]);
+    useEffect(() => {
+        if (props.selectedItem === null) {
+            setInputValue('');
+        }
+    }, [props.selectedItem]);
+    // After the dropdown is opened, trigger an update of it's position, so it positions correctly.
+    useEffect(() => {
+        if (isOpen && update) {
+            update();
+        }
+    }, [isOpen, update]);
+    // Both downshift and popper want a ref to the reference element and popper element, the following blocks combine
+    // these refs into a single function that can be applied to the elements
+    const menuProps = getMenuProps();
+    const setMenuRef = menuProps.ref;
+    delete menuProps.ref;
+    const setMenuReference = (value) => {
+        setMenuRef(value);
+        popperElement.current = value;
+    };
+    return (_jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: _jsxs(Wrapper, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen: isOpen, style: props.style, children: [_jsxs(InputWrapper, { disabled: props.disabled, isOpen: isOpen, ref: referenceElement, children: [_jsx(Input, Object.assign({}, getInputProps({
+                            disabled: props.disabled,
+                        }), { placeholder: (_f = (selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label)) !== null && _f !== void 0 ? _f : props.placeholder, size: props.size })), _jsx(ChevronButton, Object.assign({}, getToggleButtonProps(), { children: _jsx(Chevron, { disabled: props.disabled, isOpen: isOpen }) }))] }), ReactDOM.createPortal(_jsxs(DropdownList, Object.assign({}, menuProps, attributes.popper, { isOpen: isOpen, ref: setMenuReference, style: Object.assign(Object.assign({}, styles.popper), { width: parseFloat((_g = styles.popper) === null || _g === void 0 ? void 0 : _g.width) + 2, zIndex: 9999 }), children: [filteredItems.length > 0 &&
+                            filteredItems.map((item, index) => (_createElement(ListItem, Object.assign({}, getItemProps({ index, item }), { hovered: index === highlightedIndex, key: `item-${index}`, size: props.size, title: item.label }), item.label))), filteredItems.length === 0 && _jsx(NoItemsLabel, { children: "No Items" })] })), document.body)] }) }));
+}
+export default ComboBox;
+//# sourceMappingURL=combo-box.js.map

package/dist/combo-box/combo-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"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"}

package/dist/component-select-list/component-select-list.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentSelectItem } from '../types';
+export interface ComponentSelectListProps {
+    /** Standard react className property */
+    className?: string;
+    /** The items to display, each should have a title, subtitle and component */
+    items: Array<ComponentSelectItem>;
+    /** An optional prop to specify the number of items per row, 3 by default */
+    itemsPerRow?: number;
+    /** An optional flag for allowing selecting multiple cards, false by default */
+    multiSelect?: boolean;
+    /** An optional onSelect handler for listening to changes in the selected items */
+    onSelect?: (items: Array<string>) => void | Promise<void>;
+    /** The optional selected items, can be an array of titles if multiSelect is true otherwise a title */
+    selectedItems?: Array<string>;
+    /** Pass through of style property to the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * The ComponentSelectList component creates a list of card of selectable cards containing either images or plots.
+ * The plot should be passed as a JSX element.
+ *
+ * @param props the component props
+ */
+declare function ComponentSelectList(props: ComponentSelectListProps): JSX.Element;
+export default ComponentSelectList;
+//# sourceMappingURL=component-select-list.d.ts.map

package/dist/component-select-list/component-select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-select-list.d.ts","sourceRoot":"","sources":["../../src/component-select-list/component-select-list.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AA6G/C,MAAM,WAAW,wBAAwB;IACrC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAClC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sGAAsG;IACtG,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAsCzE;AAED,eAAe,mBAAmB,CAAC"}