@linzjs/lui 16.0.1 → 16.2.0

package/dist/lui.css

@@ -4933,12 +4933,12 @@ body.lui-menu-drawer-open {
   cursor: not-allowed;
 }
 
-.LuiTextInput-icon-position {
+.LuiTextInput-iconPosition {
   position: absolute;
   right: 7px;
   top: 17%;
 }
-.LuiTextInput-icon-position svg {
+.LuiTextInput-iconPosition svg {
   fill: #6b6966;
 }
 

package/dist/lui.esm.js

@@ -154,11 +154,7 @@ iconMap['ic_arrow_drop_up'] = (React__default.createElement("svg", { xmlns: "htt
 iconMap['ic_arrow_forward_ios'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("path", { d: "m5.93 4.125 2.156-2.109L18.07 12l-9.984 9.984-2.156-2.109L13.852 12z" })));
 iconMap['ic_attach_file'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.createElement("g", { "clip-path": "url(#a)" },
-        React__default.createElement("path", { d: "m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" })),
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "a" },
-            React__default.createElement("path", { d: "M0 0h24v24H0z" })))));
+    React__default.createElement("path", { d: "m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" })));
 iconMap['ic_attachment'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("path", { d: "M2.016 12.023c0-1.531.531-2.836 1.594-3.914C4.673 7.03 5.97 6.492 7.501 6.492h10.5c1.094 0 2.032.398 2.813 1.195.781.797 1.172 1.742 1.172 2.836 0 1.094-.39 2.032-1.172 2.813-.781.781-1.719 1.172-2.813 1.172H9.517a2.472 2.472 0 0 1-1.781-.727c-.5-.485-.75-1.07-.75-1.758 0-.687.25-1.281.75-1.781s1.094-.75 1.781-.75h7.5v2.016H9.423c-.281 0-.422.164-.422.492 0 .328.14.492.422.492h8.578c.531 0 1-.195 1.406-.586.406-.39.609-.852.609-1.383s-.203-1-.609-1.406c-.406-.406-.875-.61-1.406-.61h-10.5c-.969 0-1.797.345-2.484 1.032a3.386 3.386 0 0 0-1.031 2.484c0 .969.344 1.789 1.031 2.46a3.425 3.425 0 0 0 2.484 1.009h9.516v2.016H7.501c-1.531 0-2.828-.531-3.891-1.594-1.063-1.063-1.594-2.36-1.594-3.891Z" })));
 iconMap['ic_blocked'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -55808,6 +55804,23 @@ function setSelectedFirmCache(firmId, firmName) {
     }
 }
 
+var ClearableLuiTextInput = function (props) {
+    var _a = useState(props.value ? props.value : ''), currentValue = _a[0], setCurrentValue = _a[1];
+    var clear = function () {
+        setCurrentValue('');
+        if (props.onValueChange) {
+            props.onValueChange('');
+        }
+    };
+    var cancelIcon = currentValue !== '' ? (React__default.createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "lg", className: 'LuiTextInput-iconPosition', spanProps: { onClick: clear } })) : undefined;
+    return (React__default.createElement(LuiTextInput, __assign({}, props, { icon: cancelIcon, value: currentValue, onChange: function (e) {
+            setCurrentValue(e.target.value);
+            if (props.onValueChange) {
+                props.onValueChange(e.target.value);
+            }
+        } })));
+};
+
 /**
  * Filters options and forwards to internal render function.
  * has option for minimum elements to filter
@@ -55815,11 +55828,14 @@ function setSelectedFirmCache(firmId, firmName) {
  * @constructor
  */
 var LuiFilterContainer = function (props) {
-    var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a;
-    var _b = useState(''), filter = _b[0], setFilter = _b[1];
+    var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a, _b = props.isFilterClearable, isFilterClearable = _b === void 0 ? true : _b;
+    var _c = useState(''), filter = _c[0], setFilter = _c[1];
     return (React__default.createElement("div", null,
         showFilter && (React__default.createElement("div", { className: 'LuiFilterContainer-filter-container LuiDeprecatedForms' },
-            React__default.createElement("input", { type: "text", placeholder: "Type to filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }))),
+            isFilterClearable && (React__default.createElement(ClearableLuiTextInput, { label: 'Filter', inputProps: {
+                    placeholder: 'Type to filter',
+                }, hideLabel: true, onValueChange: function (value) { return setFilter(value); } })),
+            !isFilterClearable && (React__default.createElement("input", { type: "text", placeholder: "Type to filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } })))),
         renderFunction(filterFunction(filter))));
 };