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

package/lib/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/lib/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/lib/components/TsButton/TsButton.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsButton = void 0;
-const React = require("react");
-const TsIcon_1 = require("../TsIcon/TsIcon");
-require("./TsButton.css");
-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_1.TsIcon, { name: icon, size: "16" }),
-        children && React.createElement("div", null, children),
-        icon && iconDirection === 'right' && React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })));
-};
-exports.TsButton = TsButton;
-//# sourceMappingURL=TsButton.js.map

package/lib/components/TsButton/TsButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,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,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}

package/lib/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/lib/components/TsButton/TsButton.types.js

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

package/lib/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":""}

package/lib/components/TsButton/__stories__/TsButton.stories.mdx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsButton } from '../TsButton';
-import { icons } from '../../TsIcon/icons';
-
-<Meta title="Components/Button" />
-
-export const buttonArgTypes = {
-  children: {
-    control: 'text',
-    description: 'Child of the button.',
-  },
-  icon: {
-    control: 'select',
-    options: Object.keys(icons),
-    description: 'Icon of the button.',
-  },
-  iconDirection: {
-    control: 'inline-radio',
-    options: ['left', 'right'],
-    description: 'Define the direction of the icon.',
-    table: { defaultValue: { summary: 'left' } },
-  },
-  size: {
-    control: 'inline-radio',
-    options: ['md', 'lg'],
-    description: 'Define the size of the button.',
-    table: { defaultValue: { summary: 'md' } },
-  },
-  variant: {
-    control: 'inline-radio',
-    options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
-    description: "Variant of the button defining it's color and outline.",
-    table: { defaultValue: { summary: 'primary' } },
-  },
-  block: {
-    control: 'boolean',
-    description: 'Define if the button is full width',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Define if the button is disabled',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  rounded: {
-    control: 'boolean',
-    description: 'Define if the button has its corner full rounded',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onClick: {
-    control: 'function',
-    description: 'The handler called when clicking on the button (not available on playground).',
-  },
-};
-
-# Button
-
-Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      children: 'Button',
-      iconDirection: 'left',
-      size: 'md',
-      variant: 'primary',
-      block: false,
-      disabled: false,
-      rounded: false,
-      onClick: () => {},
-    }}
-    argTypes={buttonArgTypes}
-  >
-    {args => <TsButton {...args}>{args.children}</TsButton>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsButton} />

package/lib/components/TsCheckbox/TsCheckbox.css

