@synerise/ds-cascader 0.5.30 → 0.5.32

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@0.5.31...@synerise/ds-cascader@0.5.32) (2025-01-15)
+
+**Note:** Version bump only for package @synerise/ds-cascader
+
+
+
+
+
+## [0.5.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@0.5.30...@synerise/ds-cascader@0.5.31) (2024-12-16)
+
+
+### Bug Fixes
+
+* **cascader:** display tick icon for search results ([c61cf06](https://github.com/Synerise/synerise-design/commit/c61cf0606556f146d48396b8712b22b6c9c14fe5))
+
+
+
+
+
 ## [0.5.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@0.5.29...@synerise/ds-cascader@0.5.30) (2024-12-13)
 
 **Note:** Version bump only for package @synerise/ds-cascader

package/dist/Cascader.js

@@ -162,7 +162,8 @@ export var Cascader = function Cascader(_ref) {
     paths: filteredPaths,
     highlight: searchQuery,
     onBreadCrumbClick: handleBreadCrumbClick,
-    scrollTop: scrollTop
+    scrollTop: scrollTop,
+    selectedIds: selectedIds
   })), /*#__PURE__*/React.createElement(Navigation, {
     backActionVisible: backActionVisible,
     breadcrumbVisible: !searchQuery && !!activeCategory.path,

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

@@ -1,4 +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, ...rest }: BreadcrumbProps) => React.JSX.Element;
+export declare const Breadcrumb: ({ path, disabled, highlight, description, onPathClick, compact, startWithArrow, gradientOverlap, highlightActivePath, className, prefixel, isNavigation, ...rest }: BreadcrumbProps) => React.JSX.Element;
 export default Breadcrumb;

