@jars-labs/jars-components 1.0.5 → 1.0.6
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/Multiselect/Multiselect.d.ts.map +1 -1
- package/dist/index.esm.js +48 -29
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +48 -29
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -552,7 +552,7 @@ var Input = function (_a) {
|
|
|
552
552
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
553
553
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
554
554
|
var ErrorSection = t.useMemo(function () {
|
|
555
|
-
return holdSpace && (jsxRuntime.jsxs(core.Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsxRuntime.jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsxRuntime.jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: capitalizeFirstSentenceLetter(error) })] }));
|
|
555
|
+
return holdSpace && (jsxRuntime.jsxs(core.Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsxRuntime.jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsxRuntime.jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
556
556
|
}, [error]);
|
|
557
557
|
return (jsxRuntime.jsxs("div", { className: styles$k.container, children: [showLabel && (jsxRuntime.jsx("label", { className: classNames(styles$k.label, (_b = {},
|
|
558
558
|
_b[styles$k.labelError] = error && !isFocused,
|
|
@@ -1713,9 +1713,17 @@ pill
|
|
|
1713
1713
|
*/
|
|
1714
1714
|
var Multiselect = function (_a) {
|
|
1715
1715
|
var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
1716
|
-
var
|
|
1717
|
-
|
|
1718
|
-
|
|
1716
|
+
var dataKey = t.useMemo(function () { return data.map(function (o) { return o.value; }).join('_'); }, [data]);
|
|
1717
|
+
return (jsxRuntime.jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled }, dataKey));
|
|
1718
|
+
};
|
|
1719
|
+
/**
|
|
1720
|
+
* Private component that holds the local state (`temporaryOptions`)
|
|
1721
|
+
*/
|
|
1722
|
+
var MultiselectInternal = function (_a) {
|
|
1723
|
+
var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled;
|
|
1724
|
+
var _b = t.useState(data), temporaryOptions = _b[0], setTemporaryOptions = _b[1];
|
|
1725
|
+
var _c = t.useState(false), isFocused = _c[0], setIsFocused = _c[1];
|
|
1726
|
+
var _d = t.useState(false), isHovered = _d[0], setIsHovered = _d[1];
|
|
1719
1727
|
var hasSelectedOptions = temporaryOptions.some(function (option) { return option.selected; });
|
|
1720
1728
|
// Handlers
|
|
1721
1729
|
var handleOptionClick = function (option) {
|
|
@@ -1732,9 +1740,7 @@ var Multiselect = function (_a) {
|
|
|
1732
1740
|
closeDropdown();
|
|
1733
1741
|
};
|
|
1734
1742
|
var handleClear = function () {
|
|
1735
|
-
var newOptions = data.map(function (option) {
|
|
1736
|
-
return __assign(__assign({}, option), { selected: false });
|
|
1737
|
-
});
|
|
1743
|
+
var newOptions = data.map(function (option) { return (__assign(__assign({}, option), { selected: false })); });
|
|
1738
1744
|
setTemporaryOptions(newOptions);
|
|
1739
1745
|
};
|
|
1740
1746
|
var handleBlur = function () {
|
|
@@ -1743,30 +1749,43 @@ var Multiselect = function (_a) {
|
|
|
1743
1749
|
onBlur();
|
|
1744
1750
|
}
|
|
1745
1751
|
};
|
|
1752
|
+
var handleDeselect = function (optionId) {
|
|
1753
|
+
var newOptions = temporaryOptions.map(function (option) {
|
|
1754
|
+
if (option.value === optionId) {
|
|
1755
|
+
return __assign(__assign({}, option), { selected: false });
|
|
1756
|
+
}
|
|
1757
|
+
return option;
|
|
1758
|
+
});
|
|
1759
|
+
setTemporaryOptions(newOptions);
|
|
1760
|
+
onApply(newOptions);
|
|
1761
|
+
};
|
|
1746
1762
|
// Sections
|
|
1747
|
-
var PillListSection =
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
.
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
var
|
|
1763
|
+
var PillListSection = function (_a) {
|
|
1764
|
+
var store = _a.store;
|
|
1765
|
+
var selected = temporaryOptions.filter(function (option) { return option.selected; });
|
|
1766
|
+
return (jsxRuntime.jsx("div", { style: {
|
|
1767
|
+
display: 'flex',
|
|
1768
|
+
flexGrow: 1,
|
|
1769
|
+
gap: 8,
|
|
1770
|
+
alignItems: 'center',
|
|
1771
|
+
}, children: selected.length === 0 ? (jsxRuntime.jsx(Text, { variant: "s", children: store.dropdownOpened ? placeholder : label })) : (jsxRuntime.jsxs(core.Flex, { gap: 8, align: "center", wrap: "wrap", children: [selected.slice(0, 3).map(function (option) { return (jsxRuntime.jsxs("span", { className: multiselectStyles.pill, onClick: function (e) {
|
|
1772
|
+
handleOptionClick(option);
|
|
1773
|
+
e.stopPropagation();
|
|
1774
|
+
}, children: [jsxRuntime.jsx(Text, { variant: "xs", children: option.label }), jsxRuntime.jsx(core.ActionIcon, { variant: "transparent", onClick: function (e) {
|
|
1775
|
+
handleDeselect(option.value);
|
|
1776
|
+
e.stopPropagation();
|
|
1777
|
+
}, children: jsxRuntime.jsx(Close, { height: "20px", width: "20px" }) })] }, option.value)); }), selected.length > 3 && (jsxRuntime.jsx(Tooltip, { label: selected
|
|
1778
|
+
.slice(3)
|
|
1779
|
+
.map(function (option) { return option.label; })
|
|
1780
|
+
.join(', '), children: jsxRuntime.jsx("span", { className: multiselectStyles.pill, children: jsxRuntime.jsxs(Text, { variant: "xs", children: ["+ ", selected.length - 3] }) }, selected.length) }))] })) }));
|
|
1781
|
+
};
|
|
1782
|
+
var ErrorSection = (jsxRuntime.jsxs(core.Flex, { className: styles$k.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsxRuntime.jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsxRuntime.jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
|
|
1783
|
+
var DescriptionSection = (jsxRuntime.jsx(core.Flex, { className: styles$k.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsxRuntime.jsx(Text, { variant: "xs", children: description }) }));
|
|
1767
1784
|
var options = t.useMemo(function () {
|
|
1768
1785
|
return temporaryOptions.map(function (option) {
|
|
1769
|
-
return (jsxRuntime.jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled,
|
|
1786
|
+
return (jsxRuntime.jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function (e) {
|
|
1787
|
+
e.stopPropagation();
|
|
1788
|
+
}, children: jsxRuntime.jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
|
|
1770
1789
|
handleOptionClick(option);
|
|
1771
1790
|
e.stopPropagation();
|
|
1772
1791
|
}, w: "100%" }, option.value) }, option.value));
|
|
@@ -1780,7 +1799,7 @@ var Multiselect = function (_a) {
|
|
|
1780
1799
|
_a)), children: label })), jsxRuntime.jsxs(core.Box, { className: classNames(styles$k.input, multiselectStyles.input, (_b = {},
|
|
1781
1800
|
_b[styles$k.inputError] = error && !isFocused,
|
|
1782
1801
|
_b[multiselectStyles.disabled] = disabled,
|
|
1783
|
-
_b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); },
|
|
1802
|
+
_b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsxRuntime.jsx(PillListSection, { store: store }), jsxRuntime.jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
|
|
1784
1803
|
} }));
|
|
1785
1804
|
};
|
|
1786
1805
|
|