@redis-ui/components 44.0.2 → 46.1.2

package/dist/Helpers/hooks/useScrollable.js

@@ -1,34 +1,33 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+//#region src/Helpers/hooks/useScrollable.ts
 function isScrollable(el) {
-  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+	return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
 }
-const useScrollable = (ref) => {
-  const [scrollable, setScrollable] = useState(false);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return void 0;
-    }
-    const update = () => setScrollable(isScrollable(el));
-    const resizeObserver = new ResizeObserver(update);
-    resizeObserver.observe(el);
-    const mutationObserver = new MutationObserver(update);
-    mutationObserver.observe(el, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      characterData: true
-    });
-    window.addEventListener("resize", update);
-    update();
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-      window.removeEventListener("resize", update);
-    };
-  }, [ref]);
-  return scrollable;
-};
-export {
-  useScrollable
+/** Hook: returns whether element is scrollable */
+var useScrollable = (ref) => {
+	const [scrollable, setScrollable] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const update = () => setScrollable(isScrollable(el));
+		const resizeObserver = new ResizeObserver(update);
+		resizeObserver.observe(el);
+		const mutationObserver = new MutationObserver(update);
+		mutationObserver.observe(el, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true
+		});
+		window.addEventListener("resize", update);
+		update();
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			window.removeEventListener("resize", update);
+		};
+	}, [ref]);
+	return scrollable;
 };
+//#endregion
+export { useScrollable };

package/dist/Helpers/index.js

@@ -0,0 +1,11 @@
+export * from './react.utils';
+export * from './generateId';
+export * from './debounce';
+export * from './contexts/SharedId.context';
+export * from './contexts/PrimitiveContextState';
+export * from './contexts/NullableContext';
+export * from './SelfContained';
+export * from './RestylableElement';
+export * from './contexts/Popper/Popper.context';
+export * from './common.types';
+export * from './hooks/useScrollable';

package/dist/Helpers/react.utils.cjs

