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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.7.11",
+  "version": "1.8.1",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/{TsDropdown → TsDropdowns/TsDropdown}/TsDropdown.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { TsDropdownProps } from './TsDropdown.types';
-import { TsIcon } from '../TsIcon/TsIcon';
-import { TsInput } from '../TsInput/TsInput/TsInput';
-import { useClickOutside } from '../../hooks/use-click-outside';
-import { TsLoader } from '../TsLoader/TsLoader';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { TsLoader } from '../../TsLoader/TsLoader';
 import './TsDropdown.css';
 
-export const TsDropdown = <T extends unknown>({
+export const TsDropdown = <T,>({
   containerRef,
   error,
   label,

package/{lib/components → src/components/TsDropdowns}/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -3,7 +3,7 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
 import { TsDropdown } from '../TsDropdown';
 import { fruits } from './fruits';
 
-<Meta title="Components/Dropdown" />
+<Meta title="Components/Dropdowns/Dropdown" />
 
 export const dropdownArgTypes = {
   error: {

package/src/components/{TsDropdown/TsDropdown.css → TsDropdowns/TsDropdownFilter/TsDropdownFilter.css}

@@ -1,72 +1,37 @@
 .ts-dropdown-container {
   position: relative;
-  width: 100%;
 }
 .ts-dropdown-input {
   display: flex;
-  align-items: center;
-  width: 100%;
   height: 32px;
-  padding-left: 10px;
-  border: 1px solid #949494;
+  padding-left: 16px;
+  padding-right: 12px;
+  background: #e1e3f5;
+  color: #3643ba;
   cursor: pointer;
 }
-.ts-dropdown-input--disabled {
-  background: #fafafa;
-  cursor: not-allowed;
+.ts-dropdown-input:hover {
+  background: #d7daf1;
 }
-.ts-dropdown-input--placeholder {
-  flex: 1;
-  color: #7a7a7a;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ts-dropdown-input--value {
-  flex: 1;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ts-dropdown-label {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin-right: 2px;
 }
 .ts-dropdown-input--chevron {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
   height: 32px;
 }
-.ts-dropdown-input.ts-dropdown-container--error {
-  border: 1px solid #e3262f;
-}
-.ts-dropdown-error {
-  display: flex;
-  margin-top: 4px;
-  color: #e3262f;
-}
-.ts-dropdown-error--icon {
-  margin-right: 4px;
-}
-.ts-dropdown-error--label {
-  font-size: 12px;
-  font-weight: 500;
-}
-/* ####### */
-/* LABEL   */
-.ts-dropdown-label {
-  padding-bottom: 6px;
-}
-/* ###### */
-/* MENU   */
 .ts-dropdown-menu-container {
   position: absolute;
-  top: 60px;
+  top: calc(100% + 8px);
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 220px;
-  max-height: 250px;
+  width: 320px;
+  max-height: 200px;
   padding: 12px;
   box-shadow: 0px 8px 9px 0px #1010101a;
   background: #ffffff;
@@ -75,26 +40,30 @@
 }
 .ts-dropdown-search {
   padding-bottom: 12px;
-  margin-bottom: 12px;
   border-bottom: 1px solid #d9dde1;
 }
-.ts-dropdown-menu {
-  overflow: auto;
-}
 .ts-dropdown-menu-loader {
   display: flex;
+  align-items: center;
   justify-content: center;
+  padding-top: 12px;
 }
 .ts-dropdown-menu-error-text {
   display: flex;
+  align-items: center;
   justify-content: center;
-  color: #7a7a7a;
+  padding-top: 12px;
+  color: #687787;
   font-style: italic;
 }
+.ts-dropdown-menu {
+  padding-top: 12px;
+  overflow: auto;
+}
 .ts-dropdown-menu-item {
   display: flex;
   align-items: center;
-  height: 36px;
+  height: 32px;
   padding: 0 12px;
   cursor: pointer;
 }

package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.tsx

@@ -0,0 +1,104 @@
+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);
+    }
+  }, [searchValue]);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-dropdown-container" ref={ref}>
+      <div className="ts-dropdown-input" onClick={() => setShowDropdown(!showDropdown)}>
+        <div className="ts-dropdown-label">{label}</div>
+        <div className="ts-dropdown-input--chevron">
+          <TsIcon name={showDropdown ? 'chevron-up' : 'chevron-down'} />
+        </div>
+      </div>
+
+      {showDropdown && (
+        <div className="ts-dropdown-menu-container">
+          <div className="ts-dropdown-search">
+            <TsInput
+              icon="search"
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              autoFocus
+              onChange={setSearchValue}
+            />
+          </div>
+
+          {loading && (
+            <div className="ts-dropdown-menu-loader">
+              <TsLoader size="sm" />
+            </div>
+          )}
+          {!loading && items.length === 0 && <div className="ts-dropdown-menu-error-text">Nothing found.</div>}
+          {!loading && items.length > 0 && (
+            <div className="ts-dropdown-menu">
+              {items.map(item => (
+                <div
+                  key={getOptionValue(item)}
+                  className="ts-dropdown-menu-item"
+                  onClick={() => handleSelectItem(item)}
+                >
+                  {capitalize(getOptionLabel(item))}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/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/{esm/components/TsDropdown → src/components/TsDropdowns/TsDropdownFilter}/__stories__/TsDropdown.stories.mdx

@@ -1,37 +1,19 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsDropdown } from '../TsDropdown';
+import { TsDropdownFilter } from '../TsDropdownFilter';
 import { fruits } from './fruits';
 
-<Meta title="Components/Dropdown" />
+<Meta title="Components/Dropdowns/Dropdown filter" />
 
 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',
@@ -50,9 +32,9 @@ export const dropdownArgTypes = {
   },
 };
 
-# Dropdown
+# Dropdown filter
 
-Dropdowns show a list of options that can be used to select, filter or sort content.
+Dropdowns specific to filter a search on page contents.
 
 ## Overview
 
@@ -60,13 +42,15 @@ Dropdowns show a list of options that can be used to select, filter or sort cont
   <Story
     name="Overview"
     args={{
-      error: '',
       label: 'Label',
-      options: fruits,
       searchPlaceholder: '',
-      placeholder: 'Select an item',
-      disabled: false,
-      searchable: false,
+      loadOptions: function ol(search) {
+        return Promise.resolve(
+          fruits.filter(function om(fruit) {
+            return fruit.name.includes(search);
+          }),
+        );
+      },
       getOptionLabel: function ol(fruit) {
         return fruit.name;
       },
@@ -76,10 +60,10 @@ Dropdowns show a list of options that can be used to select, filter or sort cont
     }}
     argTypes={dropdownArgTypes}
   >
-    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
+    {args => <TsDropdownFilter {...args}>{args.children}</TsDropdownFilter>}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={TsDropdown} />
+<ArgsTable story="Overview" of={TsDropdownFilter} />

package/src/components/TsIcon/icons/header-techoff-suite.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 284.1 16.8" style="enable-background:new 0 0 284.1 16.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -9.570312e-02 16.7998)" class="st0 st1 st2">TECHOFF SUITE</text>
+<text transform="matrix(1 0 0 1 210.3656 16.7998)" class="st3 st4">BY</text>
+<path class="st5" d="M247.4,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L247.4,10.1z"/>
+<polygon class="st5" points="233.4,7.5 239.3,7.5 239.3,9.3 235.4,9.3 235.4,11.2 238.8,11.2 238.8,13 235.4,13 235.4,15 239.3,15 
+	239.3,16.8 233.4,16.8 "/>
+<polygon class="st5" points="271.9,7.3 277.4,7.3 277.4,9.2 273.8,9.2 273.8,11.5 276.9,11.5 276.9,13.3 273.8,13.3 273.8,16.7 
+	271.9,16.7 "/>
+<polygon class="st5" points="278.5,7.3 284.1,7.3 284.1,9.2 280.5,9.2 280.5,11.5 283.6,11.5 283.6,13.3 280.5,13.3 280.5,16.7 
+	278.5,16.7 "/>
+<polygon class="st5" points="255.9,12.8 251.9,12.8 251.9,16.7 250,16.7 250,7.3 251.9,7.3 251.9,10.9 255.9,10.9 255.9,7.3 
+	257.9,7.3 257.9,16.7 255.9,16.7 "/>
+<polygon class="st5" points="225.2,7.5 232.3,7.5 232.3,9.4 229.8,9.4 229.8,16.8 227.8,16.8 227.8,9.4 225.2,9.4 "/>
+<polyline class="st5" points="258.3,8.6 260.1,5.8 262.1,5.8 260.3,8.6 258.3,8.6 "/>
+<path class="st5" d="M265.9,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S268.7,7.2,265.9,7.2z"/>
+<polygon class="st6" points="261.8,12.2 267.9,8.6 267.9,15.7 "/>
+<polygon class="st7" points="265.8,16.8 265.7,13.4 262.9,15.2 "/>
+</svg>

package/src/components/TsIcon/icons/index.ts

@@ -40,6 +40,7 @@ export const icons: { [k: string]: string } = {
   'header-nsc-helmet': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 247.3 17" style="enable-background:new 0 0 247.3 17;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -2.52 16.8017)" class="st0 st1 st2">NSC HELMET</text><text transform="matrix(1 0 0 1 173.496 16.8009)" class="st3 st4">BY</text><path class="st5" d="M210.6,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1L212,15	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L210.6,10.1z"/><polygon class="st5" points="196.6,7.5 202.5,7.5 202.5,9.3 198.6,9.3 198.6,11.2 202,11.2 202,13 198.6,13 198.6,15 202.5,15 	202.5,16.8 196.6,16.8 "/><polygon class="st5" points="235.1,7.3 240.6,7.3 240.6,9.2 237,9.2 237,11.5 240.1,11.5 240.1,13.3 237,13.3 237,16.7 235.1,16.7 	"/><polygon class="st5" points="241.7,7.3 247.3,7.3 247.3,9.2 243.7,9.2 243.7,11.5 246.8,11.5 246.8,13.3 243.7,13.3 243.7,16.7 	241.7,16.7 "/><polygon class="st5" points="219.1,12.8 215.1,12.8 215.1,16.7 213.2,16.7 213.2,7.3 215.1,7.3 215.1,10.9 219.1,10.9 219.1,7.3 	221.1,7.3 221.1,16.7 219.1,16.7 "/><polygon class="st5" points="188.4,7.5 195.5,7.5 195.5,9.4 193,9.4 193,16.8 191,16.8 191,9.4 188.4,9.4 "/><polyline class="st5" points="221.5,8.6 223.3,5.8 225.3,5.8 223.5,8.6 221.5,8.6 "/><path class="st5" d="M229.1,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S231.9,7.2,229.1,7.2z"/><polygon class="st6" points="225,12.2 231.1,8.6 231.1,15.7 "/><polygon class="st7" points="229,16.8 228.9,13.4 226.1,15.2 "/></svg>',
   'header-opticost': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 211.7 17.2" style="enable-background:new 0 0 211.7 17.2;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -1.1519 16.9922)" class="st0 st1 st2">OPTICOST</text><text transform="matrix(1 0 0 1 137.907 16.9861)" class="st3 st4">BY</text><path class="st5" d="M175,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L175,10.3z"/><polygon class="st5" points="161,7.7 166.9,7.7 166.9,9.5 163,9.5 163,11.4 166.4,11.4 166.4,13.2 163,13.2 163,15.2 166.9,15.2 	166.9,17 161,17 "/><polygon class="st5" points="199.5,7.5 205,7.5 205,9.4 201.4,9.4 201.4,11.7 204.5,11.7 204.5,13.5 201.4,13.5 201.4,16.9 	199.5,16.9 "/><polygon class="st5" points="206.1,7.5 211.7,7.5 211.7,9.4 208.1,9.4 208.1,11.7 211.2,11.7 211.2,13.5 208.1,13.5 208.1,16.9 	206.1,16.9 "/><polygon class="st5" points="183.5,13 179.5,13 179.5,16.9 177.6,16.9 177.6,7.5 179.5,7.5 179.5,11.1 183.5,11.1 183.5,7.5 	185.5,7.5 185.5,16.9 183.5,16.9 "/><polygon class="st5" points="152.8,7.7 159.9,7.7 159.9,9.6 157.4,9.6 157.4,17 155.4,17 155.4,9.6 152.8,9.6 "/><polyline class="st5" points="185.9,8.8 187.7,6 189.7,6 187.9,8.8 185.9,8.8 "/><path class="st5" d="M193.5,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S196.3,7.4,193.5,7.4z"/><polygon class="st6" points="189.4,12.4 195.5,8.8 195.5,15.9 "/><polygon class="st7" points="193.4,17 193.3,13.6 190.5,15.4 "/></svg>',
   'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47 !important;}	.st1{font-family:\'Montserrat-Medium\' !important;}	.st2{font-size:24px !important;}	.st3{font-family:\'Roboto-Light\' !important;}	.st4{font-size:11px !important;}	.st5{fill:#020203 !important;}	.st6{fill:#0D84C5 !important;}	.st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 	307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 	345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 	352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 	331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
+  'header-techoff-suite': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 284.1 16.8" style="enable-background:new 0 0 284.1 16.8;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -9.570312e-02 16.7998)" class="st0 st1 st2">TECHOFF SUITE</text><text transform="matrix(1 0 0 1 210.3656 16.7998)" class="st3 st4">BY</text><path class="st5" d="M247.4,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L247.4,10.1z"/><polygon class="st5" points="233.4,7.5 239.3,7.5 239.3,9.3 235.4,9.3 235.4,11.2 238.8,11.2 238.8,13 235.4,13 235.4,15 239.3,15 	239.3,16.8 233.4,16.8 "/><polygon class="st5" points="271.9,7.3 277.4,7.3 277.4,9.2 273.8,9.2 273.8,11.5 276.9,11.5 276.9,13.3 273.8,13.3 273.8,16.7 	271.9,16.7 "/><polygon class="st5" points="278.5,7.3 284.1,7.3 284.1,9.2 280.5,9.2 280.5,11.5 283.6,11.5 283.6,13.3 280.5,13.3 280.5,16.7 	278.5,16.7 "/><polygon class="st5" points="255.9,12.8 251.9,12.8 251.9,16.7 250,16.7 250,7.3 251.9,7.3 251.9,10.9 255.9,10.9 255.9,7.3 	257.9,7.3 257.9,16.7 255.9,16.7 "/><polygon class="st5" points="225.2,7.5 232.3,7.5 232.3,9.4 229.8,9.4 229.8,16.8 227.8,16.8 227.8,9.4 225.2,9.4 "/><polyline class="st5" points="258.3,8.6 260.1,5.8 262.1,5.8 260.3,8.6 258.3,8.6 "/><path class="st5" d="M265.9,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S268.7,7.2,265.9,7.2z"/><polygon class="st6" points="261.8,12.2 267.9,8.6 267.9,15.7 "/><polygon class="st7" points="265.8,16.8 265.7,13.4 262.9,15.2 "/></svg>',
   'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
   'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
   'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/TsButton/TsButton';
 export * from './components/TsCheckbox/TsCheckbox';
-export * from './components/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdownFilter/TsDropdownFilter';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/src/layouts/TsHeader/TsHeader.types.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 export type TsHeaderProps = {
   actions: ReactElement;
-  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
+  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' | 'techoff-suite';
   search?: ReactElement;
 };
 export type TsHeaderProfileItemProps = { icon: string; label: string; link: string };

package/src/layouts/TsHeader/__stories__/TsHeader.stories.mdx

@@ -10,7 +10,7 @@ import { TsButton } from '../../../components/TsButton/TsButton';
 export const headerArgTypes = {
   appName: {
     control: 'select',
-    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability', 'techoff-suite'],
     description: 'Icon of the button.',
   },
 };

package/esm/components/TsButton/TsButton.css

@@ -1,121 +0,0 @@
-.ts-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 16px;
-  cursor: pointer;
-  transition: all ease 0.3s;
-}
-.ts-button > div {
-  margin-right: 8px;
-}
-.ts-button > div:last-child {
-  margin-right: 0px;
-}
-button:disabled {
-  cursor: not-allowed;
-}
-/* ####### */
-/* BLOCK   */
-.ts-button--block {
-  width: 100%;
-}
-/* ####### */
-/* SIZES   */
-.ts-button--md {
-  height: 32px;
-  padding: 0 14px;
-}
-.ts-button--md.ts-button--icon-only {
-  width: 32px;
-  padding: 0;
-}
-.ts-button--lg {
-  height: 40px;
-  padding: 0 16px;
-}
-.ts-button--lg.ts-button--icon-only {
-  width: 40px;
-  padding: 0;
-}
-/* ########## */
-/* VARIANTS   */
-.ts-button--primary:not(:disabled) {
-  background: #3643ba;
-  color: #ffffff;
-}
-.ts-button--primary:not(:disabled):hover {
-  background: #2e3998;
-}
-.ts-button--primary:not(:disabled):active {
-  background: #272f76;
-}
-.ts-button--primary:disabled {
-  background: #3643ba61;
-  color: #ffffff;
-}
-.ts-button--secondary:not(:disabled) {
-  background: #ebecf7;
-  color: #3643ba;
-}
-.ts-button--secondary:not(:disabled):hover {
-  background: #e3e3f4;
-}
-.ts-button--secondary:not(:disabled):active {
-  background: #d7daf1;
-}
-.ts-button--secondary:disabled {
-  background: #3643ba0d;
-  color: #3643ba80;
-}
-.ts-button--success:not(:disabled) {
-  background: #02be8a;
-  color: #ffffff;
-}
-.ts-button--success:not(:disabled):hover {
-  background: #029e73;
-}
-.ts-button--success:not(:disabled):active {
-  background: #017f5c;
-}
-.ts-button--success:disabled {
-  background: #02be8a61;
-  color: #ffffff;
-}
-.ts-button--ghost:not(:disabled) {
-  background: #ffffff;
-  color: #3643ba;
-}
-.ts-button--ghost:not(:disabled):hover {
-  background: #ebecf7;
-}
-.ts-button--ghost:not(:disabled):active {
-  background: #e3e3f4;
-}
-.ts-button--ghost:disabled {
-  background: #ffffff61;
-  color: #1d1d1b61;
-}
-.ts-button--shadow {
-  box-shadow: 0px 12px 12px 0px #00537d1a;
-  background: #ffffff;
-  color: #4e5d6b;
-}
-/* ######### */
-/* ROUNDED   */
-.ts-button--rounded {
-  border-radius: 9999px;
-}
-
-/* ######### */
-/* 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/esm/components/TsButton/TsButton.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { TsButtonProps } from './TsButton.types';
-import './TsButton.css';
-export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, ...props }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;

package/esm/components/TsButton/TsButton.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TsIcon } from '../TsIcon/TsIcon';
-import './TsButton.css';
-export const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, ...props }) => {
-    // #########
-    // Rendering
-    return (React.createElement("button", { className: `
-        ts-button ts-button--${size} ts-button--${variant}
-        ${block ? 'ts-button--block' : ''}
-        ${rounded ? 'ts-button--rounded' : ''}
-        ${icon && !children ? 'ts-button--icon-only' : ''}
-      `, ...props },
-        icon && iconDirection === 'left' && React.createElement(TsIcon, { name: icon, size: "16" }),
-        children && React.createElement("div", null, children),
-        icon && iconDirection === 'right' && React.createElement(TsIcon, { name: icon, size: "16" })));
-};
-//# sourceMappingURL=TsButton.js.map

package/esm/components/TsButton/TsButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsButton/TsButton.types.d.ts

@@ -1,9 +0,0 @@
-import { ButtonHTMLAttributes } from 'react';
-export type TsButtonProps = {
-    icon?: string;
-    iconDirection?: 'left' | 'right';
-    size?: 'md' | 'lg';
-    variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
-    block?: boolean;
-    rounded?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;

package/esm/components/TsButton/TsButton.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=TsButton.types.js.map

package/esm/components/TsButton/TsButton.types.js.map

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