react-better-html 1.1.57 → 1.1.59

package/dist/components/BetterHtmlProvider.js

@@ -26,6 +26,10 @@ const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
       text-decoration: none;
       color: inherit;
    }
+
+   .react-better-html-no-scrollbar::-webkit-scrollbar {
+      display: none;
+   }
 `;
 const betterHtmlContext = (0, react_1.createContext)(undefined);
 const useBetterHtmlContext = () => {

package/dist/components/Button.d.ts

@@ -5,10 +5,11 @@ import { LoaderName } from "../types/loader";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { ComponentHoverStyle, ComponentStyle } from "../types/components";
 export type ButtonProps<Value> = {
-    href?: string;
     text?: string;
     value?: Value;
+    href?: string;
     download?: string;
+    target?: React.ComponentProps<"a">["target"];
     icon?: IconName | AnyOtherString;
     /** @default "left" */
     iconPosition?: "left" | "right";

package/dist/components/Button.js

@@ -104,7 +104,7 @@ const ButtonElement = styled_components_1.default.button.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-const ButtonComponent = function Button({ href, text, value, download, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
+const ButtonComponent = function Button({ href, text, value, download, target, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const isLoadingHook = (0, BetterHtmlProvider_1.useLoader)(loaderName);
     const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
@@ -122,7 +122,7 @@ const ButtonComponent = function Button({ href, text, value, download, icon, ico
     }, [onClick, onClickWithValue, value]);
     const iconComponent = icon ? ((0, jsx_runtime_1.jsx)(Div_1.default.row, { height: 20, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, color: iconColor ?? props.color ?? theme.colors.base, size: iconSize ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16") }) })) : undefined;
     const imageComponent = image ? ((0, jsx_runtime_1.jsx)(Image_1.default, { name: image, color: iconColor ?? props.color ?? theme.colors.base, width: imageWidth ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16"), height: imageHeight })) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, download: download, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, download: download, target: target, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/ColorThemeSwitch.d.ts

@@ -1,5 +1,6 @@
 import { ComponentMarginProps } from "../types/components";
 export type ColorThemeSwitchProps = {
+    /** @default false */
     withMoon?: boolean;
     className?: string;
 } & ComponentMarginProps;

package/dist/components/Div.d.ts

@@ -5,6 +5,7 @@ export type DivProps<Value> = {
     value?: Value;
     /** @default "div" */
     as?: WebTarget;
+    /** @default false */
     isTabAccessed?: boolean;
     onClickWithValue?: (value: Value) => void;
 } & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;

package/dist/components/Dropdown.d.ts

@@ -5,6 +5,7 @@ import { DivProps } from "./Div";
 export type DropdownOption<Value, Data = unknown> = {
     value: Value;
     label: string;
+    /** @default false */
     disabled?: boolean;
     searchValues?: string[];
     data?: Data;
@@ -13,7 +14,9 @@ export type DropdownProps<Value, Data = unknown> = {
     label?: string;
     errorText?: string;
     infoText?: string;
+    /** @default false */
     required?: boolean;
+    /** @default false */
     disabled?: boolean;
     options: DropdownOption<Value, Data>[];
     value?: Value;
@@ -21,12 +24,16 @@ export type DropdownProps<Value, Data = unknown> = {
     placeholder?: string;
     leftIcon?: IconName | AnyOtherString;
     inputFieldClassName?: string;
+    /** @default false */
     withSearch?: boolean;
+    /** @default false */
     withDebounce?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
+    /** @default false */
     debounceIsLoading?: boolean;
     debounceMinimumSymbolsRequired?: number;
+    /** @default false */
     withoutClearButton?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;

package/dist/components/Dropdown.js

@@ -14,7 +14,7 @@ const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
 const Loader_1 = __importDefault(require("./Loader"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder, leftIcon, inputFieldClassName, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, onChange, onChangeSearch, renderOption, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const dropdownHolderRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
@@ -141,7 +141,8 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
     }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
     const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
     const withClearButton = isOpen && selectedOption;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, cursor: !withSearch ? "pointer" : undefined, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
+    const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
+    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, cursor: !withSearch ? "pointer" : undefined, placeholder: withSearch ? (selectedOption ? selectedOption.label : readyPlaceholder) : readyPlaceholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
                             const isSelected = option.value === value;
                             const isDisabled = option.disabled;
                             const isFocused = index === focusedOptionIndex;

package/dist/components/Form.d.ts

@@ -7,11 +7,14 @@ export type FormProps = {
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;
     submitButtonId?: string;
+    /** @default false */
     submitButtonIsDisabled?: boolean;
     /** @default "right" */
     actionButtonsLocation?: "left" | "center" | "right";
     gap?: React.CSSProperties["gap"];
+    /** @default false */
     isSubmitting?: boolean;
+    /** @default false */
     isDestructive?: boolean;
     onClickCancel?: () => void;
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;

package/dist/components/InputField.d.ts

@@ -9,12 +9,15 @@ export type InputFieldProps = {
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     insideInputFieldComponent?: React.ReactNode;
+    /** @default false */
     withDebounce?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
     onChangeValue?: (value: string) => void;
     onClickRightIcon?: () => void;
+    holderRef?: React.ForwardedRef<HTMLDivElement>;
 } & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
+export type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
@@ -22,14 +25,19 @@ type InputFieldComponentType = {
     password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React.ReactElement;
+    date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
-export type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
 declare const InputField: typeof InputFieldComponent & {
     multiline: typeof InputFieldComponent.multiline;
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
     search: typeof InputFieldComponent.search;
     phoneNumber: typeof InputFieldComponent.phoneNumber;
+    date: typeof InputFieldComponent.date;
+    dateTime: typeof InputFieldComponent.dateTime;
+    time: typeof InputFieldComponent.time;
 };
 export default InputField;

package/dist/components/InputField.js

@@ -47,6 +47,13 @@ const InputElement = styled_components_1.default.input.withConfig({
       cursor: not-allowed;
    }
 
+   &[type="date"]::-webkit-calendar-picker-indicator,
+   &[type="datetime-local"]::-webkit-calendar-picker-indicator,
+   &[type="time"]::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+   }
+
    &.react-better-html-phone-number-holder {
       border-right: none;
       border-top-right-radius: 0px;
@@ -71,6 +78,15 @@ const InputElement = styled_components_1.default.input.withConfig({
       }
    }
 
+   &.react-better-html-inputField-dateTime-opened {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+   }
+
+   &.react-better-html-inputField-dateTime-opened-late {
+      z-index: 1001;
+   }
+
    ${(props) => props.normalStyle}
 
    &:hover {
@@ -111,7 +127,9 @@ const TextareaElement = styled_components_1.default.textarea.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label, errorText, infoText, leftIcon, rightIcon, insideInputFieldComponent, withDebounce, debounceDelay = 0.5, onChange, onChangeValue, onClickRightIcon, required, placeholder, ...props }, ref) {
+const hours = Array.from({ length: 24 }, (_, index) => index);
+const minutes = Array.from({ length: 60 }, (_, index) => index);
+const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label, errorText, infoText, leftIcon, rightIcon, insideInputFieldComponent, withDebounce, debounceDelay = 0.5, onChange, onChangeValue, onClickRightIcon, holderRef, required, placeholder, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const [_, debouncedValue, setDebouncedValue] = (0, hooks_1.useDebounceState)(props.value?.toString() ?? "", debounceDelay);
     const styledComponentStylesWithoutExcluded = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
@@ -135,7 +153,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
             return;
         onChangeValue?.(debouncedValue);
     }, [withDebounce, onChangeValue, debouncedValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, ref: holderRef, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
 InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, placeholder, errorText, infoText, leftIcon, rightIcon, onChange, onChangeValue, onClickRightIcon, required, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
@@ -193,7 +211,52 @@ InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({
         setDropdownValue(country.phoneNumberExtension);
         setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { width: "100%", children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 110, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
+});
+InputFieldComponent.date = (0, react_1.forwardRef)(function Date({ className, onFocus, onBlur, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const holderRef = (0, react_1.useRef)(null);
+    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
+    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "date", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: "Hello there" }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps }));
+});
+InputFieldComponent.dateTime = (0, react_1.forwardRef)(function DateTime({ className, onFocus, onBlur, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const holderRef = (0, react_1.useRef)(null);
+    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
+    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "datetime-local", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: "Hello there" }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps }));
+});
+InputFieldComponent.time = (0, react_1.forwardRef)(function Time({ ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const holderRef = (0, react_1.useRef)(null);
+    const selectedHourRef = (0, react_1.useRef)(null);
+    const selectedMinuteRef = (0, react_1.useRef)(null);
+    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
+    const onClickHour = (0, react_1.useCallback)((hour) => {
+        const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
+        inputFieldProps.onChangeValue?.(value);
+        setInternalValue(value);
+    }, [internalValue, inputFieldProps.onChangeValue]);
+    const onClickMinute = (0, react_1.useCallback)((minute) => {
+        const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
+        inputFieldProps.onChangeValue?.(value);
+        setInternalValue(value);
+    }, [internalValue, inputFieldProps.onChangeValue]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen && selectedHourRef.current)
+            selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
+        if (isOpen && selectedMinuteRef.current)
+            selectedMinuteRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
+    }, [isOpen]);
+    const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
+    const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
+    const buttonWidth = 50;
+    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "time", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: buttonWidth * 2 + 2, height: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { height: "100%", children: [(0, jsx_runtime_1.jsx)(Div_1.default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
+                            const isSelected = hour.toString() === valueHour;
+                            return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", justifyContent: "center", color: isSelected ? theme.colors.base : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filterHover: "brightness(0.9)", cursor: "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: hour, onClickWithValue: onClickHour, ref: isSelected ? selectedHourRef : undefined, children: (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", children: hour.toString().padStart(2, "0") }) }, hour));
+                        }) }), (0, jsx_runtime_1.jsx)(Div_1.default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
+                            const isSelected = minute.toString() === valueMinute;
+                            return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", justifyContent: "center", color: isSelected ? theme.colors.base : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filterHover: "brightness(0.9)", cursor: "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: minute, onClickWithValue: onClickMinute, ref: isSelected ? selectedMinuteRef : undefined, children: (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", children: minute.toString().padStart(2, "0") }) }, minute));
+                        }) })] }) }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps, minWidth: buttonWidth * 2 + 2 }));
 });
 const InputField = (0, react_1.memo)(InputFieldComponent);
 InputField.multiline = InputFieldComponent.multiline;
@@ -201,4 +264,7 @@ InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
 InputField.phoneNumber = InputFieldComponent.phoneNumber;
+InputField.date = InputFieldComponent.date;
+InputField.dateTime = InputFieldComponent.dateTime;
+InputField.time = InputFieldComponent.time;
 exports.default = InputField;

package/dist/components/Label.d.ts

@@ -1,6 +1,8 @@
 export type LabelProps = {
     text?: string;
+    /** @default false */
     required?: boolean;
+    /** @default false */
     isError?: boolean;
 };
 declare function Label({ text, required, isError }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal.js

@@ -87,7 +87,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
             isOpened,
         };
     }, [onClickOpen, onClickClose, isOpened]);
-    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2, borderTopRightRadius: theme.styles.borderRadius * 2, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, transition: theme.styles.transition, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2 - 1, borderTopRightRadius: theme.styles.borderRadius * 2 - 1, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, transition: theme.styles.transition, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
 });
 ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/PageHeader.d.ts

@@ -10,6 +10,7 @@ export type PageHeaderProps = {
     description?: string;
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
+    /** @default false */
     lightMode?: boolean;
 } & Pick<ComponentMarginProps, "marginBottom">;
 declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
+import { ToggleInputProps } from "./ToggleInput";
+import { ImageProps } from "./Image";
+type TextColumn<DataItem> = {
+    type: "text";
+    keyName: keyof DataItem;
+    format?: (value: any) => string;
+};
+type ElementColumn<DataItem> = {
+    type: "element";
+    render: (item: DataItem, index: number) => ReactNode;
+};
+type ImageColumn<DataItem> = {
+    type: "image";
+    keyName?: keyof DataItem;
+} & ImageProps;
+type CheckboxColumn<DataItem> = {
+    type: "checkbox";
+    keyName?: keyof DataItem;
+} & ToggleInputProps<boolean>;
+export type TableColumn<DataItem> = {
+    label?: string;
+    width?: string | number;
+    align?: "left" | "center" | "right";
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem>);
+export type TableProps<DataItem> = {
+    columns: TableColumn<DataItem>[];
+    data: DataItem[];
+    /** @default false */
+    isStriped?: boolean;
+    /** @default false */
+    withStickyHeader?: boolean;
+    /** @default "No data available" */
+    noDataItemsMessage?: string;
+    onClickRow?: (item: DataItem, index: number) => void;
+    onClickAllCheckboxes?: () => void;
+} & ComponentMarginProps;
+type TableComponentType = {
+    <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
+};
+declare const TableComponent: TableComponentType;
+declare const Table: typeof TableComponent;
+export default Table;

package/dist/components/Table.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importStar(require("styled-components"));
+const Div_1 = __importDefault(require("./Div"));
+const ToggleInput_1 = __importDefault(require("./ToggleInput"));
+const Image_1 = __importDefault(require("./Image"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const Text_1 = __importDefault(require("./Text"));
+const defaultImageWidth = 120;
+const TableStyledComponent = styled_components_1.default.table.withConfig({
+    shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop),
+}) `
+   width: 100%;
+   border-collapse: collapse;
+   border-spacing: 0;
+
+   tr {
+      background-color: ${(props) => props.theme.colors.backgroundContent};
+
+      &.isHeader {
+         background-color: ${(props) => props.theme.colors.backgroundSecondary};
+         font-weight: 700;
+      }
+
+      &.isClickable {
+         cursor: pointer;
+      }
+
+      ${(props) => props.isStriped
+    ? (0, styled_components_1.css) `
+                 &:nth-child(even) {
+                    background-color: ${props.theme.colors.backgroundSecondary};
+                 }
+              `
+    : ""}
+
+      ${(props) => props.withHover
+    ? (0, styled_components_1.css) `
+                 transition: ${(props) => props.theme.styles.transition};
+
+                 &:not(.isHeader):hover {
+                    background-color: ${props.theme.colors.backgroundSecondary}20;
+                 }
+              `
+    : ""}
+
+      th {
+         font-size: 18px;
+         text-align: left;
+         padding: ${(props) => props.theme.styles.space}px;
+      }
+
+      td {
+         border-top: 1px solid ${(props) => props.theme.colors.border}60;
+         padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
+
+         &.noData {
+            text-align: center;
+            padding: ${(props) => props.theme.styles.space}px;
+         }
+      }
+   }
+`;
+const ThStyledComponent = styled_components_1.default.th.withConfig({
+    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+}) `
+   ${(props) => (props.width ? `width: ${props.width}px;` : "")}
+   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
+`;
+const TdStyledComponent = styled_components_1.default.td.withConfig({
+    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+}) `
+   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
+`;
+const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, isStriped, withStickyHeader, noDataItemsMessage = "No data available", onClickRow, onClickAllCheckboxes, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const renderCellContent = (0, react_1.useCallback)((column, item, index) => {
+        switch (column.type) {
+            case "text": {
+                const value = item[column.keyName];
+                return column.format ? column.format(value) : String(value ?? "");
+            }
+            case "element": {
+                return column.render(item, index);
+            }
+            case "image": {
+                const { type, keyName, ...props } = column;
+                const src = keyName ? item[keyName] : undefined;
+                return ((0, jsx_runtime_1.jsx)(Image_1.default, { src: src, width: defaultImageWidth, borderRadius: theme.styles.borderRadius / 2, ...props }));
+            }
+            case "checkbox": {
+                const { type, keyName, ...props } = column;
+                const checked = keyName ? item[keyName] : false;
+                return (0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checked, ...props });
+            }
+            default: {
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            }
+        }
+    }, [theme]);
+    const onClickRowElement = (0, react_1.useCallback)((item, index) => {
+        onClickRow?.(item, index);
+    }, [onClickRow]);
+    const everythingIsChecked = (0, react_1.useMemo)(() => {
+        if (!columns.some((column) => column.type === "checkbox"))
+            return false;
+        const keyName = columns.find((column) => column.type === "checkbox")?.keyName;
+        if (!keyName)
+            return false;
+        return data.every((item) => item[keyName]);
+    }, [data]);
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, textAlign: column.align, children: column.label ??
+                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxes })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
+});
+const Table = (0, react_1.memo)(TableComponent);
+exports.default = Table;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import Form, { type FormProps } from "./components/Form";
 import Label, { type LabelProps } from "./components/Label";
 import FormRow, { type FormRowProps } from "./components/FormRow";
 import ColorThemeSwitch, { type ColorThemeSwitchProps } from "./components/ColorThemeSwitch";
+import Table, { type TableColumn } from "./components/Table";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls, type BetterHtmlProviderValue } from "./components/BetterHtmlProvider";
 import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
 import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
@@ -30,4 +31,4 @@ import { type Color, type ColorName, type ColorTheme, type Colors, type Styles,
 import { type BrowserName } from "./types/other";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, loaderControls, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };
+export { BetterHtmlProvider, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, Table, TableColumn, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, loaderControls, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };

package/dist/index.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.loaderControls = exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.ColorThemeSwitch = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
+exports.isMobileDevice = exports.loaderControls = exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Table = exports.ColorThemeSwitch = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -76,6 +76,8 @@ const FormRow_1 = __importDefault(require("./components/FormRow"));
 exports.FormRow = FormRow_1.default;
 const ColorThemeSwitch_1 = __importDefault(require("./components/ColorThemeSwitch"));
 exports.ColorThemeSwitch = ColorThemeSwitch_1.default;
+const Table_1 = __importDefault(require("./components/Table"));
+exports.Table = Table_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });

package/dist/utils/hooks.d.ts

@@ -13,6 +13,13 @@ excludeProps?: boolean): {
 export declare function useComponentPropsWithPrefix<Props extends Record<string, any>, Prefix extends string>(props: Props, prefix: Prefix): Record<`${Prefix}-${string}`, any>;
 export declare function useComponentPropsWithExcludedStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
 export declare function useComponentPropsWithoutStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
+export declare function useComponentInputFieldDateProps(props: InputFieldProps, holderRef: React.RefObject<HTMLDivElement | null>): {
+    internalValue: string;
+    setInternalValue: React.Dispatch<React.SetStateAction<string>>;
+    inputFieldProps: InputFieldProps;
+    insideInputFieldComponentProps: InputFieldProps;
+    isOpen: boolean;
+};
 export declare function usePageResize(): {
     width: number;
     height: number;
@@ -71,7 +78,7 @@ export declare function useForm<FormFields extends Record<string | number, strin
     isDirty: boolean;
 };
 export declare function useUrlQuery(): {
-    setQuery: (query: Record<string, string>, keepHistory?: boolean) => void;
+    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
     getQuery: (name: string) => string | null;
     removeQuery: (name: string, keepHistory?: boolean) => void;
 };

package/dist/utils/hooks.js

@@ -4,6 +4,7 @@ exports.useStyledComponentStyles = useStyledComponentStyles;
 exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
 exports.useComponentPropsWithExcludedStyle = useComponentPropsWithExcludedStyle;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
+exports.useComponentInputFieldDateProps = useComponentInputFieldDateProps;
 exports.usePageResize = usePageResize;
 exports.usePageScroll = usePageScroll;
 exports.useMediaQuery = useMediaQuery;
@@ -97,6 +98,80 @@ function useComponentPropsWithoutStyle(props) {
         return previousValue;
     }, {}), [props]);
 }
+function useComponentInputFieldDateProps(props, holderRef) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const [isOpen, setIsOpen] = useBooleanState();
+    const [isOpenLate, setIsOpenLate] = useBooleanState();
+    const [isFocused, setIsFocused] = useBooleanState();
+    const [internalValue, setInternalValue] = (0, react_1.useState)(props.value?.toString() ?? "");
+    const inputFieldProps = (0, react_1.useMemo)(() => ({
+        value: internalValue,
+        className: `${isOpen ? "react-better-html-inputField-dateTime-opened" : ""}${isOpenLate ? " react-better-html-inputField-dateTime-opened-late" : ""}${props.className ? ` ${props.className}` : ""}`,
+        onClick: (event) => {
+            if (props.disabled)
+                return;
+            setIsOpen.setTrue();
+            props.onClick?.(event);
+        },
+        onFocus: (event) => {
+            setIsFocused.setTrue();
+            props.onFocus?.(event);
+        },
+        onBlur: (event) => {
+            setIsFocused.setFalse();
+            props.onBlur?.(event);
+        },
+        onChangeValue: (value) => {
+            setInternalValue(value);
+            props.onChangeValue?.(value);
+        },
+    }), [props, internalValue, isOpen, isOpenLate]);
+    const insideInputFieldComponentProps = (0, react_1.useMemo)(() => ({
+        border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`,
+        borderTop: "none",
+        opacity: !isOpen ? 0 : undefined,
+        pointerEvents: !isOpen ? "none" : undefined,
+        transform: `translateY(${!isOpen ? -10 : 0}px)`,
+        zIndex: 1000,
+        transition: theme.styles.transition,
+    }), [isOpen, isFocused]);
+    (0, react_1.useEffect)(() => {
+        if (props.value === undefined || props.value === null)
+            return;
+        setInternalValue(props.value.toString());
+    }, [props.value]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setIsOpenLate.setTrue();
+        }
+        else {
+            const timeout = setTimeout(setIsOpenLate.setFalse, 0.2 * 1000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (holderRef.current && !holderRef.current.contains(event.target)) {
+                setIsOpen.setFalse();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    return {
+        internalValue,
+        setInternalValue,
+        inputFieldProps,
+        insideInputFieldComponentProps,
+        isOpen,
+    };
+}
 function usePageResize() {
     const [width, setWidth] = (0, react_1.useState)(window.innerWidth);
     const [height, setHeight] = (0, react_1.useState)(window.innerHeight);
@@ -338,7 +413,7 @@ function useUrlQuery() {
         navigate({
             search: (0, react_router_dom_1.createSearchParams)({
                 ...currentSearchParams,
-                ...query,
+                ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()])),
             }).toString(),
         }, {
             replace: !keepHistory,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.57",
+   "version": "1.1.59",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [