@uxf/ui 1.0.0-beta.48 → 1.0.0-beta.49

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 (6) hide show
  1. package/combobox/combobox.d.ts +5 -0
  2. package/combobox/combobox.js +5 -3
  3. package/combobox/combobox.stories.js +1 -1
  4. package/package.json +1 -1
  5. package/select/select.d.ts +5 -0
  6. package/select/select.js +5 -3
package/combobox/combobox.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { Placement } from "@floating-ui/react-dom";
1
2
  import React, { ReactNode } from "react";
3
+ import { IconsSet } from "../icon/theme";
2
4
  import { FormControlProps } from "../types";
3
5
  export declare type ComboboxValue = number | string;
4
6
  export declare type ComboboxOption<T = ComboboxValue> = {
@@ -8,7 +10,10 @@ export declare type ComboboxOption<T = ComboboxValue> = {
8
10
  };
9
11
  export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
10
12
  className?: string;
13
+ dropdownPlacement?: Placement;
11
14
  helperText?: ReactNode;
15
+ iconName?: keyof IconsSet;
16
+ iconSize?: number;
12
17
  id?: string;
13
18
  keyExtractor?: (option: Option) => string | number;
14
19
  label: string;
package/combobox/combobox.js CHANGED
@@ -35,7 +35,7 @@ const icon_1 = require("../icon");
35
35
  const label_1 = require("../label");
36
36
  const forward_ref_1 = require("../utils/forward-ref");
37
37
  function Combobox(props, ref) {
38
- var _a;
38
+ var _a, _b, _c;
39
39
  const generatedId = (0, react_2.useId)();
40
40
  const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
41
41
  const [query, setQuery] = (0, react_2.useState)("");
@@ -44,13 +44,15 @@ function Combobox(props, ref) {
44
44
  const innerRef = (0, react_2.useRef)(null);
45
45
  const errorId = props.isInvalid ? `${id}--error-message` : undefined;
46
46
  const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
47
- const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
47
+ const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
48
48
  const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
49
+ const getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
50
+ const iconSize = (_c = props.iconSize) !== null && _c !== void 0 ? _c : 12;
49
51
  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
52
  react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
51
53
  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" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
52
54
  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
- 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 }))),
55
+ props.iconName ? (react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: props.iconName, size: iconSize })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, className: getIconClassName(renderProps.open), size: iconSize }))),
54
56
  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) => {
55
57
  var _a, _b, _c, _d;
56
58
  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));
package/combobox/combobox.stories.js CHANGED
@@ -49,7 +49,7 @@ function Default() {
49
49
  return (react_1.default.createElement("div", { className: "space-y-8" },
50
50
  react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox", options: options, onChange: handleChange, value: value }),
51
51
  react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox with helper text", options: options, onChange: handleChange, value: value, helperText: "Start typing to see options..." }),
52
- react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox invalid", options: options, onChange: handleChange, value: value, helperText: "Error message", isInvalid: true, isRequired: true })));
52
+ react_1.default.createElement(index_1.Combobox, { id: "combobox-1", dropdownPlacement: "top", name: "combobox", label: "Combobox invalid", options: options, onChange: handleChange, value: value, helperText: "Error message", isInvalid: true, isRequired: true })));
53
53
  }
54
54
  exports.Default = Default;
55
55
  function ComponentStructure() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.48",
3
+ "version": "1.0.0-beta.49",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/select/select.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import type { Placement } from "@floating-ui/react-dom";
1
2
  import React, { ReactNode } from "react";
3
+ import { IconsSet } from "../icon/theme";
2
4
  import { FormControlProps } from "../types";
3
5
  export declare type SelectValue = number | string;
4
6
  export declare type SelectOption<T = SelectValue> = {
@@ -8,7 +10,10 @@ export declare type SelectOption<T = SelectValue> = {
8
10
  };
9
11
  export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>> extends FormControlProps<Value | null> {
10
12
  className?: string;
13
+ dropdownPlacement?: Placement;
11
14
  helperText?: ReactNode;
15
+ iconName?: keyof IconsSet;
16
+ iconSize?: number;
12
17
  id?: string;
13
18
  keyExtractor?: (option: Option) => string | number;
14
19
  label?: ReactNode;
package/select/select.js CHANGED
@@ -34,20 +34,22 @@ const icon_1 = require("../icon");
34
34
  const label_1 = require("../label");
35
35
  const forward_ref_1 = require("../utils/forward-ref");
36
36
  function Select(props, ref) {
37
- var _a;
37
+ var _a, _b, _c;
38
38
  const generatedId = (0, react_2.useId)();
39
39
  const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
40
40
  const selectedOption = props.options.find((option) => option.id === props.value);
41
41
  const innerRef = (0, react_2.useRef)(null);
42
42
  const errorId = props.isInvalid ? `${id}--error-message` : undefined;
43
43
  const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
44
- const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
44
+ const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
45
45
  const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
46
+ const getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
47
+ const iconSize = (_c = props.iconSize) !== null && _c !== void 0 ? _c : 12;
46
48
  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
49
  react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
48
50
  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" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
49
51
  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
- 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 }))),
52
+ props.iconName ? (react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: props.iconName, size: iconSize })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, className: getIconClassName(renderProps.open), size: iconSize }))),
51
53
  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) => {
52
54
  var _a, _b, _c, _d;
53
55
  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));