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

package/lib/layouts/TsHeader/TsHeader.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+export type TsHeaderProps = {
+    actions: ReactElement;
+    appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' | 'techoff-suite';
+    search?: ReactElement;
+};
+export type TsHeaderProfileItemProps = {
+    icon: string;
+    label: string;
+    link: string;
+};
+export type TsHeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+};
+export type TsHeaderSearchProps = {
+    getItemLabel: (e: any) => string;
+    getItemValue: (e: any) => string;
+    loadItems: (search?: string) => Promise<any[]>;
+    noDataLabel?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+};

package/lib/layouts/TsHeader/TsHeader.types.js

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

package/lib/layouts/TsHeader/TsHeader.types.js.map

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

package/lib/layouts/TsHeader/TsHeaderProfile.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsHeaderProfileItemProps, TsHeaderProfileProps } from './TsHeader.types';
+export declare const TsHeaderProfileItem: ({ icon, label, link }: TsHeaderProfileItemProps) => React.JSX.Element;
+export declare const TsHeaderProfile: ({ children, firstname, lastname }: TsHeaderProfileProps & PropsWithChildren) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderProfile.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsHeaderProfile = exports.TsHeaderProfileItem = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+const use_click_outside_1 = require("../../hooks/use-click-outside");
+const string_utils_1 = require("../../utils/string.utils");
+const TsHeaderProfileItem = ({ icon, label, link }) => {
+    // ########
+    // Handlers
+    const handleNavigate = () => window.open(link, '_blank', 'noreferrer');
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-profile-menu-item", onClick: handleNavigate },
+        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })),
+        React.createElement("div", { className: "ts-header-profile-menu-item-label" }, label),
+        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: "external-link", size: "16" }))));
+};
+exports.TsHeaderProfileItem = TsHeaderProfileItem;
+const TsHeaderProfile = ({ children, firstname, lastname }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const ref = (0, use_click_outside_1.useClickOutside)(() => setIsOpen(false));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-profile-container", ref: ref },
+        React.createElement("div", { className: "ts-header-profile-dropdown", onClick: () => children && setIsOpen(prev => !prev) },
+            React.createElement("div", { className: "ts-header-profile-img-container" },
+                React.createElement("div", { className: "ts-header-profile-img-icon" },
+                    React.createElement(TsIcon_1.TsIcon, { name: "user", size: "16" }))),
+            React.createElement("div", { className: "ts-header-profile-name" },
+                (0, string_utils_1.capitalize)(firstname),
+                " ",
+                lastname.charAt(0).toUpperCase(),
+                "."),
+            children && (React.createElement("div", { className: "ts-header-profile-chevron" },
+                React.createElement(TsIcon_1.TsIcon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" })))),
+        isOpen && React.createElement("div", { className: "ts-header-profile-menu" }, children)));
+};
+exports.TsHeaderProfile = TsHeaderProfile;
+//# sourceMappingURL=TsHeaderProfile.js.map

package/lib/layouts/TsHeader/TsHeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,2DAAwD;AACxD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA4B,EAAE,EAAE;IACrF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,cAAc;QAClE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B;QACN,6BAAK,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAO;QAChE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEK,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAE,GAAG;QACnD,6BAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC7F,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,oBAAC,eAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,eAAM,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC9D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,eAAe,mBA4B1B"}

package/lib/layouts/TsHeader/TsHeaderSearch.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TsHeaderSearchProps } from './TsHeader.types';
+export declare const TsHeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }: TsHeaderSearchProps) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderSearch.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsHeaderSearch = void 0;
+const React = require("react");
+const react_1 = require("react");
+// import { Input } from '../../components/Inputs/Input/Input';
+const TsLoader_1 = require("../../components/TsLoader/TsLoader");
+const use_click_outside_1 = require("../../hooks/use-click-outside");
+const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
+    const [searchValue] = (0, react_1.useState)('');
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [showItems, setShowItems] = (0, react_1.useState)(false);
+    const ref = (0, use_click_outside_1.useClickOutside)(() => setShowItems(false));
+    // #######
+    // Helpers
+    const getBeforeMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        return label.substring(0, matchStartIndex);
+    };
+    const getMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchStartIndex, matchEndIndex);
+    };
+    const getAfterMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchEndIndex);
+    };
+    // ########
+    // Watchers
+    (0, react_1.useEffect)(() => {
+        if (searchValue === '') {
+            setShowItems(false);
+            setItems([]);
+            setIsLoading(false);
+        }
+        else {
+            setShowItems(true);
+            setIsLoading(true);
+            loadItems(searchValue)
+                .then(setItems)
+                .finally(() => setIsLoading(false));
+        }
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-search", ref: ref }, showItems && searchValue !== '' && (React.createElement("div", { className: "ts-header-search-items-container" },
+        isLoading && (React.createElement("div", { className: "ts-header-search-loading" },
+            React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
+        !isLoading && items.length === 0 && React.createElement("div", { className: "ts-header-search-no-items" }, noDataLabel),
+        !isLoading && items.length > 0 && (React.createElement("div", { className: "ts-header-search-items" }, items.map(item => (React.createElement("div", { className: "ts-header-search-item", onClick: () => onChange(getItemValue(item)) },
+            getBeforeMatch(item),
+            React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(item)),
+            getAfterMatch(item))))))))));
+};
+exports.TsHeaderSearch = TsHeaderSearch;
+//# sourceMappingURL=TsHeaderSearch.js.map

