react-better-html 1.1.29 → 1.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/Div.js
CHANGED
|
@@ -39,11 +39,11 @@ const DivComponent = (0, react_1.forwardRef)(function Div({ value, as, isTabAcce
|
|
|
39
39
|
}, [onKeyDown, isTabAccessed]);
|
|
40
40
|
return ((0, jsx_runtime_1.jsx)(DivStyledComponent, { as: as, tabIndex: isTabAccessed && !constants_1.isMobileDevice ? 0 : undefined, role: role ?? (onClick ? "button" : undefined), onClick: onClickElement, onKeyDown: onKeyDownElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: children }));
|
|
41
41
|
});
|
|
42
|
-
DivComponent.row = (0, react_1.forwardRef)(function Row(props, ref) {
|
|
43
|
-
return (
|
|
42
|
+
DivComponent.row = (0, react_1.forwardRef)(function Row({ invertFlexDirection, ...props }, ref) {
|
|
43
|
+
return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "column" : "row", ref: ref, ...props });
|
|
44
44
|
});
|
|
45
|
-
DivComponent.column = (0, react_1.forwardRef)(function Column(props, ref) {
|
|
46
|
-
return (
|
|
45
|
+
DivComponent.column = (0, react_1.forwardRef)(function Column({ invertFlexDirection, ...props }, ref) {
|
|
46
|
+
return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "row" : "column", ref: ref, ...props });
|
|
47
47
|
});
|
|
48
48
|
DivComponent.grid = (0, react_1.forwardRef)(function Grid(props, ref) {
|
|
49
49
|
return (0, jsx_runtime_1.jsx)(DivComponent, { display: "grid", ref: ref, ...props });
|
|
@@ -24,9 +24,10 @@ export type DropdownProps<Value, Data> = {
|
|
|
24
24
|
/** @default 0.5s */
|
|
25
25
|
debounceDelay?: number;
|
|
26
26
|
debounceIsLoading?: boolean;
|
|
27
|
+
debounceMinimumSymbolsRequired?: string;
|
|
27
28
|
onChange?: (value: Value | undefined) => void;
|
|
28
29
|
onChangeSearch?: (query: string) => void;
|
|
29
|
-
renderOption?: (option: DropdownOption<Value, Data>, index: number) => React.ReactNode;
|
|
30
|
+
renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
|
|
30
31
|
} & OmitProps<DivProps<unknown>, "onChange">;
|
|
31
32
|
type DropdownComponentType = {
|
|
32
33
|
<Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
|
|
@@ -14,7 +14,7 @@ const Icon_1 = __importDefault(require("./Icon"));
|
|
|
14
14
|
const Button_1 = __importDefault(require("./Button"));
|
|
15
15
|
const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
|
|
16
16
|
const Loader_1 = __importDefault(require("./Loader"));
|
|
17
|
-
const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, onChange, onChangeSearch, renderOption, ...props }, ref) {
|
|
17
|
+
const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
|
|
18
18
|
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
19
19
|
const dropdownHolderRef = (0, react_1.useRef)(null);
|
|
20
20
|
const inputRef = (0, react_1.useRef)(null);
|
|
@@ -149,8 +149,10 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
|
|
|
149
149
|
? theme.colors.textSecondary + "80"
|
|
150
150
|
: isSelected
|
|
151
151
|
? theme.colors.base
|
|
152
|
-
: theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filter: isFocused ? (isDisabled ? "brightness(0.95)" : "brightness(0.9)") : undefined, filterHover: focusedOptionIndex === undefined && !isDisabled ? "brightness(0.9)" : undefined, cursor: isDisabled ? "not-allowed" : "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: option, onClickWithValue: onClickOption, onMouseMove: () => setFocusedOptionIndex(undefined), role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: renderOption ? renderOption(option, index) : (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label }) }, JSON.stringify(option)));
|
|
153
|
-
})) : ((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)(Text_1.default.unknown, { textAlign: "left", children:
|
|
152
|
+
: theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filter: isFocused ? (isDisabled ? "brightness(0.95)" : "brightness(0.9)") : undefined, filterHover: focusedOptionIndex === undefined && !isDisabled ? "brightness(0.9)" : undefined, cursor: isDisabled ? "not-allowed" : "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: option, onClickWithValue: onClickOption, onMouseMove: () => setFocusedOptionIndex(undefined), role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: renderOption ? renderOption(option, index, isSelected) : (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label }) }, JSON.stringify(option)));
|
|
153
|
+
})) : ((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)(Text_1.default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== undefined
|
|
154
|
+
? `Enter at least ${debounceMinimumSymbolsRequired} characters`
|
|
155
|
+
: "No options" }) })) }), role: "combobox", "aria-expanded": isOpen, "aria-controls": "dropdown-list", "aria-haspopup": "listbox", "aria-label": label, ref: inputRef }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "absolute", top: 46 / 2 + (label ? 16 + theme.styles.gap / 2 : 0), right: theme.styles.space + 1, alignItems: "center", gap: theme.styles.gap, transform: "translateY(-50%)", pointerEvents: "none", filter: disabled ? "brightness(0.9)" : undefined, opacity: disabled ? 0.6 : undefined, zIndex: isOpen || isOpenLate ? 1001 : undefined, children: [(0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", position: "relative", size: 10, iconSize: 14, opacity: !withClearButton ? 0 : undefined, pointerEvents: withClearButton ? "all" : undefined, onClick: onClickClearButton, disabled: !withClearButton }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "chevronDown", position: "relative", size: 16, color: theme.colors.textSecondary, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme.styles.transition, pointerEvents: "none" })] })] }) }));
|
|
154
156
|
});
|
|
155
157
|
const Dropdown = (0, react_1.memo)(DropdownComponent);
|
|
156
158
|
exports.default = Dropdown;
|