@synerise/ds-cascader 1.1.26 → 1.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/Cascader.d.ts +2 -2
- package/dist/Cascader.js +94 -143
- package/dist/Cascader.styles.d.ts +6 -6
- package/dist/Cascader.styles.js +19 -17
- package/dist/Cascader.types.d.ts +2 -1
- package/dist/Cascader.types.js +1 -1
- package/dist/Elements/BackAction/BackAction.d.ts +2 -2
- package/dist/Elements/BackAction/BackAction.js +18 -16
- package/dist/Elements/BackAction/BackAction.styles.d.ts +4 -4
- package/dist/Elements/BackAction/BackAction.styles.js +15 -17
- package/dist/Elements/BackAction/BackAction.types.d.ts +1 -1
- package/dist/Elements/BackAction/BackAction.types.js +1 -1
- package/dist/Elements/BottomAction/BottomAction.d.ts +2 -2
- package/dist/Elements/BottomAction/BottomAction.js +14 -13
- package/dist/Elements/BottomAction/BottomAction.styles.d.ts +3 -3
- package/dist/Elements/BottomAction/BottomAction.styles.js +11 -14
- package/dist/Elements/BottomAction/BottomAction.types.d.ts +1 -1
- package/dist/Elements/BottomAction/BottomAction.types.js +1 -1
- package/dist/Elements/Breadcrumb/Breadcrumb.d.ts +2 -2
- package/dist/Elements/Breadcrumb/Breadcrumb.js +47 -73
- package/dist/Elements/Breadcrumb/Breadcrumb.styles.d.ts +13 -13
- package/dist/Elements/Breadcrumb/Breadcrumb.styles.js +36 -46
- package/dist/Elements/Breadcrumb/Breadcrumb.types.d.ts +2 -2
- package/dist/Elements/Breadcrumb/Breadcrumb.types.js +1 -1
- package/dist/Elements/Breadcrumb/utils.d.ts +1 -1
- package/dist/Elements/Breadcrumb/utils.js +15 -9
- package/dist/Elements/BreadcrumbsList/BreadcrumbsList.d.ts +4 -4
- package/dist/Elements/BreadcrumbsList/BreadcrumbsList.js +28 -35
- package/dist/Elements/BreadcrumbsList/BreadcrumbsList.types.d.ts +2 -2
- package/dist/Elements/BreadcrumbsList/BreadcrumbsList.types.js +1 -1
- package/dist/Elements/CategoriesList/CategoriesList.d.ts +2 -2
- package/dist/Elements/CategoriesList/CategoriesList.js +23 -49
- package/dist/Elements/CategoriesList/CategoriesList.types.d.ts +2 -2
- package/dist/Elements/CategoriesList/CategoriesList.types.js +1 -1
- package/dist/Elements/Navigation/Navigation.d.ts +2 -2
- package/dist/Elements/Navigation/Navigation.js +32 -40
- package/dist/Elements/Navigation/Navigation.types.d.ts +1 -1
- package/dist/Elements/Navigation/Navigation.types.js +1 -1
- package/dist/index.js +6 -2
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +27 -57
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@1.1.27...@synerise/ds-cascader@1.1.28) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **cascader:** simplified nested types ([c6e42a7](https://github.com/Synerise/synerise-design/commit/c6e42a7d22375cddaeb4d5cb13f9f528ede83fe1))
|
|
11
|
+
|
|
12
|
+
## [1.1.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@1.1.26...@synerise/ds-cascader@1.1.27) (2026-03-24)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @synerise/ds-cascader
|
|
15
|
+
|
|
6
16
|
## [1.1.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cascader@1.1.25...@synerise/ds-cascader@1.1.26) (2026-03-20)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @synerise/ds-cascader
|
package/dist/Cascader.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CascaderProps } from './Cascader.types';
|
|
3
3
|
export declare const Cascader: ({ rootCategory, searchClearTooltip, searchInputPlaceholder, onCategorySelect, categorySuffix, maxHeight, contentStyles, selectedCategoriesIds, }: CascaderProps) => React.JSX.Element;
|
|
4
4
|
export default Cascader;
|
package/dist/Cascader.js
CHANGED
|
@@ -1,89 +1,84 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var isSearching = !!paths && searchQuery.length > 0;
|
|
51
|
-
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;
|
|
52
|
-
var calculateVisibleRows = useMemo(function () {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useLayoutEffect, useMemo, useEffect, useCallback } from "react";
|
|
3
|
+
import { theme } from "@synerise/ds-core";
|
|
4
|
+
import Icon, { SearchM } from "@synerise/ds-icon";
|
|
5
|
+
import SearchBar from "@synerise/ds-search-bar";
|
|
6
|
+
import { useResize } from "@synerise/ds-utils";
|
|
7
|
+
import { Wrapper, InputWrapper, SearchResults, CascaderScrollbar } from "./Cascader.styles.js";
|
|
8
|
+
import { BreadcrumbsList } from "./Elements/BreadcrumbsList/BreadcrumbsList.js";
|
|
9
|
+
import { CategoriesList } from "./Elements/CategoriesList/CategoriesList.js";
|
|
10
|
+
import { Navigation } from "./Elements/Navigation/Navigation.js";
|
|
11
|
+
import { getAllPaths, searchCategoryWithId, filterPaths, hasNestedCategories } from "./utils.js";
|
|
12
|
+
const VERTICAL_PADDING_OFFSET = 8;
|
|
13
|
+
const BREADCRUMB_ITEM_HEIGHT = 50;
|
|
14
|
+
const CATEGORY_ITEM_HEIGHT = 32;
|
|
15
|
+
const Cascader = ({
|
|
16
|
+
rootCategory,
|
|
17
|
+
searchClearTooltip,
|
|
18
|
+
searchInputPlaceholder,
|
|
19
|
+
onCategorySelect,
|
|
20
|
+
categorySuffix,
|
|
21
|
+
maxHeight,
|
|
22
|
+
contentStyles,
|
|
23
|
+
selectedCategoriesIds
|
|
24
|
+
}) => {
|
|
25
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
26
|
+
const [activeCategory, setActiveCategory] = useState(rootCategory);
|
|
27
|
+
const [paths, setPaths] = useState([]);
|
|
28
|
+
const [filteredPaths, setFilteredPaths] = useState([]);
|
|
29
|
+
const [enteredCategories, setEnteredCategories] = useState([]);
|
|
30
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
31
|
+
const [selectedIds, setSelectedIds] = useState(selectedCategoriesIds || []);
|
|
32
|
+
const searchResultsContainer = useRef();
|
|
33
|
+
const categoriesContainer = useRef();
|
|
34
|
+
const {
|
|
35
|
+
height
|
|
36
|
+
} = useResize(searchResultsContainer);
|
|
37
|
+
const previousCategory = enteredCategories[enteredCategories.length - 2];
|
|
38
|
+
const isSearching = !!paths && searchQuery.length > 0;
|
|
39
|
+
const [categoriesMaxHeight, setCategoriesMaxHeight] = useState(void 0);
|
|
40
|
+
useLayoutEffect(() => {
|
|
41
|
+
if (!maxHeight) {
|
|
42
|
+
setCategoriesMaxHeight(void 0);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const offsetTop = categoriesContainer.current?.offsetTop ?? 0;
|
|
46
|
+
const calculated = Math.floor((maxHeight - offsetTop) / CATEGORY_ITEM_HEIGHT) * CATEGORY_ITEM_HEIGHT + VERTICAL_PADDING_OFFSET;
|
|
47
|
+
setCategoriesMaxHeight((prev) => prev === calculated ? prev : calculated);
|
|
48
|
+
});
|
|
49
|
+
const calculateVisibleRows = useMemo(() => {
|
|
53
50
|
return Math.floor((height - VERTICAL_PADDING_OFFSET) / BREADCRUMB_ITEM_HEIGHT);
|
|
54
51
|
}, [height]);
|
|
55
|
-
useEffect(
|
|
56
|
-
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
const allPaths = getAllPaths(rootCategory, []);
|
|
57
54
|
setPaths(allPaths);
|
|
58
55
|
if (activeCategory.id === rootCategory.id || !activeCategory.id) {
|
|
59
56
|
setActiveCategory(rootCategory);
|
|
60
57
|
}
|
|
61
58
|
}, [rootCategory, activeCategory.id]);
|
|
62
|
-
useEffect(
|
|
59
|
+
useEffect(() => {
|
|
63
60
|
setSelectedIds(selectedCategoriesIds);
|
|
64
61
|
}, [selectedCategoriesIds]);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
const onItemSelect = (item) => {
|
|
63
|
+
let newSelectedList;
|
|
64
|
+
const itemAlreadySelected = selectedIds.indexOf(item.id) !== -1;
|
|
68
65
|
if (!itemAlreadySelected) {
|
|
69
|
-
newSelectedList = [
|
|
66
|
+
newSelectedList = [...selectedIds, item.id];
|
|
70
67
|
onCategorySelect && onCategorySelect(item, true);
|
|
71
68
|
} else {
|
|
72
|
-
newSelectedList = selectedIds.filter(
|
|
73
|
-
return id !== item.id;
|
|
74
|
-
});
|
|
69
|
+
newSelectedList = selectedIds.filter((id) => id !== item.id);
|
|
75
70
|
onCategorySelect && onCategorySelect(item, false);
|
|
76
71
|
}
|
|
77
|
-
setSelectedIds([]
|
|
72
|
+
setSelectedIds([...newSelectedList]);
|
|
78
73
|
};
|
|
79
|
-
|
|
80
|
-
|
|
74
|
+
const onCategoryClick = (category) => {
|
|
75
|
+
const entered = {
|
|
81
76
|
id: category.id,
|
|
82
77
|
name: category.name,
|
|
83
78
|
path: category.path
|
|
84
79
|
};
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
const updatedEnteredCategories = [...enteredCategories, entered];
|
|
81
|
+
const hasMoreCategories = hasNestedCategories(category);
|
|
87
82
|
if (hasMoreCategories) {
|
|
88
83
|
setActiveCategory(category);
|
|
89
84
|
setEnteredCategories(updatedEnteredCategories);
|
|
@@ -91,16 +86,14 @@ export var Cascader = function Cascader(_ref) {
|
|
|
91
86
|
onItemSelect(category);
|
|
92
87
|
}
|
|
93
88
|
};
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
});
|
|
98
|
-
var updatedEnteredCategories;
|
|
89
|
+
const onPathClick = useCallback((pathName) => {
|
|
90
|
+
const chosenCategory = enteredCategories.find((enteredCategory) => enteredCategory.name === pathName);
|
|
91
|
+
let updatedEnteredCategories;
|
|
99
92
|
if (chosenCategory) {
|
|
100
93
|
updatedEnteredCategories = enteredCategories.slice(0, enteredCategories.indexOf(chosenCategory) + 1);
|
|
101
94
|
}
|
|
102
|
-
if (chosenCategory
|
|
103
|
-
|
|
95
|
+
if (chosenCategory?.id) {
|
|
96
|
+
const nextActiveCategory = searchCategoryWithId(rootCategory, chosenCategory.id);
|
|
104
97
|
if (nextActiveCategory) {
|
|
105
98
|
setActiveCategory(nextActiveCategory);
|
|
106
99
|
}
|
|
@@ -109,86 +102,44 @@ export var Cascader = function Cascader(_ref) {
|
|
|
109
102
|
}
|
|
110
103
|
setEnteredCategories(updatedEnteredCategories || []);
|
|
111
104
|
}, [rootCategory, enteredCategories]);
|
|
112
|
-
|
|
105
|
+
const onHomeIconClick = useCallback(() => {
|
|
113
106
|
setActiveCategory(rootCategory);
|
|
114
107
|
setEnteredCategories([]);
|
|
115
108
|
}, [rootCategory]);
|
|
116
|
-
|
|
109
|
+
const filterPathsBySearchQuery = useCallback((value) => {
|
|
117
110
|
if (paths) {
|
|
118
|
-
|
|
111
|
+
const filtered = filterPaths(paths, value.toLowerCase());
|
|
119
112
|
setFilteredPaths(filtered);
|
|
120
113
|
} else {
|
|
121
114
|
setFilteredPaths([]);
|
|
122
115
|
}
|
|
123
116
|
}, [paths]);
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
const handleBreadCrumbClick = (breadcrumb) => {
|
|
118
|
+
const selectedCategory = searchCategoryWithId(rootCategory, breadcrumb?.id);
|
|
126
119
|
selectedCategory ? onItemSelect(selectedCategory) : onItemSelect(breadcrumb);
|
|
127
120
|
};
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
return /*#__PURE__*/React.createElement(S.Wrapper, {
|
|
132
|
-
className: "ds-cascader"
|
|
133
|
-
}, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(SearchBar, {
|
|
134
|
-
onSearchChange: function onSearchChange(value) {
|
|
121
|
+
const backActionVisible = useMemo(() => !searchQuery && !!previousCategory && !!previousCategory.name && enteredCategories.length > 1, [enteredCategories.length, previousCategory, searchQuery]);
|
|
122
|
+
return /* @__PURE__ */ jsxs(Wrapper, { className: "ds-cascader", children: [
|
|
123
|
+
/* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(SearchBar, { onSearchChange: (value) => {
|
|
135
124
|
setSearchQuery(value);
|
|
136
125
|
filterPathsBySearchQuery(value);
|
|
137
|
-
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
onScroll: function onScroll(_ref2) {
|
|
157
|
-
var currentTarget = _ref2.currentTarget;
|
|
158
|
-
setScrollTop(currentTarget.scrollTop);
|
|
159
|
-
}
|
|
160
|
-
}, /*#__PURE__*/React.createElement(BreadcrumbsList, {
|
|
161
|
-
width: "calc(100% - 8px)",
|
|
162
|
-
visibleRows: calculateVisibleRows,
|
|
163
|
-
rowHeight: BREADCRUMB_ITEM_HEIGHT,
|
|
164
|
-
paths: filteredPaths,
|
|
165
|
-
highlight: searchQuery,
|
|
166
|
-
onBreadCrumbClick: handleBreadCrumbClick,
|
|
167
|
-
scrollTop: scrollTop,
|
|
168
|
-
selectedIds: selectedIds
|
|
169
|
-
})), /*#__PURE__*/React.createElement(Navigation, {
|
|
170
|
-
backActionVisible: backActionVisible,
|
|
171
|
-
breadcrumbVisible: !searchQuery && !!activeCategory.path,
|
|
172
|
-
onPathClick: onPathClick,
|
|
173
|
-
onHomeIconClick: onHomeIconClick,
|
|
174
|
-
previousCategory: previousCategory,
|
|
175
|
-
activeCategory: activeCategory
|
|
176
|
-
}), !searchQuery && /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
ref: categoriesContainer
|
|
178
|
-
}, /*#__PURE__*/React.createElement(S.CascaderScrollbar, {
|
|
179
|
-
maxHeight: categoriesMaxHeight,
|
|
180
|
-
searching: isSearching,
|
|
181
|
-
absolute: isSearching,
|
|
182
|
-
onScroll: function onScroll(_ref3) {
|
|
183
|
-
var currentTarget = _ref3.currentTarget;
|
|
184
|
-
setScrollTop(currentTarget.scrollTop);
|
|
185
|
-
}
|
|
186
|
-
}, /*#__PURE__*/React.createElement(CategoriesList, {
|
|
187
|
-
rootCategory: activeCategory,
|
|
188
|
-
onCategoryClick: onCategoryClick,
|
|
189
|
-
suffixel: categorySuffix,
|
|
190
|
-
onSuffixelClick: onItemSelect,
|
|
191
|
-
selectedIds: selectedIds
|
|
192
|
-
})))));
|
|
126
|
+
}, placeholder: searchInputPlaceholder || "", value: searchQuery, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }), onClearInput: () => setSearchQuery(""), clearTooltip: searchClearTooltip }) }),
|
|
127
|
+
/* @__PURE__ */ jsxs(SearchResults, { visible: !isSearching || filteredPaths && filteredPaths?.length > 0, ref: searchResultsContainer, style: contentStyles, children: [
|
|
128
|
+
isSearching && filteredPaths && /* @__PURE__ */ jsx(CascaderScrollbar, { maxHeight, searching: isSearching, absolute: isSearching, onScroll: ({
|
|
129
|
+
currentTarget
|
|
130
|
+
}) => {
|
|
131
|
+
setScrollTop(currentTarget.scrollTop);
|
|
132
|
+
}, children: /* @__PURE__ */ jsx(BreadcrumbsList, { width: "calc(100% - 8px)", visibleRows: calculateVisibleRows, rowHeight: BREADCRUMB_ITEM_HEIGHT, paths: filteredPaths, highlight: searchQuery, onBreadCrumbClick: handleBreadCrumbClick, scrollTop, selectedIds }) }),
|
|
133
|
+
/* @__PURE__ */ jsx(Navigation, { backActionVisible, breadcrumbVisible: !searchQuery && activeCategory.path.length > 0, onPathClick, onHomeIconClick, previousCategory, activeCategory }),
|
|
134
|
+
!searchQuery && /* @__PURE__ */ jsx("div", { ref: categoriesContainer, children: /* @__PURE__ */ jsx(CascaderScrollbar, { maxHeight: categoriesMaxHeight, searching: isSearching, absolute: isSearching, onScroll: ({
|
|
135
|
+
currentTarget
|
|
136
|
+
}) => {
|
|
137
|
+
setScrollTop(currentTarget.scrollTop);
|
|
138
|
+
}, children: /* @__PURE__ */ jsx(CategoriesList, { rootCategory: activeCategory, onCategoryClick, suffixel: categorySuffix, onSuffixelClick: onItemSelect, selectedIds }) }) })
|
|
139
|
+
] })
|
|
140
|
+
] });
|
|
141
|
+
};
|
|
142
|
+
export {
|
|
143
|
+
Cascader,
|
|
144
|
+
Cascader as default
|
|
193
145
|
};
|
|
194
|
-
export default Cascader;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export declare const InputWrapper: import(
|
|
2
|
-
export declare const SearchResults: import(
|
|
1
|
+
export declare const InputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const SearchResults: import('styled-components').StyledComponent<"div", any, {
|
|
3
3
|
visible?: boolean;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const CascaderScrollbar: import(
|
|
5
|
+
export declare const CascaderScrollbar: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(import('@synerise/ds-scrollbar').ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, {
|
|
6
6
|
searching?: boolean;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const Wrapper: import(
|
|
9
|
-
export declare const BreadcrumbPrefix: import(
|
|
10
|
-
export declare const DividerContainer: import(
|
|
8
|
+
export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const BreadcrumbPrefix: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const DividerContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
package/dist/Cascader.styles.js
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import Scrollbar from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import Scrollbar from "@synerise/ds-scrollbar";
|
|
3
|
+
const InputWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "Cascaderstyles__InputWrapper",
|
|
5
5
|
componentId: "sc-endrj4-0"
|
|
6
6
|
})(["box-shadow:0 16px 32px 0 rgba(35,41,54,0.05);"]);
|
|
7
|
-
|
|
7
|
+
const SearchResults = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "Cascaderstyles__SearchResults",
|
|
9
9
|
componentId: "sc-endrj4-1"
|
|
10
|
-
})(["display:", ";width:100%;background:", ";border-radius:0 0 3px 3px;padding:8px 0 8px 8px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.05);z-index:10;"],
|
|
11
|
-
|
|
12
|
-
}, function (props) {
|
|
13
|
-
return props.theme.palette.white;
|
|
14
|
-
});
|
|
15
|
-
export var CascaderScrollbar = styled(Scrollbar).withConfig({
|
|
10
|
+
})(["position:relative;display:", ";width:100%;background:", ";border-radius:0 0 3px 3px;padding:8px 0 8px 8px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.05);z-index:10;"], (props) => !props.visible ? "none" : "block", (props) => props.theme.palette.white);
|
|
11
|
+
const CascaderScrollbar = /* @__PURE__ */ styled(Scrollbar).withConfig({
|
|
16
12
|
displayName: "Cascaderstyles__CascaderScrollbar",
|
|
17
13
|
componentId: "sc-endrj4-2"
|
|
18
|
-
})(["padding-right:", ";"],
|
|
19
|
-
|
|
20
|
-
});
|
|
21
|
-
export var Wrapper = styled.div.withConfig({
|
|
14
|
+
})(["padding-right:", ";"], (props) => props.searching ? `0` : "8px");
|
|
15
|
+
const Wrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
22
16
|
displayName: "Cascaderstyles__Wrapper",
|
|
23
17
|
componentId: "sc-endrj4-3"
|
|
24
18
|
})(["&&{.ant-menu-inline,.-inline{border-right:none;}}"]);
|
|
25
|
-
|
|
19
|
+
const BreadcrumbPrefix = /* @__PURE__ */ styled.div.withConfig({
|
|
26
20
|
displayName: "Cascaderstyles__BreadcrumbPrefix",
|
|
27
21
|
componentId: "sc-endrj4-4"
|
|
28
22
|
})([""]);
|
|
29
|
-
|
|
23
|
+
const DividerContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
30
24
|
displayName: "Cascaderstyles__DividerContainer",
|
|
31
25
|
componentId: "sc-endrj4-5"
|
|
32
|
-
})(["padding:8px;"]);
|
|
26
|
+
})(["padding:8px;"]);
|
|
27
|
+
export {
|
|
28
|
+
BreadcrumbPrefix,
|
|
29
|
+
CascaderScrollbar,
|
|
30
|
+
DividerContainer,
|
|
31
|
+
InputWrapper,
|
|
32
|
+
SearchResults,
|
|
33
|
+
Wrapper
|
|
34
|
+
};
|
package/dist/Cascader.types.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CSSProperties, ReactNode, ReactText } from 'react';
|
|
2
2
|
export type Texts = 'searchPlaceholder';
|
|
3
3
|
export type Category = {
|
|
4
4
|
id: ReactText;
|
|
5
5
|
name: string;
|
|
6
6
|
path: string[];
|
|
7
|
+
children?: Category[];
|
|
7
8
|
};
|
|
8
9
|
export type CascaderProps = {
|
|
9
10
|
categorySuffix: ReactNode;
|
package/dist/Cascader.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BackActionProps } from './BackAction.types';
|
|
3
3
|
export declare const BackAction: ({ label, onClick }: BackActionProps) => React.JSX.Element;
|
|
4
4
|
export default BackAction;
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Divider from
|
|
3
|
-
import Icon, { ArrowLeftM } from
|
|
4
|
-
import { DividerContainer } from
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Divider from "@synerise/ds-divider";
|
|
3
|
+
import Icon, { ArrowLeftM } from "@synerise/ds-icon";
|
|
4
|
+
import { DividerContainer } from "../../Cascader.styles.js";
|
|
5
|
+
import { BackActionWrapper, ContentWrapper, IconWrapper, Label } from "./BackAction.styles.js";
|
|
6
|
+
const BackAction = ({
|
|
7
|
+
label,
|
|
8
|
+
onClick
|
|
9
|
+
}) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10
|
+
/* @__PURE__ */ jsx(BackActionWrapper, { children: /* @__PURE__ */ jsxs(ContentWrapper, { onClick, children: [
|
|
11
|
+
/* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrowLeftM, {}) }) }),
|
|
12
|
+
/* @__PURE__ */ jsx(Label, { children: label })
|
|
13
|
+
] }) }),
|
|
14
|
+
/* @__PURE__ */ jsx(DividerContainer, { children: /* @__PURE__ */ jsx(Divider, { dashed: true }) })
|
|
15
|
+
] });
|
|
16
|
+
export {
|
|
17
|
+
BackAction,
|
|
18
|
+
BackAction as default
|
|
16
19
|
};
|
|
17
|
-
export default BackAction;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const Label: import(
|
|
2
|
-
export declare const IconWrapper: import(
|
|
3
|
-
export declare const BackActionWrapper: import(
|
|
4
|
-
export declare const ContentWrapper: import(
|
|
1
|
+
export declare const Label: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const BackActionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const Label = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "BackActionstyles__Label",
|
|
4
4
|
componentId: "sc-mg8442-0"
|
|
5
|
-
})(["font-weight:500;font-size:14px;transition:color 0.3s ease;color:", ";"],
|
|
6
|
-
|
|
7
|
-
});
|
|
8
|
-
export var IconWrapper = styled.div.withConfig({
|
|
5
|
+
})(["font-weight:500;font-size:14px;transition:color 0.3s ease;color:", ";"], (props) => props.theme.palette["grey-700"]);
|
|
6
|
+
const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
7
|
displayName: "BackActionstyles__IconWrapper",
|
|
10
8
|
componentId: "sc-mg8442-1"
|
|
11
|
-
})(["margin-right:12px;svg{transition:fill 0.3s ease;fill:", ";}"],
|
|
12
|
-
|
|
13
|
-
});
|
|
14
|
-
export var BackActionWrapper = styled.div.withConfig({
|
|
9
|
+
})(["margin-right:12px;svg{transition:fill 0.3s ease;fill:", ";}"], (props) => props.theme.palette["grey-700"]);
|
|
10
|
+
const BackActionWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
15
11
|
displayName: "BackActionstyles__BackActionWrapper",
|
|
16
12
|
componentId: "sc-mg8442-2"
|
|
17
|
-
})(["padding:0 8px;&:hover{", "{color:", ";}", "{color:", ";}}"], Label,
|
|
18
|
-
|
|
19
|
-
}, IconWrapper, function (props) {
|
|
20
|
-
return props.theme.palette['blue-600'];
|
|
21
|
-
});
|
|
22
|
-
export var ContentWrapper = styled.div.withConfig({
|
|
13
|
+
})(["padding:0 8px;&:hover{", "{color:", ";}", "{color:", ";}}"], Label, (props) => props.theme.palette["blue-600"], IconWrapper, (props) => props.theme.palette["blue-600"]);
|
|
14
|
+
const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
23
15
|
displayName: "BackActionstyles__ContentWrapper",
|
|
24
16
|
componentId: "sc-mg8442-3"
|
|
25
|
-
})(["padding:8px 0;display:flex;align-items:center;cursor:pointer;"]);
|
|
17
|
+
})(["padding:8px 0;display:flex;align-items:center;cursor:pointer;"]);
|
|
18
|
+
export {
|
|
19
|
+
BackActionWrapper,
|
|
20
|
+
ContentWrapper,
|
|
21
|
+
IconWrapper,
|
|
22
|
+
Label
|
|
23
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BottomActionProps } from './BottomAction.types';
|
|
3
3
|
export declare const BottomAction: ({ onClickAction, children, icon, }: BottomActionProps) => React.JSX.Element;
|
|
4
4
|
export default BottomAction;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Icon from
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Icon from "@synerise/ds-icon";
|
|
3
|
+
import { BottomAction as BottomAction$1, IconWrapper, TextWrapper } from "./BottomAction.styles.js";
|
|
4
|
+
const BottomAction = ({
|
|
5
|
+
onClickAction,
|
|
6
|
+
children,
|
|
7
|
+
icon
|
|
8
|
+
}) => /* @__PURE__ */ jsxs(BottomAction$1, { onClick: onClickAction, children: [
|
|
9
|
+
icon && /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: icon }) }),
|
|
10
|
+
/* @__PURE__ */ jsx(TextWrapper, { children })
|
|
11
|
+
] });
|
|
12
|
+
export {
|
|
13
|
+
BottomAction,
|
|
14
|
+
BottomAction as default
|
|
13
15
|
};
|
|
14
|
-
export default BottomAction;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export declare const IconWrapper: import(
|
|
2
|
-
export declare const TextWrapper: import(
|
|
3
|
-
export declare const BottomAction: import(
|
|
1
|
+
export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const TextWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const BottomAction: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,21 +1,18 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "BottomActionstyles__IconWrapper",
|
|
4
4
|
componentId: "sc-rp021x-0"
|
|
5
|
-
})(["margin-right:4px;svg{fill:", ";}"],
|
|
6
|
-
|
|
7
|
-
});
|
|
8
|
-
export var TextWrapper = styled.div.withConfig({
|
|
5
|
+
})(["margin-right:4px;svg{fill:", ";}"], (props) => props.theme.palette["grey-600"]);
|
|
6
|
+
const TextWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
7
|
displayName: "BottomActionstyles__TextWrapper",
|
|
10
8
|
componentId: "sc-rp021x-1"
|
|
11
9
|
})(["line-height:12px;"]);
|
|
12
|
-
|
|
10
|
+
const BottomAction = /* @__PURE__ */ styled.div.withConfig({
|
|
13
11
|
displayName: "BottomActionstyles__BottomAction",
|
|
14
12
|
componentId: "sc-rp021x-2"
|
|
15
|
-
})(["background-color:", ";padding:0 16px;height:52px;display:flex;align-items:center;color:", ";font-weight:500;border-width:1px 0 0 0;border-color:", ";border-style:solid;margin-top:8px;cursor:pointer;"],
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
});
|
|
13
|
+
})(["background-color:", ";padding:0 16px;height:52px;display:flex;align-items:center;color:", ";font-weight:500;border-width:1px 0 0 0;border-color:", ";border-style:solid;margin-top:8px;cursor:pointer;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-100"]);
|
|
14
|
+
export {
|
|
15
|
+
BottomAction,
|
|
16
|
+
IconWrapper,
|
|
17
|
+
TextWrapper
|
|
18
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BreadcrumbProps } from './Breadcrumb.types';
|
|
3
3
|
export declare const Breadcrumb: ({ path, disabled, highlight, description, onPathClick, compact, startWithArrow, gradientOverlap, highlightActivePath, className, prefixel, isNavigation, ...rest }: BreadcrumbProps) => React.JSX.Element;
|
|
4
4
|
export default Breadcrumb;
|