package/lib/layouts/TsHeader/TsHeaderSearch.js.map

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

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsHeader } from '../TsHeader';
+import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
+import { TsHeaderSearch } from '../TsHeaderSearch';
+import { TsButton } from '../../../components/TsButton/TsButton';
+
+<Meta title="Layouts/Header" />
+
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability', 'techoff-suite'],
+    description: 'Icon of the button.',
+  },
+};
+
+export const loadItems = () => {
+  return Promise.resolve([
+    { id: 1, label: 'Item 1' },
+    { id: 2, label: 'Item 2' },
+    { id: 3, label: 'Item 3' },
+    { id: 4, label: 'Item 4' },
+    { id: 5, label: 'Item 5' },
+    { id: 6, label: 'Item 6' },
+    { id: 7, label: 'Item 7' },
+    { id: 8, label: 'Item 8' },
+    { id: 9, label: 'Item 9' },
+  ]);
+};
+
+# Header
+
+The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      actions: (
+        <>
+          <TsButton icon="add" size="lg" variant="shadow" rounded />
+          <TsHeaderProfile firstname="John" lastname="Doe">
+            <TsHeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
+            <TsHeaderProfileItem icon="award" label="Trainings" link="" />
+          </TsHeaderProfile>
+        </>
+      ),
+      appName: 'repairability',
+      search: (
+        <TsHeaderSearch
+          getItemLabel={item => item.label}
+          getItemValue={item => item.id}
+          loadItems={loadItems}
+          noDataLabel="No item found."
+          placeholder="Search something in the application"
+          onChange={() => {}}
+        />
+      ),
+    }}
+    argTypes={headerArgTypes}
+  >
+    {args => <TsHeader {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsHeader} />

package/lib/layouts/TsNavigation/TsNavigation.css

@@ -0,0 +1,72 @@
+.ts-navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.ts-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.ts-breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.ts-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 9999px;
+  color: #3643ba;
+}
+.ts-breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270deg, #3643ba 0%, rgba(54, 67, 186, 0.6) 100%);
+  color: #ffffff;
+}
+.ts-breadcrumb-item--link:hover {
+  background: #ebecf7;
+  cursor: pointer;
+}
+.ts-breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.ts-navigation-divider {
+  flex: 1;
+  height: 2px;
+  background: #ebecf7;
+}
+.ts-breadcrumb-chevron {
+  padding: 0 2px;
+  color: #3643ba;
+}
+
+/* ######### */
+/* ACTIONS   */
+.ts-navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.ts-navigation-actions > * {
+  margin-left: 16px;
+}
+
+/* ######### */
+/* 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/layouts/TsNavigation/TsNavigation.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
+import './TsNavigation.css';
+export declare const TsNavigationBreadcrumbDivider: () => React.JSX.Element;
+export declare const TsNavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const TsNavigation: ({ actions, breadcrumbs }: TsNavigationProps) => React.JSX.Element;

package/lib/layouts/TsNavigation/TsNavigation.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsNavigation = exports.TsNavigationBreadcrumbItem = exports.TsNavigationBreadcrumbDivider = void 0;
+const React = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+require("./TsNavigation.css");
+const TsNavigationBreadcrumbDivider = () => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
+        React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" })));
+};
+exports.TsNavigationBreadcrumbDivider = TsNavigationBreadcrumbDivider;
+const TsNavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        ts-breadcrumb-item
+        ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "ts-breadcrumb-item--icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))),
+        children));
+};
+exports.TsNavigationBreadcrumbItem = TsNavigationBreadcrumbItem;
+const TsNavigation = ({ actions, breadcrumbs }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-navigation" },
+        React.createElement("div", { className: "ts-breadcrumb" }, breadcrumbs),
+        React.createElement("div", { className: "ts-navigation-divider" }),
+        React.createElement("div", { className: "ts-navigation-actions" }, actions)));
+};
+exports.TsNavigation = TsNavigation;
+//# sourceMappingURL=TsNavigation.js.map

package/lib/layouts/TsNavigation/TsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AAExD,8BAA4B;AAErB,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC;AAEK,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC4C,EAAE,EAAE;IACvD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;OAChG,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,0BAA0B;YACvC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,0BAA0B,8BAyBrC;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAqB,EAAE,EAAE;IAC1E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,6BAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO;QAClD,6BAAK,SAAS,EAAC,uBAAuB,GAAG;QACzC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/layouts/TsNavigation/TsNavigation.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type TsNavigationProps = {
+    actions?: ReactElement;
+    breadcrumbs: ReactElement;
+};
+export type TsNavigationBreadcrumbItemProps = {
+    icon?: string;
+    highlight?: boolean;
+    onClick?: () => void;
+};

package/lib/layouts/TsNavigation/TsNavigation.types.js

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

package/lib/layouts/TsNavigation/TsNavigation.types.js.map

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

package/lib/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsNavigation, TsNavigationBreadcrumbItem, TsNavigationBreadcrumbDivider } from '../TsNavigation';
+import { TsButton } from '../../../components/TsButton/TsButton';
+import { icons } from '../../../components/TsIcon/icons';
+
+<Meta title="Layouts/Navigation" />
+
+# Navigation
+
+Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      actions: (
+        <>
+          <TsButton icon="check" onClick={() => {}}>
+            Action 1
+          </TsButton>
+          <TsButton icon="add" onClick={() => {}}>
+            Action 2
+          </TsButton>
+        </>
+      ),
+      breadcrumbs: (
+        <>
+        <TsNavigationBreadcrumbItem icon="home" onClick={() => {}}>
+          Home
+        </TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem highlight>Menu Item 2</TsNavigationBreadcrumbItem>
+        </>
+      )
+    }}
+
+>
+
+    {args => <TsNavigation {...args} />}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsNavigation} />

package/lib/utils/string.utils.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/lib/utils/string.utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+exports.capitalize = capitalize;
+//# sourceMappingURL=string.utils.js.map

package/lib/utils/string.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAAvF,QAAA,UAAU,cAA6E"}

package/package.json

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

package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.css

@@ -1,7 +1,7 @@
-.ts-dropdown-container {
+.ts-dropdown-filter-container {
   position: relative;
 }
-.ts-dropdown-input {
+.ts-dropdown-filter-input {
   display: flex;
   height: 32px;
   padding-left: 16px;
@@ -10,22 +10,22 @@
   color: #3643ba;
   cursor: pointer;
 }
-.ts-dropdown-input:hover {
+.ts-dropdown-filter-input:hover {
   background: #d7daf1;
 }
-.ts-dropdown-label {
+.ts-dropdown-filter-label {
   display: flex;
   align-items: center;
   height: 32px;
   margin-right: 2px;
 }
-.ts-dropdown-input--chevron {
+.ts-dropdown-filter-input--chevron {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 32px;
 }
-.ts-dropdown-menu-container {
+.ts-dropdown-filter-menu-container {
   position: absolute;
   top: calc(100% + 8px);
   display: flex;
@@ -38,17 +38,17 @@
   overflow: hidden;
   z-index: 10;
 }
-.ts-dropdown-search {
+.ts-dropdown-filter-search {
   padding-bottom: 12px;
   border-bottom: 1px solid #d9dde1;
 }
-.ts-dropdown-menu-loader {
+.ts-dropdown-filter-menu-loader {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 12px;
 }
-.ts-dropdown-menu-error-text {
+.ts-dropdown-filter-menu-error-text {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,18 +56,18 @@
   color: #687787;
   font-style: italic;
 }
-.ts-dropdown-menu {
+.ts-dropdown-filter-menu {
   padding-top: 12px;
   overflow: auto;
 }
-.ts-dropdown-menu-item {
+.ts-dropdown-filter-menu-item {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 0 12px;
   cursor: pointer;
 }
-.ts-dropdown-menu-item:hover {
+.ts-dropdown-filter-menu-item:hover {
   background: #e1e3f5;
   color: #3643ba;
 }

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

@@ -53,22 +53,23 @@ export const TsDropdownFilter = <T,>({
       }, 500);
       return () => clearTimeout(timeOutId);
     }
+    return;
   }, [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">
+    <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-menu-container">
-          <div className="ts-dropdown-search">
+        <div className="ts-dropdown-filter-menu-container">
+          <div className="ts-dropdown-filter-search">
             <TsInput
               icon="search"
               placeholder={searchPlaceholder}
@@ -79,17 +80,17 @@ export const TsDropdownFilter = <T,>({
           </div>
 
           {loading && (
-            <div className="ts-dropdown-menu-loader">
+            <div className="ts-dropdown-filter-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-filter-menu-error-text">Nothing found.</div>}
           {!loading && items.length > 0 && (
-            <div className="ts-dropdown-menu">
+            <div className="ts-dropdown-filter-menu">
               {items.map(item => (
                 <div
                   key={getOptionValue(item)}
-                  className="ts-dropdown-menu-item"
+                  className="ts-dropdown-filter-menu-item"
                   onClick={() => handleSelectItem(item)}
                 >
                   {capitalize(getOptionLabel(item))}