kiban-design-system 1.0.241-alpha.0 → 1.0.243-alpha.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,61 @@ 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]}`;
+}
+
+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 +983,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,61 +1076,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]}`;
-}
-
-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);
@@ -30562,7 +30566,7 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
     }));
     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));
 };