@redis-ui/components 41.4.1 → 42.0.0

package/dist/ChipList/ChipList.js

@@ -5,6 +5,7 @@ import { ChipListOverflow } from "./ChipList.style.js";
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -26,6 +27,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntimeExports.jsx(Chip, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.types.d.ts

@@ -10,6 +10,7 @@ export interface ChipItem extends HTMLAttributes<HTMLSpanElement> {
 export interface ChipListProps {
     chips: ChipItem[];
     onRemoveItem?: (chip: string) => void;
+    removeItemButtonTitle?: string;
     maxRows?: number;
     size?: ChipSizes;
     variant?: ChipVariants;

package/dist/ChipList/Components/ExtraItem.cjs

@@ -31,19 +31,20 @@ const ExtraItem = ({
     children: jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
       onOpenChange,
       interactive,
-      disableInteractionHelper: true,
-      withButton: true,
       placement: "right",
       backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntime.jsxRuntimeExports.jsx(ExtraItem_style.ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content
       }),
-      children: jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
-        text: `+${chips.length}`,
-        disabled,
-        size,
-        variant
+      children: jsxRuntime.jsxRuntimeExports.jsx("span", {
+        tabIndex: 0,
+        children: jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
+          text: `+${chips.length}`,
+          disabled,
+          size,
+          variant
+        })
       })
     })
   });

package/dist/ChipList/Components/ExtraItem.js

