kiban-design-system 1.0.275-alpha.0 → 1.0.277-alpha.0

package/dist/index.js

@@ -30662,18 +30662,17 @@ const AlphaGraphicCard = ({ data }) => {
 };
 
 const COMPONENT_NAME = 'AlphaZipCodeInput';
-const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange, value, labelEmpty, }) => {
+const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange, value, labelEmpty, loading, placeholder, }) => {
     const [isFocusActive, setIsFocusActive] = useState(false);
     const [showPopover, setShowPopover] = useState(false);
     const handleOnBlur = () => {
-        setShowPopover(false);
         setIsFocusActive(false);
         if (onBlur)
             onBlur();
     };
     const handleOnFocus = () => {
         setIsFocusActive(true);
-        setShowPopover(Boolean(value && (value === null || value === void 0 ? void 0 : value.length) > 2));
+        setShowPopover(Boolean(value && (value === null || value === void 0 ? void 0 : value.length) === 5 && items));
         if (onFocus)
             onFocus();
     };
@@ -30681,26 +30680,25 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
     const handleOnChange = (event) => {
         const isValid = /^[0-9]+$/i.test(event.target.value) || event.target.value === '';
         if (isValid && onChange) {
-            setShowPopover(event.target.value.length > 2);
             onChange(event.target.value);
         }
     };
     const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME}__Label--isRequired` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
-    const classesInput = cssClassName(`${COMPONENT_NAME}__InputWrapper`, isFocusActive && 'isFocus');
-    const inputMarkup = (jsx("div", Object.assign({ className: classesInput }, { children: jsx("input", { className: `${COMPONENT_NAME}__InputWrapper--input`, onBlur: handleOnBlur, onFocus: handleOnFocus, onChange: handleOnChange, maxLength: 5, value: value }, void 0) }), void 0));
+    const classesInput = cssClassName(`${COMPONENT_NAME}__InputWrapper`, isFocusActive && 'isFocus', loading && 'loading');
+    const inputMarkup = (jsx("div", Object.assign({ className: classesInput }, { children: jsx("input", { className: `${COMPONENT_NAME}__InputWrapper--input`, onBlur: handleOnBlur, onFocus: handleOnFocus, onChange: handleOnChange, maxLength: 5, value: value, placeholder: placeholder }, void 0) }), void 0));
     const handleOnSelectItem = (item) => {
         if (onChange)
             onChange(item[0]);
         setShowPopover(false);
     };
     const renderLabelItem = (item) => (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__ItemWrapper` }, { children: [jsx("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Value` }, { children: item.cp }), void 0), jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Description` }, { children: [item.municipality, ", ", item.city, ", ", item.state] }), void 0)] }), void 0));
-    const itemsOptions = items.map((item) => ({
+    const itemsOptions = items === null || items === void 0 ? void 0 : items.map((item) => ({
         label: renderLabelItem(item),
         value: item.id,
     }));
-    const optionListMarkup = items.length > 0 ? (jsx(OptionList, { items: itemsOptions, selected: [''], onChange: handleOnSelectItem }, void 0)) : null;
-    const emptyItemsMarkup = items.length === 0 ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__EmptyItems` }, { children: labelEmpty }), void 0)) : null;
-    const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), items.length)), [
+    const optionListMarkup = items && items.length > 0 ? (jsx(OptionList, { items: itemsOptions, selected: [''], onChange: handleOnSelectItem }, void 0)) : null;
+    const emptyItemsMarkup = items && items.length === 0 ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__EmptyItems` }, { children: labelEmpty }), void 0)) : null;
+    const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), void 0)), [
         items,
         value,
         showPopover,
@@ -30709,10 +30707,11 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
         isFocusActive,
     ]);
     useEffect(() => {
-        if (showPopover) {
-            setShowPopover(false);
-            requestAnimationFrame(() => setShowPopover(true));
+        if (items) {
+            setShowPopover(true);
         }
+        else
+            setShowPopover(false);
     }, [items]);
     return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Wrapper` }, { children: [labelMarkup, popoverMarkup] }), void 0));
 };