@qoretechnologies/reqore 0.19.13 → 0.20.2

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: Foxhoundn
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[ENHANCEMENT] "
+labels: enhancement
+assignees: Foxhoundn
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/ISSUE_TEMPLATE/new-component.md

@@ -0,0 +1,20 @@
+---
+name: New component
+about: New component suggestion
+title: "[NEW COMPONENT]"
+labels: enhancement
+assignees: Foxhoundn
+
+---
+
+**Component name**
+What should the component be named? Use self-describing name
+
+**Component purpose**
+Describe thoroughly the purpose of the suggested / proposed component.
+
+**Component reference**
+Is there another library already using this kind of the component?
+
+**Screenshot / Draft of the component**
+Add visual representation of the component if there is any

package/.github/ISSUE_TEMPLATE/visual-bug-report.md

@@ -0,0 +1,38 @@
+---
+name: Visual bug report
+about: Create a report to help us improve
+title: "[VISUAL BUG]"
+labels: bug
+assignees: Foxhoundn
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/workflows/tests.yml

@@ -21,7 +21,7 @@ jobs:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
         with:
-            fetch-depth: 0
+          fetch-depth: 0
       - uses: actions/setup-node@v1
         with:
           node-version: 14.16.0
@@ -34,12 +34,12 @@ jobs:
           yarn cache clean
           rm -rf node_modules
           yarn install
-      - name: Build test
-        id: build_test
-        run: yarn build:test
       - name: Running tests
         id: tests
         run: yarn test:ci
+      - name: Build test
+        id: build_test
+        run: yarn build:test
       - name: Publish to Chromatic
         id: chromatic_publish
         uses: chromaui/action@v1

package/.gitpod.yml

@@ -1,3 +1,8 @@
 tasks:
-  - init: "yarn install"
-  - command: "yarn storybook"
+  - init: 'yarn install'
+  - command: 'yarn storybook'
+ports:
+  - port: 6007
+    visibility: public
+    name: Storybook
+    onOpen: open-browser

package/.vscode/settings.json

@@ -1,5 +1,23 @@
 {
-  "editor.cursorBlinking": "phase",
-  "editor.cursorStyle": "underline",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "docwriter.hotkey.mac": "⌥ + .",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#721288",
+    "activityBar.background": "#721288",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#000000",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#721288",
+    "statusBar.background": "#4c0c5b",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#721288",
+    "statusBarItem.remoteBackground": "#4c0c5b",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#4c0c5b",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#4c0c5b99",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.remoteColor": "#4c0c5b"
 }

package/__tests__/drawer.test.tsx

@@ -46,18 +46,17 @@ test('Renders hidable <Drawer /> properly', () => {
   );
 
   expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-drawer-hide').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-drawer-hide-button').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(0);
 
-  fireEvent.click(document.querySelector('.reqore-drawer-hide'));
+  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
 
   expect(fn).toHaveBeenCalledWith(false);
   expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
 
-  fireEvent.click(document.querySelector('.reqore-drawer-hide'));
+  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
 
   expect(fn).toHaveBeenLastCalledWith(true);
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
   expect(fn).toHaveBeenCalledTimes(2);
 });
 
@@ -77,9 +76,9 @@ test('Renders closable <Drawer /> properly', () => {
   );
 
   expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
 
-  fireEvent.click(document.querySelector('.reqore-drawer-close'));
+  fireEvent.click(document.querySelector('.reqore-drawer-close-button')!);
 
   expect(fn).toHaveBeenCalled();
 });
@@ -100,10 +99,10 @@ test('Renders <Drawer /> with interactive backdrop', () => {
   );
 
   expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
   expect(document.querySelectorAll('.reqore-drawer-backdrop').length).toBe(1);
 
-  fireEvent.click(document.querySelector('.reqore-drawer-backdrop'));
+  fireEvent.click(document.querySelector('.reqore-drawer-backdrop')!);
 
   expect(fn).toHaveBeenCalled();
 });