@@ -29,19 +29,20 @@ const ExtraItem = ({
     children: jsxRuntimeExports.jsx(Tooltip, {
       onOpenChange,
       interactive,
-      disableInteractionHelper: true,
-      withButton: true,
       placement: "right",
       backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntimeExports.jsx(ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content
       }),
-      children: jsxRuntimeExports.jsx(Chip, {
-        text: `+${chips.length}`,
-        disabled,
-        size,
-        variant
+      children: jsxRuntimeExports.jsx("span", {
+        tabIndex: 0,
+        children: jsxRuntimeExports.jsx(Chip, {
+          text: `+${chips.length}`,
+          disabled,
+          size,
+          variant
+        })
       })
     })
   });

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.cjs

@@ -32,8 +32,8 @@ const MultiSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
         children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.js

@@ -30,8 +30,8 @@ const MultiSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntimeExports.jsx(Menu.Trigger, {
-      children: jsxRuntimeExports.jsx(MenuTriggerContainer, {
+    children: [jsxRuntimeExports.jsx(MenuTriggerContainer, {
+      children: jsxRuntimeExports.jsx(Menu.Trigger, {
         children: jsxRuntimeExports.jsxs(FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.cjs

@@ -42,8 +42,8 @@ const MultiTreeSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
         children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.js

@@ -40,8 +40,8 @@ const MultiTreeSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntimeExports.jsx(Menu.Trigger, {
-      children: jsxRuntimeExports.jsx(MenuTriggerContainer, {
+    children: [jsxRuntimeExports.jsx(MenuTriggerContainer, {
+      children: jsxRuntimeExports.jsx(Menu.Trigger, {
         children: jsxRuntimeExports.jsxs(FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {

package/dist/FormField/FormField.context.cjs

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const PrimitiveContextState = require("../Helpers/contexts/PrimitiveContextState.cjs");
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = PrimitiveContextState.createPrimitiveContextState();
+const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 exports.FieldReadonlyProvider = FieldReadonlyProvider;
 exports.FieldReadonlyTransProvider = FieldReadonlyTransProvider;
+exports.FieldRequiredProvider = FieldRequiredProvider;
+exports.FieldRequiredTransProvider = FieldRequiredTransProvider;
 exports.FieldStatusProvider = FieldStatusProvider;
 exports.FieldStatusTransProvider = FieldStatusTransProvider;
 exports.useFieldReadonly = useFieldReadonly;
+exports.useFieldRequired = useFieldRequired;
 exports.useFieldStatus = useFieldStatus;

package/dist/FormField/FormField.context.d.ts

@@ -3,6 +3,9 @@ import { FieldStatus } from './FormField.types';
 export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<FieldStatus>> & {
     passOnlyStateDown?: FieldStatus | ((state: FieldStatus) => boolean) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldRequired: (value?: boolean | undefined) => boolean | undefined, FieldRequiredProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldRequiredTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
+    passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
     passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/FormField.context.js

@@ -1,11 +1,15 @@
 import { createPrimitiveContextState } from "../Helpers/contexts/PrimitiveContextState.js";
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = createPrimitiveContextState();
+const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = createPrimitiveContextState();
 export {
   FieldReadonlyProvider,
   FieldReadonlyTransProvider,
+  FieldRequiredProvider,
+  FieldRequiredTransProvider,
   FieldStatusProvider,
   FieldStatusTransProvider,
   useFieldReadonly,
+  useFieldRequired,
   useFieldStatus
 };

package/dist/FormField/components/Nested/Nested.cjs

@@ -13,8 +13,10 @@ const Nested = ({
   const otherProviders = jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdProvider, {
     customId: id,
     children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusProvider, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
-        children
+      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredProvider, {
+        children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
+          children
+        })
       })
     })
   });

package/dist/FormField/components/Nested/Nested.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { FieldStatusProvider, FieldReadonlyProvider } from "../../FormField.context.js";
+import { FieldStatusProvider, FieldRequiredProvider, FieldReadonlyProvider } from "../../FormField.context.js";
 import { FieldDisabledTransProvider, FieldDisabledProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdProvider } from "../../../Helpers/contexts/SharedId.context.js";
 const DISABLED_STATE_TO_PASS = true;
@@ -11,8 +11,10 @@ const Nested = ({
   const otherProviders = jsxRuntimeExports.jsx(SharedIdProvider, {
     customId: id,
     children: jsxRuntimeExports.jsx(FieldStatusProvider, {
-      children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
-        children
+      children: jsxRuntimeExports.jsx(FieldRequiredProvider, {
+        children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
+          children
+        })
       })
     })
   });

package/dist/Helpers/css.utils.cjs

@@ -34,6 +34,10 @@ const tokenMaps = {
     cssProp: "background-color",
     token: "bgColor"
   },
+  bgGradient: {
+    cssProp: "background-image",
+    token: "bgGradient"
+  },
   textColor: {
     cssProp: "color",
     token: "textColor"
@@ -81,6 +85,10 @@ const tokenMaps = {
     cssProp: "line-height",
     token: "lineHeight"
   },
+  gap: {
+    cssProp: "gap",
+    token: "gap"
+  },
   fontSize: {
     cssProp: "font-size",
     token: "fontSize"

package/dist/Helpers/css.utils.js

@@ -32,6 +32,10 @@ const tokenMaps = {
     cssProp: "background-color",
     token: "bgColor"
   },
+  bgGradient: {
+    cssProp: "background-image",
+    token: "bgGradient"
+  },
   textColor: {
     cssProp: "color",
     token: "textColor"
@@ -79,6 +83,10 @@ const tokenMaps = {
     cssProp: "line-height",
     token: "lineHeight"
   },
+  gap: {
+    cssProp: "gap",
+    token: "gap"
+  },
   fontSize: {
     cssProp: "font-size",
     token: "fontSize"

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.cjs

@@ -17,14 +17,18 @@ const TextAreaTag = React.forwardRef(({
 }, ref) => {
   const fieldDisabled = Field_context.useFieldDisabled(disabled);
   const sharedId = SharedId_context.useSharedId(id);
-  const inputValueProps = InputValue_context.useInputValueProps(restProps);
+  const inputValueProps = InputValue_context.useInputValueProps(restProps, ref);
   const status = FormField_context.useFieldStatus();
+  const required = FormField_context.useFieldRequired();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
     id: errorId,
     role: "alert",
@@ -32,11 +36,11 @@ const TextAreaTag = React.forwardRef(({
   }) : null;
   return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
     children: [jsxRuntime.jsxRuntimeExports.jsx(TextAreaTag_style.TextAreaTag, {
-      ref,
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
       ...statusProps,
+      ...requiredProps,
       ...restProps,
       ...inputValueProps
     }), errorAlert]

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.js

@@ -6,7 +6,7 @@ import { useFieldDisabled, useErrorContent } from "../../../components/Context/F
 import { useInputValueProps } from "../../../components/Context/InputValue.context.js";
 import { TextAreaTag as TextAreaTag$1 } from "./TextAreaTag.style.js";
 import { useSharedId } from "../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus } from "../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../../FormField/FormField.context.js";
 const TextAreaTag = forwardRef(({
   id,
   autoComplete = "off",
@@ -15,14 +15,18 @@ const TextAreaTag = forwardRef(({
 }, ref) => {
   const fieldDisabled = useFieldDisabled(disabled);
   const sharedId = useSharedId(id);
-  const inputValueProps = useInputValueProps(restProps);
+  const inputValueProps = useInputValueProps(restProps, ref);
   const status = useFieldStatus();
+  const required = useFieldRequired();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {
     id: errorId,
     role: "alert",
@@ -30,11 +34,11 @@ const TextAreaTag = forwardRef(({
   }) : null;
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
     children: [jsxRuntimeExports.jsx(TextAreaTag$1, {
-      ref,
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
       ...statusProps,
+      ...requiredProps,
       ...restProps,
       ...inputValueProps
     }), errorAlert]

package/dist/Inputs/components/Compose/CommonCompose.cjs

@@ -42,20 +42,22 @@ const CommonInputCompose = ({
     ) : jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
       children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
-        children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-          value: error ?? "",
-          children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
-            "$variant": variant,
-            ...restProps,
-            "data-editable": "",
-            onPointerUp: react_utils.combineHandlers((e) => {
-              var _a;
-              const target = e.target;
-              if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-              }
-            }, onPointerUp),
-            children
+        children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
+          children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+            value: error ?? "",
+            children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
+              "$variant": variant,
+              ...restProps,
+              "data-editable": "",
+              onPointerUp: react_utils.combineHandlers((e) => {
+                var _a;
+                const target = e.target;
+                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                  (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                }
+              }, onPointerUp),
+              children
+            })
           })
         })
       })

package/dist/Inputs/components/Compose/CommonCompose.js

@@ -4,7 +4,7 @@ import { ReadonlyRenderWrapper } from "../ReadonlyRender/ReadonlyRenderWrapper.j
 import { InputTag } from "../InputTag/InputTag.style.js";
 import { CommonInputCompose as CommonInputCompose$1, ReadonlyValue } from "./Compose.style.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { useFieldReadonly, FieldStatusTransProvider } from "../../../FormField/FormField.context.js";
+import { useFieldReadonly, FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
 import { combineHandlers } from "../../../Helpers/react.utils.js";
 const DefaultReadonlyRender = ({
   value,
@@ -40,20 +40,22 @@ const CommonInputCompose = ({
     ) : jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
       children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
-        children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-          value: error ?? "",
-          children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
-            "$variant": variant,
-            ...restProps,
-            "data-editable": "",
-            onPointerUp: combineHandlers((e) => {
-              var _a;
-              const target = e.target;
-              if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-              }
-            }, onPointerUp),
-            children
+        children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
+          children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+            value: error ?? "",
+            children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
+              "$variant": variant,
+              ...restProps,
+              "data-editable": "",
+              onPointerUp: combineHandlers((e) => {
+                var _a;
+                const target = e.target;
+                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                  (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                }
+              }, onPointerUp),
+              children
+            })
           })
         })
       })

package/dist/Inputs/components/Context/InputValue.context.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const react_utils = require("../../../Helpers/react.utils.cjs");
 const Context = React.createContext(null);
 const ContextProvider = Context.Provider;
@@ -11,20 +12,23 @@ const useInputValue = () => {
   }
   return context;
 };
-const useInputValueProps = (customProps) => {
+const useInputValueProps = (customProps, inputRef) => {
   const {
     props
   } = useInputValue();
-  if (!customProps) return props;
+  const ref = index.useComposedRefs(inputRef, props.ref);
   const mergedProps = {
-    ...props
+    ...props,
+    ref
   };
-  const keys = Object.keys(props);
-  keys.forEach((key) => {
-    if (typeof props[key] === "function" && key in customProps) {
-      mergedProps[key] = react_utils.combineHandlers(props[key], customProps[key]);
-    }
-  });
+  if (customProps) {
+    const keys = Object.keys(props);
+    keys.forEach((key) => {
+      if (key !== "ref" && typeof props[key] === "function" && key in customProps) {
+        mergedProps[key] = react_utils.combineHandlers(props[key], customProps[key]);
+      }
+    });
+  }
   return mergedProps;
 };
 const useInputValueApi = () => useInputValue().api;