@@ -1,64 +0,0 @@
-.ts-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin-left: -3px;
-}
-/* ########## */
-/* DISABLED   */
-.ts-checkbox--disabled {
-  cursor: not-allowed;
-}
-.ts-checkbox--disabled .ts-checkbox-box {
-  color: #d7daf1;
-}
-.ts-checkbox--disabled:hover .ts-checkbox-box {
-  background: transparent;
-}
-/* ##### */
-/* BOX   */
-.ts-checkbox-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  min-height: 24px;
-  border-radius: 6px;
-  color: #949494;
-}
-.ts-checkbox-box--checked,
-.ts-checkbox:hover .ts-checkbox-box:not(.ts-checkbox-box--checked) {
-  color: #3643ba;
-}
-
-/* ################# */
-/* LABEL / CAPTION   */
-.ts-checkbox-container {
-  width: 100%;
-  padding: 4px 0 4px 8px;
-  border-radius: 6px;
-}
-.ts-checkbox-label {
-  white-space: nowrap;
-}
-.ts-checkbox-container--with-caption .ts-checkbox-label {
-  color: #3643ba;
-  font-weight: 700;
-}
-.ts-checkbox-caption {
-  color: #404040;
-  font-size: 12px;
-  font-style: italic;
-}
-
-/* ######### */
-/* 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/TsCheckbox/TsCheckbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TsCheckboxProps } from './TsCheckbox.types';
-import './TsCheckbox.css';
-export declare const TsCheckbox: ({ caption, label, checked, disabled, onChange }: TsCheckboxProps) => React.JSX.Element;

package/lib/components/TsCheckbox/TsCheckbox.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsCheckbox = void 0;
-const React = require("react");
-const TsIcon_1 = require("../TsIcon/TsIcon");
-require("./TsCheckbox.css");
-const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
-    // ########
-    // Handlers
-    const handleChange = () => !disabled && onChange(!checked);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
-        React.createElement("div", { className: `ts-checkbox-box ${checked ? 'ts-checkbox-box--checked' : ''}` },
-            React.createElement(TsIcon_1.TsIcon, { name: checked ? 'check-square-filled' : 'square', size: "24" })),
-        React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
-            React.createElement("div", { className: "ts-checkbox-label" }, label),
-            caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
-};
-exports.TsCheckbox = TsCheckbox;
-//# sourceMappingURL=TsCheckbox.js.map

package/lib/components/TsCheckbox/TsCheckbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,6CAA0C;AAE1C,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5E,oBAAC,eAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CAClE;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB"}

package/lib/components/TsCheckbox/TsCheckbox.types.d.ts

@@ -1,7 +0,0 @@
-export type TsCheckboxProps = {
-    caption?: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange: (value: boolean) => void;
-};

package/lib/components/TsCheckbox/TsCheckbox.types.js

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

package/lib/components/TsCheckbox/TsCheckbox.types.js.map

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

package/lib/components/TsCheckbox/__stories__/TsCheckbox.stories.mdx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsCheckbox } from '../TsCheckbox';
-
-<Meta title="Components/Checkbox" />
-
-export const checkboxArgTypes = {
-  caption: {
-    control: 'text',
-    description: 'Caption of the checkbox.',
-  },
-  label: {
-    control: 'text',
-    description: 'Label of the checkbox.',
-  },
-  checked: {
-    control: 'boolean',
-    description: 'State of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Enable state of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onChange: {
-    control: 'function',
-    description: 'The handler called when clicking on the checkbox.',
-  },
-};
-
-# Checkbox
-
-Checkboxes are applied when users can select all, several, or none of the options from a given list.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      caption:
-        'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
-      checked: false,
-      disabled: false,
-    }}
-    argTypes={checkboxArgTypes}
-  >
-    {args => <TsCheckbox {...args}>{args.children}</TsCheckbox>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsCheckbox} />

package/lib/components/TsDropdown/TsDropdown.css

@@ -1,114 +0,0 @@
-.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;
-  cursor: pointer;
-}
-.ts-dropdown-input--disabled {
-  background: #fafafa;
-  cursor: not-allowed;
-}
-.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-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;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 220px;
-  max-height: 250px;
-  padding: 12px;
-  box-shadow: 0px 8px 9px 0px #1010101a;
-  background: #ffffff;
-  overflow: hidden;
-  z-index: 10;
-}
-.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;
-  justify-content: center;
-}
-.ts-dropdown-menu-error-text {
-  display: flex;
-  justify-content: center;
-  color: #7a7a7a;
-  font-style: italic;
-}
-.ts-dropdown-menu-item {
-  display: flex;
-  align-items: center;
-  height: 36px;
-  padding: 0 12px;
-  cursor: pointer;
-}
-.ts-dropdown-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/TsDropdown/TsDropdown.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TsDropdownProps } from './TsDropdown.types';
-import './TsDropdown.css';
-export declare const TsDropdown: <T extends unknown>({ containerRef, error, label, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;

package/lib/components/TsDropdown/TsDropdown.js

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsDropdown = void 0;
-const React = require("react");
-const react_1 = require("react");
-const TsIcon_1 = require("../TsIcon/TsIcon");
-const TsInput_1 = require("../TsInput/TsInput/TsInput");
-const use_click_outside_1 = require("../../hooks/use-click-outside");
-const TsLoader_1 = require("../TsLoader/TsLoader");
-require("./TsDropdown.css");
-const TsDropdown = ({ containerRef, error, label, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
-    const [showDropdownMenu, setShowDropdownMenu] = (0, react_1.useState)(false);
-    const [searchValue, setSearchValue] = (0, react_1.useState)('');
-    const [items, setItems] = (0, react_1.useState)(options ?? []);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [isFetchError, setIsFetchError] = (0, react_1.useState)(false);
-    const dropdownRef = (0, use_click_outside_1.useClickOutside)(() => setShowDropdownMenu(false));
-    const dropdownMenuRef = (0, react_1.useRef)(null);
-    // ########
-    // Fetchers
-    const fetchOptions = () => {
-        if (!options && loadOptions) {
-            setLoading(true);
-            setIsFetchError(false);
-            loadOptions(searchValue)
-                .then(setItems)
-                .catch(() => setIsFetchError(true))
-                .finally(() => setLoading(false));
-        }
-    };
-    // ########
-    // Handlers
-    const handleSelectItem = (item) => {
-        setShowDropdownMenu(false);
-        onChange(item);
-    };
-    const handleShowDropdownMenu = () => !disabled && setShowDropdownMenu(true);
-    // ########
-    // Watchers
-    (0, react_1.useEffect)(() => {
-        if (!disabled)
-            fetchOptions();
-    }, [...reloadOptionsOn, disabled]);
-    (0, react_1.useEffect)(() => {
-        if (searchable && options) {
-            setItems(options.filter(option => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())));
-        }
-        if (searchable && !options && loadOptions) {
-            setLoading(true);
-            setIsFetchError(false);
-            const timeOutId = setTimeout(fetchOptions, 500);
-            return () => clearTimeout(timeOutId);
-        }
-        return () => { };
-    }, [searchValue]);
-    (0, react_1.useEffect)(() => {
-        if (searchable && !showDropdownMenu)
-            setSearchValue('');
-        if (showDropdownMenu && containerRef?.current && dropdownMenuRef.current) {
-            const dropdownMenuRect = dropdownMenuRef.current.getBoundingClientRect();
-            const containerRect = containerRef.current.getBoundingClientRect();
-            if (dropdownMenuRect.bottom > containerRect.bottom) {
-                dropdownMenuRef.current.style.bottom = '40px';
-                dropdownMenuRef.current.style.top = 'auto';
-            }
-            else {
-                dropdownMenuRef.current.style.top = '60px';
-                dropdownMenuRef.current.style.bottom = 'auto';
-            }
-        }
-    }, [showDropdownMenu]);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-dropdown-container", ref: dropdownRef },
-        React.createElement("div", { className: "ts-dropdown-input-container" },
-            label && React.createElement("div", { className: "ts-dropdown-label" }, label),
-            React.createElement("div", { className: `
-            ts-dropdown-input
-            ${disabled ? 'ts-dropdown-input--disabled' : ''}
-            ${error && error !== '' ? 'ts-dropdown-container--error' : ''}
-          `, onClick: handleShowDropdownMenu },
-                !value && placeholder && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
-                value && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
-                React.createElement("div", { className: "ts-dropdown-input--chevron" },
-                    React.createElement(TsIcon_1.TsIcon, { name: showDropdownMenu ? 'chevron-up' : 'chevron-down' })))),
-        error && error !== '' && (React.createElement("div", { className: "ts-dropdown-error" },
-            React.createElement("div", { className: "ts-dropdown-error--icon" },
-                React.createElement(TsIcon_1.TsIcon, { name: "alert-circle", size: "16" })),
-            React.createElement("div", { className: "ts-dropdown-error--label" }, error))),
-        !disabled && showDropdownMenu && (React.createElement("div", { className: "ts-dropdown-menu-container", ref: dropdownMenuRef },
-            searchable && (React.createElement("div", { className: "ts-dropdown-search" },
-                React.createElement(TsInput_1.TsInput, { icon: "search", placeholder: searchPlaceholder, value: searchValue, autoFocus: true, onChange: setSearchValue }))),
-            React.createElement("div", { className: "ts-dropdown-menu" },
-                loading && (React.createElement("div", { className: "ts-dropdown-menu-loader" },
-                    React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
-                !loading && isFetchError && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "An error occured, try again later.")),
-                !loading && !isFetchError && items.length === 0 && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "No options found.")),
-                !loading &&
-                    !isFetchError &&
-                    items.length > 0 &&
-                    items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item)))))))));
-};
-exports.TsDropdown = TsDropdown;
-//# sourceMappingURL=TsDropdown.js.map

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

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