@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../src/Multiselect/Multiselect.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,sBAAsB,EAAE,CAAA;IAC9B,OAAO,EAAE,CAAC,OAAO,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,WAAW,iFASrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../src/Multiselect/Multiselect.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,sBAAsB,EAAE,CAAA;IAC9B,OAAO,EAAE,CAAC,OAAO,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,WAAW,iFASrB,gBAAgB,4CAgBlB,CAAA"}
|
package/dist/index.esm.js
CHANGED
|
@@ -550,7 +550,7 @@ var Input = function (_a) {
|
|
|
550
550
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
551
551
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
552
552
|
var ErrorSection = useMemo(function () {
|
|
553
|
-
return holdSpace && (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: capitalizeFirstSentenceLetter(error) })] }));
|
|
553
|
+
return holdSpace && (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
554
554
|
}, [error]);
|
|
555
555
|
return (jsxs("div", { className: styles$k.container, children: [showLabel && (jsx("label", { className: classNames(styles$k.label, (_b = {},
|
|
556
556
|
_b[styles$k.labelError] = error && !isFocused,
|
|
@@ -1711,9 +1711,17 @@ pill
|
|
|
1711
1711
|
*/
|
|
1712
1712
|
var Multiselect = function (_a) {
|
|
1713
1713
|
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;
|
|
1714
|
-
var
|
|
1715
|
-
|
|
1716
|
-
|
|
1714
|
+
var dataKey = useMemo(function () { return data.map(function (o) { return o.value; }).join('_'); }, [data]);
|
|
1715
|
+
return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled }, dataKey));
|
|
1716
|
+
};
|
|
1717
|
+
/**
|
|
1718
|
+
* Private component that holds the local state (`temporaryOptions`)
|
|
1719
|
+
*/
|
|
1720
|
+
var MultiselectInternal = function (_a) {
|
|
1721
|
+
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;
|
|
1722
|
+
var _b = useState(data), temporaryOptions = _b[0], setTemporaryOptions = _b[1];
|
|
1723
|
+
var _c = useState(false), isFocused = _c[0], setIsFocused = _c[1];
|
|
1724
|
+
var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
|
|
1717
1725
|
var hasSelectedOptions = temporaryOptions.some(function (option) { return option.selected; });
|
|
1718
1726
|
// Handlers
|
|
1719
1727
|
var handleOptionClick = function (option) {
|
|
@@ -1730,9 +1738,7 @@ var Multiselect = function (_a) {
|
|
|
1730
1738
|
closeDropdown();
|
|
1731
1739
|
};
|
|
1732
1740
|
var handleClear = function () {
|
|
1733
|
-
var newOptions = data.map(function (option) {
|
|
1734
|
-
return __assign(__assign({}, option), { selected: false });
|
|
1735
|
-
});
|
|
1741
|
+
var newOptions = data.map(function (option) { return (__assign(__assign({}, option), { selected: false })); });
|
|
1736
1742
|
setTemporaryOptions(newOptions);
|
|
1737
1743
|
};
|
|
1738
1744
|
var handleBlur = function () {
|
|
@@ -1741,30 +1747,43 @@ var Multiselect = function (_a) {
|
|
|
1741
1747
|
onBlur();
|
|
1742
1748
|
}
|
|
1743
1749
|
};
|
|
1750
|
+
var handleDeselect = function (optionId) {
|
|
1751
|
+
var newOptions = temporaryOptions.map(function (option) {
|
|
1752
|
+
if (option.value === optionId) {
|
|
1753
|
+
return __assign(__assign({}, option), { selected: false });
|
|
1754
|
+
}
|
|
1755
|
+
return option;
|
|
1756
|
+
});
|
|
1757
|
+
setTemporaryOptions(newOptions);
|
|
1758
|
+
onApply(newOptions);
|
|
1759
|
+
};
|
|
1744
1760
|
// Sections
|
|
1745
|
-
var PillListSection =
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
var
|
|
1761
|
+
var PillListSection = function (_a) {
|
|
1762
|
+
var store = _a.store;
|
|
1763
|
+
var selected = temporaryOptions.filter(function (option) { return option.selected; });
|
|
1764
|
+
return (jsx("div", { style: {
|
|
1765
|
+
display: 'flex',
|
|
1766
|
+
flexGrow: 1,
|
|
1767
|
+
gap: 8,
|
|
1768
|
+
alignItems: 'center',
|
|
1769
|
+
}, children: selected.length === 0 ? (jsx(Text, { variant: "s", children: store.dropdownOpened ? placeholder : label })) : (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", children: [selected.slice(0, 3).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, onClick: function (e) {
|
|
1770
|
+
handleOptionClick(option);
|
|
1771
|
+
e.stopPropagation();
|
|
1772
|
+
}, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
|
|
1773
|
+
handleDeselect(option.value);
|
|
1774
|
+
e.stopPropagation();
|
|
1775
|
+
}, children: jsx(Close, { height: "20px", width: "20px" }) })] }, option.value)); }), selected.length > 3 && (jsx(Tooltip, { label: selected
|
|
1776
|
+
.slice(3)
|
|
1777
|
+
.map(function (option) { return option.label; })
|
|
1778
|
+
.join(', '), children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+ ", selected.length - 3] }) }, selected.length) }))] })) }));
|
|
1779
|
+
};
|
|
1780
|
+
var ErrorSection = (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
|
|
1781
|
+
var DescriptionSection = (jsx(Flex, { className: styles$k.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
|
|
1765
1782
|
var options = useMemo(function () {
|
|
1766
1783
|
return temporaryOptions.map(function (option) {
|
|
1767
|
-
return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled,
|
|
1784
|
+
return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function (e) {
|
|
1785
|
+
e.stopPropagation();
|
|
1786
|
+
}, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
|
|
1768
1787
|
handleOptionClick(option);
|
|
1769
1788
|
e.stopPropagation();
|
|
1770
1789
|
}, w: "100%" }, option.value) }, option.value));
|
|
@@ -1778,7 +1797,7 @@ var Multiselect = function (_a) {
|
|
|
1778
1797
|
_a)), children: label })), jsxs(Box, { className: classNames(styles$k.input, multiselectStyles.input, (_b = {},
|
|
1779
1798
|
_b[styles$k.inputError] = error && !isFocused,
|
|
1780
1799
|
_b[multiselectStyles.disabled] = disabled,
|
|
1781
|
-
_b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); },
|
|
1800
|
+
_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: [jsx(PillListSection, { store: store }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
|
|
1782
1801
|
} }));
|
|
1783
1802
|
};
|
|
1784
1803
|
|