@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/components/Rating/RatingInput.js

@@ -1,65 +1,63 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { s as styles, S as Stars } from "../../Stars-C_mHop2H.js";
-import { useHoverPercentage } from "./hooks/useHoverPercentage.js";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { n as index_module_default, t as Stars } from "../../Stars-D5QspUBE.js";
 import { roundToHalfDecimal } from "./utils/roundToHalfDecimal.js";
 import { useLocalizations } from "./hooks/useLocalizations.js";
+import { useHoverPercentage } from "./hooks/useHoverPercentage.js";
 import { useInputState } from "./hooks/useInputState.js";
 import { useHasError } from "./hooks/useHasError.js";
-const amountOfStars = 5;
-const RatingInput = forwardRef(function Rating({
-  id,
-  name,
-  value: valueProp,
-  defaultValue = 0,
-  onValueChange,
-  onChange: onChangeProp,
-  hasError: hasErrorProp,
-  required,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  "aria-describedby": ariaDescribedby,
-  dataset,
-  dsInternalSimulation,
-  onBlur,
-  onFocus,
-  "aria-invalid": ariaInvalid
-}, ref) {
-  const {
-    value,
-    onChange
-  } = useInputState({
-    onChange: onChangeProp,
-    onValueChange,
-    defaultValue,
-    value: valueProp
-  });
-  const roundedValue = roundToHalfDecimal(value);
-  const {
-    ariaValueText
-  } = useLocalizations(roundedValue);
-  const hasError = useHasError({
-    hasError: hasErrorProp,
-    ariaInvalid
-  });
-  const {
-    hoverValue,
-    ref: hoverRef
-  } = useHoverPercentage({
-    amountOfStars
-  });
-  const shownValue = typeof hoverValue === "number" ? hoverValue : roundedValue;
-  const classNames = [...moduleClassNames(styles, "rating"), ...moduleClassNames(styles, "ratingInput", [stringClassNames(`dsInternalSimulation`, dsInternalSimulation)])];
-  return /* @__PURE__ */ jsxs("div", { className: classNames.join(" "), ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.RatingInput
-  }), ref: hoverRef, children: [
-    /* @__PURE__ */ jsx(Stars, { filledPerc: shownValue / amountOfStars }),
-    /* @__PURE__ */ jsx("input", { type: "range", min: 0, max: amountOfStars, step: 1, value: roundedValue, id, name, "aria-invalid": hasError === true ? true : void 0, "aria-required": required === true ? true : void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValueText, onBlur, onFocus, onChange, ref })
-  ] });
+import { forwardRef } from "react";
+import { getDatasetProps, moduleClassNames, stringClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+//#region src/components/Rating/RatingInput.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var amountOfStars = 5;
+/**
+* A component that allows rating through a series of discrete values.
+*
+* If you need to visualize the current rating without the users changing it, look at Rating.
+* @see Rating
+*/
+var RatingInput = forwardRef(function Rating({ id, name, value: valueProp, defaultValue = 0, onValueChange, onChange: onChangeProp, hasError: hasErrorProp, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, dataset, dsInternalSimulation, onBlur, onFocus, "aria-invalid": ariaInvalid }, ref) {
+	const { value, onChange } = useInputState({
+		onChange: onChangeProp,
+		onValueChange,
+		defaultValue,
+		value: valueProp
+	});
+	const roundedValue = roundToHalfDecimal(value);
+	const { ariaValueText } = useLocalizations(roundedValue);
+	const hasError = useHasError({
+		hasError: hasErrorProp,
+		ariaInvalid
+	});
+	const { hoverValue, ref: hoverRef } = useHoverPercentage({ amountOfStars });
+	const shownValue = typeof hoverValue === "number" ? hoverValue : roundedValue;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: [...moduleClassNames(index_module_default, "rating"), ...moduleClassNames(index_module_default, "ratingInput", [stringClassNames(`dsInternalSimulation`, dsInternalSimulation)])].join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.RatingInput }),
+		ref: hoverRef,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stars, { filledPerc: shownValue / amountOfStars }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			type: "range",
+			min: 0,
+			max: amountOfStars,
+			step: 1,
+			value: roundedValue,
+			id,
+			name,
+			"aria-invalid": hasError === true ? true : void 0,
+			"aria-required": required === true ? true : void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-describedby": ariaDescribedby,
+			"aria-valuetext": ariaValueText,
+			onBlur,
+			onFocus,
+			onChange,
+			ref
+		})]
+	});
 });
