@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/useRenderElement-ZBds6eRN.js

@@ -0,0 +1,341 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import * as React$1 from "react";
+//#region ../../node_modules/@base-ui-components/utils/esm/useRefWithInit.js
+var UNINITIALIZED = {};
+/**
+* A React.useRef() that is initialized with a function. Note that it accepts an optional
+* initialization argument, so the initialization function doesn't need to be an inline closure.
+*
+* @usage
+*   const ref = useRefWithInit(sortColumns, columns)
+*/
+function useRefWithInit(init, initArg) {
+	const ref = React$1.useRef(UNINITIALIZED);
+	if (ref.current === UNINITIALIZED) ref.current = init(initArg);
+	return ref;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/utils/esm/empty.js
+function NOOP() {}
+var EMPTY_ARRAY = Object.freeze([]);
+var EMPTY_OBJECT = Object.freeze({});
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/utils/constants.js
+var DISABLED_TRANSITIONS_STYLE = { style: { transition: "none" } };
+var CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+/**
+* Used for dropdowns that usually strictly prefer top/bottom placements and
+* use `var(--available-height)` to limit their height.
+*/
+var DROPDOWN_COLLISION_AVOIDANCE = { fallbackAxisSide: "none" };
+//#endregion
+//#region ../../node_modules/@base-ui-components/utils/esm/useMergedRefs.js
+/**
+* Merges refs into a single memoized callback ref or `null`.
+* This makes sure multiple refs are updated together and have the same value.
+*
+* This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
+* use `useMergedRefsN` instead.
+*/
+function useMergedRefs(a, b, c, d) {
+	const forkRef = useRefWithInit(createForkRef).current;
+	if (didChange(forkRef, a, b, c, d)) update(forkRef, [
+		a,
+		b,
+		c,
+		d
+	]);
+	return forkRef.callback;
+}
+/**
+* Merges an array of refs into a single memoized callback ref or `null`.
+*
+* If you need to merge a fixed number (up to four) of refs, use `useMergedRefs` instead for better performance.
+*/
+function useMergedRefsN(refs) {
+	const forkRef = useRefWithInit(createForkRef).current;
+	if (didChangeN(forkRef, refs)) update(forkRef, refs);
+	return forkRef.callback;
+}
+function createForkRef() {
+	return {
+		callback: null,
+		cleanup: null,
+		refs: []
+	};
+}
+function didChange(forkRef, a, b, c, d) {
+	return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
+}
+function didChangeN(forkRef, newRefs) {
+	return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
+}
+function update(forkRef, refs) {
+	forkRef.refs = refs;
+	if (refs.every((ref) => ref == null)) {
+		forkRef.callback = null;
+		return;
+	}
+	forkRef.callback = (instance) => {
+		if (forkRef.cleanup) {
+			forkRef.cleanup();
+			forkRef.cleanup = null;
+		}
+		if (instance != null) {
+			const cleanupCallbacks = Array(refs.length).fill(null);
+			for (let i = 0; i < refs.length; i += 1) {
+				const ref = refs[i];
+				if (ref == null) continue;
+				switch (typeof ref) {
+					case "function": {
+						const refCleanup = ref(instance);
+						if (typeof refCleanup === "function") cleanupCallbacks[i] = refCleanup;
+						break;
+					}
+					case "object":
+						ref.current = instance;
+						break;
+					default:
+				}
+			}
+			forkRef.cleanup = () => {
+				for (let i = 0; i < refs.length; i += 1) {
+					const ref = refs[i];
+					if (ref == null) continue;
+					switch (typeof ref) {
+						case "function": {
+							const cleanupCallback = cleanupCallbacks[i];
+							if (typeof cleanupCallback === "function") cleanupCallback();
+							else ref(null);
+							break;
+						}
+						case "object":
+							ref.current = null;
+							break;
+						default:
+					}
+				}
+			};
+		}
+	};
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/utils/esm/reactVersion.js
+var majorVersion = parseInt(React$1.version, 10);
+function isReactVersionAtLeast(reactVersionToCheck) {
+	return majorVersion >= reactVersionToCheck;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/utils/esm/mergeObjects.js
+function mergeObjects(a, b) {
+	if (a && !b) return a;
+	if (!a && b) return b;
+	if (a || b) return {
+		...a,
+		...b
+	};
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/utils/getStateAttributesProps.js
+function getStateAttributesProps(state, customMapping) {
+	const props = {};
+	for (const key in state) {
+		const value = state[key];
+		if (customMapping === null || customMapping === void 0 ? void 0 : customMapping.hasOwnProperty(key)) {
+			const customProps = customMapping[key](value);
+			if (customProps != null) Object.assign(props, customProps);
+			continue;
+		}
+		if (value === true) props[`data-${key.toLowerCase()}`] = "";
+		else if (value) props[`data-${key.toLowerCase()}`] = value.toString();
+	}
+	return props;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/utils/resolveClassName.js
+/**
+* If the provided className is a string, it will be returned as is.
+* Otherwise, the function will call the className function with the state as the first argument.
+*
+* @param className
+* @param state
+*/
+function resolveClassName(className, state) {
+	return typeof className === "function" ? className(state) : className;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/merge-props/mergeProps.js
+var EMPTY_PROPS = {};
+/**
+* Merges multiple sets of React props. It follows the Object.assign pattern where the rightmost object's fields overwrite
+* the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
+* Event handlers are merged such that they are called in sequence (the rightmost one being called first),
+* and allows the user to prevent the subsequent event handlers from being
+* executed by attaching a `preventBaseUIHandler` method.
+* It also merges the `className` and `style` props, whereby the classes are concatenated
+* and the rightmost styles overwrite the subsequent ones.
+*
+* Props can either be provided as objects or as functions that take the previous props as an argument.
+* The function will receive the merged props up to that point (going from left to right):
+* so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
+* The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+*
+* Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
+* They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
+*
+* @important **`ref` is not merged.**
+* @param props props to merge.
+* @returns the merged props.
+*/
+function mergeProps(a, b, c, d, e) {
+	let merged = { ...resolvePropsGetter(a, EMPTY_PROPS) };
+	if (b) merged = mergeOne(merged, b);
+	if (c) merged = mergeOne(merged, c);
+	if (d) merged = mergeOne(merged, d);
+	if (e) merged = mergeOne(merged, e);
+	return merged;
+}
+function mergePropsN(props) {
+	if (props.length === 0) return EMPTY_PROPS;
+	if (props.length === 1) return resolvePropsGetter(props[0], EMPTY_PROPS);
+	let merged = { ...resolvePropsGetter(props[0], EMPTY_PROPS) };
+	for (let i = 1; i < props.length; i += 1) merged = mergeOne(merged, props[i]);
+	return merged;
+}
+function mergeOne(merged, inputProps) {
+	if (isPropsGetter(inputProps)) return inputProps(merged);
+	return mutablyMergeInto(merged, inputProps);
+}
+/**
+* Merges two sets of props. In case of conflicts, the external props take precedence.
+*/
+function mutablyMergeInto(mergedProps, externalProps) {
+	if (!externalProps) return mergedProps;
+	for (const propName in externalProps) {
+		const externalPropValue = externalProps[propName];
+		switch (propName) {
+			case "style":
+				mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
+				break;
+			case "className":
+				mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
+				break;
+			default: if (isEventHandler(propName, externalPropValue)) mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
+			else mergedProps[propName] = externalPropValue;
+		}
+	}
+	return mergedProps;
+}
+function isEventHandler(key, value) {
+	const code0 = key.charCodeAt(0);
+	const code1 = key.charCodeAt(1);
+	const code2 = key.charCodeAt(2);
+	return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
+}
+function isPropsGetter(inputProps) {
+	return typeof inputProps === "function";
+}
+function resolvePropsGetter(inputProps, previousProps) {
+	if (isPropsGetter(inputProps)) return inputProps(previousProps);
+	return inputProps !== null && inputProps !== void 0 ? inputProps : EMPTY_PROPS;
+}
+function mergeEventHandlers(ourHandler, theirHandler) {
+	if (!theirHandler) return ourHandler;
+	if (!ourHandler) return theirHandler;
+	return (event) => {
+		if (isSyntheticEvent(event)) {
+			const baseUIEvent = event;
+			makeEventPreventable(baseUIEvent);
+			const result = theirHandler(baseUIEvent);
+			if (!baseUIEvent.baseUIHandlerPrevented) ourHandler === null || ourHandler === void 0 || ourHandler(baseUIEvent);
+			return result;
+		}
+		const result = theirHandler(event);
+		ourHandler === null || ourHandler === void 0 || ourHandler(event);
+		return result;
+	};
+}
+function makeEventPreventable(event) {
+	event.preventBaseUIHandler = () => {
+		event.baseUIHandlerPrevented = true;
+	};
+	return event;
+}
+function mergeClassNames(ourClassName, theirClassName) {
+	if (theirClassName) {
+		if (ourClassName) return theirClassName + " " + ourClassName;
+		return theirClassName;
+	}
+	return ourClassName;
+}
+function isSyntheticEvent(event) {
+	return event != null && typeof event === "object" && "nativeEvent" in event;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/utils/useRenderElement.js
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* Renders a Base UI element.
+*
+* @param element The default HTML element to render. Can be overridden by the `render` prop.
+* @param componentProps An object containing the `render` and `className` props to be used for element customization. Other props are ignored.
+* @param params Additional parameters for rendering the element.
+*/
+function useRenderElement(element, componentProps, params = {}) {
+	var _params$state;
+	const renderProp = componentProps.render;
+	const outProps = useRenderElementProps(componentProps, params);
+	if (params.enabled === false) return null;
+	return evaluateRenderProp(element, renderProp, outProps, (_params$state = params.state) !== null && _params$state !== void 0 ? _params$state : EMPTY_OBJECT);
+}
+/**
+* Computes render element final props.
+*/
+function useRenderElementProps(componentProps, params = {}) {
+	var _mergeObjects;
+	const { className: classNameProp, render: renderProp } = componentProps;
+	const { state = EMPTY_OBJECT, ref, props, stateAttributesMapping, enabled = true } = params;
+	const className = enabled ? resolveClassName(classNameProp, state) : void 0;
+	const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
+	const outProps = enabled ? (_mergeObjects = mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props)) !== null && _mergeObjects !== void 0 ? _mergeObjects : EMPTY_OBJECT : EMPTY_OBJECT;
+	if (typeof document !== "undefined") if (!enabled) useMergedRefs(null, null);
+	else if (Array.isArray(ref)) outProps.ref = useMergedRefsN([
+		outProps.ref,
+		getChildRef(renderProp),
+		...ref
+	]);
+	else outProps.ref = useMergedRefs(outProps.ref, getChildRef(renderProp), ref);
+	if (!enabled) return EMPTY_OBJECT;
+	if (className !== void 0) outProps.className = mergeClassNames(outProps.className, className);
+	return outProps;
+}
+function evaluateRenderProp(element, render, props, state) {
+	if (render) {
+		if (typeof render === "function") return render(props, state);
+		const mergedProps = mergeProps(props, render.props);
+		mergedProps.ref = props.ref;
+		return /* @__PURE__ */ React$1.cloneElement(render, mergedProps);
+	}
+	if (element) {
+		if (typeof element === "string") return renderTag(element, props);
+	}
+	throw new Error("Base UI: Render element or function are not defined.");
+}
+function renderTag(Tag, props) {
+	if (Tag === "button") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		...props
+	});
+	if (Tag === "img") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+		alt: "",
+		...props
+	});
+	return /* @__PURE__ */ React$1.createElement(Tag, props);
+}
+function getChildRef(render) {
+	if (render && typeof render !== "function") return isReactVersionAtLeast(19) ? render.props.ref : render.ref;
+	return null;
+}
+//#endregion
+export { useMergedRefs as a, DROPDOWN_COLLISION_AVOIDANCE as c, NOOP as d, useRefWithInit as f, isReactVersionAtLeast as i, EMPTY_ARRAY as l, makeEventPreventable as n, CLICK_TRIGGER_IDENTIFIER as o, mergeProps as r, DISABLED_TRANSITIONS_STYLE as s, useRenderElement as t, EMPTY_OBJECT as u };

package/dist/utils/Orientation/OrientationProvider.js

@@ -1,27 +1,58 @@
-import { jsx } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
 import { createContext, useContext } from "react";
-const ctx = createContext("horizontal");
-function OrientationProvider({
-  orientation,
-  children
-}) {
-  return /* @__PURE__ */ jsx(ctx.Provider, { value: orientation, children });
+//#region src/utils/Orientation/OrientationProvider.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var ctx = createContext("horizontal");
+/**
+* Provider that supplies orientation context for keyboard navigation.
+*
+* @example
+* ```tsx
+* function TabList({ orientation, children }) {
+*   return (
+*     <OrientationProvider orientation={orientation}>
+*       <div role="tablist">{children}</div>
+*     </OrientationProvider>
+*   );
+* }
+* ```
+*/
+function OrientationProvider({ orientation, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ctx.Provider, {
+		value: orientation,
+		children
+	});
 }
+/**
+* Hook that provides orientation context and keyboard navigation keys.
+*
+* @example
+* ```tsx
+* function NavigableItem({ children }) {
+*   const { nextKey, previousKey } = useOrientation();
+*
+*   const handleKeyDown = (e) => {
+*     if (e.key === nextKey) focusNext();
+*     if (e.key === previousKey) focusPrevious();
+*   };
+*
+*   return <div role="tab" onKeyDown={handleKeyDown}>{children}</div>;
+* }
+* ```
+*/
 function useOrientation() {
-  const orientation = useContext(ctx);
-  let nextKey = "ArrowRight";
-  let previousKey = "ArrowLeft";
-  if (orientation === "vertical") {
-    nextKey = "ArrowDown";
-    previousKey = "ArrowUp";
-  }
-  return {
-    orientation,
-    nextKey,
-    previousKey
-  };
+	const orientation = useContext(ctx);
+	let nextKey = "ArrowRight";
+	let previousKey = "ArrowLeft";
+	if (orientation === "vertical") {
+		nextKey = "ArrowDown";
+		previousKey = "ArrowUp";
+	}
+	return {
+		orientation,
+		nextKey,
+		previousKey
+	};
 }
-export {
-  OrientationProvider,
-  useOrientation
-};
+//#endregion
+export { OrientationProvider, useOrientation };

package/dist/utils/Orientation/index.js

@@ -1,5 +1,3 @@
+import "../../jsx-runtime-i4KUlhDu.js";
 import { OrientationProvider, useOrientation } from "./OrientationProvider.js";
-export {
-  OrientationProvider,
-  useOrientation
-};
+export { OrientationProvider, useOrientation };

package/dist/utils/RovingTabIndex/RovingTabIndexProvider.js

@@ -1,48 +1,74 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useRef, useEffect, useState } from "react";
-const ctx = createContext({
-  lastFocused: null,
-  setLastFocused: () => {
-  }
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/utils/RovingTabIndex/RovingTabIndexProvider.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var ctx = createContext({
+	lastFocused: null,
+	setLastFocused: () => {}
 });
-function RovingTabIndexProvider({
-  children
-}) {
-  const [lastFocused, setLastFocused] = useState(null);
-  return /* @__PURE__ */ jsx(ctx.Provider, { value: {
-    lastFocused,
-    setLastFocused
-  }, children });
+/**
+* Provider that manages tabIndex values for the roving tab index pattern.
+* Only one element in the group has tabIndex={0}, others have tabIndex={-1}.
+*
+* @example
+* ```tsx
+* function Toolbar() {
+*   return (
+*     <RovingTabIndexProvider>
+*       <ToolbarButton>Cut</ToolbarButton>
+*       <ToolbarButton>Copy</ToolbarButton>
+*     </RovingTabIndexProvider>
+*   );
+* }
+* ```
+*/
+function RovingTabIndexProvider({ children }) {
+	const [lastFocused, setLastFocused] = useState(null);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ctx.Provider, {
+		value: {
+			lastFocused,
+			setLastFocused
+		},
+		children
+	});
 }
-function useRovingTabIndex({
-  onFocus
-} = {}) {
-  const {
-    lastFocused,
-    setLastFocused
-  } = useContext(ctx);
-  const ref = useRef(null);
-  useEffect(() => {
-    const self = ref.current;
-    return () => {
-      setLastFocused((element) => {
-        if (element === self) return null;
-        return element;
-      });
-    };
-  }, [setLastFocused]);
-  const handleFocus = (e) => {
-    setLastFocused(e.target);
-    onFocus == null ? void 0 : onFocus(e);
-  };
-  return {
-    ref,
-    onFocus: handleFocus,
-    tabIndex: lastFocused && lastFocused !== ref.current ? -1 : 0
-  };
+/**
+* Hook that provides tabIndex management for individual elements in a roving tab index group.
+*
+* @example
+* ```tsx
+* function ToolbarButton({ children, onFocus }) {
+*   const { ref, onFocus, tabIndex } = useRovingTabIndex({ onFocus });
+*   return (
+*     <button ref={ref} onFocus={onFocus} tabIndex={tabIndex}>
+*       {children}
+*     </button>
+*   );
+* }
+* ```
+*/
+function useRovingTabIndex({ onFocus } = {}) {
+	const { lastFocused, setLastFocused } = useContext(ctx);
+	const ref = useRef(null);
+	useEffect(() => {
+		const self = ref.current;
+		return () => {
+			setLastFocused((element) => {
+				if (element === self) return null;
+				return element;
+			});
+		};
+	}, [setLastFocused]);
+	const handleFocus = (e) => {
+		setLastFocused(e.target);
+		onFocus === null || onFocus === void 0 || onFocus(e);
+	};
+	return {
+		ref,
+		onFocus: handleFocus,
+		tabIndex: lastFocused && lastFocused !== ref.current ? -1 : 0
+	};
 }
-export {
-  RovingTabIndexProvider,
-  useRovingTabIndex
-};
+//#endregion
+export { RovingTabIndexProvider, useRovingTabIndex };

package/dist/utils/RovingTabIndex/index.js

@@ -1,5 +1,3 @@
+import "../../jsx-runtime-i4KUlhDu.js";
 import { RovingTabIndexProvider, useRovingTabIndex } from "./RovingTabIndexProvider.js";
-export {
-  RovingTabIndexProvider,
-  useRovingTabIndex
-};
+export { RovingTabIndexProvider, useRovingTabIndex };

package/dist/utils/createRequiredContext.js

@@ -1,16 +1,26 @@
 import { createContext, useContext } from "react";
+//#region src/utils/createRequiredContext.ts
+/**
+* Creates a required context and a hook to access it.
+*
+* @example
+* const [Provider, useRequiredContext] = createRequiredContext<Ctx>('MyContext');
+*
+* <Provider value={value}>
+*   <Component />
+* </Provider>
+*
+* const value = useRequiredContext();
+*/
 function createRequiredContext(name) {
-  const context = createContext(null);
-  context.displayName = `${name}.Provider`;
-  const useRequiredContext = () => {
-    const value = useContext(context);
-    if (!value) {
-      throw new Error(`${name} context must be used within its Provider`);
-    }
-    return value;
-  };
-  return [context.Provider, useRequiredContext];
+	const context = createContext(null);
+	context.displayName = `${name}.Provider`;
+	const useRequiredContext = () => {
+		const value = useContext(context);
+		if (!value) throw new Error(`${name} context must be used within its Provider`);
+		return value;
+	};
+	return [context.Provider, useRequiredContext];
 }
-export {
-  createRequiredContext
-};
+//#endregion
+export { createRequiredContext };

package/dist/utils/filterAttributesPassedByRadixUIAtRuntime.js

@@ -1,26 +1,29 @@
-const HTML_ATTRIBUTES_WHITE_LIST = [
-  "aria-describedby",
-  // @ts-expect-error data-state is not recognized as a valid HTML attribute 🤔
-  "data-state",
-  "onPointerMove",
-  "onPointerLeave",
-  "onPointerDown",
-  "onFocus",
-  // @todo double-check if this prop is actually passed.
-  "onBlur",
-  // @todo double-check if this prop is actually passed.
-  "onClick",
-  "onTouchStart",
-  "onTouchEnd",
-  "id",
-  // @todo double-check if this prop is actually passed.
-  "tabIndex"
-  // @todo double-check if this prop is actually passed.
-];
-const ATTRIBUTES_SET = new Set(HTML_ATTRIBUTES_WHITE_LIST);
-const filterAttributesPassedByRadixUIAtRuntime = (attributes) => {
-  return Object.fromEntries(Object.entries(attributes).filter(([key]) => ATTRIBUTES_SET.has(key)));
-};
-export {
-  filterAttributesPassedByRadixUIAtRuntime
+//#region src/utils/filterAttributesPassedByRadixUIAtRuntime.ts
+var ATTRIBUTES_SET = new Set([
+	"aria-describedby",
+	"data-state",
+	"onPointerMove",
+	"onPointerLeave",
+	"onPointerDown",
+	"onFocus",
+	"onBlur",
+	"onClick",
+	"onTouchStart",
+	"onTouchEnd",
+	"id",
+	"tabIndex"
+]);
+/**
+* Filters an object to only include whitelisted HTML attributes.
+* This is useful for safe props spreading to enable integration with third-party libs like radix-ui.
+*
+* Original need: to make radix-based Tooltip work when it wraps custom component, that custom
+* component should forward ref AND spread props, that Radix passes down implicitly.
+* With `filterHTMLAttributes`, we're allowing known props required for Tooltip/Popover, and avoiding
+* spreading ALL the `{...rest}` props down, to prevent opening doors to all sorts of weird "hacks".
+*/
+var filterAttributesPassedByRadixUIAtRuntime = (attributes) => {
+	return Object.fromEntries(Object.entries(attributes).filter(([key]) => ATTRIBUTES_SET.has(key)));
 };
+//#endregion
+export { filterAttributesPassedByRadixUIAtRuntime };