@trail-ui/react
Version:
252 lines (248 loc) • 8.73 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/text-field/text-field.tsx
var text_field_exports = {};
__export(text_field_exports, {
TextField: () => _TextField,
TextFieldContext: () => TextFieldContext
});
module.exports = __toCommonJS(text_field_exports);
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_utils2 = require("@react-aria/utils");
var import_utils3 = require("@react-stately/utils");
var import_react2 = require("react");
var import_react_aria2 = require("react-aria");
var import_react_aria_components = require("react-aria-components");
// src/_utils/utils.tsx
var import_utils = require("@react-aria/utils");
var import_react = __toESM(require("react"));
var import_react_aria = require("react-aria");
var import_react_dom = __toESM(require("react-dom"));
var import_jsx_runtime = require("react/jsx-runtime");
function useSlot() {
let [hasSlot, setHasSlot] = (0, import_react.useState)(true);
let hasRun = (0, import_react.useRef)(false);
let ref = (0, import_react.useCallback)((el) => {
hasRun.current = true;
setHasSlot(!!el);
}, []);
(0, import_utils.useLayoutEffect)(() => {
if (!hasRun.current) {
setHasSlot(false);
}
}, []);
return [ref, hasSlot];
}
if (typeof HTMLTemplateElement !== "undefined") {
const getFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, "firstChild").get;
Object.defineProperty(HTMLTemplateElement.prototype, "firstChild", {
configurable: true,
enumerable: true,
get: function() {
if (this.dataset.reactAriaHidden) {
return this.content.firstChild;
} else {
return getFirstChild.call(this);
}
}
});
}
var HiddenContext = (0, import_react.createContext)(false);
var hiddenFragment = typeof DocumentFragment !== "undefined" ? new DocumentFragment() : null;
function removeDataAttributes(props) {
const prefix = /^(data-.*)$/;
let filteredProps = {};
for (const prop in props) {
if (!prefix.test(prop)) {
filteredProps[prop] = props[prop];
}
}
return filteredProps;
}
// src/text-field/text-field.tsx
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime2 = require("react/jsx-runtime");
var TextFieldContext = (0, import_react2.createContext)(null);
function TextField(props, ref) {
[props, ref] = (0, import_react_aria_components.useContextProps)(props, ref, TextFieldContext);
let inputRef = (0, import_react2.useRef)(null);
let [labelRef, label] = useSlot();
let [inputElementType, setInputElementType] = (0, import_react2.useState)("input");
const {
onValueChange = () => {
},
onClear,
className,
classNames,
children,
label: labelValue,
description,
errorMessage,
errorId,
errorIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_icons.ErrorIcon,
{
className: "h-4 w-4 text-red-800 dark:text-red-600",
role: "img",
"aria-label": "Error",
"aria-hidden": false
}
)
} = props;
const handleValueChange = (0, import_react2.useCallback)(
(value) => {
onValueChange(value != null ? value : "");
},
[onValueChange]
);
const [inputValue, setInputValue] = (0, import_utils3.useControlledState)(
props.value,
props.defaultValue,
handleValueChange
);
const handleValueClear = (0, import_react2.useCallback)(() => {
setInputValue("");
onClear == null ? void 0 : onClear();
}, [onClear, setInputValue]);
let { labelProps, inputProps, descriptionProps } = (0, import_react_aria2.useTextField)(
{
...removeDataAttributes(props),
value: inputValue,
inputElementType,
label,
onChange: setInputValue
},
inputRef
);
let inputOrTextAreaRef = (0, import_react2.useCallback)((el) => {
inputRef.current = el;
if (el) {
setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
}
}, []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
const slots = (0, import_react2.useMemo)(() => (0, import_theme.textField)(), []);
const hasHelper = !!description || !!errorMessage;
const helpComponent = (0, import_react2.useMemo)(() => {
if (!hasHelper)
return null;
return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_react_aria_components.Text,
{
id: errorId,
slot: "errorMessage",
"aria-live": "polite",
elementType: "div",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })}`,
children: [
errorIcon,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: errorMessage })
]
}
) : description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components.Text,
{
slot: "description",
elementType: "div",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
...descriptionProps,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: description })
}
) : null;
}, [
classNames == null ? void 0 : classNames.description,
classNames == null ? void 0 : classNames.errorMessage,
description,
descriptionProps,
hasHelper,
errorIcon,
errorMessage,
errorId,
slots
]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
...(0, import_utils2.filterDOMProps)(props),
className: slots.base({ class: baseStyles }),
ref,
slot: props.slot || void 0,
"data-disabled": props.isDisabled || void 0,
"data-invalid": props.isInvalid || void 0,
"data-required": props.isRequired || void 0,
"data-readonly": props.isReadOnly || void 0,
"data-orientation": props.orientation || "vertical",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_react_aria_components.Provider,
{
values: [
[
import_react_aria_components.InputContext,
{
...inputProps,
"data-value": inputValue,
onClear: onClear ? handleValueClear : void 0,
ref: inputOrTextAreaRef
}
],
[
import_react_aria_components.TextAreaContext,
{
...inputProps,
"data-value": inputValue,
onClear: onClear ? handleValueClear : void 0,
ref: inputOrTextAreaRef
}
]
],
children: [
labelValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components.Label,
{
...labelProps,
ref: labelRef,
className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
children: labelValue
}
),
children,
helpComponent
]
}
)
}
);
}
var _TextField = (0, import_react2.forwardRef)(TextField);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
TextField,
TextFieldContext
});