-export {
-  RatingInput
-};
+//#endregion
+export { RatingInput };

package/dist/components/Rating/Stars.js

@@ -1,8 +1,4 @@
-import "react/jsx-runtime";
-import "@preply/ds-media-icons/dist/24/TokyoUIStar.svg";
-import "@preply/ds-media-icons/dist/24/TokyoUIStarFilled.svg";
-import { S } from "../../Stars-C_mHop2H.js";
-import "../../utils/render-icon.js";
-export {
-  S as Stars
-};
+import "../../render-icon-Ch3b2dE0.js";
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Stars } from "../../Stars-D5QspUBE.js";
+export { Stars };

package/dist/components/Rating/hooks/useHasError.js

@@ -1,16 +1,12 @@
-function useHasError({
-  hasError,
-  ariaInvalid
-}) {
-  const errorsClash = typeof ariaInvalid === "boolean" && typeof hasError === "boolean";
-  if (errorsClash) {
-    console.warn(`You provided both 'hasError' and 'aria-invalid' props. 'hasError' will take precedence. If you're using RatingInput inside FormControl, please remove 'hasError' prop.`);
-    return hasError;
-  }
-  if (typeof hasError === "boolean") return hasError;
-  if (typeof ariaInvalid === "boolean") return ariaInvalid;
-  return false;
+//#region src/components/Rating/hooks/useHasError.ts
+function useHasError({ hasError, ariaInvalid }) {
+	if (typeof ariaInvalid === "boolean" && typeof hasError === "boolean") {
+		console.warn(`You provided both 'hasError' and 'aria-invalid' props. 'hasError' will take precedence. If you're using RatingInput inside FormControl, please remove 'hasError' prop.`);
+		return hasError;
+	}
+	if (typeof hasError === "boolean") return hasError;
+	if (typeof ariaInvalid === "boolean") return ariaInvalid;
+	return false;
 }
-export {
-  useHasError
-};
+//#endregion
+export { useHasError };

package/dist/components/Rating/hooks/useHoverPercentage.js

@@ -1,47 +1,39 @@
-import { useRef, useState, useEffect } from "react";
-function getValueFromMousePosition({
-  // A 0-1 number
-  mousePercentage,
-  amountOfStars
-}) {
-  const rawValue = mousePercentage * amountOfStars;
-  const fixedValue = rawValue + 0.01;
-  return Math.ceil(fixedValue);
+import { useEffect, useRef, useState } from "react";
+//#region src/components/Rating/hooks/useHoverPercentage.ts
+function getValueFromMousePosition({ mousePercentage, amountOfStars }) {
+	const fixedValue = mousePercentage * amountOfStars + .01;
+	return Math.ceil(fixedValue);
 }
-function useHoverPercentage({
-  amountOfStars
-}) {
-  const ref = useRef(null);
-  const [hoverValue, setHoverValue] = useState(null);
-  useEffect(() => {
-    const canHover = window.matchMedia("(hover: hover)").matches === true;
-    if (!ref.current || !canHover) return;
-    const el = ref.current;
-    function onMouseMove(event) {
-      const rect = el.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      setHoverValue(getValueFromMousePosition({
-        mousePercentage: x / rect.width,
-        amountOfStars
-      }));
-    }
-    function onMouseLeave() {
-      setHoverValue(null);
-    }
-    el.addEventListener("mousemove", onMouseMove);
-    el.addEventListener("mouseenter", onMouseMove);
-    el.addEventListener("mouseleave", onMouseLeave);
-    return () => {
-      el.removeEventListener("mousemove", onMouseMove);
-      el.removeEventListener("mouseenter", onMouseMove);
-      el.removeEventListener("mouseleave", onMouseLeave);
-    };
-  }, [amountOfStars]);
-  return {
-    hoverValue,
-    ref
-  };
+function useHoverPercentage({ amountOfStars }) {
+	const ref = useRef(null);
+	const [hoverValue, setHoverValue] = useState(null);
+	useEffect(() => {
+		const canHover = window.matchMedia("(hover: hover)").matches === true;
+		if (!ref.current || !canHover) return;
+		const el = ref.current;
+		function onMouseMove(event) {
+			const rect = el.getBoundingClientRect();
+			setHoverValue(getValueFromMousePosition({
+				mousePercentage: (event.clientX - rect.left) / rect.width,
+				amountOfStars
+			}));
+		}
+		function onMouseLeave() {
+			setHoverValue(null);
+		}
+		el.addEventListener("mousemove", onMouseMove);
+		el.addEventListener("mouseenter", onMouseMove);
+		el.addEventListener("mouseleave", onMouseLeave);
+		return () => {
+			el.removeEventListener("mousemove", onMouseMove);
+			el.removeEventListener("mouseenter", onMouseMove);
+			el.removeEventListener("mouseleave", onMouseLeave);
+		};
+	}, [amountOfStars]);
+	return {
+		hoverValue,
+		ref
+	};
 }
-export {
-  useHoverPercentage
-};
+//#endregion
+export { useHoverPercentage };

package/dist/components/Rating/hooks/useInputState.js

@@ -1,27 +1,21 @@
-import { useCallback } from "react";
 import { useControllableState } from "../../../utils/useControllableState/useControllableState.js";
+import { useCallback } from "react";
+//#region src/components/Rating/hooks/useInputState.ts
 function useInputState(options) {
-  const {
-    defaultValue,
-    value: valueProp,
-    onChange: onChangeProp,
-    onValueChange: onValueChangeProp
-  } = options;
-  const [value, onValueChange] = useControllableState({
-    defaultValue,
-    value: valueProp,
-    onValueChange: onValueChangeProp
-  });
-  const onChange = useCallback((event) => {
-    onChangeProp == null ? void 0 : onChangeProp(event);
-    if (event.defaultPrevented) return;
-    onValueChange == null ? void 0 : onValueChange(event.currentTarget.valueAsNumber);
-  }, [onChangeProp, onValueChange]);
-  return {
-    value,
-    onChange
-  };
+	const { defaultValue, value: valueProp, onChange: onChangeProp, onValueChange: onValueChangeProp } = options;
+	const [value, onValueChange] = useControllableState({
+		defaultValue,
+		value: valueProp,
+		onValueChange: onValueChangeProp
+	});
+	return {
+		value,
+		onChange: useCallback((event) => {
+			onChangeProp === null || onChangeProp === void 0 || onChangeProp(event);
+			if (event.defaultPrevented) return;
+			onValueChange === null || onValueChange === void 0 || onValueChange(event.currentTarget.valueAsNumber);
+		}, [onChangeProp, onValueChange])
+	};
 }
-export {
-  useInputState
-};
+//#endregion
+export { useInputState };

package/dist/components/Rating/hooks/useLocalizations.js

@@ -1,27 +1,15 @@
 import { useIntl } from "react-intl";
+//#region src/components/Rating/hooks/useLocalizations.ts
 function useLocalizations(value) {
-  const {
-    formatMessage
-  } = useIntl();
-  return {
-    ariaValueText: formatMessage({
-      id: "preply-ds.rating.value-text",
-      defaultMessage: [{
-        "type": 1,
-        "value": "currentValue"
-      }, {
-        "type": 0,
-        "value": " out of "
-      }, {
-        "type": 1,
-        "value": "maxValue"
-      }]
-    }, {
-      currentValue: value,
-      maxValue: 5
-    })
-  };
+	const { formatMessage } = useIntl();
+	return { ariaValueText: formatMessage({
+		id: "preply-ds.rating.value-text",
+		defaultMessage: "{currentValue} out of {maxValue}",
+		description: "The current rating. Will be announced by screen readers as '4 out of 5'."
+	}, {
+		currentValue: value,
+		maxValue: 5
+	}) };
 }
-export {
-  useLocalizations
-};
+//#endregion
+export { useLocalizations };

package/dist/components/Rating/utils/roundToHalfDecimal.js

@@ -1,6 +1,6 @@
+//#region src/components/Rating/utils/roundToHalfDecimal.ts
 function roundToHalfDecimal(value) {
-  return Math.round(value * 2) / 2;
+	return Math.round(value * 2) / 2;
 }
-export {
-  roundToHalfDecimal
-};
+//#endregion
+export { roundToHalfDecimal };

package/dist/components/SelectField/Select.js

@@ -1,112 +1,5 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef, useState } from "react";
-import { Select as Select$1 } from "radix-ui";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { usePortalElement } from "@preply/ds-web-root";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { F as ForwardRef$1 } from "../../TokyoUIChevronDown-D_tD1yU8.js";
-import { Icon } from "../Icon/Icon.js";
-import { useBreakpointMatch } from "./hooks/useBreakpointMatch.js";
-import '../../assets/Select.css';const SvgTokyoUiCheckmark = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { "data-preply-ds-component": "SvgTokyoUIIcon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M8.707 18 4 13.293l1.414-1.414 3.293 3.293L18 5.879l1.414 1.414L8.707 18Z", clipRule: "evenodd" }));
-const ForwardRef = forwardRef(SvgTokyoUiCheckmark);
-const trigger = "trigger__e7qqO";
-const chevron = "chevron__jR5Zn";
-const content = "content__NwpTO";
-const viewport = "viewport__SgLBh";
-const item = "item__iOFtY";
-const indicator = "indicator__FesN8";
-const group = "group__rZ-2W";
-const groupLabel = "groupLabel__fC3jF";
-const styles = {
-  trigger,
-  chevron,
-  content,
-  viewport,
-  item,
-  indicator,
-  group,
-  groupLabel
-};
-const Select = forwardRef(function Select2({
-  value,
-  defaultValue,
-  placeholder,
-  disabled,
-  onValueChange,
-  children,
-  dataset,
-  icon,
-  name,
-  id,
-  required,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  onKeyUp,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  "aria-describedby": ariaDescribedby,
-  "aria-invalid": ariaInvalid,
-  "aria-errormessage": ariaErrorMessage
-}, ref) {
-  const [isOpen, setIsOpen] = useState(false);
-  const portalElement = usePortalElement();
-  const datasetProps = getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.Select
-  });
-  const isPopover = useBreakpointMatch("medium-s");
-  const handleValueChange = (newValue) => {
-    onValueChange == null ? void 0 : onValueChange(newValue);
-  };
-  return /* @__PURE__ */ jsxs(Select$1.Root, { value, defaultValue, onValueChange: handleValueChange, disabled, name, open: isOpen, onOpenChange: setIsOpen, required, children: [
-    /* @__PURE__ */ jsxs(Select$1.Trigger, { ref, id, className: styles.trigger, onFocus, onBlur, onKeyDown, onKeyUp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-errormessage": ariaErrorMessage, ...datasetProps, children: [
-      icon,
-      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
-      /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.chevron, children: /* @__PURE__ */ jsx(Icon, { svg: ForwardRef$1 }) })
-    ] }),
-    /* @__PURE__ */ jsx(Select$1.Portal, { container: portalElement, children: /* @__PURE__ */ jsx(Select$1.Content, { position: isPopover ? "popper" : void 0, sideOffset: isPopover ? 5 : void 0, className: styles.content, children: /* @__PURE__ */ jsx(
-      Select$1.Viewport,
-      {
-        className: styles.viewport,
-        role: "group",
-        tabIndex: 0,
-        children
-      }
-    ) }) })
-  ] });
-});
-function SelectOption({
-  value,
-  disabled,
-  children,
-  leadingIcon,
-  dataset
-}) {
-  return /* @__PURE__ */ jsxs(Select$1.Item, { value, disabled, className: styles.item, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.SelectFieldOption
-  }), children: [
-    leadingIcon,
-    /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
-    /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: styles.indicator, children: /* @__PURE__ */ jsx(Icon, { svg: ForwardRef }) })
-  ] });
-}
-function SelectGroup({
-  children,
-  label
-}) {
-  return /* @__PURE__ */ jsxs(Select$1.Group, { className: styles.group, children: [
-    /* @__PURE__ */ jsx(Select$1.Label, { className: styles.groupLabel, children: label }),
-    children
-  ] });
-}
-export {
-  Select,
-  SelectGroup,
-  SelectOption
-};
+import "../../render-icon-Ch3b2dE0.js";
+import "../../jsx-runtime-i4KUlhDu.js";
+import "../../TokyoUIChevronDown-DGcVqR1z.js";
+import { n as SelectGroup, r as SelectOption, t as Select } from "../../Select-Bo7PX_8V.js";
+export { Select, SelectGroup, SelectOption };

