@datability/8ui 0.1.16 → 0.1.18

package/dist/components/Blackdrop/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import './index.scss';
 var Blackdrop = function (_a) {
     var children = _a.children, open = _a.open;
-    return (React.createElement("div", { className: "DBui-blackdrop", "aria-hidden": !open }, children));
+    return (React.createElement("div", { className: "DBui-blackdrop", "data-hidden": !open }, children));
 };
 export default Blackdrop;
 //# sourceMappingURL=index.js.map

package/dist/components/Blackdrop/index.scss

@@ -9,7 +9,7 @@
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
 
-  &[aria-hidden='true'] {
+  &[data-hidden='true'] {
     opacity: 0;
     visibility: hidden;
   }

package/dist/components/Chip/index.js

@@ -6,13 +6,13 @@ import closedSVG from '../assets/closed.svg';
 import './index.scss';
 var Chip = function (_a) {
     var label = _a.label, onDelete = _a.onDelete, onClick = _a.onClick, Icon = _a.icon, className = _a.className, style = _a.style;
-    return (React.createElement("div", { className: "DBui-chip ".concat(className ? className : ''), style: style ? style : {}, "aria-checked": Boolean(onClick), onClick: onClick && onClick },
+    return (React.createElement("div", { className: "DBui-chip ".concat(className ? className : ''), style: style ? style : {}, "data-checked": Boolean(onClick), onClick: onClick && onClick },
         label,
-        onDelete && !Icon && (React.createElement("img", { src: closedSVG, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        !onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete })),
-        !onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "aria-checked": Boolean(onDelete), onClick: onDelete }))));
+        onDelete && !Icon && (React.createElement("img", { src: closedSVG, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        !onDelete && Icon && typeof Icon === 'string' && (React.createElement("img", { src: Icon, alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete })),
+        !onDelete && Icon && typeof Icon !== 'string' && (React.createElement(Icon, { alt: "icon", className: "DBui-chipIcon", "data-checked": Boolean(onDelete), onClick: onDelete }))));
 };
 export default Chip;
 //# sourceMappingURL=index.js.map

package/dist/components/Chip/index.scss

@@ -8,7 +8,7 @@
   background-color: #618aea;
   gap: 0.5em;
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     cursor: pointer;
 
     &:hover {
@@ -20,7 +20,7 @@
     width: 20px;
     height: 20px;
 
-    &[aria-checked='true'] {
+    &[data-checked='true'] {
       cursor: pointer;
       
       &:hover {

package/dist/components/Input/InputAutoComplete/index.js

@@ -41,7 +41,7 @@ var InputAutoComplete = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement(Menu, { disabled: disabled, trigger: function () {
                 var _a;
-                return (React.createElement("div", { className: "DBui-wrapInputAutoComplete", "aria-invalid": isInvalid, "aria-disabled": disabled },
+                return (React.createElement("div", { className: "DBui-wrapInputAutoComplete", "data-invalid": isInvalid, "data-disabled": disabled },
                     isMultiple &&
                         getIn(values, name).map(function (data, index) {
                             var selected = options.find(function (e) { return e.value === data; });
@@ -55,7 +55,7 @@ var InputAutoComplete = function (_a) {
                     React.createElement("input", { className: "DBui-inputAutoComplete", type: "text", placeholder: !((_a = getIn(values, name)) === null || _a === void 0 ? void 0 : _a.length) ? placeholder : '', disabled: disabled, name: name, value: isMultiple ? searchText : getIn(values, name)[0] || '', onChange: function (e) { return handleChange(e.target.value); } })));
             } }, suggestions.map(function (data, index) {
             var isChecked = Boolean(getIn(values, name).find(function (ele) { return ele === data.value; }));
-            return (React.createElement("p", { key: index, className: "DBui-menuItemInputAutoComplete", onClick: function () { return !isChecked && handleClickSelectOption(data.value); }, "aria-checked": isChecked }, data.label));
+            return (React.createElement("p", { key: index, className: "DBui-menuItemInputAutoComplete", onClick: function () { return !isChecked && handleClickSelectOption(data.value); }, "data-checked": isChecked }, data.label));
         }))));
 };
 export default InputAutoComplete;

package/dist/components/Input/InputAutoComplete/index.scss

@@ -9,7 +9,7 @@
   gap: 0.3em;
   height: 36px;
 
-  &[aria-disabled='true'] {
+  &[data-disabled='true'] {
     @extend .DBui-disabled;
   }
 
@@ -46,7 +46,7 @@
     background-color: #FAFAFA;
   }
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     background-color: #6F5EE0;
     color: #FFFFFF;
   }

package/dist/components/Input/InputBase/index.js

@@ -10,13 +10,13 @@ var InputBase = function (_a) {
     var styleDiv = {
         width: !fullWidth ? 'fit-content' : '100%'
     };
-    return (React.createElement("div", { className: "DBui-inputBase", style: styleDiv, "aria-invalid": isInvalid },
+    return (React.createElement("div", { className: "DBui-inputBase", style: styleDiv, "data-invalid": isInvalid },
         label && (React.createElement("p", { className: "DBui-inputLabel" },
             React.createElement("small", null, label),
             " ",
-            React.createElement("span", { className: "DBui-ariaInvalid" }, require && '*'))),
+            React.createElement("span", { className: "DBui-dataInvalid" }, require && '*'))),
         children,
-        getIn(touched, name) && getIn(errors, name) && (React.createElement("p", { className: "DBui-ariaInvalid" },
+        getIn(touched, name) && getIn(errors, name) && (React.createElement("p", { className: "DBui-dataInvalid" },
             React.createElement("small", null, getIn(errors, name))))));
 };
 export default InputBase;

package/dist/components/Input/InputBase/index.scss

@@ -2,13 +2,13 @@
     display: flex;
     flex-direction: column;
 
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
         .DBui-inputLabel {
             color: #EB5757;
         }
     }
 
-    .DBui-ariaInvalid {
+    .DBui-dataInvalid {
         color: #EB5757;
     }
 }

package/dist/components/Input/InputBasic/index.js

@@ -10,7 +10,7 @@ var Input = function (_a) {
     var _f = useFormikContext(), values = _f.values, touched = _f.touched, errors = _f.errors, handleChange = _f.handleChange;
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("input", { className: "DBui-inputBasic", type: type, placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "aria-invalid": isInvalid })));
+        React.createElement("input", { className: "DBui-inputBasic", type: type, placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "data-invalid": isInvalid })));
 };
 export default Input;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/InputCheckbox/index.js

@@ -12,7 +12,7 @@ var InputCheckbox = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputCheckboxList" }, options.map(function (data, index) { return (React.createElement("div", { key: index, className: "DBui-wrapInputCheckbox" },
             React.createElement("input", { className: "DBui-inputCheckbox", type: "checkbox", disabled: disabled, value: data.value, onChange: handleChange, name: name, checked: getIn(values, name).includes(data.value) }),
-            React.createElement("p", { className: "DBui-labelCheckbox", "aria-invalid": isInvalid },
+            React.createElement("p", { className: "DBui-labelCheckbox", "data-invalid": isInvalid },
                 React.createElement("small", null, data.label)))); }))));
 };
 export default InputCheckbox;

