@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/utils/partitionMulti.js

@@ -0,0 +1,24 @@
+import last from "lodash/last.js";
+import concat from "lodash/concat.js";
+import dropRight from "lodash/dropRight.js";
+import partition from "lodash/partition.js";
+import reduce from "lodash/reduce.js";
+//#region src/utils/partitionMulti.ts
+/**
+* Similar to lodash `partition` function but working with multiple predicates.
+*
+* @example
+* const isString = (s) => typeof s === 'string'
+* const isNumber = (s) => typeof s === 'number'
+* const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
+* //=> [['a', 'b'], [1], [false]]
+*
+* @param  elements array of elements
+* @param  predicates array of predicates to apply on elements
+* @return partitioned elements by the given predicates
+*/
+function partitionMulti(elements, predicates) {
+	return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
+}
+//#endregion
+export { partitionMulti };

package/_internal/utils/react/OnBeforeUnmount.js

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from "react";
+//#region src/utils/react/OnBeforeUnmount.tsx
+/**
+* Helper component using useLayoutEffect to trigger a callback on before unmount.
+*
+* The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
+*/
+var OnBeforeUnmount = ({ callbackRef }) => {
+	useLayoutEffect(() => {
+		return () => {
+			callbackRef.current?.();
+		};
+	}, []);
+	return null;
+};
+//#endregion
+export { OnBeforeUnmount };

package/_internal/utils/react/forwardRef.js

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/utils/react/forwardRef.ts
+/**
+* React.forwardRef but re-typed to attach some custom metadata on our components.
+*/
+var forwardRef = React.forwardRef;
+//#endregion
+export { forwardRef };

package/_internal/utils/react/forwardRefPolymorphic.js

@@ -0,0 +1,6 @@
+import React from "react";
+//#region src/utils/react/forwardRefPolymorphic.ts
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+var forwardRefPolymorphic = React.forwardRef;
+//#endregion
+export { forwardRefPolymorphic };

package/_internal/utils/react/mergeRefs.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+//#region src/utils/react/mergeRefs.ts
+/**
+* Merge refs into a single function ref.
+*
+* @param  refs React references to merge.
+* @return the merged ref.
+*/
+function mergeRefs(...refs) {
+	return (value) => refs.forEach((ref) => {
+		if (typeof ref === "function") ref(value);
+		else if (ref) ref.current = value;
+	});
+}
+/**
+* Same as `mergeRefs` but memoized
+*/
+var useMergeRefs = (...refs) => {
+	return useMemo(() => mergeRefs(...refs), refs);
+};
+//#endregion
+export { mergeRefs, useMergeRefs };

package/_internal/utils/react/skipRender.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/react/skipRender.tsx
+/**
+* HOC component wrapping a component to skip render if predicate return falsy
+*/
+var skipRender = (predicate, Component) => {
+	const Wrapper = React.forwardRef((props, ref) => {
+		if (!predicate(props)) return null;
+		return /* @__PURE__ */ jsx(Component, {
+			ref,
+			...props
+		});
+	});
+	Wrapper.displayName = Component.displayName;
+	return Wrapper;
+};
+//#endregion
+export { skipRender };

package/_internal/utils/react/unref.js

@@ -0,0 +1,8 @@
+//#region src/utils/react/unref.ts
+/** Unref a react ref or element */
+function unref(maybeElement) {
+	if (maybeElement instanceof HTMLElement) return maybeElement;
+	return maybeElement?.current;
+}
+//#endregion
+export { unref };

package/_internal/utils/react/wrapChildrenIconWithSpaces.js

@@ -0,0 +1,19 @@
+import { Icon } from "../../components/icon/Icon.js";
+import { isComponentType } from "../type/isComponentType.js";
+import React, { Children } from "react";
+//#region src/utils/react/wrapChildrenIconWithSpaces.tsx
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+function wrapChildrenIconWithSpaces(children) {
+	if (children === null || children === void 0) return void 0;
+	return Children.toArray(children).flatMap((child) => {
+		if (isComponentType(Icon)(child)) return [
+			" ",
+			child,
+			" "
+		];
+		if (React.isValidElement(child) && child.props && typeof child.props === "object" && "children" in child.props) return React.cloneElement(child, void 0, wrapChildrenIconWithSpaces(child.props.children));
+		return child;
+	});
+}
+//#endregion
+export { wrapChildrenIconWithSpaces };

package/_internal/utils/theme/ThemeContext.d.ts

@@ -0,0 +1,14 @@
+import { index_d_exports } from "../../../index.js";
+import React from "react";
+
+//#region src/utils/theme/ThemeContext.d.ts
+type ThemeContextValue = index_d_exports.Theme | undefined;
+/** Provide a theme context to all children. */
+declare const ThemeProvider: React.FC<{
+  value: ThemeContextValue;
+  children?: React.ReactNode;
+}>;
+/** Get the theme in the current context. */
+declare function useTheme(): ThemeContextValue;
+//#endregion
+export { ThemeProvider, useTheme };

package/_internal/utils/theme/ThemeContext.js

