@synerise/ds-cascader 0.4.111 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@0.4.111...@synerise/ds-cascader@0.5.0) (2024-05-29)
+
+
+### Features
+
+* **list-item:** added prefix, suffix, ordered props ([3927035](https://github.com/Synerise/synerise-design/commit/39270352b6a681f3ac402edb6c2fb7a245883304))
+
+
+
+
+
 ## [0.4.111](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@0.4.110...@synerise/ds-cascader@0.4.111) (2024-05-23)
 
 **Note:** Version bump only for package @synerise/ds-cascader

package/dist/Cascader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { CascaderProps } from './Cascader.types';
-declare const Cascader: React.FC<CascaderProps>;
+export declare const Cascader: ({ rootCategory, searchClearTooltip, searchInputPlaceholder, onCategorySelect, categorySuffix, maxHeight, contentStyles, selectedCategoriesIds, }: CascaderProps) => React.JSX.Element;
 export default Cascader;

package/dist/Cascader.js

@@ -1,19 +1,17 @@
-import * as React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import SearchBar from '@synerise/ds-search-bar';
-import Menu from '@synerise/ds-menu';
 import Icon, { SearchM } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import { useResize } from '@synerise/ds-utils';
 import * as S from './Cascader.styles';
-import { filterPaths, getAllPaths, hasNestedCategories, searchCategoryWithId } from './utlis';
+import { filterPaths, getAllPaths, hasNestedCategories, searchCategoryWithId } from './utils';
 import BreadcrumbsList from './Elements/BreadcrumbsList/BreadcrumbsList';
 import CategoriesList from './Elements/CategoriesList/CategoriesList';
 import Navigation from './Elements/Navigation/Navigation';
 var VERTICAL_PADDING_OFFSET = 8;
 var BREADCRUMB_ITEM_HEIGHT = 50;
 var CATEGORY_ITEM_HEIGHT = 32;
-
-var Cascader = function Cascader(_ref) {
+export var Cascader = function Cascader(_ref) {
   var _categoriesContainer$;
 
   var rootCategory = _ref.rootCategory,
@@ -25,36 +23,36 @@ var Cascader = function Cascader(_ref) {
       contentStyles = _ref.contentStyles,
       selectedCategoriesIds = _ref.selectedCategoriesIds;
 
-  var _React$useState = React.useState(''),
-      searchQuery = _React$useState[0],
-      setSearchQuery = _React$useState[1];
+  var _useState = useState(''),
+      searchQuery = _useState[0],
+      setSearchQuery = _useState[1];
 
-  var _React$useState2 = React.useState(rootCategory),
-      activeCategory = _React$useState2[0],
-      setActiveCategory = _React$useState2[1];
+  var _useState2 = useState(rootCategory),
+      activeCategory = _useState2[0],
+      setActiveCategory = _useState2[1];
 
-  var _React$useState3 = React.useState([]),
-      paths = _React$useState3[0],
-      setPaths = _React$useState3[1];
+  var _useState3 = useState([]),
+      paths = _useState3[0],
+      setPaths = _useState3[1];
 
-  var _React$useState4 = React.useState([]),
-      filteredPaths = _React$useState4[0],
-      setFilteredPaths = _React$useState4[1];
+  var _useState4 = useState([]),
+      filteredPaths = _useState4[0],
+      setFilteredPaths = _useState4[1];
 
-  var _React$useState5 = React.useState([]),
-      enteredCategories = _React$useState5[0],
-      setEnteredCategories = _React$useState5[1];
+  var _useState5 = useState([]),
+      enteredCategories = _useState5[0],
+      setEnteredCategories = _useState5[1];
 
-  var _React$useState6 = React.useState(0),
-      scrollTop = _React$useState6[0],
-      setScrollTop = _React$useState6[1];
+  var _useState6 = useState(0),
+      scrollTop = _useState6[0],
+      setScrollTop = _useState6[1];
 
-  var _React$useState7 = React.useState(selectedCategoriesIds || []),
-      selectedIds = _React$useState7[0],
-      setSelectedIds = _React$useState7[1];
+  var _useState7 = useState(selectedCategoriesIds || []),
+      selectedIds = _useState7[0],
+      setSelectedIds = _useState7[1];
 
-  var searchResultsContainer = React.useRef();
-  var categoriesContainer = React.useRef();
+  var searchResultsContainer = useRef();
+  var categoriesContainer = useRef();
 
   var _useResize = useResize(searchResultsContainer),
       height = _useResize.height;
@@ -62,10 +60,10 @@ var Cascader = function Cascader(_ref) {
   var previousCategory = enteredCategories[enteredCategories.length - 2];
   var isSearching = !!paths && searchQuery.length > 0;
   var categoriesMaxHeight = maxHeight ? Math.floor((maxHeight - Number(categoriesContainer == null || (_categoriesContainer$ = categoriesContainer.current) == null ? void 0 : _categoriesContainer$.offsetTop)) / CATEGORY_ITEM_HEIGHT) * CATEGORY_ITEM_HEIGHT + VERTICAL_PADDING_OFFSET : undefined;
-  var calculateVisibleRows = React.useMemo(function () {
+  var calculateVisibleRows = useMemo(function () {
     return Math.floor((height - VERTICAL_PADDING_OFFSET) / BREADCRUMB_ITEM_HEIGHT);
   }, [height]);
-  React.useEffect(function () {
+  useEffect(function () {
     var allPaths = getAllPaths(rootCategory, []);
     setPaths(allPaths);
 
@@ -73,7 +71,7 @@ var Cascader = function Cascader(_ref) {
       setActiveCategory(rootCategory);
     }
   }, [rootCategory, activeCategory.id]);
-  React.useEffect(function () {
+  useEffect(function () {
     setSelectedIds(selectedCategoriesIds);
   }, [selectedCategoriesIds]);
 
@@ -111,7 +109,7 @@ var Cascader = function Cascader(_ref) {
     }
   };
 
-  var onPathClick = React.useCallback(function (pathName) {
+  var onPathClick = useCallback(function (pathName) {
     var chosenCategory = enteredCategories.find(function (enteredCategory) {
       return enteredCategory.name === pathName;
     });
@@ -133,16 +131,25 @@ var Cascader = function Cascader(_ref) {
 
     setEnteredCategories(updatedEnteredCategories || []);
   }, [rootCategory, enteredCategories]);
-  var onHomeIconClick = React.useCallback(function () {
+  var onHomeIconClick = useCallback(function () {
     setActiveCategory(rootCategory);
     setEnteredCategories([]);
   }, [rootCategory]);
-  var filterPathsBySearchQuery = React.useCallback(function (value) {
+  var filterPathsBySearchQuery = useCallback(function (value) {
     if (paths) {
       var filtered = filterPaths(paths, value.toLowerCase());
       setFilteredPaths(filtered);
     } else setFilteredPaths([]);
   }, [paths]);
+
+  var handleBreadCrumbClick = function handleBreadCrumbClick(breadcrumb) {
+    var selectedCategory = searchCategoryWithId(rootCategory, breadcrumb == null ? void 0 : breadcrumb.id);
+    selectedCategory ? onItemSelect(selectedCategory) : onItemSelect(breadcrumb);
+  };
+
+  var backActionVisible = useMemo(function () {
+    return !searchQuery && !!previousCategory && !!previousCategory.name && enteredCategories.length > 1;
+  }, [enteredCategories.length, previousCategory, searchQuery]);
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     className: "ds-cascader"
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(SearchBar, {
@@ -164,7 +171,7 @@ var Cascader = function Cascader(_ref) {
     visible: !isSearching || filteredPaths && (filteredPaths == null ? void 0 : filteredPaths.length) > 0,
     ref: searchResultsContainer,
     style: contentStyles
-  }, /*#__PURE__*/React.createElement(Menu, null, isSearching && filteredPaths && /*#__PURE__*/React.createElement(S.CascaderScrollbar, {
+  }, isSearching && filteredPaths && /*#__PURE__*/React.createElement(S.CascaderScrollbar, {
     maxHeight: maxHeight,
     searching: isSearching,
     absolute: isSearching,
@@ -178,13 +185,10 @@ var Cascader = function Cascader(_ref) {
     rowHeight: BREADCRUMB_ITEM_HEIGHT,
     paths: filteredPaths,
     highlight: searchQuery,
-    onBreadCrumbClick: function onBreadCrumbClick(breadcrumb) {
-      var selectedCategory = searchCategoryWithId(rootCategory, breadcrumb == null ? void 0 : breadcrumb.id);
-      selectedCategory ? onItemSelect(selectedCategory) : onItemSelect(breadcrumb);
-    },
+    onBreadCrumbClick: handleBreadCrumbClick,
     scrollTop: scrollTop
   })), /*#__PURE__*/React.createElement(Navigation, {
-    backActionVisible: !searchQuery && !!previousCategory && !!previousCategory.name && enteredCategories.length > 1,
+    backActionVisible: backActionVisible,
     breadcrumbVisible: !searchQuery && !!activeCategory.path,
     onPathClick: onPathClick,
     onHomeIconClick: onHomeIconClick,
@@ -206,7 +210,6 @@ var Cascader = function Cascader(_ref) {
     suffixel: categorySuffix,
     onSuffixelClick: onItemSelect,
     selectedIds: selectedIds
-  }))))));
+  })))));
 };
-
 export default Cascader;

package/dist/Cascader.types.d.ts

@@ -1,21 +1,21 @@
-import * as React from 'react';
+import type { ReactNode, ReactText, CSSProperties } from 'react';
 export type Texts = 'searchPlaceholder';
-export interface Category {
-    id: React.ReactText;
+export type Category = {
+    id: ReactText;
     name: string;
     path: string[];
-}
-export interface CascaderProps {
-    categorySuffix: string | React.ReactNode;
+};
+export type CascaderProps = {
+    categorySuffix: ReactNode;
     maxHeight?: number;
-    contentStyles?: React.CSSProperties;
+    contentStyles?: CSSProperties;
     onCategorySelect?: (item: Category, selected: boolean) => void;
     rootCategory: Category;
-    searchClearTooltip?: string | React.ReactNode;
+    searchClearTooltip?: ReactNode;
     searchInputPlaceholder?: string;
-    selectedCategoriesIds: React.ReactText[];
-}
-export interface Path {
-    id: React.ReactText;
+    selectedCategoriesIds: ReactText[];
+};
+export type Path = {
+    id: ReactText;
     path: string[];
-}
+};

package/dist/Elements/BackAction/BackAction.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './BackAction.types';
-declare const BackAction: React.FC<Props>;
+import React from 'react';
+import { BackActionProps } from './BackAction.types';
+export declare const BackAction: ({ label, onClick }: BackActionProps) => React.JSX.Element;
 export default BackAction;

package/dist/Elements/BackAction/BackAction.js

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import Icon, { ArrowLeftM } from '@synerise/ds-icon';
 import Divider from '@synerise/ds-divider';
 import * as S from './BackAction.styles';
 import { DividerContainer } from '../../Cascader.styles';
-
-var BackAction = function BackAction(_ref) {
+export var BackAction = function BackAction(_ref) {
   var label = _ref.label,
       onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.BackActionWrapper, null, /*#__PURE__*/React.createElement(S.ContentWrapper, {
@@ -15,5 +14,4 @@ var BackAction = function BackAction(_ref) {
     dashed: true
   })));
 };
-
 export default BackAction;

package/dist/Elements/BackAction/BackAction.types.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-export interface Props {
-    label: React.ReactNode;
+import type { ReactNode } from 'react';
+export type BackActionProps = {
+    label: ReactNode;
     onClick: () => void;
-}
+};
+export type Props = BackActionProps;

package/dist/Elements/BottomAction/BottomAction.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './BottomAction.types';
-declare const BottomAction: React.FC<Props>;
+import React from 'react';
+import { BottomActionProps } from './BottomAction.types';
+export declare const BottomAction: ({ onClickAction, children, icon }: BottomActionProps) => React.JSX.Element;
 export default BottomAction;

package/dist/Elements/BottomAction/BottomAction.js

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import Icon from '@synerise/ds-icon';
 import * as S from './BottomAction.styles';
-
-var BottomAction = function BottomAction(_ref) {
+export var BottomAction = function BottomAction(_ref) {
   var onClickAction = _ref.onClickAction,
       children = _ref.children,
       icon = _ref.icon;
@@ -12,5 +11,4 @@ var BottomAction = function BottomAction(_ref) {
     component: icon
   })), /*#__PURE__*/React.createElement(S.TextWrapper, null, children));
 };
-
 export default BottomAction;

package/dist/Elements/BottomAction/BottomAction.types.d.ts

@@ -1,5 +1,7 @@
-import * as React from 'react';
-export interface Props {
+import type { ReactNode, ReactElement } from 'react';
+export type BottomActionProps = {
     onClickAction: () => void;
-    icon?: React.ReactElement;
-}
+    icon?: ReactElement;
+    children?: ReactNode;
+};
+export type Props = BottomActionProps;

package/dist/Elements/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: ({ path, disabled, highlight, description, onPathClick, compact, startWithArrow, gradientOverlap, highlightActivePath, className, prefixel, style, }: BreadcrumbProps) => React.JSX.Element;
+export default Breadcrumb;

package/dist/Elements/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import Icon, { AngleRightS } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import { renderWithHighlight } from '@synerise/ds-utils';
+import * as S from './Breadcrumb.styles';
+import { shouldHaveArrowPlaceholder, shouldRenderArrow, isOverflown, attachActiveClassName } from './utils';
+export var Breadcrumb = function Breadcrumb(_ref) {
+  var path = _ref.path,
+      disabled = _ref.disabled,
+      highlight = _ref.highlight,
+      description = _ref.description,
+      onPathClick = _ref.onPathClick,
+      compact = _ref.compact,
+      startWithArrow = _ref.startWithArrow,
+      gradientOverlap = _ref.gradientOverlap,
+      highlightActivePath = _ref.highlightActivePath,
+      className = _ref.className,
+      prefixel = _ref.prefixel,
+      style = _ref.style;
+  var pathToDisplay = useMemo(function () {
+    var breadcrumbsArray = [].concat(path);
+    return compact ? breadcrumbsArray.reverse() : breadcrumbsArray;
+  }, [compact, path]);
+  var contentRef = useRef(null);
+
+  var _useState = useState(false),
+      gradient = _useState[0],
+      setGradient = _useState[1];
+
+  useEffect(function () {
+    var shouldRenderGradientOverlap = gradientOverlap && isOverflown(contentRef);
+    setGradient(!!shouldRenderGradientOverlap);
+  }, [path, contentRef, gradientOverlap]);
+  var descriptionWithHighlight = useMemo(function () {
+    if (description && typeof description === 'string' && highlight) {
+      return renderWithHighlight(description, highlight, 'search-highlight', 'search-highlight');
+    }
+
+    return description;
+  }, [description, highlight]);
+  return /*#__PURE__*/React.createElement(S.Breadcrumb, {
+    tabIndex: 0,
+    role: "menuitem",
+    "data-testid": "ds-cascader-breadrumb",
+    className: className + " ds-breadcrumb",
+    prefixel: !!prefixel,
+    disabled: disabled,
+    compact: compact,
+    clickable: !!onPathClick,
+    style: style
+  }, /*#__PURE__*/React.createElement(S.OuterWrapper, null, prefixel && /*#__PURE__*/React.createElement(S.PrefixWrapper, {
+    "data-testid": "list-item-prefix",
+    disabled: disabled
+  }, prefixel), /*#__PURE__*/React.createElement(S.InnerWrapper, null, !!description && /*#__PURE__*/React.createElement(S.Description, {
+    "data-testid": "ds-cascader-breadcrumb-description"
+  }, descriptionWithHighlight), /*#__PURE__*/React.createElement(S.ContentWrapper, {
+    "data-testid": "ds-cascader-breadcrumb-content",
+    gradientOverlap: gradient
+  }, /*#__PURE__*/React.createElement(S.BreadcrumbContent, {
+    className: "breadcrumb-content",
+    ref: contentRef
+  }, pathToDisplay.map(function (item, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(S.BreadcrumbRoute, {
+        className: "route",
+        key: item + "-" + index
+      }, /*#__PURE__*/React.createElement(S.BreadcrumbName, {
+        className: "ds-breadcrumb-name " + attachActiveClassName(index, !!highlightActivePath, path, !!compact),
+        onClick: function onClick() {
+          // eslint-disable-next-line no-unused-expressions
+          onPathClick == null || onPathClick(item);
+        }
+      }, renderWithHighlight(item, highlight)), shouldHaveArrowPlaceholder(index, path, !!compact, !!startWithArrow) && /*#__PURE__*/React.createElement(S.ArrowRight, {
+        className: "ds-arrow",
+        visible: shouldRenderArrow(path, index, !!startWithArrow)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(AngleRightS, null),
+        color: theme.palette['grey-600']
+      })))
+    );
+  }))))));
+};
+export default Breadcrumb;

package/dist/Elements/Breadcrumb/Breadcrumb.styles.d.ts

@@ -0,0 +1,30 @@
+import { ThemeProps } from '@synerise/ds-core';
+export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+    visible?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;
+export declare const Highlight: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ArrowRight: import("styled-components").StyledComponent<"div", any, {
+    visible: boolean;
+}, never>;
+export declare const BreadcrumbContent: import("styled-components").StyledComponent<"div", any, {
+    prefixel?: boolean | undefined;
+}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
+    gradientOverlap?: boolean | undefined;
+}, never>;
+export declare const BreadcrumbName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const disableDefaultClickingStyles: (props: ThemeProps & {
+    disabled?: boolean;
+}) => import("styled-components").FlattenSimpleInterpolation;
+export declare const OuterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Breadcrumb: import("styled-components").StyledComponent<"div", any, {
+    clickable?: boolean | undefined;
+    prefixel?: boolean | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    compact?: boolean | undefined;
+}, never>;
+export declare const BreadcrumbRoute: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Elements/Breadcrumb/Breadcrumb.styles.js

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components';
+var TRANSITION_FN = '0.3s ease-in-out';
+export var PrefixWrapper = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__PrefixWrapper",
+  componentId: "sc-1rgfkd8-0"
+})(["display:flex;order:1;opacity:1;transition:opacity ", ";margin-top:-7px;margin-bottom:-7px;margin-left:-4px;margin-right:12px;align-items:center;"], TRANSITION_FN);
+export var Highlight = styled.span.withConfig({
+  displayName: "Breadcrumbstyles__Highlight",
+  componentId: "sc-1rgfkd8-1"
+})([""]);
+export var ArrowRight = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__ArrowRight",
+  componentId: "sc-1rgfkd8-2"
+})(["transition:opacity ", ";opacity:", ";svg{transition:fill ", ";}"], TRANSITION_FN, function (props) {
+  return props.visible ? '1' : '0';
+}, TRANSITION_FN);
+export var BreadcrumbContent = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__BreadcrumbContent",
+  componentId: "sc-1rgfkd8-3"
+})(["display:flex;align-items:center;"]);
+export var Description = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__Description",
+  componentId: "sc-1rgfkd8-4"
+})(["direction:ltr;width:100%;font-weight:400;color:", ";.search-highlight{font-weight:500;}text-overflow:ellipsis;overflow:hidden;"], function (props) {
+  return props.theme.palette['grey-600'];
+});
+export var ContentWrapper = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__ContentWrapper",
+  componentId: "sc-1rgfkd8-5"
+})(["position:relative;&::before{pointer-events:none;content:'';opacity:", ";position:absolute;display:block;width:50px;height:18px;transition:opacity ", ";background-image:", ";}&::after{pointer-events:none;content:'';opacity:", ";position:absolute;left:0;top:0;display:block;width:50px;height:18px;transition:opacity ", ";background-image:", ";}"], function (props) {
+  return props.gradientOverlap ? '1' : '0';
+}, TRANSITION_FN, function (props) {
+  return "-webkit-linear-gradient( left, " + props.theme.palette['grey-050'] + " 0%, rgba(255,255,255,0) 100% )";
+}, function (props) {
+  return props.gradientOverlap ? '1' : '0';
+}, TRANSITION_FN, function (props) {
+  return "-webkit-linear-gradient( left, " + props.theme.palette.white + " 0%, rgba(255,255,255,0) 100% )";
+});
+export var BreadcrumbName = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__BreadcrumbName",
+  componentId: "sc-1rgfkd8-6"
+})(["direction:ltr;font-weight:400;transition:color ", ";color:", ";.search-highlight{font-weight:500;}"], TRANSITION_FN, function (props) {
+  return props.theme.palette['grey-600'];
+});
+export var disableDefaultClickingStyles = function disableDefaultClickingStyles(props) {
+  return css(["&,&:focus,&:hover{background:", " !important;box-shadow:inset 0 0 0 2px transparent !important;", ",", "{color:", ";}", " > .ds-icon > svg{fill:", ";}}", ":hover,", ":hover{color:", ";}&&&:hover{", "{.ds-icon > svg{fill:", " !important;}}}&&&{", ":hover{.ds-icon > svg{fill:", " !important;}}"], props.theme.palette.white, BreadcrumbName, Description, props.theme.palette['grey-600'], ArrowRight, props.theme.palette['grey-600'], BreadcrumbName, Description, props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'], PrefixWrapper, props.theme.palette['grey-600'], PrefixWrapper, props.theme.palette['blue-600']);
+};
+export var OuterWrapper = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__OuterWrapper",
+  componentId: "sc-1rgfkd8-7"
+})(["padding:7px 0;width:100%;display:flex;align-items:center;flex-wrap:nowrap;user-select:none;"]);
+export var InnerWrapper = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__InnerWrapper",
+  componentId: "sc-1rgfkd8-8"
+})(["text-overflow:ellipsis;order:2;overflow:hidden;white-space:nowrap;font-size:13px;line-height:1.39;min-height:18px;user-select:none;"]);
+export var Breadcrumb = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__Breadcrumb",
+  componentId: "sc-1rgfkd8-9"
+})(["display:flex;align-items:center;min-width:200px;margin:0;padding-left:12px;padding-right:12px;font-size:13px;line-height:1.39;font-weight:500;user-select:none;border-radius:3px;transition:background-color 0.2s ease-out,color 0.2s ease-out;min-height:50px;background:none;border:none;color:", ";cursor:pointer;opacity:1;", "{direction:", ";flex-wrap:", ";}&{.ds-icon{height:18px;display:flex;align-items:center;}}&:hover{background:", ";color:", ";", " > .ds-icon > svg{fill:", ";}", ",", "{color:", ";}", "::after{opacity:0;}", "::before{opacity:0;}}&:focus:not(:active){box-shadow:inset 0 0 0 2px ", ";}&:focus:active{", "::before{background-image:", ";}}", ""], function (props) {
+  return props.theme.palette['grey-700'];
+}, BreadcrumbContent, function (props) {
+  return props.compact ? 'rtl' : 'ltr';
+}, function (props) {
+  return props.compact ? 'no-wrap' : 'wrap';
+}, function (props) {
+  return props.theme.palette['grey-050'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+}, ArrowRight, function (props) {
+  return props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'];
+}, BreadcrumbName, Description, function (props) {
+  return props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'];
+}, ContentWrapper, ContentWrapper, function (props) {
+  return props.theme.palette['blue-600'];
+}, ContentWrapper, function (props) {
+  return "-webkit-linear-gradient( left,\n    " + props.theme.palette['grey-100'] + " 0%,\n    rgba(255,255,255,0) 100%\n  )";
+}, function (props) {
+  return !!props.clickable && disableDefaultClickingStyles(props);
+});
+export var BreadcrumbRoute = styled.div.withConfig({
+  displayName: "Breadcrumbstyles__BreadcrumbRoute",
+  componentId: "sc-1rgfkd8-10"
+})(["display:flex;align-items:center;padding-top:height:18px;.active{font-weight:500;}"]);

package/dist/Elements/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type BreadcrumbProps = {
+    prefixel?: ReactNode;
+    disabled?: boolean;
+    path: string[];
+    highlight?: string;
+    className?: string;
+    description?: ReactNode;
+    onPathClick?: (path: string & {
+        id?: number | string;
+    }) => void;
+    compact?: boolean;
+    startWithArrow?: boolean;
+    gradientOverlap?: boolean;
+    highlightActivePath?: boolean;
+    style?: CSSProperties;
+};

package/dist/Elements/Breadcrumb/Breadcrumb.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Elements/Breadcrumb/utils.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from 'react';
+export declare const attachActiveClassName: (index: number, highlightActivePath: boolean, path: Array<string>, compact: boolean) => "active" | "";
+export declare const shouldRenderArrow: (breadCrumbPath: string[], index: number, startWithArrow: boolean) => boolean;
+export declare const shouldHaveArrowPlaceholder: (index: number, path: string[], compact: boolean, startWithArrow: boolean) => boolean;
+export declare const isOverflown: (elementRef: RefObject<HTMLDivElement>) => boolean;

package/dist/Elements/Breadcrumb/utils.js

@@ -0,0 +1,35 @@
+export var attachActiveClassName = function attachActiveClassName(index, highlightActivePath, path, compact) {
+  if (compact) {
+    return highlightActivePath && index === 0 ? 'active' : '';
+  }
+
+  return highlightActivePath && index === path.length - 1 ? 'active' : '';
+};
+export var shouldRenderArrow = function shouldRenderArrow(breadCrumbPath, index, startWithArrow) {
+  if (!breadCrumbPath || !breadCrumbPath.length) {
+    return false;
+  }
+
+  var nextBreadcrumb = breadCrumbPath[index + 1];
+
+  if (!nextBreadcrumb) {
+    return startWithArrow;
+  }
+
+  return true;
+};
+export var shouldHaveArrowPlaceholder = function shouldHaveArrowPlaceholder(index, path, compact, startWithArrow) {
+  if (compact) {
+    return startWithArrow || index < path.length - 1 && path.length > 1;
+  }
+
+  return startWithArrow || path.length > 1 || index > 0;
+};
+export var isOverflown = function isOverflown(elementRef) {
+  if (elementRef !== null && elementRef.current !== null) {
+    var element = elementRef.current;
+    return element.scrollWidth > element.clientWidth;
+  }
+
+  return false;
+};

package/dist/Elements/BreadcrumbsList/BreadcrumbsList.d.ts

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import { Path } from '../../Cascader.types';
 import { BreadcrumbsListProps } from './BreadcrumbsList.types';
-declare const BreadcrumbsList: React.FC<BreadcrumbsListProps>;
+export declare const BreadcrumbsList: ({ paths, highlight, width, visibleRows, onBreadCrumbClick, rowHeight, scrollTop, }: BreadcrumbsListProps) => React.ReactElement<import("@synerise/ds-search/dist/Elements/SearchItems/SearchItems.types").SearchItemListProps<Path>, string | React.JSXElementConstructor<any>>;
 export default BreadcrumbsList;

package/dist/Elements/BreadcrumbsList/BreadcrumbsList.js

@@ -1,10 +1,9 @@
-import * as React from 'react';
-import Menu from '@synerise/ds-menu';
+import React from 'react';
 import { renderSearchList } from '@synerise/ds-search/dist/Elements/SearchItems/SearchItems';
+import Breadcrumb from '../Breadcrumb/Breadcrumb';
 var DEFAULT_VISIBLE_ROWS = 6;
 var DEFAULT_ROW_HEIGHT = 50;
-
-var BreadcrumbsList = function BreadcrumbsList(_ref) {
+export var BreadcrumbsList = function BreadcrumbsList(_ref) {
   var paths = _ref.paths,
       highlight = _ref.highlight,
       width = _ref.width,
@@ -23,7 +22,7 @@ var BreadcrumbsList = function BreadcrumbsList(_ref) {
     rowHeight: rowHeight || DEFAULT_ROW_HEIGHT,
     onItemClick: onBreadCrumbClick,
     itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(Menu.Breadcrumb, {
+      return /*#__PURE__*/React.createElement(Breadcrumb, {
         gradientOverlap: true,
         compact: true,
         path: item.path,
@@ -35,5 +34,4 @@ var BreadcrumbsList = function BreadcrumbsList(_ref) {
     listProps: listPropsObject
   });
 };
-
 export default BreadcrumbsList;

package/dist/Elements/CategoriesList/CategoriesList.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { CategoriesListProps } from './CategoriesList.types';
-declare const CategoriesList: React.FC<CategoriesListProps>;
+export declare const CategoriesList: ({ rootCategory, onCategoryClick, suffixel, onSuffixelClick, selectedIds, }: CategoriesListProps) => React.JSX.Element;
 export default CategoriesList;

package/dist/Elements/CategoriesList/CategoriesList.js

@@ -1,32 +1,31 @@
-import * as React from 'react';
-import Menu from '@synerise/ds-menu';
+import React, { useCallback } from 'react';
+import ListItem from '@synerise/ds-list-item';
 import { theme } from '@synerise/ds-core';
 import Icon, { CheckS } from '@synerise/ds-icon';
 import styled from 'styled-components';
-import { hasNestedCategories } from '../../utlis';
+import { hasNestedCategories } from '../../utils';
 var CategoriesSuffix = styled.div.withConfig({
   displayName: "CategoriesList__CategoriesSuffix",
   componentId: "zu5q3f-0"
 })([""]);
-
-var CategoriesList = function CategoriesList(_ref) {
+export var CategoriesList = function CategoriesList(_ref) {
   var rootCategory = _ref.rootCategory,
       onCategoryClick = _ref.onCategoryClick,
       suffixel = _ref.suffixel,
       onSuffixelClick = _ref.onSuffixelClick,
       selectedIds = _ref.selectedIds;
-  var onCategoryClickHandler = React.useCallback(function (item) {
+  var onCategoryClickHandler = useCallback(function (item) {
     onCategoryClick && onCategoryClick(item);
   }, [onCategoryClick]);
-  var onSuffixelClickHandler = React.useCallback(function (item, e) {
-    e.stopPropagation();
+  var onSuffixelClickHandler = useCallback(function (item, event) {
+    event.stopPropagation();
     onSuffixelClick && onSuffixelClick(item);
   }, [onSuffixelClick]);
 
   var renderSuffix = function renderSuffix(item) {
     return /*#__PURE__*/React.createElement(CategoriesSuffix, {
-      onClick: function onClick(e) {
-        return onSuffixelClickHandler(item, e);
+      onClick: function onClick(event) {
+        return onSuffixelClickHandler(item, event);
       }
     }, selectedIds.includes(item.id) ? /*#__PURE__*/React.createElement(Icon, {
       color: theme.palette['green-600'],
@@ -40,10 +39,10 @@ var CategoriesList = function CategoriesList(_ref) {
     return (_rootCategory$key = rootCategory[key]) == null ? void 0 : _rootCategory$key.name;
   }).map(function (key) {
     var item = rootCategory[key];
-    return /*#__PURE__*/React.createElement(Menu.Item, {
+    return /*#__PURE__*/React.createElement(ListItem, {
       text: item.name,
-      type: selectedIds && selectedIds.includes(item.id) ? '' : 'select',
       key: "" + item.id,
+      type: selectedIds.includes(item.id) ? undefined : 'select',
       suffixel: renderSuffix(item),
       parent: hasNestedCategories(item),
       onClick: function onClick() {
@@ -52,5 +51,4 @@ var CategoriesList = function CategoriesList(_ref) {
     });
   }));
 };
-
 export default CategoriesList;

package/dist/Elements/CategoriesList/CategoriesList.types.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Category } from '../../Cascader.types';
+import type { ReactNode, ReactText } from 'react';
+import type { Category } from '../../Cascader.types';
 export interface CategoriesListProps {
     rootCategory: Category;
     onCategoryClick: (item: Category) => void;
-    suffixel: React.ReactNode | string;
+    suffixel: ReactNode | string;
     onSuffixelClick: (item: Category) => void;
-    selectedIds: React.ReactText[];
+    selectedIds: ReactText[];
 }

package/dist/Elements/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { DividerProps } from '@synerise/ds-divider/dist/Divider.types';
-declare const Divider: React.FC<DividerProps>;
+import React from 'react';
+import type { DividerProps } from '@synerise/ds-divider';
+export declare const Divider: (props: DividerProps) => React.JSX.Element;
 export default Divider;

package/dist/Elements/Divider/Divider.js

@@ -1,8 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import * as S from './Divider.styles';
-
-var Divider = function Divider(props) {
+export var Divider = function Divider(props) {
   return /*#__PURE__*/React.createElement(S.DividerWrapper, null, /*#__PURE__*/React.createElement(Divider, props));
 };
-
 export default Divider;

package/dist/Elements/Divider/Divider.styles.js

@@ -1,5 +1,4 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
-
+import styled from 'styled-components';
 export var DividerWrapper = styled.div.withConfig({
   displayName: "Dividerstyles__DividerWrapper",
   componentId: "lfeetq-0"

package/dist/Elements/Navigation/Navigation.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './Navigation.types';
-declare const Navigation: React.FC<Props>;
+import React from 'react';
+import { NavigationProps } from './Navigation.types';
+export declare const Navigation: ({ backActionVisible, onHomeIconClick, onPathClick, activeCategory, previousCategory, breadcrumbVisible, }: NavigationProps) => React.JSX.Element;
 export default Navigation;

package/dist/Elements/Navigation/Navigation.js

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import React from 'react';
 import Icon, { HomeM } from '@synerise/ds-icon';
-import Menu from '@synerise/ds-menu';
 import Divider from '@synerise/ds-divider';
 import { theme } from '@synerise/ds-core';
 import * as S from '../../Cascader.styles';
-import BackAction from '../BackAction/BackAction';
-
-var Navigation = function Navigation(_ref) {
+import { BackAction } from '../BackAction/BackAction';
+import { Breadcrumb } from '../Breadcrumb/Breadcrumb';
+export var Navigation = function Navigation(_ref) {
   var backActionVisible = _ref.backActionVisible,
       onHomeIconClick = _ref.onHomeIconClick,
       onPathClick = _ref.onPathClick,
@@ -15,7 +14,7 @@ var Navigation = function Navigation(_ref) {
       breadcrumbVisible = _ref.breadcrumbVisible;
 
   var renderBreadcrumbs = function renderBreadcrumbs() {
-    return breadcrumbVisible && activeCategory ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Menu.Breadcrumb, {
+    return breadcrumbVisible && activeCategory ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Breadcrumb, {
       path: activeCategory.path,
       onPathClick: onPathClick,
       gradientOverlap: true,
@@ -43,5 +42,4 @@ var Navigation = function Navigation(_ref) {
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderBreadcrumbs(), renderBackAction());
 };
-
 export default Navigation;

package/dist/Elements/Navigation/Navigation.types.d.ts

@@ -1,9 +1,10 @@
-import { Category } from '../../Cascader.types';
-export interface Props {
+import type { Category } from '../../Cascader.types';
+export type NavigationProps = {
     breadcrumbVisible?: boolean;
     backActionVisible?: boolean;
     activeCategory: Category;
     previousCategory: Category;
     onHomeIconClick: () => void;
     onPathClick: (item: string) => void;
-}
+};
+export type Props = NavigationProps;

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default } from './Cascader';
+export { Breadcrumb } from './Elements/Breadcrumb/Breadcrumb';
+export type { CascaderProps, Category, Texts, Path } from './Cascader.types';

package/dist/index.js

@@ -1 +1,2 @@
-export { default } from './Cascader';
+export { default } from './Cascader';
+export { Breadcrumb } from './Elements/Breadcrumb/Breadcrumb';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-cascader",
-  "version": "0.4.111",
+  "version": "0.5.0",
   "description": "Cascader UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,13 +33,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^0.6.19",
-    "@synerise/ds-icon": "^0.61.0",
-    "@synerise/ds-menu": "^0.18.23",
-    "@synerise/ds-scrollbar": "^0.10.5",
-    "@synerise/ds-search": "^0.8.91",
-    "@synerise/ds-search-bar": "^0.6.74",
-    "@synerise/ds-utils": "^0.26.6"
+    "@synerise/ds-divider": "^0.7.0",
+    "@synerise/ds-icon": "^0.62.0",
+    "@synerise/ds-list-item": "^0.1.0",
+    "@synerise/ds-scrollbar": "^0.11.0",
+    "@synerise/ds-search": "^0.8.92",
+    "@synerise/ds-search-bar": "^0.6.75",
+    "@synerise/ds-utils": "^0.27.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -49,5 +49,5 @@
   "devDependencies": {
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "357031f4340eb9a2835f7b0cabffb5b1ad231db8"
+  "gitHead": "6bd94c78745df68ee3b853120a863ab24fc233ef"
 }