package/dist/components/Input/InputCheckbox/index.scss

@@ -11,7 +11,7 @@
         gap: 0.3em;
 
         .DBui-labelCheckbox {
-            &[aria-invalid='true'] {
+            &[data-invalid='true'] {
                 color: #EB5757;
             }
         }

package/dist/components/Input/InputDateRangePicker/index.js

@@ -13,7 +13,7 @@ var InputDateRangePicker = function (_a) {
     var _f = getIn(values, name), startDate = _f[0], endDate = _f[1];
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("div", { className: "react-datepicler-custom", "aria-invalid": isInvalid },
+        React.createElement("div", { className: "react-datepicler-custom", "data-invalid": isInvalid },
             React.createElement(DatePicker, { selectsRange: true, startDate: startDate, endDate: endDate, onChange: function (update) {
                     setFieldValue(name, update);
                 }, disabled: disabled, placeholderText: placeholder }))));

package/dist/components/Input/InputDateRangePicker/index.scss

@@ -22,7 +22,7 @@
 }
 
 .react-datepicler-custom {
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
 
         input {
             border: 1px solid #EB5757;

package/dist/components/Input/InputNumber/index.js

@@ -43,7 +43,7 @@ var InputNumber = function (_a) {
         }
     };
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("input", { className: "DBui-inputNumber", type: "text", placeholder: placeholder, disabled: disabled, value: showValue, onChange: handleChange, name: name, pattern: "[0-9]*\\.?[0-9]*", "aria-invalid": isInvalid })));
+        React.createElement("input", { className: "DBui-inputNumber", type: "text", placeholder: placeholder, disabled: disabled, value: showValue, onChange: handleChange, name: name, pattern: "[0-9]*\\.?[0-9]*", "data-invalid": isInvalid })));
 };
 export default InputNumber;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/InputPassword/index.js