@@ -0,0 +1,11 @@
+import React from "react";
+//#region src/utils/theme/ThemeContext.ts
+var ThemeContext = React.createContext(void 0);
+/** Provide a theme context to all children. */
+var ThemeProvider = ThemeContext.Provider;
+/** Get the theme in the current context. */
+function useTheme() {
+	return React.useContext(ThemeContext);
+}
+//#endregion
+export { ThemeProvider, useTheme };

package/_internal/utils/type/Comp.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, Ref } from "react";
+
+//#region src/utils/type/Comp.d.ts
+/** LumX Component Type. */
+type Comp<P, T = HTMLElement> = {
+  (props: P & {
+    ref?: Ref<T>;
+  }): ReactElement | null; /** React component type. */
+  readonly $$typeof: symbol; /** Component default props. */
+  defaultProps?: Partial<P>; /** Component name. */
+  displayName?: string; /** Component base class name. */
+  className?: string;
+};
+//#endregion
+export { Comp };

package/_internal/utils/type/ComponentRef.d.ts

@@ -0,0 +1,15 @@
+import { Comp } from "./Comp.js";
+import React from "react";
+
+//#region src/utils/type/ComponentRef.d.ts
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+type ComponentRef<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : C extends Comp<any, infer T> ? React.Ref<T> : C extends React.JSXElementConstructor<{
+  ref?: infer R;
+}> ? R : never;
+//#endregion
+export { ComponentRef };

package/_internal/utils/type/HasPolymorphicAs.d.ts

@@ -0,0 +1,9 @@
+//#region src/utils/type/HasPolymorphicAs.d.ts
+type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
+  /**
+   * Customize the rendered component.
+   */
+  as?: E;
+};
+//#endregion
+export { HasPolymorphicAs };

package/_internal/utils/type/MaybeElementOrRef.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+//#region src/utils/type/MaybeElementOrRef.d.ts
+/**
+ * Maybe a HTMLElement or a React ref of a HTMLElement
+ */
+type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;
+//#endregion
+export { MaybeElementOrRef };

package/_internal/utils/type/ReactToJSX.d.ts

@@ -0,0 +1,13 @@
+import { PropsToOverride } from "@lumx/core/js/types";
+
+//#region src/utils/type/ReactToJSX.d.ts
+/**
+ * Props interface for components wrapped with ReactToJSX.
+ * It omits JSX-specific props like `children`
+ *
+ * @template Props - The base props type
+ * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)
+ */
+type ReactToJSX<Props, OmitProps extends keyof Props = never> = Omit<Props, PropsToOverride | OmitProps>;
+//#endregion
+export { ReactToJSX };

package/_internal/utils/type/index.d.ts

@@ -0,0 +1,15 @@
+import { Comp } from "./Comp.js";
+import { ComponentRef } from "./ComponentRef.js";
+import { HasPolymorphicAs } from "./HasPolymorphicAs.js";
+import { isComponent } from "./isComponent.js";
+import { isComponentType } from "./isComponentType.js";
+import { MaybeElementOrRef } from "./MaybeElementOrRef.js";
+export type * from "@lumx/core/js/types";
+
+//#region src/utils/type/index.d.ts
+declare namespace index_d_exports {
+  export { Comp, ComponentRef, HasPolymorphicAs, MaybeElementOrRef, isComponent, isComponentType };
+}
+import * as import__lumx_core_js_types from "@lumx/core/js/types";
+//#endregion
+export { import__lumx_core_js_types as index_d_exports };

package/_internal/utils/type/isComponent.d.ts

@@ -0,0 +1,13 @@
+import { Comp } from "./Comp.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/utils/type/isComponent.d.ts
+/**
+ * Create a predicate function that checks if a ReactNode is a react element from the given component.
+ *
+ * @param  component React function component or the component name
+ * @return predicate returning true if value is instance of the component
+ */
+declare const isComponent: <C>(component: Comp<C, any> | string) => (instance: ReactNode) => instance is ReactElement;
+//#endregion
+export { isComponent };

package/_internal/utils/type/isComponent.js

@@ -0,0 +1,27 @@
+import get from "lodash/get.js";
+//#region src/utils/type/isComponent.ts
+/**
+* Properties of a component to use to determine it's name.
+* In the order of preference.
+*/
+var NAME_PROPERTIES = [
+	"type",
+	"type.displayName",
+	"displayName",
+	"name",
+	"type.name",
+	"props.mdxType",
+	"_reactInternalFiber.elementType.name"
+];
+/**
+* Create a predicate function that checks if a ReactNode is a react element from the given component.
+*
+* @param  component React function component or the component name
+* @return predicate returning true if value is instance of the component
+*/
+var isComponent = (component) => (instance) => {
+	const componentName = typeof component === "string" ? component : component.displayName;
+	return !!get(instance, "$$typeof") && NAME_PROPERTIES.some((nameProperty) => get(instance, nameProperty) === componentName);
+};
+//#endregion
+export { isComponent };

package/_internal/utils/type/isComponentType.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from "react";
+
+//#region src/utils/type/isComponentType.d.ts
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+declare const isComponentType: (type: ReactElement["type"]) => (node: ReactNode) => node is ReactElement;
+//#endregion
+export { isComponentType };

package/_internal/utils/type/isComponentType.js

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/utils/type/isComponentType.ts
+/**
+* Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+*/
+var isComponentType = (type) => (node) => React.isValidElement(node) && node.type === type;
+//#endregion
+export { isComponentType };