package/dist/components/SelectField/SelectField.js

@@ -1,28 +1,33 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { t as FormControl } from "../../FormControl-qnbQL1iF.js";
+import "../../TokyoUIChevronDown-DGcVqR1z.js";
+import { n as SelectGroup, r as SelectOption, t as Select } from "../../Select-Bo7PX_8V.js";
 import { forwardRef } from "react";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { FormControl } from "../FormControl/FormControl.js";
-import { Select, SelectOption, SelectGroup } from "./Select.js";
-const SelectField = forwardRef(function SelectField2({
-  id,
-  label,
-  description,
-  error,
-  required,
-  dataset,
-  hideLabel,
-  hasError,
-  useLegacyRequiredLabel,
-  inputDataset,
-  ...selectProps
-}, ref) {
-  return /* @__PURE__ */ jsx(FormControl, { id, label, description, error, hasError, required, dataset, hideLabel, useLegacyRequiredLabel, preplyDsComponent: webComponentNames.SelectField, children: /* @__PURE__ */ jsx(Select, { ref, dataset: inputDataset, ...selectProps }) });
+//#region src/components/SelectField/SelectField.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var SelectField = forwardRef(function SelectField({ id, label, description, error, required, dataset, hideLabel, hasError, useLegacyRequiredLabel, inputDataset, ...selectProps }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControl, {
+		id,
+		label,
+		description,
+		error,
+		hasError,
+		required,
+		dataset,
+		hideLabel,
+		useLegacyRequiredLabel,
+		preplyDsComponent: webComponentNames.SelectField,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select, {
+			ref,
+			dataset: inputDataset,
+			...selectProps
+		})
+	});
 });