@@ -14,7 +14,7 @@ var InputPassword = function (_a) {
     var _f = useState(false), isShow = _f[0], setIsShow = _f[1];
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputPassword" },
-            React.createElement("input", { className: "DBui-inputPassword", type: isShow ? 'text' : 'password', placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "aria-invalid": isInvalid }),
+            React.createElement("input", { className: "DBui-inputPassword", type: isShow ? 'text' : 'password', placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, "data-invalid": isInvalid }),
             React.createElement("img", { className: "DBui-inputPasswordIcon", src: isShow ? visibilitySVG : visibilityOffSVG, onClick: function () { return setIsShow(!isShow); } }))));
 };
 export default InputPassword;

package/dist/components/Input/InputRadio/index.js

@@ -12,7 +12,7 @@ var InputRadio = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement("div", { className: "DBui-wrapInputRadioList" }, options.map(function (data, index) { return (React.createElement("div", { key: index, className: "DBui-wrapInputRadio" },
             React.createElement("input", { className: "DBui-inputRadio", type: "radio", disabled: disabled, value: data.value, onChange: handleChange, name: name, checked: getIn(values, name) === data.value }),
-            React.createElement("p", { className: "DBui-labelRadio", "aria-invalid": isInvalid },
+            React.createElement("p", { className: "DBui-labelRadio", "data-invalid": isInvalid },
                 React.createElement("small", null, data.label)))); }))));
 };
 export default InputRadio;

package/dist/components/Input/InputRadio/index.scss

@@ -11,7 +11,7 @@
         gap: 0.3em;
 
         .DBui-labelRadio {
-            &[aria-invalid='true'] {
+            &[data-invalid='true'] {
                 color: #EB5757;
             }
         }

package/dist/components/Input/InputSelect/index.js

@@ -26,15 +26,15 @@ var InputSelect = function (_a) {
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
         React.createElement(Menu, { disabled: disabled, trigger: function (_a) {
                 var isOpen = _a.isOpen;
-                return (React.createElement("div", { className: "DBui-wrapperInputSelect", "aria-invalid": isInvalid, "aria-disabled": disabled },
+                return (React.createElement("div", { className: "DBui-wrapperInputSelect", "data-invalid": isInvalid, "data-disabled": disabled },
                     React.createElement("div", { className: "DBui-wrapperLabelInputSelect" },
                         (selected === null || selected === void 0 ? void 0 : selected.label) ? (React.createElement("p", { className: "DBui-wrapperLabel" },
                             React.createElement("small", null, selected === null || selected === void 0 ? void 0 : selected.label))) : (React.createElement("p", { className: "DBui-placeholder" },
                             React.createElement("small", null, placeholder))),
-                        React.createElement("img", { src: closedSVG, className: "DBui-clearIconInputSelect", onClick: handleCleaState, "aria-hidden": !Boolean(getIn(values, name)) || disabled || notShowClearValue || isHideClearIcon })),
-                    React.createElement("img", { src: expandArrowSVG, className: "DBui-arrowIconInputSelect", "aria-checked": disabled ? true : !isOpen })));
+                        React.createElement("img", { src: closedSVG, className: "DBui-clearIconInputSelect", onClick: handleCleaState, "data-hidden": !Boolean(getIn(values, name)) || disabled || notShowClearValue || isHideClearIcon })),
+                    React.createElement("img", { src: expandArrowSVG, className: "DBui-arrowIconInputSelect", "data-checked": disabled ? true : !isOpen })));
             } }, options.map(function (data, index) {
-            return (React.createElement("p", { key: index, className: "DBui-menuItemInputSelect", onClick: function () { return handleClick(data.value); }, "aria-checked": (selected === null || selected === void 0 ? void 0 : selected.value) === data.value }, data.label));
+            return (React.createElement("p", { key: index, className: "DBui-menuItemInputSelect", onClick: function () { return handleClick(data.value); }, "data-checked": (selected === null || selected === void 0 ? void 0 : selected.value) === data.value }, data.label));
         }))));
 };
 export default InputSelect;

package/dist/components/Input/InputSelect/index.scss

@@ -12,11 +12,11 @@
   color: #000000;
   display: flex;
 
