@uxf/ui 1.0.0-beta.47 → 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 (10) 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/input/input-element.d.ts +9 -2
  5. package/input/input-element.js +1 -1
  6. package/package.json +1 -1
  7. package/select/select.d.ts +5 -0
  8. package/select/select.js +5 -3
  9. package/text-input/text-input.d.ts +9 -2
  10. package/text-input/text-input.js +1 -1
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/input/input-element.d.ts CHANGED
@@ -1,12 +1,19 @@
1
1
  import { FormControlProps } from "@uxf/ui/types/form-control-props";
2
- import React from "react";
2
+ import React, { KeyboardEventHandler } from "react";
3
3
  export interface InputElementProps extends FormControlProps<string> {
4
4
  "aria-describedby"?: string;
5
5
  "aria-invalid"?: boolean;
6
6
  form?: string;
7
7
  id?: string;
8
+ onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
8
9
  placeholder?: string;
9
- type?: "email" | "number" | "password" | "tel" | "text" | "url";
10
+ type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
11
+ maxLength?: number | undefined;
12
+ minLength?: number | undefined;
13
+ max?: number | string;
14
+ min?: number | string;
15
+ pattern?: string;
16
+ step?: number | string;
10
17
  }
11
18
  declare const _default: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
12
19
  export default _default;
package/input/input-element.js CHANGED
@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const react_1 = __importDefault(require("react"));
7
7
  const forward_ref_1 = require("../utils/forward-ref");
8
8
  function InputElement(props, ref) {
9
- return (react_1.default.createElement("input", { "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, onBlur: props.onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: props.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, type: props.type, value: props.value }));
9
+ return (react_1.default.createElement("input", { "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, onBlur: props.onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, type: props.type, value: props.value }));
10
10
  }
11
11
  exports.default = (0, forward_ref_1.forwardRef)("InputElement", InputElement);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.47",
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));
package/text-input/text-input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FormControlProps } from "@uxf/ui/types";
2
- import React, { ReactNode } from "react";
2
+ import React, { KeyboardEventHandler, ReactNode } from "react";
3
3
  import { InputProps } from "@uxf/ui/input/input";
4
4
  declare type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
5
5
  declare type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -14,10 +14,17 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
14
14
  label?: ReactNode;
15
15
  leftAddon?: ReactNode;
16
16
  leftElement?: ReactNode;
17
+ onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
17
18
  placeholder?: string;
18
19
  rightAddon?: ReactNode;
19
20
  rightElement?: ReactNode;
20
- type?: "email" | "number" | "password" | "tel" | "text" | "url";
21
+ type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
22
+ maxLength?: number | undefined;
23
+ minLength?: number | undefined;
24
+ max?: number | string;
25
+ min?: number | string;
26
+ pattern?: string;
27
+ step?: number | string;
21
28
  }
22
29
  export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
23
30
  export {};
package/text-input/text-input.js CHANGED
@@ -51,7 +51,7 @@ exports.TextInput = (0, forward_ref_1.forwardRef)("TextInput", (props, ref) => {
51
51
  react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
52
52
  props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
53
53
  props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
54
- react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: onBlur, onChange: props.onChange, onFocus: onFocus, placeholder: props.placeholder, ref: ref, type: props.type, value: props.value }),
54
+ react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: props.onChange, onFocus: onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: ref, step: props.step, type: props.type, value: props.value }),
55
55
  props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
56
56
  props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
57
57
  });