@uxf/ui 11.21.1 → 11.21.2

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.
@@ -19,6 +19,7 @@ export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>
19
19
  dropdownMaxHeight?: number;
20
20
  dropdownPlacement?: Placement;
21
21
  dropdownStrategy?: Strategy;
22
+ form?: string;
22
23
  helperText?: ReactNode;
23
24
  hiddenLabel?: boolean;
24
25
  iconName?: keyof IconsSet;
@@ -41,7 +41,8 @@ const input_1 = require("@uxf/ui/input");
41
41
  const label_1 = require("@uxf/ui/label");
42
42
  const react_3 = __importStar(require("react"));
43
43
  function Option(props) {
44
- return (react_3.default.createElement(react_2.Combobox.Option, { className: (option) => (0, cx_1.cx)("uxf-dropdown__item uxf-combobox__dropdown-item", option.active && classes_1.CLASSES.IS_ACTIVE, option.disabled && classes_1.CLASSES.IS_DISABLED, option.selected && classes_1.CLASSES.IS_SELECTED), value: props.option }, (option) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, option.selected)) !== null && _b !== void 0 ? _b : props.option.label; }));
44
+ const option = props.option;
45
+ return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => { var _a, _b; return react_3.default.createElement(react_3.default.Fragment, null, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label); }));
45
46
  }
46
47
  Option.displayName = "UxfUiComboboxOption";
47
48
  function Options(props) {
@@ -75,19 +76,17 @@ function Combobox(props) {
75
76
  const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
76
77
  const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.dropdownPlacement) !== null && _f !== void 0 ? _f : "bottom", (_g = props.dropdownMatchesInputWidth) !== null && _g !== void 0 ? _g : true, props.dropdownMaxHeight, props.dropdownStrategy);
77
78
  const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
78
- return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-combobox", 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), "data-name": props.name, disabled: props.isDisabled || props.isReadOnly, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
79
+ const isNotInteractive = props.isDisabled || props.isReadOnly;
80
+ return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-combobox", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
79
81
  react_3.default.createElement("div", { className: "uxf-form-component__label" },
80
- react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
82
+ react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
81
83
  react_3.default.createElement("div", { className: "uxf-form-component__input" },
82
84
  react_3.default.createElement(react_2.Combobox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-combobox__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: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
83
85
  props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
84
86
  props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
85
87
  react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" }),
86
88
  react_3.default.createElement(input_1.Input.RightElement, null,
87
- react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) &&
88
- (0, is_not_nil_1.isNotNil)(selectedOption) &&
89
- !props.isDisabled &&
90
- !props.isReadOnly },
89
+ react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(selectedOption) && !isNotInteractive },
91
90
  react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
92
91
  props.inputArrow ? (react_3.default.createElement(react_2.Combobox.Button, null, props.inputArrow(renderProps.open))) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
93
92
  props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
@@ -66,7 +66,7 @@ function Default() {
66
66
  react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled" }),
67
67
  react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
68
68
  react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
69
- react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
69
+ react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
70
70
  }
71
71
  exports.Default = Default;
72
72
  function ComponentStructure() {
@@ -56,15 +56,15 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
56
56
  }
57
57
  function Option(props) {
58
58
  const option = props.option;
59
- return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected, name: option.id.toString() })) : (props.label)))));
59
+ return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, name: option.id.toString(), onChange: props.handleCheckboxChange, value: optionState.selected })) : (props.label)))));
60
60
  }
61
61
  Option.displayName = "UxfUiMultiComboboxOption";
62
62
  function Options(props) {
63
63
  var _a, _b;
64
64
  return (react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-multi-combobox__dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.matchWidth ? "uxf-dropdown--match-width" : "uxf-dropdown--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, (0, is_not_empty_1.isNotEmpty)(props.options) ? (props.options.map((option) => {
65
65
  var _a, _b, _c, _d;
66
- const _option = option;
67
- return (react_3.default.createElement(Option, { option: option, key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : _option.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : _option.label, handleCheckboxChange: props.onCheckboxChange(_option.id), withCheckboxes: props.withCheckboxes }));
66
+ const optionTyped = option;
67
+ return (react_3.default.createElement(Option, { handleCheckboxChange: props.onCheckboxChange(optionTyped.id), key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : optionTyped.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : optionTyped.label, option: optionTyped, withCheckboxes: props.withCheckboxes }));
68
68
  })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
69
69
  }
70
70
  Options.displayName = "UxfUiMultiComboboxOptions";
