@trail-ui/react
Version:
220 lines (218 loc) • 7.69 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/_utils/utils.tsx
var utils_exports = {};
__export(utils_exports, {
Hidden: () => Hidden,
HiddenContext: () => HiddenContext,
createHideableComponent: () => createHideableComponent,
removeDataAttributes: () => removeDataAttributes,
replaceSpacesWithHyphens: () => replaceSpacesWithHyphens,
useDOMRef: () => useDOMRef,
useEnterAnimation: () => useEnterAnimation,
useExitAnimation: () => useExitAnimation,
useRenderProps: () => useRenderProps,
useSlot: () => useSlot
});
module.exports = __toCommonJS(utils_exports);
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 useRenderProps(props) {
let { className, style, children, defaultClassName, defaultChildren, values } = props;
return (0, import_react.useMemo)(() => {
let computedClassName;
let computedStyle;
let computedChildren;
if (typeof className === "function") {
computedClassName = className(values);
} else {
computedClassName = className;
}
if (typeof style === "function") {
computedStyle = style(values);
} else {
computedStyle = style;
}
if (typeof children === "function") {
computedChildren = children(values);
} else if (children == null) {
computedChildren = defaultChildren;
} else {
computedChildren = children;
}
return {
className: computedClassName != null ? computedClassName : defaultClassName,
style: computedStyle,
children: computedChildren,
"data-rac": ""
};
}, [className, style, children, defaultClassName, defaultChildren, values]);
}
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];
}
function useEnterAnimation(ref, isReady = true) {
let [isEntering, setEntering] = (0, import_react.useState)(true);
useAnimation(
ref,
isEntering && isReady,
(0, import_react.useCallback)(() => setEntering(false), [])
);
return isEntering && isReady;
}
function useExitAnimation(ref, isOpen) {
let [isExiting, setExiting] = (0, import_react.useState)(false);
let [exitState, setExitState] = (0, import_react.useState)("idle");
if (!isOpen && ref.current && exitState === "idle") {
isExiting = true;
setExiting(true);
setExitState("exiting");
}
if (!ref.current && exitState === "exited") {
setExitState("idle");
}
useAnimation(
ref,
isExiting,
(0, import_react.useCallback)(() => {
setExitState("exited");
setExiting(false);
}, [])
);
return isExiting;
}
function useAnimation(ref, isActive, onEnd) {
let prevAnimation = (0, import_react.useRef)(null);
if (isActive && ref.current) {
prevAnimation.current = window.getComputedStyle(ref.current).animation;
}
(0, import_utils.useLayoutEffect)(() => {
if (isActive && ref.current) {
let computedStyle = window.getComputedStyle(ref.current);
if (computedStyle.animationName !== "none" && computedStyle.animation !== prevAnimation.current) {
let onAnimationEnd = (e) => {
if (e.target === ref.current) {
element.removeEventListener("animationend", onAnimationEnd);
import_react_dom.default.flushSync(() => {
onEnd();
});
}
};
let element = ref.current;
element.addEventListener("animationend", onAnimationEnd);
return () => {
element.removeEventListener("animationend", onAnimationEnd);
};
} else {
onEnd();
}
}
}, [ref, isActive, onEnd]);
}
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 Hidden(props) {
let isHidden = (0, import_react.useContext)(HiddenContext);
let isSSR = (0, import_react_aria.useIsSSR)();
if (isHidden) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
}
let children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiddenContext.Provider, { value: true, children: props.children });
return isSSR ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("template", { "data-react-aria-hidden": true, children }) : import_react_dom.default.createPortal(children, hiddenFragment);
}
function createHideableComponent(fn) {
let Wrapper = (props, ref) => {
let isHidden = (0, import_react.useContext)(HiddenContext);
if (isHidden) {
return null;
}
return fn(props, ref);
};
Wrapper.displayName = fn.displayName || fn.name;
return import_react.default.forwardRef(Wrapper);
}
function removeDataAttributes(props) {
const prefix = /^(data-.*)$/;
let filteredProps = {};
for (const prop in props) {
if (!prefix.test(prop)) {
filteredProps[prop] = props[prop];
}
}
return filteredProps;
}
function useDOMRef(ref) {
const domRef = (0, import_react.useRef)(null);
(0, import_react.useImperativeHandle)(ref, () => domRef.current);
return domRef;
}
function replaceSpacesWithHyphens(str) {
return str.toLowerCase().trim().replace(/\s+/g, "-");
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Hidden,
HiddenContext,
createHideableComponent,
removeDataAttributes,
replaceSpacesWithHyphens,
useDOMRef,
useEnterAnimation,
useExitAnimation,
useRenderProps,
useSlot
});