@dktunited-techoff/techoff-suite-ui 1.8.1 → 1.8.3

package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsDropdown.types.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdown/TsDropdown.types.ts"],"names":[],"mappings":""}

package/lib/components/TsDropdowns/TsDropdown/TsDropdown.types.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+
+export type TsDropdownProps<T> = {
+  containerRef?: RefObject<HTMLElement>;
+  error?: string;
+  label?: string;
+  options?: T[];
+  placeholder?: string;
+  reloadOptionsOn?: any[];
+  searchPlaceholder?: string;
+  value?: T;
+  disabled?: boolean;
+  searchable?: boolean;
+  getOptionLabel: (option: T) => string;
+  getOptionValue: (option: T) => string;
+  loadOptions?: (search?: string) => Promise<T[]>;
+  onChange: (value?: T) => void;
+};

package/lib/components/TsDropdowns/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsDropdown } from '../TsDropdown';
+import { fruits } from './fruits';
+
+<Meta title="Components/Dropdowns/Dropdown" />
+
+export const dropdownArgTypes = {
+  error: {
+    control: 'text',
+    description: 'Error of the dropdown.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the dropdown.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the dropdown.',
+  },
+  searchPlaceholder: {
+    control: 'text',
+    description: 'Placeholder of the option search (only for searchable dropdowns).',
+  },
+  searchable: {
+    control: 'boolean',
+    description: 'Enable search on dropdown items.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the dropdown.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  getOptionLabel: {
+    control: 'function',
+    description: 'The handler called to get the option label',
+  },
+  getOptionValue: {
+    control: 'function',
+    description: 'The handler called to get the option value.',
+  },
+  loadOptions: {
+    control: 'function',
+    description: 'The handler called to fetch all options in async (not available on playground).',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the dropdown option.',
+  },
+};
+
+# Dropdown
+
+Dropdowns show a list of options that can be used to select, filter or sort content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      error: '',
+      label: 'Label',
+      options: fruits,
+      searchPlaceholder: '',
+      placeholder: 'Select an item',
+      disabled: false,
+      searchable: false,
+      getOptionLabel: function ol(fruit) {
+        return fruit.name;
+      },
+      getOptionValue: function ov(fruit) {
+        return fruit.id;
+      },
+    }}
+    argTypes={dropdownArgTypes}
+  >
+    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsDropdown} />

package/lib/components/TsDropdowns/TsDropdown/__stories__/fruits.d.ts

@@ -0,0 +1,4 @@
+export declare const fruits: {
+    name: string;
+    id: number;
+}[];

package/lib/components/TsDropdowns/TsDropdown/__stories__/fruits.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fruits = void 0;
+exports.fruits = [
+    { name: 'Persimmon', id: 52 },
+    { name: 'Strawberry', id: 3 },
+    { name: 'Banana', id: 1 },
+    { name: 'Tomato', id: 5 },
+    { name: 'Pear', id: 4 },
+    { name: 'Durian', id: 60 },
+    { name: 'Blackberry', id: 64 },
+    { name: 'Lingonberry', id: 65 },
+    { name: 'Kiwi', id: 66 },
+    { name: 'Lychee', id: 67 },
+    { name: 'Pineapple', id: 10 },
+    { name: 'Fig', id: 68 },
+    { name: 'Gooseberry', id: 69 },
+    { name: 'Passionfruit', id: 70 },
+    { name: 'Plum', id: 71 },
+    { name: 'Orange', id: 2 },
+    { name: 'GreenApple', id: 72 },
+    { name: 'Raspberry', id: 23 },
+    { name: 'Watermelon', id: 25 },
+    { name: 'Lemon', id: 26 },
+    { name: 'Mango', id: 27 },
+    { name: 'Blueberry', id: 33 },
+    { name: 'Apple', id: 6 },
+    { name: 'Guava', id: 37 },
+    { name: 'Apricot', id: 35 },
+    { name: 'Papaya', id: 42 },
+    { name: 'Melon', id: 41 },
+    { name: 'Tangerine', id: 77 },
+    { name: 'Pitahaya', id: 78 },
+    { name: 'Lime', id: 44 },
+    { name: 'Pomegranate', id: 79 },
+    { name: 'Dragonfruit', id: 80 },
+    { name: 'Grape', id: 81 },
+    { name: 'Morus', id: 82 },
+    { name: 'Feijoa', id: 76 },
+    { name: 'Avocado', id: 84 },
+    { name: 'Kiwifruit', id: 85 },
+    { name: 'Cranberry', id: 87 },
+    { name: 'Cherry', id: 9 },
+    { name: 'Peach', id: 86 },
+    { name: 'Jackfruit', id: 94 },
+    { name: 'Horned Melon', id: 95 },
+    { name: 'Hazelnut', id: 96 },
+    { name: 'Pomelo', id: 98 },
+    { name: 'Mangosteen', id: 99 },
+];
+//# sourceMappingURL=fruits.js.map