@@ -129,7 +129,7 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
129
129
  (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
130
130
  };
131
131
  const isNotInteractive = props.isDisabled || props.isReadOnly;
132
- return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-multi-combobox", 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), "data-name": props.name, disabled: isNotInteractive, multiple: true, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
132
+ return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-multi-combobox", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
133
133
  var _a, _b;
134
134
  return (react_3.default.createElement(react_3.default.Fragment, null,
135
135
  react_3.default.createElement("div", { className: "uxf-form-component__label" },
@@ -54,7 +54,7 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
54
54
  function Option(props) {
55
55
  var _a, _b;
56
56
  const option = props.option;
57
- return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), value: option, disabled: option.disabled }, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option)) !== null && _b !== void 0 ? _b : option.label));
57
+ return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option)) !== null && _b !== void 0 ? _b : option.label));
58
58
  }
59
59
  Option.displayName = "UxfUiMultiSelectOption";
60
60
  function Options(props) {
@@ -91,7 +91,7 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
91
91
  props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []);
92
92
  };
93
93
  const isNotInteractive = props.isDisabled || props.isReadOnly;
94
- return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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), "data-name": props.name, disabled: isNotInteractive, multiple: true, onChange: changeHandler, value: selectedOptions }, (renderProps) => {
94
+ return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, value: selectedOptions }, (renderProps) => {
95
95
  var _a, _b;
96
96
  return (react_3.default.createElement(react_3.default.Fragment, null,
97
97
  react_3.default.createElement("div", { className: "uxf-form-component__label" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "11.21.1",
3
+ "version": "11.21.2",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,6 +17,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
17
17
  dropdownMaxHeight?: number;
18
18
  dropdownPlacement?: Placement;
19
19
  dropdownStrategy?: Strategy;
20
+ form?: string;
20
21
  helperText?: ReactNode;
21
22
  hiddenLabel?: boolean;
22
23
  iconName?: keyof IconsSet;
package/select/select.js CHANGED
@@ -38,7 +38,8 @@ const input_1 = require("@uxf/ui/input");
38
38
  const label_1 = require("@uxf/ui/label");
39
39
  const react_3 = __importStar(require("react"));
40
40
  function Option(props) {
41
- return (react_3.default.createElement(react_2.Listbox.Option, { className: (option) => (0, cx_1.cx)("uxf-dropdown__item uxf-select__dropdown-item", option.active && classes_1.CLASSES.IS_ACTIVE, option.disabled && classes_1.CLASSES.IS_DISABLED, option.selected && classes_1.CLASSES.IS_SELECTED), value: props.option }, (option) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, option.selected)) !== null && _b !== void 0 ? _b : props.option.label; }));
41
+ const option = props.option;
42
+ return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => { var _a, _b; return react_3.default.createElement(react_3.default.Fragment, null, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label); }));
42
43
  }
43
44
  Option.displayName = "UxfUiSelectOption";
44
45
  function Options(props) {
@@ -69,11 +70,12 @@ function Select(props) {
69
70
  const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", (_d = props.dropdownMatchesInputWidth) !== null && _d !== void 0 ? _d : true, props.dropdownMaxHeight, props.dropdownStrategy);
70
71
  const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
71
72
  const value = selectedOption;
72
- return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", 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), "data-name": props.name, disabled: props.isDisabled || props.isReadOnly, onChange: onChange, style: props.style, value: value }, (renderProps) => {
73
+ const isNotInteractive = props.isDisabled || props.isReadOnly;
74
+ return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: value }, (renderProps) => {
73
75
  var _a, _b, _c;
74
76
  return (react_3.default.createElement(react_3.default.Fragment, null,
75
77
  react_3.default.createElement("div", { className: "uxf-form-component__label" },
76
- react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
78
+ react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
77
79
  react_3.default.createElement("div", { className: "uxf-form-component__input" },
78
80
  react_3.default.createElement(react_2.Listbox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-select__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: (_a = SelectedValue.displayName) !== null && _a !== void 0 ? _a : "", inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
79
81
  props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
@@ -82,10 +84,7 @@ function Select(props) {
82
84
  ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
83
85
  : props.placeholder),
84
86
  react_3.default.createElement(input_1.Input.RightElement, null,
85
- react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) &&
86
- (0, is_not_nil_1.isNotNil)(value) &&
87
- !props.isDisabled &&
88
- !props.isReadOnly },
87
+ react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(value) && !isNotInteractive },
89
88
  react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
90
89
  props.inputArrow ? (props.inputArrow(renderProps.open)) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
91
90
  props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),