bianic-ui 2.1.0-beta.0 → 2.1.0-beta.1

package/README.md

@@ -1,49 +1,49 @@
-# Bianic 2.0
-
-DLS designed by BIAENERGI
-
-## Installation
-
-### First Installation
-
-`npm i bianic-ui`
-
-## Usage
-
-After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
-
-## Support
-
-If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Contributing
-
-If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Change Log
-
-Coming soon
-
-## Development Notes
-
-### Code Convention
-
-- Always separate style with tsx
-- For style config always try to be object with one level
-- Separate config file and component file for more readable code
-- The variable name of style config must be describe what you styling not describe the parameters (or key)
-- Use .tsx only when defining component, just us .ts if no component defined on the file
-- Don't import simulation or any demo to index.ts
-- Update storybook for every change or new component
-
-### Component attribute naming
-
-- Check on html documentation. Always try to use the exisiting html atribute name.
-- If there the attibute not listed on html documentation. You can make it on your own with rules :
-  - Use "is" prefix for boolean
-  - Use "on" prefix for event listener
-
-### Another Notes
-
-- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
-- Just discuss any concept you had. **Discuss first, Implement later**.
+# Bianic 2.0
+
+DLS designed by BIAENERGI
+
+## Installation
+
+### First Installation
+
+`npm i bianic-ui`
+
+## Usage
+
+After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
+
+## Support
+
+If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Contributing
+
+If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Change Log
+
+Coming soon
+
+## Development Notes
+
+### Code Convention
+
+- Always separate style with tsx
+- For style config always try to be object with one level
+- Separate config file and component file for more readable code
+- The variable name of style config must be describe what you styling not describe the parameters (or key)
+- Use .tsx only when defining component, just us .ts if no component defined on the file
+- Don't import simulation or any demo to index.ts
+- Update storybook for every change or new component
+
+### Component attribute naming
+
+- Check on html documentation. Always try to use the exisiting html atribute name.
+- If there the attibute not listed on html documentation. You can make it on your own with rules :
+  - Use "is" prefix for boolean
+  - Use "on" prefix for event listener
+
+### Another Notes
+
+- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
+- Just discuss any concept you had. **Discuss first, Implement later**.

package/dist/cjs/index.js

@@ -1900,9 +1900,9 @@ MenuContainerNoAnchor.defaultProps = {
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick"]);
-    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick", "disabled"]);
+    var _k = React.useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _l = React.useState(false), isLeft = _l[0], setIsLeft = _l[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
@@ -1924,19 +1924,21 @@ function MenuItem(_a) {
         ? 'left-0 -translate-x-full'
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return !disabled && setIsHovered(true); }, onMouseLeave: function () { return !disabled && setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] ".concat(itemClass, " ").concat(disabled ? 'cursor-not-allowed' : 'hover:bg-bia-blue-pastel'), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: function (e) {
+                if (disabled)
+                    return;
                 inheritedOnClick();
                 onClick(e);
             }, onKeyDown: function () { }, style: {
                 zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-black') }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
-                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-coolgrey') }, caption)))),
+        children && !disabled && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2132,7 +2134,7 @@ var TextInput = React.forwardRef(function (_a, ref) {
         React.createElement("div", { className: "relative w-full" },
             React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2393,11 +2395,11 @@ DropdownContNoAnchor.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = React.useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = React.useState(false), isDropUp = _m[0], setIsDropUp = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
@@ -2447,12 +2449,18 @@ function SelectInput(_a) {
         }
     }, [isOpen]);
     var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -2478,7 +2486,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2711,23 +2719,28 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = React.useRef(null);
-    var _l = useLiveSearch({
+    var _m = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem,
-    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
-    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
-    var _o = dropContProps || {}, dropContClassName = _o.className; _o.onClickItem; _o.anchorRef; var restDropContProps = __rest(_o, ["className", "onClickItem", "anchorRef"]);
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
+    var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
+    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
+            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2749,7 +2762,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',