@sitecore/sc-contenthub-blok 0.0.68 → 0.0.70
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/dist/Components/BlokBadge/BlokBadge.d.ts +1 -0
- package/dist/Components/BlokBadge/BlokBadge.js +32 -3
- package/dist/Components/BlokBadge/BlokBadge.js.map +1 -1
- package/dist/Components/BlokBadge/BlokBadge.stories.js +1 -1
- package/dist/Components/BlokBadge/BlokBadge.stories.js.map +1 -1
- package/dist/Components/BlokButtonSelect/BlokButtonSelect.stories.d.ts +5 -0
- package/dist/Components/BlokButtonSelect/BlokButtonSelect.stories.js +3 -3
- package/dist/Components/BlokButtonSelect/BlokButtonSelect.stories.js.map +1 -1
- package/dist/Components/BlokSearchBox/BlokSearchBox.d.ts +40 -1
- package/dist/Components/BlokSearchBox/BlokSearchBox.js +120 -94
- package/dist/Components/BlokSearchBox/BlokSearchBox.js.map +1 -1
- package/dist/Components/BlokSearchBox/BlokSearchBox.spec.js +23 -4
- package/dist/Components/BlokSearchBox/BlokSearchBox.spec.js.map +1 -1
- package/dist/Components/BlokSearchBox/BlokSearchBox.stories.js +16 -2
- package/dist/Components/BlokSearchBox/BlokSearchBox.stories.js.map +1 -1
- package/esm/Components/BlokBadge/BlokBadge.js +33 -4
- package/esm/Components/BlokBadge/BlokBadge.js.map +1 -1
- package/esm/Components/BlokSearchBox/BlokSearchBox.js +121 -95
- package/esm/Components/BlokSearchBox/BlokSearchBox.js.map +1 -1
- package/package.json +1 -1
|
@@ -19,9 +19,10 @@ const classes = {
|
|
|
19
19
|
gap: "0.5rem",
|
|
20
20
|
alignItems: "center",
|
|
21
21
|
whiteSpace: "nowrap",
|
|
22
|
-
textOverflow: "ellipsis",
|
|
23
22
|
overflow: "hidden",
|
|
23
|
+
textOverflow: "ellipsis",
|
|
24
24
|
maxWidth: "100%",
|
|
25
|
+
position: "relative",
|
|
25
26
|
"> span": {
|
|
26
27
|
maxWidth: "100%",
|
|
27
28
|
whiteSpace: "nowrap",
|
|
@@ -62,8 +63,36 @@ const classes = {
|
|
|
62
63
|
pointerCursor: (0, css_1.css)({
|
|
63
64
|
cursor: "pointer",
|
|
64
65
|
}),
|
|
66
|
+
absoluteCount: (0, css_1.css)({
|
|
67
|
+
position: "absolute",
|
|
68
|
+
right: "-8px",
|
|
69
|
+
top: 0,
|
|
70
|
+
borderRadius: Foundations_1.borderRadiusFull,
|
|
71
|
+
padding: "2px",
|
|
72
|
+
fontSize: 10,
|
|
73
|
+
fontWeight: Foundations_1.fontWeightBold,
|
|
74
|
+
lineHeight: 1,
|
|
75
|
+
zIndex: 10,
|
|
76
|
+
minWidth: 14,
|
|
77
|
+
textAlign: "center",
|
|
78
|
+
fontStyle: "normal",
|
|
79
|
+
backgroundColor: "inherit",
|
|
80
|
+
}),
|
|
81
|
+
count: (0, css_1.css)({
|
|
82
|
+
borderRadius: Foundations_1.borderRadiusFull,
|
|
83
|
+
padding: "2px",
|
|
84
|
+
fontSize: 10,
|
|
85
|
+
fontWeight: Foundations_1.fontWeightBold,
|
|
86
|
+
lineHeight: 1,
|
|
87
|
+
zIndex: 10,
|
|
88
|
+
minWidth: 14,
|
|
89
|
+
textAlign: "center",
|
|
90
|
+
fontStyle: "normal",
|
|
91
|
+
backgroundColor: Foundations_1.blackAlpha[200],
|
|
92
|
+
}),
|
|
93
|
+
iconOnlyBadge: (0, css_1.css)({ overflow: "visible" }),
|
|
65
94
|
};
|
|
66
|
-
const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, allowMultiline = false, ...extraProps }) => {
|
|
95
|
+
const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, allowMultiline = false, count, ...extraProps }) => {
|
|
67
96
|
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
|
|
68
97
|
const toggleExpanded = (0, react_1.useCallback)((event) => {
|
|
69
98
|
event.preventDefault();
|
|
@@ -81,7 +110,7 @@ const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandL
|
|
|
81
110
|
color: Foundations_1.colorMap[colorScheme]?.[800] ?? Foundations_1.neutral[800],
|
|
82
111
|
};
|
|
83
112
|
}, [colorScheme]);
|
|
84
|
-
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.badge, !children && iconName ? classes.badgeIconOnly : undefined, allowMultiline && classes.badgeMultiline, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children })] }));
|
|
113
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.badge, !children && classes.iconOnlyBadge, !children && iconName ? classes.badgeIconOnly : undefined, allowMultiline && classes.badgeMultiline, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children }), count && ((0, jsx_runtime_1.jsx)("span", { className: children ? classes.count : classes.absoluteCount, children: count }))] }));
|
|
85
114
|
};
|
|
86
115
|
exports.BlokBadge = BlokBadge;
|
|
87
116
|
//# sourceMappingURL=BlokBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAQe;AAEf,
|
|
1
|
+
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ exports.Badges = {
|
|
|
25
25
|
controls: { disable: true, expanded: false },
|
|
26
26
|
options: { showPanel: false },
|
|
27
27
|
},
|
|
28
|
-
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "ai", "data-testid": "ai", children: "AI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink" })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, children: "With allow multiline Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, expandedContent: "Long expanded text. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nis", children: "Normal collapsed text" }) }) })] })),
|
|
28
|
+
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", count: 3, children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "ai", "data-testid": "ai", children: "AI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", count: 3, children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink", count: 3 })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, children: "With allow multiline Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, expandedContent: "Long expanded text. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nis", children: "Normal collapsed text" }) }) })] })),
|
|
29
29
|
};
|
|
30
30
|
exports.PlayGround = {
|
|
31
31
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,2CAA6D;AAE7D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAIF,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,qBAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,MAAM,GAAU;IAC3B,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC5C,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;KAC9B;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAE,SAAS,wBAAqB,EACtD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,
|
|
1
|
+
{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,4 +5,9 @@ type ComponentProps = PropsWithChildren<BlokButtonSelectProps<string, string>>;
|
|
|
5
5
|
declare const meta: Meta<ComponentProps>;
|
|
6
6
|
export default meta;
|
|
7
7
|
type Story = StoryObj<ComponentProps>;
|
|
8
|
+
export declare const optionsWithIcons: Array<{
|
|
9
|
+
icon: string;
|
|
10
|
+
id: number;
|
|
11
|
+
label: string;
|
|
12
|
+
}>;
|
|
8
13
|
export declare const BlokButtonSelectExamples: Story;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BlokButtonSelectExamples = void 0;
|
|
3
|
+
exports.BlokButtonSelectExamples = exports.optionsWithIcons = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const css_1 = require("@emotion/css");
|
|
6
6
|
const CoreComponents_1 = require("../../Components/CoreComponents");
|
|
@@ -36,7 +36,7 @@ const manyOptions = [
|
|
|
36
36
|
{ label: "Option 7", value: "7" },
|
|
37
37
|
{ label: "Option 8", value: "8" },
|
|
38
38
|
];
|
|
39
|
-
|
|
39
|
+
exports.optionsWithIcons = [
|
|
40
40
|
{
|
|
41
41
|
icon: "m-icon-view-sequential-outline",
|
|
42
42
|
id: 0,
|
|
@@ -54,6 +54,6 @@ exports.BlokButtonSelectExamples = {
|
|
|
54
54
|
controls: { disable: true, expanded: false },
|
|
55
55
|
options: { showPanel: false },
|
|
56
56
|
},
|
|
57
|
-
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disabled item" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "None value selectable" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "No value selected" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example3", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Search box" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example4", options: manyOptions, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With icons on the items" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example5", options: optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", value: optionsWithIcons[0], showIconAndText: true, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Show only icon on the button" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example6", options: optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, value: optionsWithIcons[0], showIconAndText: false, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Custom color and variant" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Small size" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", size: "small", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Large size" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", size: "large", searchMessage: "Search", clearMessage: "Clear" }) })] })] })),
|
|
57
|
+
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disabled item" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "None value selectable" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "No value selected" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example3", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Search box" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example4", options: manyOptions, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With icons on the items" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example5", options: exports.optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", value: exports.optionsWithIcons[0], showIconAndText: true, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Show only icon on the button" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example6", options: exports.optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, value: exports.optionsWithIcons[0], showIconAndText: false, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Custom color and variant" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Small size" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", size: "small", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Large size" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], colorScheme: "info", variant: "solid", size: "large", searchMessage: "Search", clearMessage: "Clear" }) })] })] })),
|
|
58
58
|
};
|
|
59
59
|
//# sourceMappingURL=BlokButtonSelect.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokButtonSelect.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokButtonSelect/BlokButtonSelect.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,oEAA6D;AAE7D,yDAA6E;AAE7E,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAIF,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mCAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGpB,MAAM,OAAO,GAAkC;IAC7C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;CAClC,CAAC;AAEF,MAAM,WAAW,GAAkC;IACjD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;CAClC,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokButtonSelect.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokButtonSelect/BlokButtonSelect.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import { ClipboardEventHandler, KeyboardEvent } from "react";
|
|
1
|
+
import { ClipboardEventHandler, KeyboardEvent, type ReactNode } from "react";
|
|
2
2
|
import { Optional } from "../../Foundations/utils";
|
|
3
3
|
export declare const SEARCH_BOX_MAX_WIDTH = 500;
|
|
4
4
|
export declare const SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
|
|
5
5
|
export declare const SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS = 1000;
|
|
6
6
|
export declare const DEFAULT_SEARCH_BOX_HEIGHT = "36px";
|
|
7
|
+
export interface BlokSearchBoxSlots {
|
|
8
|
+
slot1?: ReactNode;
|
|
9
|
+
slot2?: ReactNode;
|
|
10
|
+
}
|
|
7
11
|
export interface BlokSearchBoxProps {
|
|
8
12
|
/**
|
|
9
13
|
* Callback when typing into the searchBox.
|
|
@@ -101,6 +105,41 @@ export interface BlokSearchBoxProps {
|
|
|
101
105
|
* Indicates if the searchBox should allow multiple lines.
|
|
102
106
|
*/
|
|
103
107
|
allowMultipleLines?: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Slots for rendering custom content in different parts of the search box.
|
|
110
|
+
*/
|
|
111
|
+
slots?: BlokSearchBoxSlots;
|
|
112
|
+
/**
|
|
113
|
+
* Indicates if the searchBox should have a limited width.
|
|
114
|
+
*/
|
|
115
|
+
hasLimitedWidth?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* When true, the multiline search box will expand and overlay content below it.
|
|
118
|
+
* When false, it will push content down as it expands.
|
|
119
|
+
*/
|
|
120
|
+
expandOverContent?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* Icon to show in the search button.
|
|
123
|
+
*/
|
|
124
|
+
searchIcon?: string;
|
|
125
|
+
/**
|
|
126
|
+
* An optional search icon image to show in the search button instead of a normal icon (e.g. for AI search).
|
|
127
|
+
*/
|
|
128
|
+
searchIconImage?: string;
|
|
129
|
+
/**
|
|
130
|
+
* Indicates if the searchBox should be shown with specific AI styles.
|
|
131
|
+
*/
|
|
132
|
+
applyAiStyles?: boolean;
|
|
133
|
+
/**
|
|
134
|
+
* A function to handle pasted text.
|
|
135
|
+
* @param text
|
|
136
|
+
*/
|
|
137
|
+
handlePastedText?: (pastedText: string, searchBoxValue: string) => string;
|
|
138
|
+
/**
|
|
139
|
+
* Indicates if the searchBox should show a character counter.
|
|
140
|
+
* For this a maxNumberOfCharacters prop is required.
|
|
141
|
+
*/
|
|
142
|
+
showCounter?: boolean;
|
|
104
143
|
}
|
|
105
144
|
export declare const truncateString: (str: string, maxChars: number, maxWords: Optional<number>) => string;
|
|
106
145
|
export declare const BlokSearchBox: import("react").ForwardRefExoticComponent<BlokSearchBoxProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -36,14 +36,6 @@ const classes = {
|
|
|
36
36
|
boxShadow: `inset 0 0 0 1px ${Foundations_1.blackAlpha[500]}`,
|
|
37
37
|
},
|
|
38
38
|
}),
|
|
39
|
-
searchBoxWrapper: (0, css_1.css)({
|
|
40
|
-
position: "relative",
|
|
41
|
-
borderRadius: `${Foundations_1.borderRadiusMd} !important`,
|
|
42
|
-
width: `${exports.SEARCH_BOX_MAX_WIDTH}px`,
|
|
43
|
-
maxWidth: "100%",
|
|
44
|
-
minHeight: "41px",
|
|
45
|
-
zIndex: 10,
|
|
46
|
-
}),
|
|
47
39
|
searchBoxInDropdown: (0, css_1.css)({
|
|
48
40
|
margin: "0 0.5rem 0.5rem 0.5rem",
|
|
49
41
|
position: "sticky !important",
|
|
@@ -54,35 +46,61 @@ const classes = {
|
|
|
54
46
|
gutterBottom: (0, css_1.css)({
|
|
55
47
|
marginBottom: Foundations_1.baseSpacing * 2,
|
|
56
48
|
}),
|
|
57
|
-
|
|
49
|
+
searchBoxOuterWrapper: (0, css_1.css)({
|
|
50
|
+
position: "relative",
|
|
51
|
+
minHeight: "41px",
|
|
52
|
+
}),
|
|
53
|
+
withMaxWidth: (0, css_1.css)({ width: `${exports.SEARCH_BOX_MAX_WIDTH}px` }),
|
|
54
|
+
searchBoxInnerWrapper: (0, css_1.css)({
|
|
55
|
+
display: "flex",
|
|
56
|
+
flexDirection: utils_1.isLTR ? "row" : "row-reverse",
|
|
57
|
+
}),
|
|
58
|
+
searchBoxWrapper: (0, css_1.css)({
|
|
59
|
+
borderRadius: `${Foundations_1.borderRadiusMd} !important`,
|
|
60
|
+
width: "100%",
|
|
61
|
+
maxWidth: "100%",
|
|
62
|
+
zIndex: 10,
|
|
58
63
|
border: `1px solid ${Foundations_1.inputBorderColor}`,
|
|
59
|
-
padding: "9.5px 40px",
|
|
60
|
-
lineHeight: 1.3,
|
|
61
64
|
backgroundColor: "white",
|
|
62
|
-
borderRadius: `${Foundations_1.baseBorderRadius} !important`,
|
|
63
|
-
width: "100%",
|
|
64
|
-
minHeight: exports.DEFAULT_SEARCH_BOX_HEIGHT,
|
|
65
|
-
height: exports.DEFAULT_SEARCH_BOX_HEIGHT,
|
|
66
|
-
resize: "none",
|
|
67
|
-
overflow: "hidden",
|
|
68
|
-
color: Foundations_1.textColorDefault,
|
|
69
|
-
fontSize: Foundations_1.fontSizeBase,
|
|
70
|
-
fontFamily: Foundations_1.fontFamilyBase,
|
|
71
|
-
left: 0,
|
|
72
|
-
"right:": 0,
|
|
73
|
-
top: 0,
|
|
74
65
|
"&:hover": {
|
|
75
66
|
backgroundColor: "white",
|
|
76
67
|
border: `1px solid ${Foundations_1.inputBorderHoveColor}`,
|
|
77
68
|
color: Foundations_1.textColorDefault,
|
|
78
69
|
},
|
|
79
|
-
"&:focus, &:focus-visible": {
|
|
70
|
+
"&:focus, &:focus-visible, &:focus-within": {
|
|
80
71
|
backgroundColor: "white !important",
|
|
81
72
|
border: `1px solid ${Foundations_1.focusColor} !important`,
|
|
82
73
|
color: Foundations_1.textColorDefault,
|
|
83
74
|
outline: 0,
|
|
84
75
|
boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
|
|
85
76
|
},
|
|
77
|
+
}),
|
|
78
|
+
aiSearchBoxWrapper: (0, css_1.css)({
|
|
79
|
+
"&:hover": {
|
|
80
|
+
background: `linear-gradient(white, white) padding-box, linear-gradient(to top right, ${Foundations_1.aiGradientColor1[500]}, ${Foundations_1.aiGradientColor2[500]}) border-box`,
|
|
81
|
+
border: `1px solid transparent !important`,
|
|
82
|
+
},
|
|
83
|
+
"&:focus, &:focus-visible, &:focus-within": {
|
|
84
|
+
background: `linear-gradient(white, white) padding-box, linear-gradient(to top right, ${Foundations_1.aiGradientColor1[600]}, ${Foundations_1.aiGradientColor2[600]}) border-box`,
|
|
85
|
+
border: `1px solid transparent !important`,
|
|
86
|
+
},
|
|
87
|
+
}),
|
|
88
|
+
searchBoxFixedHeight: (0, css_1.css)({
|
|
89
|
+
height: exports.DEFAULT_SEARCH_BOX_HEIGHT,
|
|
90
|
+
}),
|
|
91
|
+
searchBox: (0, css_1.css)({
|
|
92
|
+
padding: "9.5px 0",
|
|
93
|
+
margin: "0 6px",
|
|
94
|
+
border: "none",
|
|
95
|
+
outline: "none",
|
|
96
|
+
lineHeight: 1.3,
|
|
97
|
+
width: "100%",
|
|
98
|
+
minHeight: exports.DEFAULT_SEARCH_BOX_HEIGHT,
|
|
99
|
+
resize: "none",
|
|
100
|
+
overflow: "hidden",
|
|
101
|
+
color: Foundations_1.textColorDefault,
|
|
102
|
+
fontSize: Foundations_1.fontSizeBase,
|
|
103
|
+
fontFamily: Foundations_1.fontFamilyBase,
|
|
86
104
|
"&::placeholder": {
|
|
87
105
|
color: Foundations_1.textColorDisabled,
|
|
88
106
|
},
|
|
@@ -91,43 +109,8 @@ const classes = {
|
|
|
91
109
|
whiteSpace: "nowrap",
|
|
92
110
|
textOverflow: "ellipsis",
|
|
93
111
|
overflow: "hidden",
|
|
94
|
-
paddingRight: "80px",
|
|
95
112
|
}),
|
|
96
113
|
absolute: (0, css_1.css)({ position: "absolute" }),
|
|
97
|
-
textHider: (0, css_1.css)({
|
|
98
|
-
position: "absolute",
|
|
99
|
-
top: 2,
|
|
100
|
-
right: utils_1.isLTR ? "1px" : "auto",
|
|
101
|
-
left: utils_1.isRTL ? "1px" : "auto",
|
|
102
|
-
pointerEvents: "none",
|
|
103
|
-
width: 40,
|
|
104
|
-
height: 30,
|
|
105
|
-
backgroundColor: "white",
|
|
106
|
-
borderRadius: `${Foundations_1.baseBorderRadius} !important`,
|
|
107
|
-
}),
|
|
108
|
-
textHider2: (0, css_1.css)({
|
|
109
|
-
left: utils_1.isLTR ? "1px" : "auto",
|
|
110
|
-
right: utils_1.isRTL ? "1px" : "auto",
|
|
111
|
-
position: "absolute",
|
|
112
|
-
width: 35,
|
|
113
|
-
".searchBoxActive &": {
|
|
114
|
-
left: utils_1.isLTR ? 2 : "auto",
|
|
115
|
-
right: utils_1.isRTL ? 2 : "auto",
|
|
116
|
-
},
|
|
117
|
-
}),
|
|
118
|
-
searchButton: (0, css_1.css)({
|
|
119
|
-
position: "absolute",
|
|
120
|
-
top: 2,
|
|
121
|
-
left: utils_1.isLTR ? "3.5px" : "auto",
|
|
122
|
-
right: utils_1.isRTL ? "3.5px" : "auto",
|
|
123
|
-
cursor: "pointer",
|
|
124
|
-
}),
|
|
125
|
-
clearSearchButton: (0, css_1.css)({
|
|
126
|
-
position: "absolute",
|
|
127
|
-
top: 2,
|
|
128
|
-
right: utils_1.isLTR ? "3.5px" : "auto",
|
|
129
|
-
left: utils_1.isRTL ? "3.5px" : "auto",
|
|
130
|
-
}),
|
|
131
114
|
insideDropdown: (0, css_1.css)({
|
|
132
115
|
"&:focus, &:focus-visible": {
|
|
133
116
|
"& ~[class*=textHider]": {
|
|
@@ -143,6 +126,18 @@ const classes = {
|
|
|
143
126
|
pointerEvents: "none",
|
|
144
127
|
},
|
|
145
128
|
}),
|
|
129
|
+
button: (0, css_1.css)({
|
|
130
|
+
margin: "2px 3.5px",
|
|
131
|
+
}),
|
|
132
|
+
aiImage: (0, css_1.css)({ margin: "6.5px 8px 0 8px", width: 24, height: 24 }),
|
|
133
|
+
searchIconImage: (0, css_1.css)({ width: "22px", height: "22px" }),
|
|
134
|
+
counter: (0, css_1.css)({
|
|
135
|
+
fontSize: Foundations_1.fontSizeSmall,
|
|
136
|
+
color: Foundations_1.semanticTokens.subtleText.default,
|
|
137
|
+
whiteSpace: "nowrap",
|
|
138
|
+
marginTop: "8px",
|
|
139
|
+
}),
|
|
140
|
+
hidden: (0, css_1.css)({ visibility: "hidden", pointerEvents: "none" }),
|
|
146
141
|
};
|
|
147
142
|
const stickySearchBoxWrapper = (stickyTopPosition, stickySearchBoxBackground) => {
|
|
148
143
|
return (0, css_1.css)({
|
|
@@ -181,12 +176,14 @@ const stickySearchBoxWrapper = (stickyTopPosition, stickySearchBoxBackground) =>
|
|
|
181
176
|
});
|
|
182
177
|
};
|
|
183
178
|
// Helper function to adjust the height of the textarea.
|
|
184
|
-
const adjustTextareaHeight = (
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
const newHeight =
|
|
188
|
-
|
|
189
|
-
|
|
179
|
+
const adjustTextareaHeight = (textareaElement, containerElement, shouldApplyHeightLimit) => {
|
|
180
|
+
textareaElement.style.height = exports.DEFAULT_SEARCH_BOX_HEIGHT;
|
|
181
|
+
containerElement.style.width = `${containerElement.clientWidth}px`;
|
|
182
|
+
const newHeight = shouldApplyHeightLimit
|
|
183
|
+
? Math.min(textareaElement.scrollHeight - 1, exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT)
|
|
184
|
+
: textareaElement.scrollHeight - 1;
|
|
185
|
+
textareaElement.style.height = `${newHeight}px`;
|
|
186
|
+
textareaElement.style.overflow =
|
|
190
187
|
newHeight === exports.SEARCH_BOX_MULTI_LINE_MAX_HEIGHT ? "auto" : "hidden";
|
|
191
188
|
};
|
|
192
189
|
// Helper function to reset the textarea styles.
|
|
@@ -207,45 +204,47 @@ const truncateString = (str, maxChars, maxWords) => {
|
|
|
207
204
|
return result;
|
|
208
205
|
};
|
|
209
206
|
exports.truncateString = truncateString;
|
|
210
|
-
exports.BlokSearchBox = (0, react_1.forwardRef)(function BlokSearchBox({ onSearch, onClearSearch, onEnterPress, value:
|
|
211
|
-
const [value, setValue] = (0, react_1.useState)(
|
|
207
|
+
exports.BlokSearchBox = (0, react_1.forwardRef)(function BlokSearchBox({ onSearch, onClearSearch, onEnterPress, value: externalValue, className, placeholder, cancelOnEscape = true, isSticky = false, stickyTopPosition = "0", isInsideDropdown = false, isDisabled = false, hasGutterBottom = true, stickySearchBoxBackground = Foundations_1.bodyBackgroundColor, shouldShowScrolledStatus = false, clearButtonClassName, allowKeyPressPropagation = false, handleKeyPress, onPaste, maxNumberOfCharacters = exports.SEARCH_BOX_MAX_NUMBER_OF_CHARACTERS, maxNumberOfWords, clearMessage = "Clear", searchMessage = "Search", allowMultipleLines = false, hasLimitedWidth = true, expandOverContent = true, slots, searchIcon = "m-icon-magnify", searchIconImage, applyAiStyles = false, handlePastedText, showCounter = false, }, ref) {
|
|
208
|
+
const [value, setValue] = (0, react_1.useState)(externalValue);
|
|
212
209
|
const [isActive, setIsActive] = (0, react_1.useState)(false);
|
|
213
210
|
const searchBoxRef = (0, react_1.useRef)(null);
|
|
214
211
|
const searchBoxWrapperRef = (0, react_1.useRef)(null);
|
|
215
|
-
const [allowMultiLine, setAllowMultiLine] = (0, react_1.useState)(
|
|
212
|
+
const [allowMultiLine, setAllowMultiLine] = (0, react_1.useState)(allowMultipleLines && !expandOverContent);
|
|
213
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
216
214
|
// Call search callback when typing into the searchBox.
|
|
217
215
|
const onChange = (0, react_1.useCallback)((e) => {
|
|
218
216
|
const searchValue = (0, exports.truncateString)(e.target.value, maxNumberOfCharacters, maxNumberOfWords);
|
|
219
217
|
setValue(searchValue);
|
|
220
218
|
onSearch?.(searchValue);
|
|
221
219
|
}, [maxNumberOfCharacters, maxNumberOfWords, onSearch]);
|
|
220
|
+
const processAndInsertPastedText = (0, react_1.useCallback)((pastedText, currentValue, cursorPos, selectionEnd) => {
|
|
221
|
+
let textToInsert = pastedText;
|
|
222
|
+
if (handlePastedText && typeof handlePastedText === "function") {
|
|
223
|
+
textToInsert = handlePastedText(pastedText, value);
|
|
224
|
+
}
|
|
225
|
+
const textBeforeCursor = currentValue.substring(0, cursorPos);
|
|
226
|
+
const textAfterCursor = currentValue.substring(selectionEnd);
|
|
227
|
+
return (0, exports.truncateString)(textBeforeCursor + textToInsert + textAfterCursor, maxNumberOfCharacters, maxNumberOfWords);
|
|
228
|
+
}, [handlePastedText, maxNumberOfCharacters, maxNumberOfWords, value]);
|
|
222
229
|
const handlePaste = (0, react_1.useCallback)((e) => {
|
|
223
230
|
e.preventDefault();
|
|
224
231
|
// Get pasted text from clipboard
|
|
225
232
|
const clipboardData = e.clipboardData;
|
|
226
233
|
const pastedText = clipboardData.getData("text");
|
|
227
|
-
// If the pasted text or the text box value contains a word immediately followed by an equal sign, format it as a single line.
|
|
228
|
-
const shouldFormatAsSingleLine = /\w+=/.test(pastedText) || /\w+=/.test(value);
|
|
229
|
-
// Format text on 1 line when needed.
|
|
230
|
-
const processedText = shouldFormatAsSingleLine
|
|
231
|
-
? pastedText.replaceAll(/\n|\r/g, " ").replace(/\s+/g, " ")
|
|
232
|
-
: pastedText;
|
|
233
234
|
// Get current input value and cursor position
|
|
234
235
|
const currentValue = e.currentTarget.value;
|
|
235
236
|
const cursorPos = e.currentTarget.selectionStart || 0;
|
|
236
|
-
|
|
237
|
-
const newValue =
|
|
238
|
-
processedText +
|
|
239
|
-
currentValue.substring(e.currentTarget.selectionEnd || cursorPos);
|
|
237
|
+
const selectionEnd = e.currentTarget.selectionEnd || cursorPos;
|
|
238
|
+
const newValue = processAndInsertPastedText(pastedText, currentValue, cursorPos, selectionEnd);
|
|
240
239
|
// Update the input value
|
|
241
240
|
setValue(newValue);
|
|
242
241
|
// Call onSearch with the new value
|
|
243
|
-
onSearch?.(
|
|
242
|
+
onSearch?.(newValue);
|
|
244
243
|
// If there's a custom onPaste handler, call it
|
|
245
244
|
if (onPaste) {
|
|
246
245
|
onPaste(e);
|
|
247
246
|
}
|
|
248
|
-
}, [
|
|
247
|
+
}, [onPaste, onSearch, processAndInsertPastedText]);
|
|
249
248
|
// Clear search value and call search callback.
|
|
250
249
|
const clearSearch = (0, react_1.useCallback)(() => {
|
|
251
250
|
setValue("");
|
|
@@ -307,16 +306,27 @@ exports.BlokSearchBox = (0, react_1.forwardRef)(function BlokSearchBox({ onSearc
|
|
|
307
306
|
if ((0, utils_2.isFunction)(onEnterPress)) {
|
|
308
307
|
onEnterPress();
|
|
309
308
|
}
|
|
310
|
-
}, className: classes.
|
|
309
|
+
}, size: "small", className: (0, css_1.cx)(classes.button), isDisabled: value === "", colorScheme: applyAiStyles ? "ai" : "neutral", children: searchIconImage ? ((0, jsx_runtime_1.jsx)("img", { alt: "search-icon", src: searchIconImage, className: classes.searchIconImage })) : ((0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: searchIcon })) }, "search") })), [
|
|
310
|
+
searchMessage,
|
|
311
|
+
value,
|
|
312
|
+
applyAiStyles,
|
|
313
|
+
searchIconImage,
|
|
314
|
+
searchIcon,
|
|
315
|
+
onEnterPress,
|
|
316
|
+
]);
|
|
311
317
|
const handleFocus = (0, react_1.useCallback)(() => {
|
|
318
|
+
setIsFocused(true);
|
|
312
319
|
if (!isInsideDropdown && allowMultipleLines) {
|
|
313
320
|
setAllowMultiLine(true);
|
|
314
321
|
}
|
|
315
322
|
}, [allowMultipleLines, isInsideDropdown]);
|
|
316
323
|
const handleBlur = (0, react_1.useCallback)(() => {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
324
|
+
setIsFocused(false);
|
|
325
|
+
if (expandOverContent) {
|
|
326
|
+
setAllowMultiLine(false);
|
|
327
|
+
}
|
|
328
|
+
}, [expandOverContent]);
|
|
329
|
+
const searchInput = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("textarea", { placeholder: placeholder || searchMessage, onChange: onChange, onBlur: handleBlur, onFocus: handleFocus, className: (0, css_1.cx)(classes.searchBox, expandOverContent ? classes.searchBoxFixedHeight : null, isActive ? classes.searchBoxActive : null, shouldShowScrolledStatus ? classes.scrolled : null, !allowMultiLine ? classes.searchBoxSingleLine : null, isInsideDropdown ? classes.insideDropdown : null, "custom-scrollbars"), "data-testid": "searchbox", ref: ref ?? searchBoxRef, value: value, tabIndex: 0, onKeyDown: onKeyPress, autoComplete: "off", disabled: isDisabled, onPaste: handlePaste, role: "search", spellCheck: true })), [
|
|
320
330
|
allowMultiLine,
|
|
321
331
|
handleBlur,
|
|
322
332
|
handleFocus,
|
|
@@ -324,38 +334,54 @@ exports.BlokSearchBox = (0, react_1.forwardRef)(function BlokSearchBox({ onSearc
|
|
|
324
334
|
isActive,
|
|
325
335
|
isDisabled,
|
|
326
336
|
isInsideDropdown,
|
|
327
|
-
isSticky,
|
|
328
337
|
onChange,
|
|
329
338
|
onKeyPress,
|
|
339
|
+
expandOverContent,
|
|
330
340
|
placeholder,
|
|
331
341
|
ref,
|
|
332
342
|
searchMessage,
|
|
333
343
|
shouldShowScrolledStatus,
|
|
334
344
|
value,
|
|
335
345
|
]);
|
|
336
|
-
const clearButton = (0, react_1.useMemo)(() =>
|
|
346
|
+
const clearButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: clearMessage, children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "clear-select-search", onClick: clearSearch, className: (0, css_1.cx)(classes.button, clearButtonClassName, value === "" ? classes.hidden : undefined), size: "small", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-close" }) }, "clear") })), [clearButtonClassName, clearSearch, clearMessage, value]);
|
|
337
347
|
(0, react_1.useEffect)(() => {
|
|
338
|
-
if (
|
|
348
|
+
if (externalValue === "") {
|
|
339
349
|
setValue("");
|
|
340
350
|
setIsActive(false);
|
|
341
351
|
}
|
|
342
352
|
else {
|
|
343
|
-
setValue(
|
|
353
|
+
setValue(externalValue);
|
|
344
354
|
}
|
|
345
|
-
}, [
|
|
355
|
+
}, [externalValue]);
|
|
346
356
|
// Adjust the height of the textarea based on its content.
|
|
347
357
|
(0, react_1.useEffect)(() => {
|
|
348
358
|
if (searchBoxRef.current && searchBoxWrapperRef.current) {
|
|
349
359
|
if (allowMultiLine) {
|
|
350
|
-
adjustTextareaHeight(searchBoxRef.current, searchBoxWrapperRef.current);
|
|
360
|
+
adjustTextareaHeight(searchBoxRef.current, searchBoxWrapperRef.current, expandOverContent);
|
|
351
361
|
}
|
|
352
362
|
else {
|
|
353
363
|
resetTextareaStyles(searchBoxRef.current, searchBoxWrapperRef.current);
|
|
354
364
|
}
|
|
355
365
|
}
|
|
356
|
-
}, [value, allowMultiLine]);
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
366
|
+
}, [value, allowMultiLine, expandOverContent]);
|
|
367
|
+
const counter = (0, react_1.useMemo)(() => {
|
|
368
|
+
if (showCounter && maxNumberOfCharacters && isFocused) {
|
|
369
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.counter), children: `${value?.length ?? 0} / ${maxNumberOfCharacters}` }));
|
|
370
|
+
}
|
|
371
|
+
return null;
|
|
372
|
+
}, [isFocused, maxNumberOfCharacters, showCounter, value?.length]);
|
|
373
|
+
const searchBoxContent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)("div", { className: classes.searchBoxInnerWrapper, children: [applyAiStyles && ((0, jsx_runtime_1.jsx)("img", { alt: "", src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-ai", className: classes.aiImage })), !applyAiStyles && searchButton, slots?.slot1, searchInput, counter, clearButton, applyAiStyles && searchButton] })), [
|
|
374
|
+
applyAiStyles,
|
|
375
|
+
clearButton,
|
|
376
|
+
counter,
|
|
377
|
+
searchButton,
|
|
378
|
+
searchInput,
|
|
379
|
+
slots?.slot1,
|
|
380
|
+
]);
|
|
381
|
+
return isInsideDropdown ? ((0, jsx_runtime_1.jsx)("li", { onKeyDown: checkKeyDown, onMouseUp: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), role: "menuitem", tabIndex: 0, className: (0, css_1.cx)(classes.searchBoxInDropdown), children: (0, jsx_runtime_1.jsx)("div", { role: "search", ref: searchBoxWrapperRef, className: (0, css_1.cx)(classes.searchBoxWrapper, classes.withMaxWidth, hasGutterBottom ? classes.gutterBottom : null), children: searchBoxContent }) })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.searchBoxOuterWrapper, hasLimitedWidth ? classes.withMaxWidth : null, hasGutterBottom ? classes.gutterBottom : null), ref: searchBoxWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.searchBoxWrapper, applyAiStyles ? classes.aiSearchBoxWrapper : null, allowMultiLine && !isSticky && expandOverContent
|
|
382
|
+
? classes.absolute
|
|
383
|
+
: null, isSticky
|
|
384
|
+
? stickySearchBoxWrapper(stickyTopPosition, stickySearchBoxBackground)
|
|
385
|
+
: null, isDisabled ? classes.disabled : null, isActive ? "searchBoxActive" : undefined, className), role: "search", children: [searchBoxContent, (0, jsx_runtime_1.jsx)("div", { "data-testid": "slot2", children: slots?.slot2 })] }) }));
|
|
360
386
|
});
|
|
361
387
|
//# sourceMappingURL=BlokSearchBox.js.map
|