krl-alfred 1.76.20 → 1.76.21

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -24,9 +24,11 @@ var Loader_1 = __importDefault(require("../Loader"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var AutocompleteInput = function (props) {
     var _a;
-    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, hasClear = props.hasClear, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate;
-    var _b = (0, react_1.useState)(isShowDropdown), showDropdown = _b[0], setShowDropdown = _b[1];
-    var _c = (0, react_1.useState)(value), inputValue = _c[0], setInputValue = _c[1];
+    var _b, _c;
+    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate, autoComplete = props.autoComplete;
+    var _d = (0, react_1.useState)(isShowDropdown), showDropdown = _d[0], setShowDropdown = _d[1];
+    var _e = (0, react_1.useState)(false), hasClear = _e[0], setHasClear = _e[1];
+    var _f = (0, react_1.useState)(value), inputValue = _f[0], setInputValue = _f[1];
     var inputRef = (0, react_1.useRef)(null);
     var realInputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
@@ -41,6 +43,15 @@ var AutocompleteInput = function (props) {
             inputRef.current.value = value === null || value === void 0 ? void 0 : value.label;
         }
     }, [value]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+            setHasClear(true);
+        }
+        else {
+            setHasClear(false);
+        }
+    }, [(_b = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _b === void 0 ? void 0 : _b.value, (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value]);
     (0, react_1.useEffect)(function () {
         if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) === null) {
             var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
@@ -87,9 +98,9 @@ var AutocompleteInput = function (props) {
         if (e === void 0) { e = null; }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput" }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
                             return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
-                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+                        })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult", onClick: function () { return handleSelectValue(null, null); } }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 AutocompleteInput.defaultValues = {
     hasError: false,
@@ -103,5 +114,6 @@ AutocompleteInput.defaultValues = {
     onBlur: function (e) { },
     onKeyUp: function (e) { },
     onKeyDown: function (e) { },
+    autoComplete: '',
 };
 exports.default = AutocompleteInput;

package/dist/components/AutocompleteInput/stories/AutocompleteInput.stories.js

@@ -22,7 +22,6 @@ exports.Default = {
         disabled: false,
         readonly: false,
         hasLoading: false,
-        hasClear: false,
         label: "Label",
         dropdownMaxHeight: "204px",
         //defaultLabel : "test",

package/dist/components/Button/Button.js

@@ -27,7 +27,7 @@ var Children = function (props) {
 };
 var Button = (0, react_1.forwardRef)(function (props, ref) {
     var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
-    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' })) : (0, jsx_runtime_1.jsx)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
 });
 Button.propTypes = {
     iconStrokeWidth: prop_types_1.default.string,

package/dist/components/Button/Button.styled.js

@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    &:empty{\n      margin-right: 0;\n    }\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: inherit;\n    border-radius: inherit;\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: inherit;\n    border-radius: inherit;\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
     switch (props.variant) {
         case 'primary':
             return primary;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.76.20",
+  "version": "1.76.21",
   "files": [
     "dist"
   ],