kiban-design-system 1.1.7-hotfix.0 → 1.1.9-hotfix.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import react, { createElement, createContext, useState, useEffect, useContext, isValidElement, Fragment as Fragment$1, useRef, useCallback, useMemo, Children, memo, cloneElement, useLayoutEffect, forwardRef } from 'react';
+import react, { createElement, isValidElement, createContext, useState, useEffect, useContext, Fragment as Fragment$1, useRef, useCallback, useMemo, Children, memo, cloneElement, useLayoutEffect, forwardRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import _extends$2 from '@babel/runtime/helpers/esm/extends';
@@ -897,6 +897,63 @@ var Icons = /*#__PURE__*/Object.freeze({
  */
 const Icon = ({ name }) => (jsx("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: createElement(Icons[name]) }), void 0));
 
+const isComponentTypeOf = (childComponent, parentComponent) => {
+    var _a;
+    if (childComponent === null ||
+        !isValidElement(childComponent) ||
+        typeof childComponent === 'string') {
+        return false;
+    }
+    const { type: childComponentType } = childComponent;
+    const Components = Array.isArray(parentComponent)
+        ? parentComponent
+        : [parentComponent];
+    const type = ((_a = childComponent.props) === null || _a === void 0 ? void 0 : _a.__type__) || childComponentType;
+    return Components.some((Component) => typeof type !== 'string' && type === Component);
+};
+
+function formatFileSize(bytes) {
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    let unitIndex = 0;
+    let size = bytes;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex += 1;
+    }
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+}
+// eslint-disable-next-line
+// code end
+
+const cssClassName = (mainClass, ...classes) => {
+    const filteredClasses = classes
+        .filter(Boolean)
+        .map((clss) => `${mainClass}--${clss}`);
+    filteredClasses.unshift(mainClass);
+    return filteredClasses.join(' ');
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isValidIcon = (icon) => typeof icon === 'string' || typeof icon === 'function';
+
+const themeClassConverter = (themeClass) => {
+    const classConverter = themeClass.charAt(0).toLocaleUpperCase() +
+        themeClass.slice(1).toLocaleLowerCase();
+    return classConverter;
+};
+
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+const SuccessIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("path", { d: 'M22 11.08V12a10 10 0 1 1-5.93-9.14' }, void 0), jsx("polyline", { points: '22 4 12 14.01 9 11.01' }, void 0)] }), void 0));
+
+const ErrorIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("circle", { cx: '12', cy: '12', r: '10' }, void 0), jsx("line", { x1: '15', y1: '9', x2: '9', y2: '15' }, void 0), jsx("line", { x1: '9', y1: '9', x2: '15', y2: '15' }, void 0)] }), void 0));
+
+const PendingIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("circle", { cx: '12', cy: '12', r: '10' }, void 0), jsx("line", { x1: '8', y1: '12', x2: '16', y2: '12' }, void 0)] }), void 0));
+
+const WarningIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: [jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }, void 0), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }, void 0), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' }, void 0)] }), void 0));
+
 /**
  * It is necessary to create a list that receives
  * strings or Nodes as elements, clicking on
@@ -928,7 +985,11 @@ const ActionList = ({ header, items, sections }) => {
                                         .join(' ');
                                     return (jsxs("li", Object.assign({ "aria-label": item.ariaLabel, className: classesItem, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j));
                                 }) }), void 0)] }), i));
-                })), items && !sections && (jsx("ul", Object.assign({ className: 'Action-list__items-container' }, { children: items === null || items === void 0 ? void 0 : items.map((item, j) => (jsxs("li", Object.assign({ "aria-label": item.ariaLabel, className: `Action-list__item ${item.isActive && 'Action-list__item-active'}`, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j))) }), void 0))] }), void 0));
+                })), items && !sections && (jsx("ul", Object.assign({ className: 'Action-list__items-container' }, { children: items === null || items === void 0 ? void 0 : items.map((item, j) => {
+                    const { ariaLabel, content, icon, isActive, isDisabled, onClick } = item;
+                    const className = cssClassName('Action-list__item', isActive && 'active', isDisabled && 'disabled');
+                    return (jsxs("li", Object.assign({ "aria-label": ariaLabel, className: className, onClick: () => onClick && !isDisabled && onClick() }, { children: [icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), content] }), j));
+                }) }), void 0))] }), void 0));
 };
 
 const MAIN_CLASS$t = 'Alert';
@@ -1017,63 +1078,6 @@ const useShowAlert = () => {
     return addAlert;
 };
 
-const isComponentTypeOf = (childComponent, parentComponent) => {
-    var _a;
-    if (childComponent === null ||
-        !isValidElement(childComponent) ||
-        typeof childComponent === 'string') {
-        return false;
-    }
-    const { type: childComponentType } = childComponent;
-    const Components = Array.isArray(parentComponent)
-        ? parentComponent
-        : [parentComponent];
-    const type = ((_a = childComponent.props) === null || _a === void 0 ? void 0 : _a.__type__) || childComponentType;
-    return Components.some((Component) => typeof type !== 'string' && type === Component);
-};
-
-function formatFileSize(bytes) {
-    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    let unitIndex = 0;
-    let size = bytes;
-    while (size >= 1024 && unitIndex < units.length - 1) {
-        size /= 1024;
-        unitIndex += 1;
-    }
-    return `${size.toFixed(2)} ${units[unitIndex]}`;
-}
-// eslint-disable-next-line
-// code end
-
-const cssClassName = (mainClass, ...classes) => {
-    const filteredClasses = classes
-        .filter(Boolean)
-        .map((clss) => `${mainClass}--${clss}`);
-    filteredClasses.unshift(mainClass);
-    return filteredClasses.join(' ');
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isValidIcon = (icon) => typeof icon === 'string' || typeof icon === 'function';
-
-const themeClassConverter = (themeClass) => {
-    const classConverter = themeClass.charAt(0).toLocaleUpperCase() +
-        themeClass.slice(1).toLocaleLowerCase();
-    return classConverter;
-};
-
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-const SuccessIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("path", { d: 'M22 11.08V12a10 10 0 1 1-5.93-9.14' }, void 0), jsx("polyline", { points: '22 4 12 14.01 9 11.01' }, void 0)] }), void 0));
-
-const ErrorIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("circle", { cx: '12', cy: '12', r: '10' }, void 0), jsx("line", { x1: '15', y1: '9', x2: '9', y2: '15' }, void 0), jsx("line", { x1: '9', y1: '9', x2: '15', y2: '15' }, void 0)] }), void 0));
-
-const PendingIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2' }, { children: [jsx("circle", { cx: '12', cy: '12', r: '10' }, void 0), jsx("line", { x1: '8', y1: '12', x2: '16', y2: '12' }, void 0)] }), void 0));
-
-const WarningIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: [jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }, void 0), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }, void 0), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' }, void 0)] }), void 0));
-
 const COMPONENT_NAME$B = 'AlphaAttributeInput';
 const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
     const [isFocused, setIsFocused] = useState(false);
@@ -2241,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
@@ -2260,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();
@@ -2435,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
@@ -24582,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) {
@@ -24617,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);
@@ -30560,11 +30569,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));
 };