@uxf/ui 1.0.0-beta.173 → 1.0.0-beta.174
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/_select-base/_select-base.d.ts +2 -2
- package/_select-base/_select-base.js +9 -10
- package/combobox/combobox.js +3 -2
- package/css/dropdown.css +17 -5
- package/date-picker-input/date-picker-input.js +1 -1
- package/package.json +1 -1
- package/select/select.d.ts +2 -2
- package/select/select.js +5 -5
- package/select/select.stories.d.ts +1 -1
|
@@ -44,10 +44,10 @@ type Props<ValueId = SelectBaseValue, Value = ValueId, Option = SelectBaseOption
|
|
|
44
44
|
} | {
|
|
45
45
|
HUIComponent: typeof HUIListbox;
|
|
46
46
|
onChange?(value: Value | null): void;
|
|
47
|
-
value:
|
|
47
|
+
value: Value | null;
|
|
48
48
|
});
|
|
49
49
|
export declare const _SelectBase: {
|
|
50
|
-
<ValueId = SelectBaseValue<SelectBaseValueId>, Value =
|
|
50
|
+
<ValueId = SelectBaseValue<SelectBaseValueId>, Value = SelectBaseValue<SelectBaseValueId>, Option = SelectBaseOption<ValueId>>(props: Props<ValueId, Value, Option>): React.JSX.Element;
|
|
51
51
|
displayName: string;
|
|
52
52
|
};
|
|
53
53
|
export {};
|
|
@@ -51,11 +51,11 @@ const InputArrow = (props) => {
|
|
|
51
51
|
return react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", props.open && classes_1.CLASSES.IS_OPEN), name: iconName });
|
|
52
52
|
};
|
|
53
53
|
const Options = (props) => {
|
|
54
|
-
const
|
|
55
|
-
return (react_2.default.createElement(
|
|
54
|
+
const HUIComponent = props.HUIComponent;
|
|
55
|
+
return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top"), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
|
|
56
56
|
var _a, _b, _c, _d;
|
|
57
57
|
const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
|
|
58
|
-
return (react_2.default.createElement(
|
|
58
|
+
return (react_2.default.createElement(HUIComponent.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, (_d = (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : optionKey) !== null && _d !== void 0 ? _d : option.label));
|
|
59
59
|
})) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
|
|
60
60
|
};
|
|
61
61
|
Options.displayName = "UxfUiSelectBaseOptions";
|
|
@@ -68,13 +68,12 @@ const _SelectBase = (props) => {
|
|
|
68
68
|
const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
|
|
69
69
|
const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true, props.dropdownStrategy);
|
|
70
70
|
const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
return (react_2.default.createElement(Component, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
|
|
71
|
+
const HUIComponent = props.HUIComponent;
|
|
72
|
+
return (react_2.default.createElement(HUIComponent, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
|
|
74
73
|
react_2.default.createElement("div", { className: "uxf-form-component__label" },
|
|
75
|
-
react_2.default.createElement(
|
|
74
|
+
react_2.default.createElement(HUIComponent.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
|
|
76
75
|
react_2.default.createElement("div", { className: "uxf-form-component__input" },
|
|
77
|
-
react_2.default.createElement(InputWrapper, { HUIComponent:
|
|
76
|
+
react_2.default.createElement(InputWrapper, { HUIComponent: HUIComponent, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-select-base__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: props.customInputElementDisplayName, inputFocus: input, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, size: props.size, variant: props.variant, wrapperRef: stableRef },
|
|
78
77
|
props.leftAddon && react_2.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
|
|
79
78
|
props.leftElement && react_2.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
|
|
80
79
|
props.children,
|
|
@@ -84,11 +83,11 @@ const _SelectBase = (props) => {
|
|
|
84
83
|
!props.isDisabled &&
|
|
85
84
|
!props.isReadOnly &&
|
|
86
85
|
props.isClearable && react_2.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange }),
|
|
87
|
-
isHUICombobox(
|
|
86
|
+
isHUICombobox(HUIComponent) ? (react_2.default.createElement(HUIComponent.Button, null,
|
|
88
87
|
react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))) : (react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))),
|
|
89
88
|
props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
|
|
90
89
|
renderProps.open && (react_2.default.createElement(react_1.FloatingPortal, null,
|
|
91
|
-
react_2.default.createElement(Options, {
|
|
90
|
+
react_2.default.createElement(Options, { HUIComponent: HUIComponent, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, style: dropdown.floatingStyles }))),
|
|
92
91
|
props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
|
|
93
92
|
};
|
|
94
93
|
exports._SelectBase = _SelectBase;
|
package/combobox/combobox.js
CHANGED
|
@@ -30,7 +30,7 @@ const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
|
|
|
30
30
|
const react_2 = __importStar(require("react"));
|
|
31
31
|
const _select_base_1 = require("../_select-base");
|
|
32
32
|
const Combobox = (props) => {
|
|
33
|
-
var _a, _b, _c;
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
34
|
const isAsync = !!props.loadOptions;
|
|
35
35
|
const [query, setQuery] = (0, react_2.useState)("");
|
|
36
36
|
const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : [], props.loadOptions);
|
|
@@ -41,7 +41,8 @@ const Combobox = (props) => {
|
|
|
41
41
|
const onChange = (v) => props.onChange(v);
|
|
42
42
|
const onInputChange = (event) => setQuery(event.target.value);
|
|
43
43
|
const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
|
|
44
|
-
|
|
44
|
+
const selectedOption = (_d = props.value) !== null && _d !== void 0 ? _d : null;
|
|
45
|
+
return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: emptyMessage, forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
|
|
45
46
|
react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
|
|
46
47
|
};
|
|
47
48
|
exports.Combobox = Combobox;
|
package/css/dropdown.css
CHANGED
|
@@ -21,22 +21,34 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&__item {
|
|
24
|
-
@apply relative cursor-default select-none py-2 px-4;
|
|
24
|
+
@apply relative cursor-default select-none py-2 px-4 transition-colors;
|
|
25
|
+
|
|
26
|
+
&.is-selected {
|
|
27
|
+
@apply font-bold;
|
|
28
|
+
}
|
|
25
29
|
|
|
26
30
|
:root .light & {
|
|
27
31
|
@apply text-gray-800;
|
|
28
32
|
|
|
33
|
+
&.is-selected {
|
|
34
|
+
@apply bg-primary-100 font-bold;
|
|
35
|
+
}
|
|
36
|
+
|
|
29
37
|
&.is-active {
|
|
30
|
-
@apply text-white;
|
|
38
|
+
@apply bg-primary text-white;
|
|
31
39
|
}
|
|
32
40
|
}
|
|
33
41
|
|
|
34
42
|
:root .dark & {
|
|
35
43
|
@apply text-white;
|
|
36
|
-
}
|
|
37
44
|
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
&.is-selected {
|
|
46
|
+
@apply bg-primary-900;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.is-active {
|
|
50
|
+
@apply bg-primary;
|
|
51
|
+
}
|
|
40
52
|
}
|
|
41
53
|
}
|
|
42
54
|
|
|
@@ -65,7 +65,7 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
|
|
|
65
65
|
}, [onChange]);
|
|
66
66
|
const onDatePickerChange = (0, react_1.useCallback)((value) => {
|
|
67
67
|
const parsedValue = (0, dayjs_1.default)(value);
|
|
68
|
-
onChange(parsedValue.format(exports.OUTPUT_DATE_FORMAT));
|
|
68
|
+
onChange(value ? parsedValue.format(exports.OUTPUT_DATE_FORMAT) : null);
|
|
69
69
|
}, [onChange]);
|
|
70
70
|
const value = getValue(props.value);
|
|
71
71
|
const selectedDate = getSelectedDate(props.value);
|
package/package.json
CHANGED
package/select/select.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export type SelectOption<T = SelectValue> = {
|
|
|
7
7
|
label: ReactNode;
|
|
8
8
|
};
|
|
9
9
|
type SelectTypeRef = HTMLDivElement;
|
|
10
|
-
export interface SelectProps<
|
|
10
|
+
export interface SelectProps<ValueId = SelectValue, Option = SelectOption<ValueId>, Value = Option> extends Omit<SelectBaseProps<Value, Option>, "children" | "customInputElementDisplayName" | "emptyMessage" | "options"> {
|
|
11
11
|
forwardRef?: Ref<SelectTypeRef> | undefined;
|
|
12
12
|
loadOptions?: (query: string) => Promise<Option[]>;
|
|
13
13
|
noQueryMessage?: string;
|
|
@@ -17,7 +17,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
|
|
|
17
17
|
renderSelectedOption?: (option: Option) => ReactNode;
|
|
18
18
|
}
|
|
19
19
|
export declare const Select: {
|
|
20
|
-
<
|
|
20
|
+
<ValueId = SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
};
|
|
23
23
|
export {};
|
package/select/select.js
CHANGED
|
@@ -9,13 +9,13 @@ const react_2 = __importDefault(require("react"));
|
|
|
9
9
|
const _select_base_1 = require("../_select-base");
|
|
10
10
|
const classes_1 = require("@uxf/core/constants/classes");
|
|
11
11
|
const Select = (props) => {
|
|
12
|
-
var _a, _b, _c;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(
|
|
12
|
+
var _a, _b, _c, _d;
|
|
13
|
+
const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };
|
|
14
|
+
const selectedOption = (_a = props.options.find((option) => option.id === props.value)) !== null && _a !== void 0 ? _a : null;
|
|
15
|
+
return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
|
|
16
16
|
react_2.default.createElement(react_1.Listbox.Button, { className: `uxf-input__element ${!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && classes_1.CLASSES.IS_EMPTY}` },
|
|
17
17
|
react_2.default.createElement("span", { className: "uxf-input__element-text" }, selectedOption
|
|
18
|
-
? (
|
|
18
|
+
? (_d = (_c = props.renderSelectedOption) === null || _c === void 0 ? void 0 : _c.call(props, selectedOption)) !== null && _d !== void 0 ? _d : selectedOption.label
|
|
19
19
|
: props.placeholder))));
|
|
20
20
|
};
|
|
21
21
|
exports.Select = Select;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
<
|
|
5
|
+
<ValueId = import("../_select-base").SelectBaseValueId, Option = import("./select").SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
|
|
6
6
|
displayName: string;
|
|
7
7
|
};
|
|
8
8
|
};
|