react-better-html 1.1.40 → 1.1.42

package/dist/components/Dropdown.js

@@ -141,7 +141,7 @@ 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, 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) => {
+    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 isSelected = option.value === value;
                             const isDisabled = option.disabled;
                             const isFocused = index === focusedOptionIndex;

package/dist/components/PageHeader.d.ts

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

package/dist/components/PageHeader.js

@@ -10,9 +10,9 @@ const Div_1 = __importDefault(require("./Div"));
 const Text_1 = __importDefault(require("./Text"));
 const Image_1 = __importDefault(require("./Image"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function PageHeader({ imageUrl, imageSize = 60, title, titleAs, description, textAlign, rightElement, lightMode, marginBottom, }) {
+function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (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: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
 }
 exports.default = (0, react_1.memo)(PageHeader);

package/dist/utils/hooks.d.ts

@@ -17,6 +17,10 @@ export declare function usePageResize(): {
     width: number;
     height: number;
 };
+export declare function usePageScroll(): {
+    scrollX: number;
+    scrollY: number;
+};
 export declare function useMediaQuery(): {
     size320: boolean;
     size400: boolean;

package/dist/utils/hooks.js

@@ -5,6 +5,7 @@ exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
 exports.useComponentPropsWithExcludedStyle = useComponentPropsWithExcludedStyle;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
 exports.usePageResize = usePageResize;
+exports.usePageScroll = usePageScroll;
 exports.useMediaQuery = useMediaQuery;
 exports.useBooleanState = useBooleanState;
 exports.useDebounceState = useDebounceState;
@@ -114,6 +115,24 @@ function usePageResize() {
         height,
     };
 }
+function usePageScroll() {
+    const [scrollX, setScrollX] = (0, react_1.useState)(window.scrollX ?? 0);
+    const [scrollY, setScrollY] = (0, react_1.useState)(window.scrollY ?? 0);
+    (0, react_1.useEffect)(() => {
+        const onScroll = () => {
+            setScrollX(window.scrollX);
+            setScrollY(window.scrollY);
+        };
+        window.addEventListener("scroll", onScroll);
+        return () => {
+            window.removeEventListener("scroll", onScroll);
+        };
+    }, []);
+    return {
+        scrollX,
+        scrollY,
+    };
+}
 function useMediaQuery() {
     const { width } = usePageResize();
     return {

package/package.json

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