package/dist/Elements/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-var _excluded = ["path", "disabled", "highlight", "description", "onPathClick", "compact", "startWithArrow", "gradientOverlap", "highlightActivePath", "className", "prefixel"];
+var _excluded = ["path", "disabled", "highlight", "description", "onPathClick", "compact", "startWithArrow", "gradientOverlap", "highlightActivePath", "className", "prefixel", "isNavigation"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useState, useRef, useMemo } from 'react';
@@ -19,6 +19,7 @@ export var Breadcrumb = function Breadcrumb(_ref) {
     highlightActivePath = _ref.highlightActivePath,
     className = _ref.className,
     prefixel = _ref.prefixel,
+    isNavigation = _ref.isNavigation,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var pathToDisplay = useMemo(function () {
     var breadcrumbsArray = [].concat(path);
@@ -46,7 +47,8 @@ export var Breadcrumb = function Breadcrumb(_ref) {
     prefixel: !!prefixel,
     disabled: disabled,
     compact: compact,
-    clickable: !!onPathClick
+    clickable: !!onPathClick,
+    isNavigation: isNavigation
   }, rest), /*#__PURE__*/React.createElement(S.OuterWrapper, null, prefixel && /*#__PURE__*/React.createElement(S.PrefixWrapper, {
     "data-testid": "list-item-prefix",
     disabled: disabled

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ThemeProps } from '@synerise/ds-core';
 export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {
     visible?: boolean | undefined;
@@ -20,11 +21,12 @@ export declare const disableDefaultClickingStyles: (props: ThemeProps & {
 }) => 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, {
+export declare const Breadcrumb: import("styled-components").StyledComponent<(props: import("@synerise/ds-list-item").ListItemProps) => import("react").JSX.Element, any, {
     clickable?: boolean | undefined;
     prefixel?: boolean | undefined;
     size?: string | undefined;
     disabled?: boolean | undefined;
     compact?: boolean | undefined;
+    isNavigation?: boolean | undefined;
 }, never>;
 export declare const BreadcrumbRoute: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,6 @@
 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({
   displayName: "Breadcrumbstyles__PrefixWrapper",
@@ -53,29 +55,17 @@ 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({
+export var Breadcrumb = styled(ListItem).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) {
+})(["", "{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';
-}, 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  )";
+  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 && disableDefaultClickingStyles(props);
+  return props.clickable && !props.isNavigation && disableDefaultClickingStyles(props);
 });
 export var BreadcrumbRoute = styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbRoute",

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

@@ -1,7 +1,9 @@
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-export type BreadcrumbProps = {
+import { ListItemProps } from '@synerise/ds-list-item';
+import type { CSSProperties, ReactNode } from 'react';
+export type BreadcrumbProps = ListItemProps & {
     prefixel?: ReactNode;
     disabled?: boolean;
+    isNavigation?: boolean;
     path: string[];
     highlight?: string;
     className?: string;
@@ -9,7 +11,6 @@ export type BreadcrumbProps = {
     onPathClick?: (path: string & {
         id?: number | string;
     }) => void;
-    onClick?: MouseEventHandler<HTMLDivElement>;
     compact?: boolean;
     startWithArrow?: boolean;
     gradientOverlap?: boolean;

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-export declare const attachActiveClassName: (index: number, highlightActivePath: boolean, path: Array<string>, compact: boolean) => "active" | "";
+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/BreadcrumbsList/BreadcrumbsList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Path } from '../../Cascader.types';
 import { BreadcrumbsListProps } from './BreadcrumbsList.types';
-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 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,5 +1,7 @@
 import React from 'react';
 import { renderSearchList } from '@synerise/ds-search/dist/Elements/SearchItems/SearchItems';
+import Icon, { CheckS } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
 import Breadcrumb from '../Breadcrumb/Breadcrumb';
 var DEFAULT_VISIBLE_ROWS = 6;
 var DEFAULT_ROW_HEIGHT = 50;
@@ -10,7 +12,8 @@ export var BreadcrumbsList = function BreadcrumbsList(_ref) {
     visibleRows = _ref.visibleRows,
     onBreadCrumbClick = _ref.onBreadCrumbClick,
     rowHeight = _ref.rowHeight,
-    scrollTop = _ref.scrollTop;
+    scrollTop = _ref.scrollTop,
+    selectedIds = _ref.selectedIds;
   var listPropsObject = {
     scrollTop: scrollTop
   };
@@ -22,16 +25,18 @@ export var BreadcrumbsList = function BreadcrumbsList(_ref) {
     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,
-        onClick: function onClick() {
-          return onBreadCrumbClick && onBreadCrumbClick(item);
-        }
+        highlight: highlight
       });
     },
     listProps: listPropsObject

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

@@ -1,5 +1,6 @@
-import { Path } from '../../Cascader.types';
-export interface BreadcrumbsListProps {
+import type { ReactText } from 'react';
+import type { Path } from '../../Cascader.types';
+export type BreadcrumbsListProps = {
     paths: Path[];
     width: number | string;
     rowHeight?: number;
@@ -7,4 +8,5 @@ export interface BreadcrumbsListProps {
     highlight?: string;
     onBreadCrumbClick?: (breadcrumb: Path) => void;
     scrollTop: number;
-}
+    selectedIds: ReactText[];
+};

package/dist/Elements/Navigation/Navigation.js

@@ -14,6 +14,7 @@ export var Navigation = function Navigation(_ref) {
     breadcrumbVisible = _ref.breadcrumbVisible;
   var renderBreadcrumbs = function renderBreadcrumbs() {
     return breadcrumbVisible && activeCategory ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Breadcrumb, {
+      isNavigation: true,
       path: activeCategory.path,
       onPathClick: onPathClick,
       gradientOverlap: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-cascader",
-  "version": "0.5.30",
+  "version": "0.5.32",
   "description": "Cascader UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^0.7.18",
-    "@synerise/ds-icon": "^0.68.0",
-    "@synerise/ds-list-item": "^0.6.0",
-    "@synerise/ds-scrollbar": "^0.11.21",
-    "@synerise/ds-search": "^0.9.22",
-    "@synerise/ds-search-bar": "^0.7.6",
+    "@synerise/ds-divider": "^0.7.20",
+    "@synerise/ds-icon": "^0.69.1",
+    "@synerise/ds-list-item": "^0.6.2",
+    "@synerise/ds-scrollbar": "^0.11.23",
+    "@synerise/ds-search": "^0.9.24",
+    "@synerise/ds-search-bar": "^0.7.8",
     "@synerise/ds-utils": "^0.31.2"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "f10ff573f65d5e70b13c695abded40a3289f792f"
+  "gitHead": "f591d14d24d6a14aab76edcb60f04aaadec8336d"
 }