bianic-ui 1.15.0 → 1.16.0-beta.0

package/dist/cjs/index.js

@@ -3070,7 +3070,7 @@ var monthMap = [
     'December',
 ];
 var DateInputDisplay = function (_a) {
-    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction"]);
+    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
     var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
     var _f = React.useState(value), dateString = _f[0], setDateString = _f[1];
     var _g = styleConfig['text'], fieldStyle = _g.fieldStyle;
@@ -3099,11 +3099,13 @@ var DateInputDisplay = function (_a) {
         setIsEditing(false);
         setDateString(value);
     };
-    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
+    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue 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, " ").concat(value ? 'text-bia-black' : 'text-bia-coolgrey') }, value ? displayDateFormatter(new Date(value)) : placeholder),
+        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue 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, " ").concat(value || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey', " ").concat(className) }, value
+            ? displayDateFormatter(new Date(value))
+            : nullDisplay || placeholder),
         React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey ".concat(iconPosition) },
             React.createElement("button", { className: "bianic-datepicker-toggle-button", disabled: disabled, onClick: function () { return buttonAction && buttonAction(); } },
                 React.createElement(TbCalendar, { size: iconSize })))));
@@ -3132,7 +3134,7 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required;
+    var className = _a.className, value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay;
     // State and Ref
     var inputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
@@ -3140,7 +3142,7 @@ function DatePicker(_a) {
     var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
     return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInputDisplay, { value: value, setValue: onChange, placeholder: "YYYY-MM-DD", size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
+            React.createElement(DateInputDisplay, { inputClassName: className, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
             React.createElement(PickerCalendar, { selectedDate: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
 }

package/dist/cjs/types/components/Forms/DatePicker/DateInputDisplay.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import TextInputProps from '../TextInput/PropsInterface';
 interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     value: string | null;
+    className: string;
     setValue?: (date: string | null) => void;
     placeholder?: string;
     label?: string;
@@ -9,6 +10,7 @@ interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     setIsActive?: () => void;
     buttonAction?: () => void;
     disabled: boolean;
+    nullDisplay?: string;
 }
-declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, ...props }: DateInputDisplayProps) => React.JSX.Element;
+declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, nullDisplay, ...props }: DateInputDisplayProps) => React.JSX.Element;
 export default DateInputDisplay;

package/dist/cjs/types/components/Forms/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    className: string;
     descText?: string;
     onChange?: (date: string) => void;
     required?: boolean;
@@ -10,6 +11,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     label?: string;
     minDate?: string;
     maxDate?: string;
+    nullDisplay?: string;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ className, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, }: DatePickerProps): React.JSX.Element;
 export default DatePicker;

package/dist/esm/index.js

@@ -3068,7 +3068,7 @@ var monthMap = [
     'December',
 ];
 var DateInputDisplay = function (_a) {
-    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction"]);
+    var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
     var _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
     var _f = useState(value), dateString = _f[0], setDateString = _f[1];
     var _g = styleConfig['text'], fieldStyle = _g.fieldStyle;
@@ -3097,11 +3097,13 @@ var DateInputDisplay = function (_a) {
         setIsEditing(false);
         setDateString(value);
     };
-    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
+    var input = isEditing ? (React.createElement(TextInput, { type: "text", value: dateString !== null && dateString !== void 0 ? dateString : '', onChange: handleTextChange, onBlur: handleBlur, placeholder: placeholder, size: size, inputClassName: className, autoFocus: true, actionElement: React.createElement("button", { className: "bianic-datepicker-toggle-button text-bia-coolgrey", disabled: disabled, onClick: function () {
                 buttonAction && buttonAction();
             } },
             React.createElement(TbCalendar, { size: iconSize })) })) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue 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, " ").concat(value ? 'text-bia-black' : 'text-bia-coolgrey') }, value ? displayDateFormatter(new Date(value)) : placeholder),
+        React.createElement("div", { role: "button", onClick: function () { return setIsEditing(true); }, className: "bianic-text-input bianic-fgc-target w-full min-w-[185px] rounded hover:rounded-b-none hover:border-b-bia-blue 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, " ").concat(value || nullDisplay ? 'text-bia-black' : 'text-bia-coolgrey', " ").concat(className) }, value
+            ? displayDateFormatter(new Date(value))
+            : nullDisplay || placeholder),
         React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey ".concat(iconPosition) },
             React.createElement("button", { className: "bianic-datepicker-toggle-button", disabled: disabled, onClick: function () { return buttonAction && buttonAction(); } },
                 React.createElement(TbCalendar, { size: iconSize })))));
@@ -3130,7 +3132,7 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required;
+    var className = _a.className, value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay;
     // State and Ref
     var inputRef = useRef(null);
     var wrapperRef = useRef(null);
@@ -3138,7 +3140,7 @@ function DatePicker(_a) {
     var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
     return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInputDisplay, { value: value, setValue: onChange, placeholder: "YYYY-MM-DD", size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
+            React.createElement(DateInputDisplay, { inputClassName: className, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
             React.createElement(PickerCalendar, { selectedDate: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
 }

package/dist/esm/types/components/Forms/DatePicker/DateInputDisplay.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import TextInputProps from '../TextInput/PropsInterface';
 interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     value: string | null;
+    className: string;
     setValue?: (date: string | null) => void;
     placeholder?: string;
     label?: string;
@@ -9,6 +10,7 @@ interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     setIsActive?: () => void;
     buttonAction?: () => void;
     disabled: boolean;
+    nullDisplay?: string;
 }
-declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, ...props }: DateInputDisplayProps) => React.JSX.Element;
+declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, nullDisplay, ...props }: DateInputDisplayProps) => React.JSX.Element;
 export default DateInputDisplay;

package/dist/esm/types/components/Forms/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    className: string;
     descText?: string;
     onChange?: (date: string) => void;
     required?: boolean;
@@ -10,6 +11,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     label?: string;
     minDate?: string;
     maxDate?: string;
+    nullDisplay?: string;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ className, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, }: DatePickerProps): React.JSX.Element;
 export default DatePicker;

package/dist/index.d.ts

@@ -454,6 +454,7 @@ declare namespace DropdownItem {
 }
 
 interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    className: string;
     descText?: string;
     onChange?: (date: string) => void;
     required?: boolean;
@@ -464,8 +465,9 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     label?: string;
     minDate?: string;
     maxDate?: string;
+    nullDisplay?: string;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, }: DatePickerProps): React$1.JSX.Element;
+declare function DatePicker({ className, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, }: DatePickerProps): React$1.JSX.Element;
 
 interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
     minDate?: string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.15.0",
+  "version": "1.16.0-beta.0",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",