@synerise/ds-cascader 1.1.25 → 1.1.27

package/dist/Elements/Breadcrumb/Breadcrumb.js

@@ -1,81 +1,55 @@
-var _excluded = ["path", "disabled", "highlight", "description", "onPathClick", "compact", "startWithArrow", "gradientOverlap", "highlightActivePath", "className", "prefixel", "isNavigation"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { AngleRightS } from '@synerise/ds-icon';
-import { renderWithHighlight } from '@synerise/ds-utils';
-import * as S from './Breadcrumb.styles';
-import { attachActiveClassName, isOverflown, shouldHaveArrowPlaceholder, shouldRenderArrow } 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,
-    isNavigation = _ref.isNavigation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var pathToDisplay = useMemo(function () {
-    var breadcrumbsArray = [].concat(path);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect } from "react";
+import { theme } from "@synerise/ds-core";
+import Icon, { AngleRightS } from "@synerise/ds-icon";
+import { renderWithHighlight } from "@synerise/ds-utils";
+import { Breadcrumb as Breadcrumb$1, OuterWrapper, PrefixWrapper, InnerWrapper, Description, ContentWrapper, BreadcrumbContent, BreadcrumbRoute, BreadcrumbName, ArrowRight } from "./Breadcrumb.styles.js";
+import { isOverflown, attachActiveClassName, shouldHaveArrowPlaceholder, shouldRenderArrow } from "./utils.js";
+const Breadcrumb = ({
+  path,
+  disabled,
+  highlight,
+  description,
+  onPathClick,
+  compact,
+  startWithArrow,
+  gradientOverlap,
+  highlightActivePath,
+  className,
+  prefixel,
+  isNavigation,
+  ...rest
+}) => {
+  const pathToDisplay = useMemo(() => {
+    const breadcrumbsArray = [...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);
+  const contentRef = useRef(null);
+  const [gradient, setGradient] = useState(false);
+  useEffect(() => {
+    const 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');
+  const descriptionWithHighlight = useMemo(() => {
+    if (description && typeof description === "string" && highlight) {
+      return renderWithHighlight(description, highlight, "search-highlight", "search-highlight");
     }
     return description;
   }, [description, highlight]);
-  return /*#__PURE__*/React.createElement(S.Breadcrumb, _extends({
-    tabIndex: 0,
-    role: "menuitem",
-    "data-testid": "ds-cascader-breadrumb",
-    className: className + " ds-breadcrumb",
-    prefixel: !!prefixel,
-    disabled: disabled,
-    compact: compact,
-    clickable: !!onPathClick,
-    isNavigation: isNavigation
-  }, rest), /*#__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__*/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() {
-        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']
-    })));
-  }))))));
+  return /* @__PURE__ */ jsx(Breadcrumb$1, { tabIndex: 0, role: "menuitem", "data-testid": "ds-cascader-breadrumb", className: `${className} ds-breadcrumb`, prefixel: !!prefixel, disabled, compact, clickable: !!onPathClick, isNavigation, ...rest, children: /* @__PURE__ */ jsxs(OuterWrapper, { children: [
+    prefixel && /* @__PURE__ */ jsx(PrefixWrapper, { "data-testid": "list-item-prefix", disabled, children: prefixel }),
+    /* @__PURE__ */ jsxs(InnerWrapper, { children: [
+      !!description && /* @__PURE__ */ jsx(Description, { "data-testid": "ds-cascader-breadcrumb-description", children: descriptionWithHighlight }),
+      /* @__PURE__ */ jsx(ContentWrapper, { "data-testid": "ds-cascader-breadcrumb-content", gradientOverlap: gradient, children: /* @__PURE__ */ jsx(BreadcrumbContent, { className: "breadcrumb-content", ref: contentRef, children: pathToDisplay.map((item, index) => /* @__PURE__ */ jsxs(BreadcrumbRoute, { className: "route", children: [
+        /* @__PURE__ */ jsx(BreadcrumbName, { className: `ds-breadcrumb-name ${attachActiveClassName(index, !!highlightActivePath, path, !!compact)}`, onClick: () => {
+          onPathClick?.(item);
+        }, children: renderWithHighlight(item, highlight) }),
+        shouldHaveArrowPlaceholder(index, path, !!compact, !!startWithArrow) && /* @__PURE__ */ jsx(ArrowRight, { className: "ds-arrow", visible: shouldRenderArrow(path, index, !!startWithArrow), children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}), color: theme.palette["grey-600"] }) })
+      ] }, `${item}-${index}`)) }) })
+    ] })
+  ] }) });
+};
+export {
+  Breadcrumb,
+  Breadcrumb as default
 };
