Add TagsInput

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dash_mantine_components",
-    "version": "0.14.2",
+    "version": "0.14.3",
     "description": "Plotly Dash Components based on Mantine",
     "main": "index.ts",
     "repository": {

src/ts/components/core/ScrollArea.tsx

@@ -1,10 +1,9 @@
 import { ScrollArea as MantineScrollArea } from "@mantine/core";
-import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
-import { StylesApiProps } from "props/styles";
+import { ScrollAreaProps } from "props/scrollarea";
 import React from "react";
 
-interface Props extends BoxProps, StylesApiProps, DashBaseProps {
+interface Props extends ScrollAreaProps, DashBaseProps {
     /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem */
     scrollbarSize?: number | string;
     /**

src/ts/components/core/combobox/Autocomplete.tsx

@@ -7,6 +7,7 @@ import { BoxProps } from "props/box";
 import { ComboboxLikeProps } from "props/combobox";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { __BaseInputProps } from "props/input";
+import { ScrollAreaProps } from "props/scrollarea";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 
@@ -21,6 +22,8 @@ interface Props
     data?: ComboboxStringData;
     /** Controlled component value */
     value?: string;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 
 /** Autocomplete */

src/ts/components/core/combobox/MultiSelect.tsx

@@ -5,6 +5,7 @@ import { __CloseButtonProps } from "props/button";
 import { ComboboxLikeProps } from "props/combobox";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { __BaseInputProps } from "props/input";
+import { ScrollAreaProps } from "props/scrollarea";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 
@@ -39,6 +40,8 @@ interface Props
     hiddenInputProps?: object;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */
     hiddenInputValuesDivider?: string;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 
 /** MultiSelect */

src/ts/components/core/combobox/Select.tsx

@@ -5,6 +5,7 @@ import { __CloseButtonProps } from "props/button";
 import { ComboboxLikeProps } from "props/combobox";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { __BaseInputProps } from "props/input";
+import { ScrollAreaProps } from "props/scrollarea";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
 
@@ -35,6 +36,8 @@ interface Props
     clearButtonProps?: __CloseButtonProps;
     /** Props passed down to the hidden input */
     hiddenInputProps?: object;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
 }
 
 /** Select */

src/ts/components/core/combobox/TagsInput.tsx

@@ -0,0 +1,93 @@
+import {
+    ComboboxStringData,
+    TagsInput as MantineTagsInput,
+} from "@mantine/core";
+import { useDidUpdate } from "@mantine/hooks";
+import { BoxProps } from "props/box";
+import { __CloseButtonProps } from "props/button";
+import { ComboboxLikeProps } from "props/combobox";
+import { DashBaseProps, PersistenceProps } from "props/dash";
+import { __BaseInputProps } from "props/input";
+import { ScrollAreaProps } from "props/scrollarea";
+import { StylesApiProps } from "props/styles";
+import React, { useState } from "react";
+
+interface Props
+    extends BoxProps,
+        __BaseInputProps,
+        Omit<ComboboxLikeProps, "data">,
+        StylesApiProps,
+        DashBaseProps,
+        PersistenceProps {
+    /** Data displayed in the dropdown */
+    data?: ComboboxStringData;
+    /** Controlled component value */
+    value?: string[];
+    /** Controlled search value */
+    searchValue?: string;
+    /** Maximum number of tags, `Infinity` by default */
+    maxTags?: number;
+    /** Determines whether duplicate tags are allowed, `false` by default */
+    allowDuplicates?: boolean;
+    /** Characters that should trigger tags split, `[',']` by default */
+    splitChars?: string[];
+    /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
+    clearable?: boolean;
+    /** Props passed down to the clear button */
+    clearButtonProps?: __CloseButtonProps;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: object;
+    /** Divider used to separate values in the hidden input `value` attribute, `','` by default */
+    hiddenInputValuesDivider?: string;
+    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
+}
+
+/** TagsInput */
+const TagsInput = (props: Props) => {
+    const { setProps, data, searchValue, value, ...others } = props;
+
+    const [selected, setSelected] = useState(value);
+    const [options, setOptions] = useState(data);
+    const [searchVal, setSearchVal] = useState(searchValue);
+
+    useDidUpdate(() => {
+        setOptions(data);
+    }, [data]);
+
+    useDidUpdate(() => {
+        setProps({ data: options });
+    }, [options]);
+
+    useDidUpdate(() => {
+        setProps({ value: selected });
+    }, [selected]);
+
+    useDidUpdate(() => {
+        setSelected(value);
+    }, [value]);
+
+    useDidUpdate(() => {
+        setProps({ searchValue: searchVal });
+    }, [searchVal]);
+
+    return (
+        <MantineTagsInput
+            wrapperProps={{ autoComplete: "off" }}
+            data={options}
+            onChange={setSelected}
+            value={selected}
+            searchValue={searchVal}
+            onSearchChange={setSearchVal}
+            {...others}
+        />
+    );
+};
+
+TagsInput.defaultProps = {
+    persisted_props: ["value"],
+    persistence_type: "local",
+    data: [],
+};
+
+export default TagsInput;

src/ts/index.ts

@@ -79,6 +79,7 @@ import ColorPicker from "./components/core/color/ColorPicker";
 import Autocomplete from "./components/core/combobox/Autocomplete";
 import MultiSelect from "./components/core/combobox/MultiSelect";
 import Select from "./components/core/combobox/Select";
+import TagsInput from "./components/core/combobox/TagsInput";
 import Grid from "./components/core/grid/Grid";
 import GridCol from "./components/core/grid/GridCol";
 import HoverCard from "./components/core/hovercard/HoverCard";
@@ -280,6 +281,7 @@ export {
     TabsList,
     TabsPanel,
     TabsTab,
+    TagsInput,
     Text,
     TextInput,
     Textarea,

src/ts/props/scrollarea.ts

@@ -0,0 +1,25 @@
+import { BoxProps } from "props/box";
+import { StylesApiProps } from "props/styles";
+import React from "react";
+
+export interface ScrollAreaProps extends BoxProps, StylesApiProps {
+    /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem */
+    scrollbarSize?: number | string;
+    /**
+     * Defines scrollbars behavior, `hover` by default
+     * - `hover` – scrollbars are visible when mouse is over the scroll area
+     * - `scroll` – scrollbars are visible when the scroll area is scrolled
+     * - `always` – scrollbars are always visible
+     * - `never` – scrollbars are always hidden
+     * - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing
+     * */
+    type?: "auto" | "always" | "scroll" | "hover" | "never";
+    /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`, `1000` by default */
+    scrollHideDelay?: number;
+    /** Axis at which scrollbars must be rendered, `'xy'` by default */
+    scrollbars?: "x" | "y" | "xy" | false;
+    /** Determines whether scrollbars should be offset with padding on given axis, `false` by default */
+    offsetScrollbars?: boolean | "x" | "y";
+    /** Content */
+    children?: React.ReactNode;
+}