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

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 (7) hide show
  1. package/combobox/combobox.js +1 -1
  2. package/input/input-element.d.ts +9 -2
  3. package/input/input-element.js +1 -1
  4. package/package.json +1 -1
  5. package/select/select.js +1 -1
  6. package/text-input/text-input.d.ts +9 -2
  7. package/text-input/text-input.js +1 -1
package/combobox/combobox.js CHANGED
@@ -48,7 +48,7 @@ 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, 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 },
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" && "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
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
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) => {
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.46",
3
+ "version": "1.0.0-beta.48",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/select/select.js CHANGED
@@ -45,7 +45,7 @@ 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, 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 },
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" && "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
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
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) => {
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
  });