-  &[aria-invalid='true'] {
+  &[data-invalid='true'] {
     border: 1px solid #eb5757;
   }
 
-  &[aria-disabled='true'] {
+  &[data-disabled='true'] {
     @extend .DBui-disabled;
   }
 
@@ -36,11 +36,12 @@
     display: flex;
     gap: 0.3em;
     align-items: center;
+    width: 100%;
 
     .DBui-clearIconInputSelect {
       width: 20px;
 
-      &[aria-hidden='true'] {
+      &[data-hidden='true'] {
         display: none !important;
       }
 
@@ -57,7 +58,7 @@
     transform: translateY(-50%);
     transition: transform 0.2s;
 
-    &[aria-checked='false'] {
+    &[data-checked='false'] {
       transform: rotate(180deg) translateY(50%);
     }
   }
@@ -73,7 +74,7 @@
     background-color: #fafafa;
   }
 
-  &[aria-checked='true'] {
+  &[data-checked='true'] {
     background-color: #6f5ee0;
     color: #ffffff;
   }

package/dist/components/Input/InputTextarea/index.js

@@ -10,7 +10,7 @@ var InputTextarea = function (_a) {
     var _g = useFormikContext(), values = _g.values, touched = _g.touched, errors = _g.errors, handleChange = _g.handleChange;
     var isInvalid = getIn(touched, name) && Boolean(getIn(errors, name));
     return (React.createElement(InputBase, { name: name, label: label, require: require, fullWidth: fullWidth, isInvalid: isInvalid },
-        React.createElement("textarea", { className: "DBui-inputTextarea", placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, rows: rows, cols: cols, "aria-invalid": isInvalid })));
+        React.createElement("textarea", { className: "DBui-inputTextarea", placeholder: placeholder, disabled: disabled, value: getIn(values, name), onChange: handleChange, name: name, rows: rows, cols: cols, "data-invalid": isInvalid })));
 };
 export default InputTextarea;
 //# sourceMappingURL=index.js.map

package/dist/components/Input/extend.scss

@@ -13,7 +13,7 @@
     background-color: #FFFFFF;
     color: #000000;
 
-    &[aria-invalid='true'] {
+    &[data-invalid='true'] {
         border: 1px solid #EB5757;
     }
 }

package/dist/components/Menu/index.js

@@ -145,8 +145,8 @@ var Menu = function (_a) {
     return (React.createElement("div", { ref: menuRef },
         React.createElement("div", { onClick: handleToggle, className: "cursor", ref: triggerRef }, trigger({ isOpen: isOpen })),
         mounted &&
-            createPortal(React.createElement("div", { className: "DBui-wrapperMenuItem", "aria-hidden": !(isOpen && !disabled), style: menuStyle, ref: menuItemRef }, children), document.getElementById('root') || document.getElementById('__next')),
-        !mounted && (React.createElement("div", { className: "DBui-wrapperMenuItem", "aria-hidden": true, style: menuStyle, ref: menuItemRef }, children))));
+            createPortal(React.createElement("div", { className: "DBui-wrapperMenuItem", "data-hidden": !(isOpen && !disabled), style: menuStyle, ref: menuItemRef }, children), document.getElementById('root') || document.getElementById('__next')),
+        !mounted && (React.createElement("div", { className: "DBui-wrapperMenuItem", "data-hidden": true, style: menuStyle, ref: menuItemRef }, children))));
 };
 export default Menu;
 //# sourceMappingURL=index.js.map

package/dist/components/Menu/index.scss

@@ -13,7 +13,7 @@
   overflow-y: scroll;
   overflow-x: hidden;
 
-  &[aria-hidden='true'] {
+  &[data-hidden='true'] {
     visibility: hidden;
   }
 }

package/dist/components/Modal/index.js

@@ -53,9 +53,9 @@ var Modal = function (_a) {
             var modalElements = document.querySelectorAll('.DBui-modalBase');
             // Convert NodeList to an array to use filter method
             var modalArray = Array.from(modalElements);
-            // Filter the array based on aria-hidden attribute
+            // Filter the array based on data-hidden attribute
             var showModals = modalArray.filter(function (modal) {
-                return modal.getAttribute('aria-hidden') === 'false';
+                return modal.getAttribute('data-hidden') === 'false';
             });
             var topLayerShowModal = showModals[showModals.length - 1];
             // Check if the pressed key is the Escape key
@@ -73,7 +73,7 @@ var Modal = function (_a) {
         };
     }, [open]);
     return (React.createElement(Blackdrop, { open: open },
-        React.createElement("div", { className: "DBui-modalBase DBui-modalContent", "aria-hidden": !open, style: styleWidth, ref: modalRef, id: id },
+        React.createElement("div", { className: "DBui-modalBase DBui-modalContent", "data-hidden": !open, style: styleWidth, ref: modalRef, id: id },
             React.createElement("img", { src: closedSVG, alt: "", className: "DBui-close", onClick: onClose }),
             React.createElement("div", null, children))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datability/8ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "",
   "main": "dist/components/index.js",
   "types": "dist/components/index.d.ts",