package/__tests__/dropdown.test.tsx

@@ -39,11 +39,9 @@ test('Renders <Dropdown /> properly', () => {
     );
   });
 
-  fireEvent.click(document.querySelector('.reqore-button'));
+  fireEvent.click(document.querySelector('.reqore-button')!);
 
-  expect(
-    document.querySelector('.reqore-button').getAttribute('disabled')
-  ).toBe(null);
+  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe(null);
   expect(document.querySelectorAll('.reqore-button').length).toBe(1);
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
@@ -62,11 +60,9 @@ test('Renders disabled <Dropdown /> when children are empty', () => {
     );
   });
 
-  fireEvent.click(document.querySelector('.reqore-button'));
+  fireEvent.click(document.querySelector('.reqore-button')!);
 
-  expect(
-    document.querySelector('.reqore-button').getAttribute('disabled')
-  ).toBe('');
+  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe('');
 });
 
 test('Renders <Dropdown /> with custom component and custom handler', () => {
@@ -106,7 +102,53 @@ test('Renders <Dropdown /> with custom component and custom handler', () => {
     );
   });
 
-  fireEvent.focus(document.querySelector('.reqore-input'));
+  const component = document.querySelector('.reqore-input');
+
+  if (component) {
+    fireEvent.focus(component);
+  }
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
+});
+
+test('Renders <Dropdown /> is opened by default', () => {
+  act(() => {
+    render(
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreContent>
+            <ReqoreDropdown
+              component={ReqoreInput}
+              handler='focus'
+              isDefaultOpen
+              useTargetWidth
+              componentProps={{
+                width: 500,
+                placeholder: 'Focus me to see some crazy stuff',
+              }}
+              items={[
+                {
+                  selected: true,
+                  label: 'Hello',
+                  icon: 'SunCloudyLine',
+                },
+                {
+                  label: 'How are ya',
+                  icon: 'BatteryChargeFill',
+                },
+                {
+                  disabled: true,
+                  label: 'i aM diSAblEd',
+                  icon: 'StopCircleLine',
+                },
+              ]}
+            />
+          </ReqoreContent>
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+  });
 
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
@@ -143,21 +185,21 @@ test('Renders filterable <Dropdown /> and filters items correctly', () => {
     );
   });
 
-  fireEvent.click(document.querySelector('.reqore-button'));
-  fireEvent.change(document.querySelector('.reqore-input'), {
+  fireEvent.click(document.querySelector('.reqore-button')!);
+  fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'how' },
   });
 
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
 
-  fireEvent.change(document.querySelector('.reqore-input'), {
+  fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: '' },
   });
 
   expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
 
-  fireEvent.change(document.querySelector('.reqore-input'), {
+  fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'asfd' },
   });
 

package/__tests__/modal.test.tsx

