@uxf/ui 1.0.0-beta.45 → 1.0.0-beta.46

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.
Files changed (5) hide show
  1. package/combobox/combobox.js +4 -4
  2. package/hooks/use-dropdown.d.ts +1 -6
  3. package/hooks/use-dropdown.js +11 -22
  4. package/package.json +3 -3
  5. package/select/select.js +5 -5
package/combobox/combobox.js CHANGED
@@ -48,13 +48,13 @@ function Combobox(props, ref) {
48
48
  const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
49
49
  return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("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), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
50
50
  react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
51
- react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
51
+ react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "uxf-combobox__button--dropdown-bottom", dropdown.placement === "top" && "uxf-combobox__button-dropdown-top"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
52
52
  react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
53
53
  renderProps.open ? (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronUpIcon, size: 12 })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, size: 12 }))),
54
- 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)),
55
- react_2.default.createElement(react_1.Combobox.Options, { className: "uxf-dropdown", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => {
54
+ react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.map((option) => {
56
55
  var _a, _b, _c, _d;
57
56
  return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: 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) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
58
- }))))));
57
+ })),
58
+ 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))))));
59
59
  }
60
60
  exports.default = (0, forward_ref_1.forwardRef)("Combobox", Combobox);
package/hooks/use-dropdown.d.ts CHANGED
@@ -1,7 +1,2 @@
1
1
  import { Placement } from "@floating-ui/react-dom";
2
- import { CSSProperties } from "react";
3
- export declare function useDropdown(placement: Placement, matchWidth?: boolean): {
4
- floating: (node: HTMLElement | null) => void;
5
- reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
6
- style: Partial<CSSProperties>;
7
- };
2
+ export declare function useDropdown(placement: Placement, matchWidth?: boolean): import("@floating-ui/react-dom").UseFloatingReturn<import("@floating-ui/react-dom").ReferenceType>;
package/hooks/use-dropdown.js CHANGED
@@ -2,36 +2,25 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useDropdown = void 0;
4
4
  const react_dom_1 = require("@floating-ui/react-dom");
5
- const react_1 = require("react");
6
5
  function useDropdown(placement, matchWidth = false) {
7
- var _a, _b;
8
- const [sizeData, setSizeData] = (0, react_1.useState)(null);
9
- const { floating, reference, refs, strategy, update, x, y } = (0, react_dom_1.useFloating)({
6
+ return (0, react_dom_1.useFloating)({
10
7
  placement,
11
8
  middleware: [
12
9
  (0, react_dom_1.flip)(),
13
10
  (0, react_dom_1.shift)(),
14
11
  (0, react_dom_1.size)({
15
- apply: setSizeData,
12
+ apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
13
+ Object.assign(elements.floating.style, {
14
+ left: x + "px",
15
+ maxHeight: Math.max(50, availableHeight) + "px",
16
+ maxWidth: matchWidth ? availableWidth + "px" : undefined,
17
+ position: strategy,
18
+ top: y + "px",
19
+ });
20
+ },
16
21
  }),
17
22
  ],
23
+ whileElementsMounted: react_dom_1.autoUpdate,
18
24
  });
19
- (0, react_1.useEffect)(() => {
20
- if (!refs.reference.current || !refs.floating.current) {
21
- return;
22
- }
23
- return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
24
- }, [refs.reference, refs.floating, update]);
25
- return {
26
- floating,
27
- reference,
28
- style: {
29
- left: x !== null && x !== void 0 ? x : undefined,
30
- maxHeight: (_a = sizeData === null || sizeData === void 0 ? void 0 : sizeData.height) !== null && _a !== void 0 ? _a : undefined,
31
- maxWidth: matchWidth ? (_b = sizeData === null || sizeData === void 0 ? void 0 : sizeData.reference.width) !== null && _b !== void 0 ? _b : undefined : undefined,
32
- position: strategy,
33
- top: y !== null && y !== void 0 ? y : undefined,
34
- },
35
- };
36
25
  }
37
26
  exports.useDropdown = useDropdown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.45",
3
+ "version": "1.0.0-beta.46",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -13,8 +13,8 @@
13
13
  "author": "UX Fans s.r.o",
14
14
  "license": "MIT",
15
15
  "dependencies": {
16
- "@floating-ui/react-dom": "^0.6.0",
17
- "@headlessui/react": "^1.6.6",
16
+ "@floating-ui/react-dom": "^1.0.0",
17
+ "@headlessui/react": "^1.7.2",
18
18
  "@uxf/core": "^3.0.0",
19
19
  "jump.js": "^1.0.2"
20
20
  },
package/select/select.js CHANGED
@@ -45,13 +45,13 @@ function Select(props, ref) {
45
45
  const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
46
46
  return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("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), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
47
47
  react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
48
- react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
49
- react_2.default.createElement("div", { className: "uxf-select__button-text" }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
48
+ react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "uxf-select__button--dropdown-bottom", dropdown.placement === "top" && "uxf-select__button--dropdown-top"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
49
+ react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
50
50
  renderProps.open ? (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronUpIcon, size: 12 })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, size: 12 }))),
51
- 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)),
52
- react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, style: dropdown.style, className: "uxf-dropdown" }, props.options.map((option) => {
51
+ react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top") }, props.options.map((option) => {
53
52
  var _a, _b, _c, _d;
54
53
  return (react_2.default.createElement(react_1.Listbox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: 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) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
55
- }))))));
54
+ })),
55
+ 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))))));
56
56
  }
57
57
  exports.default = (0, forward_ref_1.forwardRef)("Select", Select);