package/lib/components/TsDropdowns/TsDropdown/__stories__/fruits.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fruits.js","sourceRoot":"","sources":["../../../../../src/components/TsDropdowns/TsDropdown/__stories__/fruits.ts"],"names":[],"mappings":";;;AAAa,QAAA,MAAM,GAAG;IACpB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,EAAE;IAC7B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE;IACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE;IACzB,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE;IACvB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE;IAC9B,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,EAAE;IAC/B,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE;IACxB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;IACvB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE;IAC9B,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE;IAChC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE;IACxB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE;IACzB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE;IAC9B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE;IAC9B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE;IACxB,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE;IAC3B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE;IAC5B,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE;IACxB,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,EAAE;IAC/B,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,EAAE;IAC/B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE;IAC3B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE;IACzB,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;IACzB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7B,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE;IAChC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE;IAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE;CAC/B,CAAC"}

package/lib/components/TsDropdowns/TsDropdown/__stories__/fruits.ts

@@ -0,0 +1,47 @@
+export const fruits = [
+  { name: 'Persimmon', id: 52 },
+  { name: 'Strawberry', id: 3 },
+  { name: 'Banana', id: 1 },
+  { name: 'Tomato', id: 5 },
+  { name: 'Pear', id: 4 },
+  { name: 'Durian', id: 60 },
+  { name: 'Blackberry', id: 64 },
+  { name: 'Lingonberry', id: 65 },
+  { name: 'Kiwi', id: 66 },
+  { name: 'Lychee', id: 67 },
+  { name: 'Pineapple', id: 10 },
+  { name: 'Fig', id: 68 },
+  { name: 'Gooseberry', id: 69 },
+  { name: 'Passionfruit', id: 70 },
+  { name: 'Plum', id: 71 },
+  { name: 'Orange', id: 2 },
+  { name: 'GreenApple', id: 72 },
+  { name: 'Raspberry', id: 23 },
+  { name: 'Watermelon', id: 25 },
+  { name: 'Lemon', id: 26 },
+  { name: 'Mango', id: 27 },
+  { name: 'Blueberry', id: 33 },
+  { name: 'Apple', id: 6 },
+  { name: 'Guava', id: 37 },
+  { name: 'Apricot', id: 35 },
+  { name: 'Papaya', id: 42 },
+  { name: 'Melon', id: 41 },
+  { name: 'Tangerine', id: 77 },
+  { name: 'Pitahaya', id: 78 },
+  { name: 'Lime', id: 44 },
+  { name: 'Pomegranate', id: 79 },
+  { name: 'Dragonfruit', id: 80 },
+  { name: 'Grape', id: 81 },
+  { name: 'Morus', id: 82 },
+  { name: 'Feijoa', id: 76 },
+  { name: 'Avocado', id: 84 },
+  { name: 'Kiwifruit', id: 85 },
+  { name: 'Cranberry', id: 87 },
+  { name: 'Cherry', id: 9 },
+  { name: 'Peach', id: 86 },
+  { name: 'Jackfruit', id: 94 },
+  { name: 'Horned Melon', id: 95 },
+  { name: 'Hazelnut', id: 96 },
+  { name: 'Pomelo', id: 98 },
+  { name: 'Mangosteen', id: 99 },
+];

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.css

