kiban-design-system 1.1.8-hotfix.0 → 1.1.10-hotfix.0

package/dist/index.js

@@ -2245,6 +2245,7 @@ const useTheme = () => {
  * options can be selected or not
  * @param {string} SelectProps.placeholder - Select Placeholder
  * @param {string} SelectProps.selectLabel - Select Label
+ * @param {object} InputTextProps.secondaryAction - Text for show icon inside right input.
  * @param {string[]} SelectProps.selected - Selected data to highlight in the render
  * of the list items
  * @param {Function} SelectProps.onChange - Action that is triggered by selecting
@@ -2264,7 +2265,7 @@ const useTheme = () => {
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Element Select
  */
-const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
+const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, secondaryAction, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
     const [isActivePopover, setIsActive] = useState(false);
     const selectActivatorRef = useRef(null);
     const [parentCoord, setParentCoords] = useState();
@@ -2439,8 +2440,12 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
             setParentCoords(selectActivatorRef.current.getBoundingClientRect());
         }
     }, [selectActivatorRef]);
+    const showLabelContainer = label || secondaryAction;
     const tooltipLabelMarkup = useMemo(() => tooltipLabel ? (jsx(AlphaTooltip, Object.assign({ content: tooltipLabel.content, theme: tooltipLabel.theme, width: 'default', parentTooltip: parentCoord }, { children: jsx("span", Object.assign({ className: 'Select__TooltipLabelContainer' }, { children: jsx(Icon, { name: tooltipLabel.icon || 'Info' }, void 0) }), void 0) }), void 0)) : null, [tooltipLabel, parentCoord]);
-    return (jsxs("div", Object.assign({ className: `Select ${isMultiple ? 'Select--isMultiple' : ''}`, ref: selectActivatorRef }, { children: [label && (jsxs("div", Object.assign({ className: 'Select__label' }, { children: [jsx("label", { children: label }, void 0), isRequired && jsx("span", Object.assign({ className: 'Select__label-required' }, { children: "*" }), void 0), tooltipLabelMarkup] }), void 0)), tooltip ? renderWithTooltip() : renderInput(), helperText && jsx("div", Object.assign({ className: 'Select__helperText' }, { children: helperText }), void 0)] }), void 0));
+    const secondaryActionMarkup = secondaryAction ? (jsx("div", Object.assign({ className: 'Select__labelContainer--secondaryAction' }, { children: jsx(Button, Object.assign({ type: 'button', onClick: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.onClick, contentAlign: 'center' }, { children: secondaryAction.text }), void 0) }), void 0)) : null;
+    const requiredMarkup = isRequired ? (jsx("span", Object.assign({ className: 'Select__labelContainer--required' }, { children: "*" }), void 0)) : null;
+    const labelContainerMarkup = showLabelContainer ? (jsxs("div", Object.assign({ className: 'Select__labelContainer' }, { children: [label && (jsxs("label", Object.assign({ className: 'Select__labelContainer--label' }, { children: [label, requiredMarkup, tooltipLabelMarkup] }), void 0)), secondaryActionMarkup] }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: `Select ${isMultiple ? 'Select--isMultiple' : ''}`, ref: selectActivatorRef }, { children: [labelContainerMarkup, tooltip ? renderWithTooltip() : renderInput(), helperText && jsx("div", Object.assign({ className: 'Select__helperText' }, { children: helperText }), void 0)] }), void 0));
 };
 
 // these aren't really private, but nor are they really useful to document
@@ -24586,17 +24591,17 @@ function Form({ ariaLabel, data, fields, fieldsSection, iconHelperText, onChange
     return jsx(Fragment, { children: formMarkup }, void 0);
 }
 
-const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, }) => {
+const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, columnsSize: columnsSizeProps = 3, }) => {
     // eslint-disable-next-line
     // @ts-ignore
-    const wrapperMarkup = jsx(Grid.Item, { size: 3 }, void 0);
+    const wrapperMarkup = jsx(Grid.Item, { size: columnsSizeProps }, void 0);
     const formMarkup = (jsx(Form, { ariaLabel: ariaLabel, data: data, fields: fields, fieldsSection: fieldsSection, iconHelperText: iconHelperText, onChange: onChange, fieldWrapperElement: wrapperMarkup, tagRemoveIcon: tagRemoveIcon, extraPropsField: extraPropsField }, void 0));
     const gridMarkup = jsx(Grid, Object.assign({ isMultiline: true }, { children: formMarkup }), void 0);
     return (jsx(DeletableSection, Object.assign({ ariaLabel: ariaLabel, onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
 };
 
 const COMPONENT_NAME$a = 'DynamicForm';
-const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
+const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, columnsSize, }) => {
     const { theme } = useTheme();
     const handleChange = (contact, id) => {
         if (onChange) {
@@ -24621,7 +24626,7 @@ const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, ico
         const extraProps = extraPropsFieldsArray && index < extraPropsFieldsArray.length
             ? extraPropsFieldsArray[index]
             : undefined;
-        return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
+        return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps, columnsSize: columnsSize }, `DynamicForm-${form.id}-${index}}`));
     };
     const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
     const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);
@@ -30546,6 +30551,7 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
         if (onFocus)
             onFocus();
     };
+    // eslint-disable-next-line max-len
     const handleOnChange = (event) => {
         const isValid = /^[0-9]+$/i.test(event.target.value) || event.target.value === '';
         if (isValid && onChange) {
@@ -30564,11 +30570,11 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
     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) => ({
         label: renderLabelItem(item),
-        value: item.cp,
+        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) }), void 0)), [items, value, showPopover]);
+    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, isFocusActive]);
     return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Wrapper` }, { children: [labelMarkup, popoverMarkup] }), void 0));
 };