@@ -24,7 +24,6 @@ test('Renders basic <Modal /> properly', () => {
   );
 
   expect(document.querySelectorAll('.reqore-modal').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-modal-content').length).toBe(1);
 });
 
 test('Does not renders <Modal /> if its not open', () => {
@@ -41,7 +40,6 @@ test('Does not renders <Modal /> if its not open', () => {
   );
 
   expect(document.querySelectorAll('.reqore-modal').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-modal-content').length).toBe(0);
 });
 
 test('Renders <Modal /> with custom dimensions', () => {
@@ -58,7 +56,6 @@ test('Renders <Modal /> with custom dimensions', () => {
   );
 
   expect(document.querySelectorAll('.reqore-modal').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-modal-content').length).toBe(0);
 });
 
 const ConfirmButton = ({ confirmFn, cancelFn }) => {
@@ -118,22 +115,22 @@ test('Renders confirmation <Modal /> ', () => {
     );
   });
 
-  fireEvent.click(document.getElementById('custom-confirm'));
+  fireEvent.click(document.getElementById('custom-confirm')!);
   fireEvent.click(screen.getAllByText('Yep')[0]);
 
   expect(confirmFn).toHaveBeenCalled();
 
-  fireEvent.click(document.getElementById('confirm'));
+  fireEvent.click(document.getElementById('confirm')!);
   fireEvent.click(screen.getAllByText('Confirm')[0]);
 
   expect(confirmFn).toHaveBeenCalledTimes(2);
 
-  fireEvent.click(document.getElementById('custom-confirm'));
+  fireEvent.click(document.getElementById('custom-confirm')!);
   fireEvent.click(screen.getAllByText('Cancel')[0]);
 
   expect(cancelFn).toHaveBeenCalled();
 
-  fireEvent.click(document.getElementById('confirm'));
+  fireEvent.click(document.getElementById('confirm')!);
   fireEvent.click(screen.getAllByText('Cancel')[0]);
 
   expect(cancelFn).toHaveBeenCalledTimes(2);

package/__tests__/tabs.test.tsx

@@ -60,8 +60,8 @@ test('Renders shortened <Tabs /> properly', () => {
     );
   });
 
-  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
-  expect(document.querySelectorAll('.reqore-tabs-list .reqore-popover-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(3);
+  expect(document.querySelectorAll('.reqore-tabs-list-item-menu').length).toBe(1);
 });
 
 test('Default active tab can be specified', () => {
@@ -125,7 +125,7 @@ test('Changes tab and runs callback', () => {
 
   expect(screen.getByText('Tab 3 content')).toBeTruthy();
   expect(cb).toHaveBeenCalledWith('tab3');
-  expect(document.querySelectorAll('.reqore-tabs-list-item__active').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list-item-active').length).toBe(1);
 });
 
 test('Does not change tab and run callback when disabled', () => {
@@ -160,7 +160,7 @@ test('Does not change tab and run callback when disabled', () => {
 
   expect(screen.getByText('Tab 1 content')).toBeTruthy();
   expect(cb).not.toHaveBeenCalled();
-  expect(document.querySelectorAll('.reqore-tabs-list-item__active').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list-item-active').length).toBe(1);
 });
 
 test('Changes tab programatically and runs callback', () => {

package/dist/src/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TSizes } from '../../constants/sizes';
+import { IReqoreBreadcrumbsTheme, IReqoreIntent } from '../../constants/theme';
+import { TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import { IReqoreTabsListItem } from '../Tabs';
+export interface IReqoreBreadcrumbItemTabs {
+    tabs: IReqoreTabsListItem[];
+    onTabChange: (tabId: string | number) => any;
+    activeTab: string;
+    activeTabIntent?: IReqoreIntent;
+}
+export interface IReqoreBreadcrumbItem {
+    tooltip?: TReqoreTooltipProp;
+    label?: string;
+    icon?: IReqoreIconName;
+    active?: boolean;
+    as?: any;
+    props?: React.HTMLAttributes<any>;
+    withTabs?: IReqoreBreadcrumbItemTabs;
+    customTheme?: IReqoreBreadcrumbsTheme;
+}
+export interface IReqoreBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: IReqoreBreadcrumbItem[];
+    rightElement?: JSX.Element;
+    _testWidth?: number;
+    customTheme?: IReqoreBreadcrumbsTheme;
+    size?: TSizes;
+    flat?: boolean;
+}
+declare const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps>;
+export default ReqoreBreadcrumbs;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/Breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAgB,MAAM,uBAAuB,CAAC;AAI7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,GAAG,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC;AAED,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnF,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAoHD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmHxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/src/components/Breadcrumbs/index.js

@@ -0,0 +1,167 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_1 = require("lodash");
+var react_2 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var styled_components_1 = __importStar(require("styled-components"));
+var __1 = require("../..");
+var sizes_1 = require("../../constants/sizes");
+var colors_1 = require("../../helpers/colors");
+var utils_1 = require("../../helpers/utils");
+var useTheme_1 = require("../../hooks/useTheme");
+var Icon_1 = __importDefault(require("../Icon"));
+var Menu_1 = __importDefault(require("../Menu"));
+var item_1 = __importDefault(require("../Menu/item"));
+var item_2 = require("../Tabs/item");
+var list_1 = __importStar(require("../Tabs/list"));
+var item_3 = __importDefault(require("./item"));
+var StyledReqoreBreadcrumbs = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var _b, _c, _d;
+    var theme = _a.theme, size = _a.size;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    height: ", "px;\n    margin: ", "px 0;\n    display: flex;\n    padding: 0 ", "px;\n    justify-content: space-between;\n    border-bottom: 1px solid ", ";\n    background-color: ", ";\n\n    > div {\n      height: 100%;\n      display: flex;\n      align-items: center;\n\n      > * {\n        color: ", ";\n      }\n\n      ", " {\n        flex: 1;\n      }\n\n      ", ", ", " {\n        border-bottom: 0;\n      }\n\n      &:first-child {\n        overflow: hidden;\n        flex: 1;\n      }\n    }\n  "], ["\n    width: 100%;\n    height: ", "px;\n    margin: ", "px 0;\n    display: flex;\n    padding: 0 ", "px;\n    justify-content: space-between;\n    border-bottom: 1px solid ", ";\n    background-color: ", ";\n\n    > div {\n      height: 100%;\n      display: flex;\n      align-items: center;\n\n      > * {\n        color: ", ";\n      }\n\n      ", " {\n        flex: 1;\n      }\n\n      ", ", ", " {\n        border-bottom: 0;\n      }\n\n      &:first-child {\n        overflow: hidden;\n        flex: 1;\n      }\n    }\n  "])), sizes_1.TABS_SIZE_TO_PX[size], sizes_1.MARGIN_FROM_SIZE[size], sizes_1.PADDING_FROM_SIZE[size], (0, colors_1.changeLightness)(theme.main, 0.05), function (_a) {
+        var _b;
+        var theme = _a.theme;
+        return ((_b = theme.breadcrumbs) === null || _b === void 0 ? void 0 : _b.main) || 'transparent';
+    }, ((_c = (_b = theme.breadcrumbs) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.color) ||
+        (((_d = theme.breadcrumbs) === null || _d === void 0 ? void 0 : _d.main)
+            ? (0, colors_1.getReadableColorFrom)(theme.breadcrumbs.main, true)
+            : (0, colors_1.getReadableColor)(theme, undefined, undefined, true)), list_1.StyledReqoreTabsList, list_1.StyledReqoreTabsList, item_2.StyledTabListItem);
+});
+var StyledBreadcrumbsTabsWrapper = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n"])));
+var itemPadding = 27;
+var iconSize = 11;
+var arrowSize = 50;
+var getBreadcrumbsLength = function (items, size) {
+    return items.reduce(function (len, item) {
+        if ((0, lodash_1.isArray)(item)) {
+            return len + 70;
+        }
+        if (item.withTabs) {
+            return (len +
+                itemPadding +
+                arrowSize +
+                (0, list_1.getTabsLength)(item.withTabs.tabs, 'width', item.withTabs.activeTab, size));
+        }
+        return (len +
+            itemPadding +
+            iconSize +
+            arrowSize +
+            (0, utils_1.calculateStringSizeInPixels)(item.label || '', sizes_1.TEXT_FROM_SIZE[size]));
+    }, 0);
+};
+var getTransformedItems = function (items, width, size) {
+    if (!width) {
+        return items;
+    }
+    var stop = false;
+    var newItems = __spreadArray([], items, true);
+    console.log(getBreadcrumbsLength(newItems, size), width);
+    while (getBreadcrumbsLength(newItems, size) > width && !stop) {
+        if ((0, lodash_1.isArray)(newItems[1])) {
+            newItems[1].push(newItems[2]);
+            newItems[2] = undefined;
+        }
+        else {
+            var secondItem = newItems[1];
+            newItems[1] = [secondItem];
+        }
+        newItems = newItems.filter(function (i) { return i; });
+        if (!newItems[2] || newItems[2].withTabs) {
+            stop = true;
+        }
+    }
+    return newItems;
+};
+var ReqoreBreadcrumbs = function (_a) {
+    var items = _a.items, rightElement = _a.rightElement, _testWidth = _a._testWidth, customTheme = _a.customTheme, flat = _a.flat, _b = _a.size, size = _b === void 0 ? 'normal' : _b, rest = __rest(_a, ["items", "rightElement", "_testWidth", "customTheme", "flat", "size"]);
+    var _c = (0, react_use_1.useMeasure)(), ref = _c[0], width = _c[1].width;
+    var theme = (0, useTheme_1.useReqoreTheme)('breadcrumbs', customTheme);
+    var transformedItems = (0, react_2.useMemo)(function () { return getTransformedItems(items, _testWidth || width, size); }, [items, width, _testWidth]);
+    var renderItem = function (item, index) {
+        if ((0, lodash_1.isArray)(item)) {
+            return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: 'both' }, 'icon' + index), (0, jsx_runtime_1.jsx)(__1.ReqorePopover, { component: item_3["default"], isReqoreComponent: true, componentProps: {
+                            icon: 'MoreFill',
+                            interactive: true
+                        }, handler: 'hoverStay', content: (0, jsx_runtime_1.jsx)(Menu_1["default"], { children: item.map(function (_a) {
+                                var icon = _a.icon, label = _a.label, as = _a.as, tooltip = _a.tooltip, props = _a.props;
+                                return ((0, react_1.createElement)(item_1["default"], __assign({}, props, { icon: icon, as: as, onClick: function (_itemId, event) {
+                                        var _a;
+                                        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                                    }, tooltip: tooltip, key: index + (label || icon || '') }), label));
+                            }) }) }, index)] }, index));
+        }
+        if (item.withTabs) {
+            return ((0, jsx_runtime_1.jsxs)(StyledBreadcrumbsTabsWrapper, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: 'both' }, 'icon' + index), (0, jsx_runtime_1.jsx)(list_1["default"], { tabs: item.withTabs.tabs, onTabChange: item.withTabs.onTabChange, activeTab: item.withTabs.activeTab, activeTabIntent: item.withTabs.activeTabIntent, customTheme: customTheme, flat: flat, size: size })] }, index));
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [index !== 0 && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: "".concat(sizes_1.TEXT_FROM_SIZE[size], "px"), margin: 'both' }, 'icon' + index)), (0, react_1.createElement)(item_3["default"], __assign({}, item, { key: index, customTheme: customTheme, size: size }))] }, index));
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledReqoreBreadcrumbs, __assign({}, rest, { className: "".concat(rest.className || '', " reqore-breadcrumbs-wrapper"), ref: ref, flat: flat, theme: theme, size: size }, { children: [(0, jsx_runtime_1.jsx)("div", { children: transformedItems.map(function (item, index) {
+                    return renderItem(item, index);
+                }) }, 'reqore-breadcrumbs-left-wrapper'), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] })));
+};
+exports["default"] = ReqoreBreadcrumbs;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=index.js.map

package/dist/src/components/Breadcrumbs/index.js.map

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

package/dist/src/components/Breadcrumbs/item.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IReqoreBreadcrumbItem } from '.';
+import { TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+export interface IReqoreBreadcrumbItemProps extends IReqoreBreadcrumbItem {
+    interactive?: boolean;
+    size?: TSizes;
+}
+export interface IReqoreBreadcrumbItemStyle extends IReqoreBreadcrumbItemProps {
+    theme: IReqoreTheme;
+}
+declare const ReqoreBreadcrumbsItem: import("react").ForwardRefExoticComponent<IReqoreBreadcrumbItemProps & import("react").RefAttributes<unknown>>;
+export default ReqoreBreadcrumbsItem;
+//# sourceMappingURL=item.d.ts.map