@@ -0,0 +1,83 @@
+.ts-dropdown-filter-container {
+  position: relative;
+}
+.ts-dropdown-filter-input {
+  display: flex;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 12px;
+  background: #e1e3f5;
+  color: #3643ba;
+  cursor: pointer;
+}
+.ts-dropdown-filter-input:hover {
+  background: #d7daf1;
+}
+.ts-dropdown-filter-label {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin-right: 2px;
+}
+.ts-dropdown-filter-input--chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+}
+.ts-dropdown-filter-menu-container {
+  position: absolute;
+  top: calc(100% + 8px);
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  max-height: 200px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #ffffff;
+  overflow: hidden;
+  z-index: 10;
+}
+.ts-dropdown-filter-search {
+  padding-bottom: 12px;
+  border-bottom: 1px solid #d9dde1;
+}
+.ts-dropdown-filter-menu-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 12px;
+}
+.ts-dropdown-filter-menu-error-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 12px;
+  color: #687787;
+  font-style: italic;
+}
+.ts-dropdown-filter-menu {
+  padding-top: 12px;
+  overflow: auto;
+}
+.ts-dropdown-filter-menu-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+.ts-dropdown-filter-menu-item:hover {
+  background: #e1e3f5;
+  color: #3643ba;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsDropdownFilterProps } from './TsDropdownFilter.types';
+import './TsDropdownFilter.css';
+export declare const TsDropdownFilter: <T>({ label, searchPlaceholder, loadOptions, getOptionLabel, getOptionValue, onChange, }: TsDropdownFilterProps<T>) => React.JSX.Element;

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsDropdownFilter = void 0;
+const React = require("react");
+const react_1 = require("react");
+const use_click_outside_1 = require("../../../hooks/use-click-outside");
+const string_utils_1 = require("../../../utils/string.utils");
+const TsIcon_1 = require("../../TsIcon/TsIcon");
+const TsInput_1 = require("../../TsInput/TsInput/TsInput");
+const TsLoader_1 = require("../../TsLoader/TsLoader");
+require("./TsDropdownFilter.css");
+const TsDropdownFilter = ({ label, searchPlaceholder, loadOptions, getOptionLabel, getOptionValue, onChange, }) => {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const ref = (0, use_click_outside_1.useClickOutside)(() => setShowDropdown(false));
+    // ########
+    // Fetchers
+    const fetchAllItems = () => {
+        return loadOptions(searchValue)
+            .then(setItems)
+            .catch(() => { }); // TODO: Manage fetch ERRORS (Show an error message : 'An error occured, please retry later' or something else)
+    };
+    // ########
+    // Handlers
+    const handleSelectItem = (value) => {
+        onChange(value);
+        setShowDropdown(false);
+    };
+    // ########
+    // Watchers
+    (0, react_1.useEffect)(() => {
+        if (!showDropdown)
+            setSearchValue('');
+    }, [showDropdown]);
+    (0, react_1.useEffect)(() => {
+        setLoading(true);
+        if (!searchValue) {
+            fetchAllItems().finally(() => setLoading(false));
+        }
+        else {
+            const timeOutId = setTimeout(() => {
+                fetchAllItems().finally(() => setLoading(false));
+            }, 500);
+            return () => clearTimeout(timeOutId);
+        }
+        return;
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-dropdown-filter-container", ref: ref },
+        React.createElement("div", { className: "ts-dropdown-filter-input", onClick: () => setShowDropdown(!showDropdown) },
+            React.createElement("div", { className: "ts-dropdown-filter-label" }, label),
+            React.createElement("div", { className: "ts-dropdown-filter-input--chevron" },
+                React.createElement(TsIcon_1.TsIcon, { name: showDropdown ? 'chevron-up' : 'chevron-down' }))),
+        showDropdown && (React.createElement("div", { className: "ts-dropdown-filter-menu-container" },
+            React.createElement("div", { className: "ts-dropdown-filter-search" },
+                React.createElement(TsInput_1.TsInput, { icon: "search", placeholder: searchPlaceholder, value: searchValue, autoFocus: true, onChange: setSearchValue })),
+            loading && (React.createElement("div", { className: "ts-dropdown-filter-menu-loader" },
+                React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
+            !loading && items.length === 0 && React.createElement("div", { className: "ts-dropdown-filter-menu-error-text" }, "Nothing found."),
+            !loading && items.length > 0 && (React.createElement("div", { className: "ts-dropdown-filter-menu" }, items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-filter-menu-item", onClick: () => handleSelectItem(item) }, (0, string_utils_1.capitalize)(getOptionLabel(item)))))))))));
+};
+exports.TsDropdownFilter = TsDropdownFilter;
+//# sourceMappingURL=TsDropdownFilter.js.map

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.js.map

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

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { capitalize } from '../../../utils/string.utils';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { TsLoader } from '../../TsLoader/TsLoader';
+import { TsDropdownFilterProps } from './TsDropdownFilter.types';
+import './TsDropdownFilter.css';
+
+export const TsDropdownFilter = <T,>({
+  label,
+  searchPlaceholder,
+  loadOptions,
+  getOptionLabel,
+  getOptionValue,
+  onChange,
+}: TsDropdownFilterProps<T>) => {
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const ref = useClickOutside(() => setShowDropdown(false));
+
+  // ########
+  // Fetchers
+  const fetchAllItems = () => {
+    return loadOptions(searchValue)
+      .then(setItems)
+      .catch(() => {}); // TODO: Manage fetch ERRORS (Show an error message : 'An error occured, please retry later' or something else)
+  };
+
+  // ########
+  // Handlers
+  const handleSelectItem = (value: T) => {
+    onChange(value);
+    setShowDropdown(false);
+  };
+
+  // ########
+  // Watchers
+  useEffect(() => {
+    if (!showDropdown) setSearchValue('');
+  }, [showDropdown]);
+  useEffect(() => {
+    setLoading(true);
+
+    if (!searchValue) {
+      fetchAllItems().finally(() => setLoading(false));
+    } else {
+      const timeOutId = setTimeout(() => {
+        fetchAllItems().finally(() => setLoading(false));
+      }, 500);
+      return () => clearTimeout(timeOutId);
+    }
+    return;
+  }, [searchValue]);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-dropdown-filter-container" ref={ref}>
+      <div className="ts-dropdown-filter-input" onClick={() => setShowDropdown(!showDropdown)}>
+        <div className="ts-dropdown-filter-label">{label}</div>
+        <div className="ts-dropdown-filter-input--chevron">
+          <TsIcon name={showDropdown ? 'chevron-up' : 'chevron-down'} />
+        </div>
+      </div>
+
+      {showDropdown && (
+        <div className="ts-dropdown-filter-menu-container">
+          <div className="ts-dropdown-filter-search">
+            <TsInput
+              icon="search"
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              autoFocus
+              onChange={setSearchValue}
+            />
+          </div>
+
+          {loading && (
+            <div className="ts-dropdown-filter-menu-loader">
+              <TsLoader size="sm" />
+            </div>
+          )}
+          {!loading && items.length === 0 && <div className="ts-dropdown-filter-menu-error-text">Nothing found.</div>}
+          {!loading && items.length > 0 && (
+            <div className="ts-dropdown-filter-menu">
+              {items.map(item => (
+                <div
+                  key={getOptionValue(item)}
+                  className="ts-dropdown-filter-menu-item"
+                  onClick={() => handleSelectItem(item)}
+                >
+                  {capitalize(getOptionLabel(item))}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.d.ts

@@ -0,0 +1,8 @@
+export type TsDropdownFilterProps<T> = {
+    label: string;
+    searchPlaceholder?: string;
+    loadOptions: (query?: string) => Promise<T[]>;
+    getOptionLabel: (item: T) => string;
+    getOptionValue: (item: T) => string;
+    onChange: (item: T) => void;
+};

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsDropdownFilter.types.js.map

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsDropdownFilter.types.js","sourceRoot":"","sources":["../../../../src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.ts"],"names":[],"mappings":""}

package/lib/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.ts

@@ -0,0 +1,8 @@
+export type TsDropdownFilterProps<T> = {
+  label: string;
+  searchPlaceholder?: string;
+  loadOptions: (query?: string) => Promise<T[]>;
+  getOptionLabel: (item: T) => string;
+  getOptionValue: (item: T) => string;
+  onChange: (item: T) => void;
+};

package/lib/components/TsDropdowns/TsDropdownFilter/__stories__/TsDropdown.stories.mdx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsDropdownFilter } from '../TsDropdownFilter';
+import { fruits } from './fruits';
+
+<Meta title="Components/Dropdowns/Dropdown filter" />
+
+export const dropdownArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the dropdown.',
+  },
+  searchPlaceholder: {
+    control: 'text',
+    description: 'Placeholder of the option search (only for searchable dropdowns).',
+  },
+  getOptionLabel: {
+    control: 'function',
+    description: 'The handler called to get the option label',
+  },
+  getOptionValue: {
+    control: 'function',
+    description: 'The handler called to get the option value.',
+  },
+  loadOptions: {
+    control: 'function',
+    description: 'The handler called to fetch all options in async (not available on playground).',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the dropdown option.',
+  },
+};
+
+# Dropdown filter
+
+Dropdowns specific to filter a search on page contents.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      searchPlaceholder: '',
+      loadOptions: function ol(search) {
+        return Promise.resolve(
+          fruits.filter(function om(fruit) {
+            return fruit.name.includes(search);
+          }),
+        );
+      },
+      getOptionLabel: function ol(fruit) {
+        return fruit.name;
+      },
+      getOptionValue: function ov(fruit) {
+        return fruit.id;
+      },
+    }}
+    argTypes={dropdownArgTypes}
+  >
+    {args => <TsDropdownFilter {...args}>{args.children}</TsDropdownFilter>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsDropdownFilter} />

package/lib/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.d.ts

@@ -0,0 +1,4 @@
+export declare const fruits: {
+    name: string;
+    id: number;
+}[];

package/lib/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fruits = void 0;
+exports.fruits = [
+    { name: 'Persimmon', id: 52 },
+    { name: 'Strawberry', id: 3 },
+    { name: 'Banana', id: 1 },
+    { name: 'Tomato', id: 5 },
+    { name: 'Pear', id: 4 },
+    { name: 'Durian', id: 60 },
+    { name: 'Blackberry', id: 64 },
+    { name: 'Lingonberry', id: 65 },
+    { name: 'Kiwi', id: 66 },
+    { name: 'Lychee', id: 67 },
+    { name: 'Pineapple', id: 10 },
+    { name: 'Fig', id: 68 },
+    { name: 'Gooseberry', id: 69 },
+    { name: 'Passionfruit', id: 70 },
+    { name: 'Plum', id: 71 },
+    { name: 'Orange', id: 2 },
+    { name: 'GreenApple', id: 72 },
+    { name: 'Raspberry', id: 23 },
+    { name: 'Watermelon', id: 25 },
+    { name: 'Lemon', id: 26 },
+    { name: 'Mango', id: 27 },
+    { name: 'Blueberry', id: 33 },
+    { name: 'Apple', id: 6 },
+    { name: 'Guava', id: 37 },
+    { name: 'Apricot', id: 35 },
+    { name: 'Papaya', id: 42 },
+    { name: 'Melon', id: 41 },
+    { name: 'Tangerine', id: 77 },
+    { name: 'Pitahaya', id: 78 },
+    { name: 'Lime', id: 44 },
+    { name: 'Pomegranate', id: 79 },
+    { name: 'Dragonfruit', id: 80 },
+    { name: 'Grape', id: 81 },
+    { name: 'Morus', id: 82 },
+    { name: 'Feijoa', id: 76 },
+    { name: 'Avocado', id: 84 },
+    { name: 'Kiwifruit', id: 85 },
+    { name: 'Cranberry', id: 87 },
+    { name: 'Cherry', id: 9 },
+    { name: 'Peach', id: 86 },
+    { name: 'Jackfruit', id: 94 },
+    { name: 'Horned Melon', id: 95 },
+    { name: 'Hazelnut', id: 96 },
+    { name: 'Pomelo', id: 98 },
+    { name: 'Mangosteen', id: 99 },
+];
+//# sourceMappingURL=fruits.js.map

package/lib/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fruits.js","sourceRoot":"","sources":["../../../../../src/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.ts"],"names":[],"mappings":"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"}