-const SelectFieldOption = SelectOption;
-const SelectFieldGroup = SelectGroup;
-export {
-  SelectField,
-  SelectFieldGroup,
-  SelectFieldOption
-};
+var SelectFieldOption = SelectOption;
+var SelectFieldGroup = SelectGroup;
+//#endregion
+export { SelectField, SelectFieldGroup, SelectFieldOption };

package/dist/components/SelectField/hooks/useBreakpointMatch.js

@@ -1,22 +1,21 @@
+import { useEffect, useState } from "react";
 import { BREAKPOINT } from "@preply/ds-core";
-import { useState, useEffect } from "react";
+//#region src/components/SelectField/hooks/useBreakpointMatch.ts
 function useBreakpointMatch(breakpoint) {
-  const size = BREAKPOINT[breakpoint];
-  const query = `(min-width: ${size}px)`;
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    setMatches(mediaQuery.matches);
-    const handleChange = (e) => {
-      setMatches(e.matches);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  }, [query]);
-  return matches;
+	const query = `(min-width: ${BREAKPOINT[breakpoint]}px)`;
+	const [matches, setMatches] = useState(false);
+	useEffect(() => {
+		const mediaQuery = window.matchMedia(query);
+		setMatches(mediaQuery.matches);
+		const handleChange = (e) => {
+			setMatches(e.matches);
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => {
+			mediaQuery.removeEventListener("change", handleChange);
+		};
+	}, [query]);
+	return matches;
 }