-export default Breadcrumb;

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

@@ -1,26 +1,26 @@
-import { type ThemeProps } from '@synerise/ds-core';
-import { type StyledListItem } from '@synerise/ds-list-item';
-export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+import { ThemeProps } from '@synerise/ds-core';
+import { StyledListItem } from '@synerise/ds-list-item';
+export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {
     visible?: boolean;
     disabled?: boolean;
 }, never>;
-export declare const Highlight: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ArrowRight: import("styled-components").StyledComponent<"div", any, {
+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, {
+export declare const BreadcrumbContent: import('styled-components').StyledComponent<"div", any, {
     prefixel?: boolean;
 }, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {
     gradientOverlap?: boolean;
 }, never>;
-export declare const BreadcrumbName: import("styled-components").StyledComponent<"div", any, {}, 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>;
+}) => 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>;
 type BreadcrumbProps = {
     clickable?: boolean;
     prefixel?: boolean;
@@ -30,5 +30,5 @@ type BreadcrumbProps = {
     isNavigation?: boolean;
 };
 export declare const Breadcrumb: StyledListItem<BreadcrumbProps>;
-export declare const BreadcrumbRoute: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BreadcrumbRoute: import('styled-components').StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,73 +1,63 @@
-import styled, { css } from 'styled-components';
-import ListItem from '@synerise/ds-list-item';
-import { Inner } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
-var TRANSITION_FN = '0.3s ease-in-out';
-export var PrefixWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import ListItem from "@synerise/ds-list-item";
+import { Inner } from "@synerise/ds-list-item/dist/components/Text/Text.styles";
+const TRANSITION_FN = "0.3s ease-in-out";
+const PrefixWrapper = /* @__PURE__ */ 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({
+const Highlight = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Breadcrumbstyles__Highlight",
   componentId: "sc-1rgfkd8-1"
 })([""]);
-export var ArrowRight = styled.div.withConfig({
+const ArrowRight = /* @__PURE__ */ 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({
+})(["transition:opacity ", ";opacity:", ";svg{transition:fill ", ";}"], TRANSITION_FN, (props) => props.visible ? "1" : "0", TRANSITION_FN);
+const BreadcrumbContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbContent",
   componentId: "sc-1rgfkd8-3"
 })(["display:flex;align-items:center;"]);
-export var Description = styled.div.withConfig({
+const Description = /* @__PURE__ */ 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({
+})(["direction:ltr;width:100%;font-weight:400;color:", ";.search-highlight{font-weight:500;}text-overflow:ellipsis;overflow:hidden;"], (props) => props.theme.palette["grey-600"]);
+const ContentWrapper = /* @__PURE__ */ 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({
+})(["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:", ";}"], (props) => props.gradientOverlap ? "1" : "0", TRANSITION_FN, (props) => `-webkit-linear-gradient( left, ${props.theme.palette["grey-050"]} 0%, rgba(255,255,255,0) 100% )`, (props) => props.gradientOverlap ? "1" : "0", TRANSITION_FN, (props) => `-webkit-linear-gradient( left, ${props.theme.palette.white} 0%, rgba(255,255,255,0) 100% )`);
+const BreadcrumbName = /* @__PURE__ */ 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({
+})(["direction:ltr;font-weight:400;transition:color ", ";color:", ";.search-highlight{font-weight:500;}"], TRANSITION_FN, (props) => props.theme.palette["grey-600"]);
+const disableDefaultClickingStyles = (props) => 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"]);
+const OuterWrapper = /* @__PURE__ */ 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({
+const InnerWrapper = /* @__PURE__ */ 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(ListItem).withConfig({
+const Breadcrumb = /* @__PURE__ */ styled(ListItem).withConfig({
   displayName: "Breadcrumbstyles__Breadcrumb",
   componentId: "sc-1rgfkd8-9"
-})(["", "{direction:", ";flex-wrap:", ";}&:hover{", "::after{opacity:0;}", "::before{opacity:0;}}", " ", ""], BreadcrumbContent, function (props) {
-  return props.compact ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.compact ? 'no-wrap' : 'wrap';
-}, ContentWrapper, ContentWrapper, function (props) {
-  return props.isNavigation ? css(["&:hover,&:active,&:focus,&:focus:active{", "{background:transparent;}}", ",", "{&:hover{color:", ";}}&&&{", ":hover{.ds-icon > svg{fill:", " !important;}}&:focus{", "{box-shadow:none;}}"], Inner, BreadcrumbName, Description, props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'], PrefixWrapper, props.theme.palette['blue-600'], Inner) : css(["&:hover{background:", ";color:", ";", " > .ds-icon > svg{fill:", ";}", ",", "{color:", ";}}&:focus:not(:active){box-shadow:inset 0 0 0 2px ", ";}&:focus:active{", "::before{background-image:", ";}}"], props.theme.palette['grey-050'], props.theme.palette['blue-600'], ArrowRight, props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'], BreadcrumbName, Description, props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'], props.theme.palette['blue-600'], ContentWrapper, "-webkit-linear-gradient( left, " + props.theme.palette['grey-100'] + " 0%, rgba(255,255,255,0) 100%)");
-}, function (props) {
-  return props.clickable && !props.isNavigation && disableDefaultClickingStyles(props);
-});
-export var BreadcrumbRoute = styled.div.withConfig({
+})(["", "{direction:", ";flex-wrap:", ";}&:hover{", "::after{opacity:0;}", "::before{opacity:0;}}", " ", ""], BreadcrumbContent, (props) => props.compact ? "rtl" : "ltr", (props) => props.compact ? "no-wrap" : "wrap", ContentWrapper, ContentWrapper, (props) => props.isNavigation ? css(["&:hover,&:active,&:focus,&:focus:active{", "{background:transparent;}}", ",", "{&:hover{color:", ";}}&&&{", ":hover{.ds-icon > svg{fill:", " !important;}}&:focus{", "{box-shadow:none;}}"], Inner, BreadcrumbName, Description, props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], PrefixWrapper, props.theme.palette["blue-600"], Inner) : css(["&:hover{background:", ";color:", ";", " > .ds-icon > svg{fill:", ";}", ",", "{color:", ";}}&:focus:not(:active){box-shadow:inset 0 0 0 2px ", ";}&:focus:active{", "::before{background-image:", ";}}"], props.theme.palette["grey-050"], props.theme.palette["blue-600"], ArrowRight, props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], BreadcrumbName, Description, props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], props.theme.palette["blue-600"], ContentWrapper, `-webkit-linear-gradient( left, ${props.theme.palette["grey-100"]} 0%, rgba(255,255,255,0) 100%)`), (props) => props.clickable && !props.isNavigation && disableDefaultClickingStyles(props));
+const BreadcrumbRoute = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbRoute",
   componentId: "sc-1rgfkd8-10"
-})(["display:flex;align-items:center;padding-top:height:18px;.active{font-weight:500;}"]);
+})(["display:flex;align-items:center;padding-top:height:18px;.active{font-weight:500;}"]);
+export {
+  ArrowRight,
+  Breadcrumb,
+  BreadcrumbContent,
+  BreadcrumbName,
+  BreadcrumbRoute,
+  ContentWrapper,
+  Description,
+  Highlight,
+  InnerWrapper,
+  OuterWrapper,
+  PrefixWrapper,
+  disableDefaultClickingStyles
+};

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

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
+import { CSSProperties, ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
 export type BreadcrumbProps = ListItemProps & {
     prefixel?: ReactNode;
     disabled?: boolean;

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

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

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

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import { 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;

package/dist/Elements/Breadcrumb/utils.js

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type Path } from '../../Cascader.types';
-import { type BreadcrumbsListProps } from './BreadcrumbsList.types';
-export declare const BreadcrumbsList: ({ paths, highlight, width, visibleRows, onBreadCrumbClick, rowHeight, scrollTop, selectedIds, }: BreadcrumbsListProps) => React.ReactElement<import("@synerise/ds-search/dist/Elements/SearchItems/SearchItems.types").SearchItemListProps<Path>, string | React.JSXElementConstructor<any>>;
+import { default as React } from 'react';
+import { Path } from '../../Cascader.types';
+import { BreadcrumbsListProps } from './BreadcrumbsList.types';
+export declare const BreadcrumbsList: ({ paths, highlight, width, visibleRows, onBreadCrumbClick, rowHeight, scrollTop, selectedIds, }: 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,45 +1,38 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { CheckS } from '@synerise/ds-icon';
-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;
-export var BreadcrumbsList = function BreadcrumbsList(_ref) {
-  var paths = _ref.paths,
-    highlight = _ref.highlight,
-    width = _ref.width,
-    visibleRows = _ref.visibleRows,
-    onBreadCrumbClick = _ref.onBreadCrumbClick,
-    rowHeight = _ref.rowHeight,
-    scrollTop = _ref.scrollTop,
-    selectedIds = _ref.selectedIds;
-  var listPropsObject = {
-    scrollTop: scrollTop
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { CheckS } from "@synerise/ds-icon";
+import { renderSearchList } from "@synerise/ds-search/dist/Elements/SearchItems/SearchItems";
+import { Breadcrumb } from "../Breadcrumb/Breadcrumb.js";
+const DEFAULT_VISIBLE_ROWS = 6;
+const DEFAULT_ROW_HEIGHT = 50;
+const BreadcrumbsList = ({
+  paths,
+  highlight,
+  width,
+  visibleRows,
+  onBreadCrumbClick,
+  rowHeight,
+  scrollTop,
+  selectedIds
+}) => {
+  const listPropsObject = {
+    scrollTop
   };
   return renderSearchList({
     data: paths,
     visibleRows: visibleRows || DEFAULT_VISIBLE_ROWS,
-    highlight: highlight,
-    width: width,
+    highlight,
+    width,
     rowHeight: rowHeight || DEFAULT_ROW_HEIGHT,
     onItemClick: onBreadCrumbClick,
-    itemRender: function itemRender(item) {
-      var tickIcon = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-        color: theme.palette['green-600'],
-        component: /*#__PURE__*/React.createElement(CheckS, null)
-      }));
-      return /*#__PURE__*/React.createElement(Breadcrumb, {
-        gradientOverlap: true,
-        compact: true,
-        path: item.path,
-        key: "" + item.id,
-        suffixel: selectedIds.includes(item.id) ? tickIcon : undefined,
-        description: item.path[item.path.length - 1],
-        highlight: highlight
-      });
+    itemRender: (item) => {
+      const tickIcon = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, { color: theme.palette["green-600"], component: /* @__PURE__ */ jsx(CheckS, {}) }) });
+      return /* @__PURE__ */ jsx(Breadcrumb, { gradientOverlap: true, compact: true, path: item.path, suffixel: selectedIds.includes(item.id) ? tickIcon : void 0, description: item.path[item.path.length - 1], highlight }, `${item.id}`);
     },
     listProps: listPropsObject
   });
 };
