@contentful/f36-multiselect 4.19.1-4 → 4.19.1-5

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { CommonProps } from '@contentful/f36-core';
+import { PopoverProps } from '@contentful/f36-popover';
+
+interface MultiselectOptionProps {
+    label: string;
+    value: string;
+    itemId: string;
+    searchValue?: string;
+    onSelectItem: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+}
+declare const MultiselectOption: ({ label, value, itemId, onSelectItem, searchValue, isChecked, isDisabled, ...rest }: MultiselectOptionProps) => JSX.Element;
+
+interface MultiselectProps extends CommonProps {
+    /** Select Options */
+    children?: React.ReactNode;
+    /**
+     * Set a custom icon for the text input
+     */
+    startIcon?: React.ReactElement;
+    /**
+     * Placeholder shown before selecting any elements. Defaults to 'Select one or more items'
+     */
+    placeholder?: string;
+    /**
+     * current Selected items, to be shown on the trigger button
+     */
+    currentSelection?: Array<string>;
+    /**
+     * Function called whenever the search input value changes
+     */
+    onSearchValueChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | undefined;
+    /**
+     * This is the value will be passed to the `placeholder` prop of the input.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * A message that will be shown when it is not possible to find any option that matches the input value
+     * @default "No matches"
+     */
+    noMatchesMessage?: string;
+    /**
+     * Use this prop to get a ref to the input element of the component
+     */
+    searchInputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Pass a form name to the search text input
+     */
+    searchInputName?: string;
+    /**
+     * Sets the list to show its loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Use this prop to get a ref to the toggle button of the component
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Props to pass to the Popover (Dropdown) component
+     */
+    popoverProps?: Partial<PopoverProps> & {
+        /**
+         * It sets the max-height, in pixels, of the list
+         * The default value is the height of 5 single line items
+         * @default 180
+         */
+        listMaxHeight?: number;
+        /**
+         * Use this prop to get a ref to the list of items of the component
+         */
+        listRef?: React.Ref<HTMLUListElement>;
+    };
+    /**
+     * Function called when the popover loses its focus.
+     */
+    onBlur?: () => void;
+}
+/**
+ * The Multiselect is a component that will allow a user to select multiple items.
+ * It has an optional
+ */
+declare const Multiselect$1: React.ForwardRefExoticComponent<MultiselectProps & React.RefAttributes<HTMLDivElement>>;
+
+declare type CompoundMultiselect = typeof Multiselect$1 & {
+    Option: typeof MultiselectOption;
+};
+declare const Multiselect: CompoundMultiselect;
+
+export { Multiselect, MultiselectOption, MultiselectOptionProps, MultiselectProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-multiselect",
-  "version": "4.19.1-4",
+  "version": "4.19.1-5",
   "description": "Forma 36: Multiselect Component",
   "scripts": {
     "build": "tsup"