-export {
-  useBreakpointMatch
-};
+//#endregion
+export { useBreakpointMatch };

package/dist/components/ShowOnIntersection/ShowOnIntersection.js

@@ -1,24 +1,35 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
 import { ObserveIntersection } from "../ObserveIntersection/ObserveIntersection.js";
-const ShowOnIntersection = ({
-  onIntersect,
-  once,
-  threshold,
-  tag,
-  dataset,
-  children
-}) => {
-  const [shouldShow, setShouldShow] = useState(false);
-  const intersectionCallback = useCallback(() => {
-    if (!shouldShow) {
-      setShouldShow(true);
-    }
-    onIntersect == null ? void 0 : onIntersect();
-  }, [shouldShow, onIntersect]);
-  return /* @__PURE__ */ jsx(ObserveIntersection, { onIntersect: intersectionCallback, once: !onIntersect ? true : once, threshold, tag, dataset, children: shouldShow && children });
-};
-export {
-  ShowOnIntersection
+import { useCallback, useState } from "react";
+//#region src/components/ShowOnIntersection/ShowOnIntersection.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* Only renders the wrapped components once it intersects with the viewport.
+*
+* Note that elements will not be detached from the DOM if the component is
+* scrolled out of view again.
+*
+* You can use `React.lazy` to lazy-load the wrapped components.
+*
+* Additionally, an `onIntersect` callback can be provided. As with
+* `ObserveIntersection`, this callback will be called every time the component
+* intersects with the viewport, or only the first time if `once` is set to
+* `true`.
+*/
+var ShowOnIntersection = ({ onIntersect, once, threshold, tag, dataset, children }) => {
+	const [shouldShow, setShouldShow] = useState(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ObserveIntersection, {
+		onIntersect: useCallback(() => {
+			if (!shouldShow) setShouldShow(true);
+			onIntersect === null || onIntersect === void 0 || onIntersect();
+		}, [shouldShow, onIntersect]),
+		once: !onIntersect ? true : once,
+		threshold,
+		tag,
+		dataset,
+		children: shouldShow && children
+	});
 };
+//#endregion
+export { ShowOnIntersection };