-export default BreadcrumbsList;
+export {
+  BreadcrumbsList,
+  BreadcrumbsList as default
+};

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

@@ -1,5 +1,5 @@
-import type { ReactText } from 'react';
-import type { Path } from '../../Cascader.types';
+import { ReactText } from 'react';
+import { Path } from '../../Cascader.types';
 export type BreadcrumbsListProps = {
     paths: Path[];
     width: number | string;

package/dist/Elements/BreadcrumbsList/BreadcrumbsList.types.js

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

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

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

package/dist/Elements/CategoriesList/CategoriesList.js

@@ -1,58 +1,35 @@
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { theme } from '@synerise/ds-core';
-import Icon, { CheckS } from '@synerise/ds-icon';
-import ListItem from '@synerise/ds-list-item';
-import { hasNestedCategories } from '../../utils';
-var CategoriesSuffix = styled.div.withConfig({
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import styled from "styled-components";
+import { theme } from "@synerise/ds-core";
+import Icon, { CheckS } from "@synerise/ds-icon";
+import ListItem from "@synerise/ds-list-item";
+import { hasNestedCategories } from "../../utils.js";
+const CategoriesSuffix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CategoriesList__CategoriesSuffix",
   componentId: "sc-zu5q3f-0"
 })([""]);
-export var CategoriesList = function CategoriesList(_ref) {
-  var rootCategory = _ref.rootCategory,
-    onCategoryClick = _ref.onCategoryClick,
-    suffixel = _ref.suffixel,
-    onSuffixelClick = _ref.onSuffixelClick,
-    selectedIds = _ref.selectedIds;
-  var onCategoryClickHandler = useCallback(function (item) {
+const CategoriesList = ({
+  rootCategory,
+  onCategoryClick,
+  suffixel,
+  onSuffixelClick,
+  selectedIds
+}) => {
+  const onCategoryClickHandler = useCallback((item) => {
     onCategoryClick && onCategoryClick(item);
   }, [onCategoryClick]);
-  var onSuffixelClickHandler = useCallback(function (item, event) {
+  const onSuffixelClickHandler = useCallback((item, event) => {
     event.stopPropagation();
     onSuffixelClick && onSuffixelClick(item);
   }, [onSuffixelClick]);
-  var renderSuffix = function renderSuffix(item) {
-    return /*#__PURE__*/React.createElement(CategoriesSuffix, {
-      onClick: function onClick(event) {
-        return onSuffixelClickHandler(item, event);
-      }
-    }, selectedIds.includes(item.id) ? /*#__PURE__*/React.createElement(Icon, {
-      color: theme.palette['green-600'],
-      component: /*#__PURE__*/React.createElement(CheckS, null)
-    }) : suffixel);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(rootCategory)
-  // @ts-expect-error rootCategory is in fact more than what Category type defines
-  // apart from id, name and path it can have nested categories with any key
-  // STOR-1904
-  .filter(function (key) {
-    var _rootCategory$key;
-    return (_rootCategory$key = rootCategory[key]) == null ? void 0 : _rootCategory$key.name;
-  }).map(function (key) {
-    // @ts-expect-error rootCategory is in fact more than what Category type defines
-    // apart from id, name and path it can have nested categories with any key
-    // STOR-1904
-    var item = rootCategory[key];
-    return /*#__PURE__*/React.createElement(ListItem, {
-      text: item.name,
-      key: "" + item.id,
-      type: selectedIds.includes(item.id) ? undefined : 'select',
-      suffixel: renderSuffix(item),
-      parent: hasNestedCategories(item),
-      onClick: function onClick() {
-        return onCategoryClickHandler(item);
-      }
-    });
-  }));
+  const renderSuffix = (item) => /* @__PURE__ */ jsx(CategoriesSuffix, { onClick: (event) => onSuffixelClickHandler(item, event), children: selectedIds.includes(item.id) ? /* @__PURE__ */ jsx(Icon, { color: theme.palette["green-600"], component: /* @__PURE__ */ jsx(CheckS, {}) }) : suffixel });
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.keys(rootCategory).filter((key) => rootCategory[key]?.name).map((key) => {
+    const item = rootCategory[key];
+    return /* @__PURE__ */ jsx(ListItem, { text: item.name, type: selectedIds.includes(item.id) ? void 0 : "select", suffixel: renderSuffix(item), parent: hasNestedCategories(item), onClick: () => onCategoryClickHandler(item) }, `${item.id}`);
+  }) });
+};
+export {
+  CategoriesList,
+  CategoriesList as default
 };
-export default CategoriesList;

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

@@ -1,5 +1,5 @@
-import type { ReactNode, ReactText } from 'react';
-import type { Category } from '../../Cascader.types';
+import { ReactNode, ReactText } from 'react';
+import { Category } from '../../Cascader.types';
 export interface CategoriesListProps {
     rootCategory: Category;
     onCategoryClick: (item: Category) => void;

package/dist/Elements/CategoriesList/CategoriesList.types.js

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type NavigationProps } from './Navigation.types';
+import { default as 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;