react-better-html 1.1.58 → 1.1.60

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/InputField.d.ts

@@ -15,7 +15,9 @@ export type InputFieldProps = {
     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;
@@ -23,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: 116, 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

@@ -4,7 +4,8 @@ export type LabelProps = {
     required?: boolean;
     /** @default false */
     isError?: boolean;
+    color?: string;
 };
-declare function Label({ text, required, isError }: LabelProps): import("react/jsx-runtime").JSX.Element;
+declare function Label({ text, required, isError, color }: LabelProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Label>;
 export default _default;

package/dist/components/Label.js

@@ -7,8 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function Label({ text, required, isError }) {
+function Label({ text, required, isError, color }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: isError ? theme.colors.error : theme.colors.textSecondary, children: [text, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: isError ? theme.colors.error : color ?? theme.colors.textSecondary, children: [text, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }));
 }
 exports.default = (0, react_1.memo)(Label);

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;

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);

package/package.json

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