@@ -1,25 +1,27 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-require("../node_modules/react-children-utilities/react-children-utilities.cjs");
-const onlyText = require("../node_modules/react-children-utilities/lib/onlyText.cjs");
-const handlePreventDefault = (e) => e.preventDefault();
-const handleStopPropagation = (e) => e.stopPropagation();
-const childrenToString = onlyText.default;
-const combineHandlers = (...handlers) => {
-  const validHandlers = handlers.filter((handler) => typeof handler === "function");
-  if (!validHandlers.length) {
-    return void 0;
-  }
-  if (validHandlers.length === 1) {
-    return validHandlers[0];
-  }
-  return (...params) => validHandlers.forEach((handler) => handler(...params));
+require("../_virtual/_rolldown/runtime.cjs");
+const require_onlyText = require("../node_modules/react-children-utilities/lib/onlyText.cjs");
+let react = require("react");
+//#region src/Helpers/react.utils.ts
+var handlePreventDefault = (e) => e.preventDefault();
+var handleStopPropagation = (e) => e.stopPropagation();
+var childrenToString = require_onlyText.default;
+var combineHandlers = (...handlers) => {
+	const validHandlers = handlers.filter((handler) => typeof handler === "function");
+	if (!validHandlers.length) return;
+	if (validHandlers.length === 1) return validHandlers[0];
+	return ((...params) => validHandlers.forEach((handler) => handler(...params)));
 };
-const isFragmentElement = (el) => el.type === React.Fragment;
-const isTextualNode = (node) => !node || (Array.isArray(node) ? node.flat().every(isTextualNode) : !React.isValidElement(node) || isFragmentElement(node) && isTextualNode(node.props.children));
-const forwardRefWithGenerics = React.forwardRef;
-const memoWithGenerics = React.memo;
+var isFragmentElement = (el) => el.type === react.Fragment;
+/**
+* Verifies, if node contains only data, that renders to textual html nodes.
+* Supports deep arrays and checks all entries for string, number and unrenderable primitives.
+* Doesn't verify that final text renders to empty.
+* Returns false if texts is wrapped into other components, including Fragment.
+*/
+var isTextualNode = (node) => !node || (Array.isArray(node) ? node.flat().every(isTextualNode) : !(0, react.isValidElement)(node) || isFragmentElement(node) && isTextualNode(node.props.children));
+var forwardRefWithGenerics = react.forwardRef;
+var memoWithGenerics = react.memo;
+//#endregion
 exports.childrenToString = childrenToString;
 exports.combineHandlers = combineHandlers;
 exports.forwardRefWithGenerics = forwardRefWithGenerics;

package/dist/Helpers/react.utils.js

@@ -1,30 +1,24 @@
-import { Fragment, isValidElement, forwardRef, memo } from "react";
-import "../node_modules/react-children-utilities/react-children-utilities.js";
 import onlyText from "../node_modules/react-children-utilities/lib/onlyText.js";
-const handlePreventDefault = (e) => e.preventDefault();
-const handleStopPropagation = (e) => e.stopPropagation();
-const childrenToString = onlyText;
-const combineHandlers = (...handlers) => {
-  const validHandlers = handlers.filter((handler) => typeof handler === "function");
-  if (!validHandlers.length) {
-    return void 0;
-  }
-  if (validHandlers.length === 1) {
-    return validHandlers[0];
-  }
-  return (...params) => validHandlers.forEach((handler) => handler(...params));
-};
-const isFragmentElement = (el) => el.type === Fragment;
-const isTextualNode = (node) => !node || (Array.isArray(node) ? node.flat().every(isTextualNode) : !isValidElement(node) || isFragmentElement(node) && isTextualNode(node.props.children));
-const forwardRefWithGenerics = forwardRef;
-const memoWithGenerics = memo;
-export {
-  childrenToString,
-  combineHandlers,
-  forwardRefWithGenerics,
-  handlePreventDefault,
-  handleStopPropagation,
-  isFragmentElement,
-  isTextualNode,
-  memoWithGenerics
+import { Fragment, forwardRef, isValidElement, memo } from "react";
+//#region src/Helpers/react.utils.ts
+var handlePreventDefault = (e) => e.preventDefault();
+var handleStopPropagation = (e) => e.stopPropagation();
+var childrenToString = onlyText;
+var combineHandlers = (...handlers) => {
+	const validHandlers = handlers.filter((handler) => typeof handler === "function");
+	if (!validHandlers.length) return;
+	if (validHandlers.length === 1) return validHandlers[0];
+	return ((...params) => validHandlers.forEach((handler) => handler(...params)));
 };
+var isFragmentElement = (el) => el.type === Fragment;
+/**
+* Verifies, if node contains only data, that renders to textual html nodes.
+* Supports deep arrays and checks all entries for string, number and unrenderable primitives.
+* Doesn't verify that final text renders to empty.
+* Returns false if texts is wrapped into other components, including Fragment.
+*/
+var isTextualNode = (node) => !node || (Array.isArray(node) ? node.flat().every(isTextualNode) : !isValidElement(node) || isFragmentElement(node) && isTextualNode(node.props.children));
+var forwardRefWithGenerics = forwardRef;
+var memoWithGenerics = memo;
+//#endregion
+export { childrenToString, combineHandlers, forwardRefWithGenerics, handlePreventDefault, handleStopPropagation, isFragmentElement, isTextualNode, memoWithGenerics };

package/dist/Helpers/test/mockBoundingRect.js

@@ -0,0 +1,25 @@
+export const mockBoundingRect = (initialRect = {}) => {
+    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+    const domRect = {
+        width: 520,
+        height: 30,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => '',
+        ...initialRect
+    };
+    beforeEach(() => {
+        Element.prototype.getBoundingClientRect = vi.fn(() => domRect);
+    });
+    afterAll(() => {
+        Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    });
+    const updateBoundingRectWidth = (newWidth) => {
+        domRect.width = newWidth;
+    };
+    return { updateBoundingRectWidth };
+};

package/dist/HighlightedIcon/HighlightedIcon.cjs

@@ -1,26 +1,19 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
-const redisUiStyles = require("@redislabsdev/redis-ui-styles");
-const HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
-const HighlightedIcon = ({
-  icon: IconComponent,
-  size = "M",
-  variant = "primary",
-  ...restProps
-}) => {
-  const theme = redisUiStyles.useTheme();
-  const iconSize = theme.core.icon.size[size];
-  return jsxRuntime.jsxRuntimeExports.jsx(HighlightedIcon_style.HighlightedIconContainer, {
-    "$size": size,
-    "$variant": variant,
-    ...restProps,
-    children: jsxRuntime.jsxRuntimeExports.jsx(IconComponent, {
-      customColor: "currentColor",
-      customSize: iconSize,
-      "aria-hidden": true
-    })
-  });
+require("../_virtual/_rolldown/runtime.cjs");
+const require_HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
+let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/HighlightedIcon/HighlightedIcon.tsx
+var HighlightedIcon = ({ icon: IconComponent, size = "M", variant = "primary", ...restProps }) => {
+	const iconSize = (0, _redislabsdev_redis_ui_styles.useTheme)().core.icon.size[size];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HighlightedIcon_style.HighlightedIconContainer, {
+		$size: size,
+		$variant: variant,
+		...restProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {
+			customSize: iconSize,
+			"aria-hidden": true
+		})
+	});
 };
-const HighlightedIcon$1 = HighlightedIcon;
-exports.default = HighlightedIcon$1;
+//#endregion
+exports.default = HighlightedIcon;

package/dist/HighlightedIcon/HighlightedIcon.js

@@ -1,26 +1,18 @@
-import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { HighlightedIconContainer } from "./HighlightedIcon.style.js";
-const HighlightedIcon = ({
-  icon: IconComponent,
-  size = "M",
-  variant = "primary",
-  ...restProps
-}) => {
-  const theme = useTheme();
-  const iconSize = theme.core.icon.size[size];
-  return jsxRuntimeExports.jsx(HighlightedIconContainer, {
-    "$size": size,
-    "$variant": variant,
-    ...restProps,
-    children: jsxRuntimeExports.jsx(IconComponent, {
-      customColor: "currentColor",
-      customSize: iconSize,
-      "aria-hidden": true
-    })
-  });
-};
-const HighlightedIcon$1 = HighlightedIcon;
-export {
-  HighlightedIcon$1 as default
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { jsx } from "react/jsx-runtime";
+//#region src/HighlightedIcon/HighlightedIcon.tsx
+var HighlightedIcon = ({ icon: IconComponent, size = "M", variant = "primary", ...restProps }) => {
+	const iconSize = useTheme().core.icon.size[size];
+	return /* @__PURE__ */ jsx(HighlightedIconContainer, {
+		$size: size,
+		$variant: variant,
+		...restProps,
+		children: /* @__PURE__ */ jsx(IconComponent, {
+			customSize: iconSize,
+			"aria-hidden": true
+		})
+	});
 };
+//#endregion
+export { HighlightedIcon as default };

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

@@ -1,49 +1,53 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("styled-components");
-const redisUiStyles = require("@redislabsdev/redis-ui-styles");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const SIZE_MAP = {
-  XS: {
-    size: "1.6rem",
-    borderRadius: "0.3rem"
-  },
-  S: {
-    size: "2rem",
-    borderRadius: "0.3rem"
-  },
-  M: {
-    size: "2.4rem",
-    borderRadius: "0.5rem"
-  },
-  L: {
-    size: "3.2rem",
-    borderRadius: "0.5rem"
-  },
-  XL: {
-    size: "4rem",
-    borderRadius: "0.8rem"
-  },
-  XXL: {
-    size: "4.4rem",
-    borderRadius: "0.8rem"
-  }
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let styled_components = require("styled-components");
+styled_components = require_runtime.__toESM(styled_components, 1);
+let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
+//#region src/HighlightedIcon/HighlightedIcon.style.ts
+var HighlightedIcon_style_exports = /* @__PURE__ */ require_runtime.__exportAll({ HighlightedIconContainer: () => HighlightedIconContainer });
+var SIZE_MAP = {
+	XS: {
+		size: "1.6rem",
+		borderRadius: "0.3rem"
+	},
+	S: {
+		size: "2rem",
+		borderRadius: "0.3rem"
+	},
+	M: {
+		size: "2.4rem",
+		borderRadius: "0.5rem"
+	},
+	L: {
+		size: "3.2rem",
+		borderRadius: "0.5rem"
+	},
+	XL: {
+		size: "4rem",
+		borderRadius: "0.8rem"
+	},
+	XXL: {
+		size: "4.4rem",
+		borderRadius: "0.8rem"
+	}
 };
-const getColors = (variant) => {
-  const theme = redisUiStyles.useTheme();
-  return theme.components.highlightedIcon.variants[variant];
+var getColors = (variant) => {
+	return (0, _redislabsdev_redis_ui_styles.useTheme)().components.highlightedIcon.variants[variant];
 };
-const HighlightedIconContainer = _styled__default.default.div.withConfig({
-  displayName: "HighlightedIconstyle__HighlightedIconContainer",
-  componentId: "RedisUI__sc-o2gs2e-0"
-})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
-  $size
-}) => SIZE_MAP[$size].size, ({
-  $variant
-}) => getColors($variant).background, ({
-  $variant
-}) => getColors($variant).text, ({
-  $size
-}) => SIZE_MAP[$size].borderRadius);
+var HighlightedIconContainer = styled_components.default.div.withConfig({
+	displayName: "HighlightedIconstyle__HighlightedIconContainer",
+	componentId: "RedisUI__sc-o2gs2e-0"
+})([
+	"display:inline-flex;align-items:center;justify-content:center;width:",
+	";aspect-ratio:1;background-color:",
+	";color:",
+	";border-radius:",
+	";flex-shrink:0;"
+], ({ $size }) => SIZE_MAP[$size].size, ({ $variant }) => getColors($variant).background, ({ $variant }) => getColors($variant).text, ({ $size }) => SIZE_MAP[$size].borderRadius);
+//#endregion
 exports.HighlightedIconContainer = HighlightedIconContainer;
+Object.defineProperty(exports, "HighlightedIcon_style_exports", {
+	enumerable: true,
+	get: function() {
+		return HighlightedIcon_style_exports;
+	}
+});

package/dist/HighlightedIcon/HighlightedIcon.style.js

@@ -1,47 +1,46 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const SIZE_MAP = {
-  XS: {
-    size: "1.6rem",
-    borderRadius: "0.3rem"
-  },
-  S: {
-    size: "2rem",
-    borderRadius: "0.3rem"
-  },
-  M: {
-    size: "2.4rem",
-    borderRadius: "0.5rem"
-  },
-  L: {
-    size: "3.2rem",
-    borderRadius: "0.5rem"
-  },
-  XL: {
-    size: "4rem",
-    borderRadius: "0.8rem"
-  },
-  XXL: {
-    size: "4.4rem",
-    borderRadius: "0.8rem"
-  }
+//#region src/HighlightedIcon/HighlightedIcon.style.ts
+var HighlightedIcon_style_exports = /* @__PURE__ */ __exportAll({ HighlightedIconContainer: () => HighlightedIconContainer });
+var SIZE_MAP = {
+	XS: {
+		size: "1.6rem",
+		borderRadius: "0.3rem"
+	},
+	S: {
+		size: "2rem",
+		borderRadius: "0.3rem"
+	},
+	M: {
+		size: "2.4rem",
+		borderRadius: "0.5rem"
+	},
+	L: {
+		size: "3.2rem",
+		borderRadius: "0.5rem"
+	},
+	XL: {
+		size: "4rem",
+		borderRadius: "0.8rem"
+	},
+	XXL: {
+		size: "4.4rem",
+		borderRadius: "0.8rem"
+	}
 };
-const getColors = (variant) => {
-  const theme = useTheme();
-  return theme.components.highlightedIcon.variants[variant];
-};
-const HighlightedIconContainer = _styled.div.withConfig({
-  displayName: "HighlightedIconstyle__HighlightedIconContainer",
-  componentId: "RedisUI__sc-o2gs2e-0"
-})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
-  $size
-}) => SIZE_MAP[$size].size, ({
-  $variant
-}) => getColors($variant).background, ({
-  $variant
-}) => getColors($variant).text, ({
-  $size
-}) => SIZE_MAP[$size].borderRadius);
-export {
-  HighlightedIconContainer
+var getColors = (variant) => {
+	return useTheme().components.highlightedIcon.variants[variant];
 };
+var HighlightedIconContainer = _styled.div.withConfig({
+	displayName: "HighlightedIconstyle__HighlightedIconContainer",
+	componentId: "RedisUI__sc-o2gs2e-0"
+})([
+	"display:inline-flex;align-items:center;justify-content:center;width:",
+	";aspect-ratio:1;background-color:",
+	";color:",
+	";border-radius:",
+	";flex-shrink:0;"
+], ({ $size }) => SIZE_MAP[$size].size, ({ $variant }) => getColors($variant).background, ({ $variant }) => getColors($variant).text, ({ $size }) => SIZE_MAP[$size].borderRadius);
+//#endregion
+export { HighlightedIconContainer, HighlightedIcon_style_exports };

package/dist/HighlightedIcon/HighlightedIcon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/HighlightedIcon/index.js

@@ -0,0 +1,3 @@
+export { default as HighlightedIcon } from './HighlightedIcon';
+export * from './HighlightedIcon.types';
+export * as HighlightedIconStyles from './HighlightedIcon.style';

package/dist/Inputs/Input/Input.cjs

@@ -1,58 +1,43 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
-const React = require("react");
-const InputTag = require("../components/InputTag/InputTag.cjs");
-const StatusIndicator = require("../components/StatusIndicator/StatusIndicator.cjs");
-const LoadingIndicator = require("../components/LoadingIndicator/LoadingIndicator.cjs");
-const Compose_style = require("../components/Compose/Compose.style.cjs");
-const ResetButton = require("../components/ResetButton/ResetButton.cjs");
-const TextCompose = require("../components/Compose/TextCompose.cjs");
-const Input = Object.assign(React.forwardRef(({
-  id,
-  className,
-  style,
-  readOnly,
-  loading,
-  variant,
-  error,
-  valid,
-  value,
-  defaultValue,
-  onChange,
-  parser,
-  formatter,
-  allowReset = false,
-  ...restProps
-}, ref) => jsxRuntime.jsxRuntimeExports.jsxs(Input.Compose, {
-  id,
-  className,
-  style,
-  readOnly,
-  variant,
-  error,
-  valid,
-  value,
-  defaultValue,
-  onChange,
-  parser,
-  formatter,
-  readonlyProps: restProps,
-  children: [jsxRuntime.jsxRuntimeExports.jsx(Input.Tag, {
-    ref,
-    ...restProps
-  }), jsxRuntime.jsxRuntimeExports.jsx(Input.ResetButton, {
-    allowReset
-  }), jsxRuntime.jsxRuntimeExports.jsx(Input.StatusIndicator, {}), jsxRuntime.jsxRuntimeExports.jsx(Input.LoadingIndicator, {
-    loading
-  })]
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_InputTag = require("../components/InputTag/InputTag.cjs");
+const require_StatusIndicator = require("../components/StatusIndicator/StatusIndicator.cjs");
+const require_LoadingIndicator = require("../components/LoadingIndicator/LoadingIndicator.cjs");
+const require_Compose_style = require("../components/Compose/Compose.style.cjs");
+const require_ResetButton = require("../components/ResetButton/ResetButton.cjs");
+const require_TextCompose = require("../components/Compose/TextCompose.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/Inputs/Input/Input.tsx
+var Input = Object.assign((0, react.forwardRef)(({ id, className, style, readOnly, loading, variant, error, valid, value, defaultValue, onChange, parser, formatter, allowReset = false, ...restProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Input.Compose, {
+	id,
+	className,
+	style,
+	readOnly,
+	variant,
+	error,
+	valid,
+	value,
+	defaultValue,
+	onChange,
+	parser,
+	formatter,
+	readonlyProps: restProps,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input.Tag, {
+			ref,
+			...restProps
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input.ResetButton, { allowReset }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input.StatusIndicator, {}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input.LoadingIndicator, { loading })
+	]
 })), {
-  StatusIndicator: StatusIndicator.default,
-  Compose: TextCompose.default,
-  LoadingIndicator: LoadingIndicator.default,
-  Tag: InputTag.default,
-  ReadonlyValue: Compose_style.ReadonlyValue,
-  ResetButton: ResetButton.ResetButton
+	StatusIndicator: require_StatusIndicator.default,
+	Compose: require_TextCompose.default,
+	LoadingIndicator: require_LoadingIndicator.default,
+	Tag: require_InputTag.default,
+	ReadonlyValue: require_Compose_style.ReadonlyValue,
+	ResetButton: require_ResetButton.ResetButton
 });
-const Input$1 = Input;
-exports.default = Input$1;
+//#endregion
+exports.default = Input;