@koobiq/react-components 0.19.0 → 0.21.0

package/dist/components/FormField/FormFieldClearButton/FormFieldClearButton.d.ts

@@ -0,0 +1,6 @@
+import { type IconButtonProps } from '../../IconButton';
+export type FormFieldClearButtonProps = {
+    isHidden?: boolean;
+    isClearable?: boolean;
+} & IconButtonProps;
+export declare const FormFieldClearButton: import("react").ForwardRefExoticComponent<Omit<FormFieldClearButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FormField/FormFieldClearButton/FormFieldClearButton.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import { IconCircleXmark16 } from "@koobiq/react-icons";
+import s from "./FormFieldClearButton.module.css.js";
+import intlMessages from "./intl.json.js";
+import { IconButton } from "../../IconButton/IconButton.js";
+import { useFormFieldControlGroup } from "../FormFieldControlGroup/FormFieldControlGroupContext.js";
+const FormFieldClearButton = forwardRef(({ isHidden, isClearable, className, ...other }, ref) => {
+  const { isInvalid } = useFormFieldControlGroup();
+  const t = useLocalizedStringFormatter(intlMessages);
+  if (!isClearable) return null;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      slot: "clear-button",
+      "aria-hidden": isHidden,
+      tabIndex: isHidden ? -1 : void 0,
+      className: clsx(s.base, className),
+      variant: isInvalid ? "error" : "fade-contrast",
+      "aria-label": t.format("clear"),
+      ref,
+      preventFocusOnPress: true,
+      ...other,
+      children: /* @__PURE__ */ jsx(IconCircleXmark16, {})
+    }
+  );
+});
+FormFieldClearButton.displayName = "FormFieldClearButton";
+export {
+  FormFieldClearButton
+};

package/dist/components/FormField/FormFieldClearButton/FormFieldClearButton.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-formfieldclearbutton-702863";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/FormField/FormFieldClearButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FormFieldClearButton';

package/dist/components/FormField/index.d.ts

@@ -6,4 +6,5 @@ export * from './FormFieldError';
 export * from './FormFieldControlGroup';
 export * from './FormFieldInputDate';
 export * from './FormField';
+export * from './FormFieldClearButton';
 export * from './types';

package/dist/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { TextField } from '@koobiq/react-primitives';
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "data-testid" | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | keyof {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "data-testid" | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isClearable" | "isLabelHidden" | "onClear" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
@@ -15,6 +15,8 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
     isLabelHidden?: boolean;
     labelPlacement?: import("./types").InputPropLabelPlacement;
     labelAlign?: import("./types").InputPropLabelAlign;
+    isClearable?: boolean;
+    onClear?: () => void;
     caption?: import("react").ReactNode;
     style?: import("react").CSSProperties;
     'data-testid'?: string | number;
@@ -24,6 +26,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<
         caption?: FormFieldCaptionProps;
         group?: FormFieldControlGroupProps;
         errorMessage?: FormFieldErrorProps;
+        clearButton?: import("..").IconButtonProps;
         input?: FormFieldInputProps;
     };
 } & {

package/dist/components/Input/Input.js

@@ -5,13 +5,16 @@ import { deprecate } from "@koobiq/logger";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 import s from "./Input.module.css.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
 import { useForm } from "../Form/FormContext.js";
 import { FormField } from "../FormField/FormField.js";
 const Input = forwardRef((props, ref) => {
   const {
     variant = "filled",
+    onClear,
     fullWidth,
     hiddenLabel,
+    isClearable,
     isLabelHidden: isLabelHiddenProp,
     disabled,
     isDisabled: isDisabledProp,
@@ -74,23 +77,37 @@ const Input = forwardRef((props, ref) => {
       errorMessage,
       labelPlacement,
       labelAlign,
+      isClearable,
+      onClear,
       "data-variant": variant,
       ...other
     },
     slotProps?.root
   );
-  return /* @__PURE__ */ jsx(FormField, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
+  return /* @__PURE__ */ jsx(FormField, { as: TextField, inputElementType: "input", ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2, state }) => {
+    const hasValue = state.value !== "";
+    const clearButtonIsHidden = !hasValue || isDisabled2 || isReadOnly;
     const labelProps = mergeProps(
       { isHidden: isLabelHidden, isRequired: isRequired2, children: label },
       slotProps?.label
     );
+    const clearButtonProps = mergeProps(
+      {
+        isClearable,
+        isHidden: clearButtonIsHidden
+      },
+      slotProps?.clearButton
+    );
     const inputProps = mergeProps(
       { ref: inputRef },
       slotProps?.input
     );
     const groupProps = mergeProps(
       {
-        endAddon,
+        endAddon: (isClearable || endAddon) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
+          endAddon
+        ] }),
         variant,
         onMouseDown: (e) => {
           if (e.currentTarget !== e.target) return;

package/dist/components/Input/types.d.ts

@@ -2,6 +2,7 @@ import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextField, TextFieldProps } from '@koobiq/react-primitives';
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldControlGroupProps, FormFieldPropLabelPlacement, FormFieldControlGroupPropVariant } from '../FormField';
+import type { IconButtonProps } from '../IconButton';
 export declare const inputPropVariant: readonly ["filled", "transparent"];
 export declare const inputPropLabelPlacement: readonly ["top", "side"];
 export type InputPropVariant = FormFieldControlGroupPropVariant;
@@ -70,6 +71,10 @@ export type InputProps = ExtendableProps<{
      * @default 'start'
      */
     labelAlign?: InputPropLabelAlign;
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
+    /** Handler that is called when the clear button is clicked. */
+    onClear?: () => void;
     /** The helper text content. */
     caption?: ReactNode;
     /** Inline styles. */
@@ -83,6 +88,7 @@ export type InputProps = ExtendableProps<{
         caption?: FormFieldCaptionProps;
         group?: FormFieldControlGroupProps;
         errorMessage?: FormFieldErrorProps;
+        clearButton?: IconButtonProps;
         input?: FormFieldInputProps;
     };
 } & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'children' | 'inputElementType' | 'validationState'>>;

package/dist/components/Menu/Menu.js

@@ -54,10 +54,12 @@ function MenuRender(props, ref) {
     slotProps?.popover
   );
   const listProps = mergeProps(menuProps, other, slotProps?.list);
+  const { elementType, ...menuControlProps } = menuTriggerProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
+      as: elementType,
       ref: controlRef,
-      ...menuTriggerProps
+      ...menuControlProps
     }),
     /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuList, { ...listProps }) })
   ] });

package/dist/components/Menu/types.d.ts

@@ -1,9 +1,10 @@
-import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ElementType, CSSProperties, ReactElement, Ref, RefObject } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
 import type { PopoverProps, PopoverPropPlacement } from '../Popover';
-export type MenuPropControl = (props: ButtonOptions & {
+export type MenuPropControl = (props: Omit<ButtonOptions, 'elementType'> & {
     ref?: Ref<HTMLButtonElement>;
+    as?: ElementType;
 }) => ReactElement;
 export type MenuPropPlacement = PopoverPropPlacement;
 type MenuDeprecatedProps = {

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, cloneElement, isValidElement } from "react";
+import { forwardRef } from "react";
 import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
@@ -47,7 +47,7 @@ const ModalComponent = forwardRef((props, ref) => {
     { type: "dialog" },
     { ...state, isOpen: isOpenState }
   );
-  const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
+  const { modalProps: modalPropsAria, underlayProps } = useModalOverlay(
     {
       ...props,
       shouldCloseOnInteractOutside,
@@ -57,12 +57,6 @@ const ModalComponent = forwardRef((props, ref) => {
     { ...state, isOpen: isOpened },
     modalRef
   );
-  const resolvedChildren = () => {
-    if (typeof children === "function")
-      return cloneElement(children({ close }), overlayProps);
-    if (isValidElement(children)) return cloneElement(children, overlayProps);
-    return children;
-  };
   const containerProps = mergeProps(
     {
       ref: containerRef,
@@ -81,16 +75,17 @@ const ModalComponent = forwardRef((props, ref) => {
       onClose: close,
       role: "dialog",
       hideCloseButton,
-      children: resolvedChildren()
+      children: typeof children === "function" ? children({ close }) : children
     },
+    overlayProps,
     slotProps?.dialog
   );
   const modalProps = mergeProps(
-    modalCommonProps,
     {
       ref: modalRef,
       className: s.modal
     },
+    modalPropsAria,
     slotProps?.modal
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Popover/PopoverInner.d.ts

@@ -1,3 +1,3 @@
-import { type FC } from 'react';
+import type { FC } from 'react';
 import type { PopoverInnerProps } from './types';
 export declare const PopoverInner: FC<PopoverInnerProps>;

package/dist/components/Popover/PopoverInner.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, cloneElement, isValidElement } from "react";
+import { useRef } from "react";
 import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
@@ -63,12 +63,6 @@ const PopoverInner = (props) => {
     },
     { ...state, isOpen: openState || opened }
   );
-  const resolvedChildren = () => {
-    if (typeof children === "function")
-      return cloneElement(children({ close: state.close }), overlayProps);
-    if (isValidElement(children)) return cloneElement(children, overlayProps);
-    return children;
-  };
   const arrowProps = mergeProps(
     { className: s.arrow },
     arrowPropsCommon,
@@ -81,6 +75,7 @@ const PopoverInner = (props) => {
       className: s.dialog,
       onClose: state.close
     },
+    overlayProps,
     slotProps?.dialog
   );
   const backdropProps = mergeProps(
@@ -100,6 +95,7 @@ const PopoverInner = (props) => {
     },
     slotProps?.transition
   );
+  const resolvedChildren = typeof children === "function" ? children({ close: state.close }) : children;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
       ref: controlRef,
@@ -117,9 +113,9 @@ const PopoverInner = (props) => {
             {
               ref: domRef,
               "data-size": size,
-              "data-arrow": showArrow || void 0,
               "data-placement": placement,
               "data-transition": transition,
+              "data-arrow": showArrow || void 0,
               className: clsx(s.base, s[size], className),
               ...mergeProps(popoverProps, other),
               style: {
@@ -129,7 +125,7 @@ const PopoverInner = (props) => {
               },
               children: [
                 showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
-                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
+                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren }) : resolvedChildren })
               ]
             }
           )

package/dist/components/SearchInput/SearchInput.js

@@ -2,11 +2,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
-import { IconMagnifyingGlass16, IconCircleXmark16 } from "@koobiq/react-icons";
+import { IconMagnifyingGlass16 } from "@koobiq/react-icons";
 import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { useForm } from "../Form/FormContext.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
 import { FormField } from "../FormField/FormField.js";
 const SearchInput = forwardRef(
   (props, ref) => {
@@ -38,7 +38,7 @@ const SearchInput = forwardRef(
     const inputRef = useDOMRef(ref);
     const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
     const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
-    const hasClearButton = state.value !== "" && !isDisabled && !isReadOnly;
+    const clearButtonIsHidden = state.value === "" || isDisabled || isReadOnly;
     const {
       labelProps: labelPropsAria,
       inputProps: inputPropsAria,
@@ -84,24 +84,21 @@ const SearchInput = forwardRef(
       inputPropsAria,
       slotProps?.input
     );
+    const clearButtonProps = mergeProps(
+      {
+        className: s.clearButton,
+        isHidden: clearButtonIsHidden,
+        isClearable: true
+      },
+      clearButtonPropsAria,
+      slotProps?.clearButton
+    );
     const groupProps = mergeProps(
       {
         slotProps: { startAddon: { className: s.startAddon } },
         startAddon,
         endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-          hasClearButton && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              ...clearButtonPropsAria,
-              variant: isInvalid ? "error" : "fade-contrast",
-              ...slotProps?.clearButton,
-              className: clsx(
-                s.clearButton,
-                slotProps?.clearButton?.className
-              ),
-              children: /* @__PURE__ */ jsx(IconCircleXmark16, {})
-            }
-          ),
+          /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
           endAddon
         ] }),
         onMouseDown: (e) => {

package/dist/components/Select/Select.js

@@ -1,17 +1,16 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
-import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
-import { IconCircleXmark16, IconChevronDownS16 } from "@koobiq/react-icons";
+import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
 import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
-import intlMessages from "./intl.js";
 import s from "./Select.module.css.js";
 import { SelectList } from "./components/SelectList/SelectList.js";
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { List } from "../List/List.js";
 import { useForm } from "../Form/FormContext.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
 import { FormField } from "../FormField/FormField.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
@@ -46,14 +45,13 @@ function SelectRender(props, ref) {
   } = props;
   const { isDisabled: formIsDisabled } = useForm();
   const isDisabled = isDisabledProp ?? formIsDisabled;
-  const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(ref);
   const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
   const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useMultiSelectState(
     removeDataAttributes({ ...props, isDisabled, selectionMode })
   );
-  const hasClearButton = isClearable && !isDisabled && state.selectedItems;
+  const clearButtonIsHidden = isDisabled || !state.selectedItems;
   const handleClear = useCallback(() => {
     state.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
     onClear?.();
@@ -109,11 +107,10 @@ function SelectRender(props, ref) {
   );
   const clearButtonProps = mergeProps(
     {
-      "aria-label": t.format("clear"),
+      isClearable,
       onPress: handleClear,
       className: s.clearButton,
-      variant: isInvalid ? "error" : "fade-contrast",
-      preventFocusOnPress: true
+      isHidden: clearButtonIsHidden
     },
     slotProps?.clearButton
   );
@@ -132,7 +129,7 @@ function SelectRender(props, ref) {
       },
       endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
         endAddon,
-        hasClearButton && /* @__PURE__ */ jsx(IconButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(IconCircleXmark16, {}) }),
+        /* @__PURE__ */ jsx(FormFieldClearButton, { ...clearButtonProps }),
         /* @__PURE__ */ jsx("span", { className: s.chevron, children: /* @__PURE__ */ jsx(IconChevronDownS16, {}) })
       ] }),
       isInvalid,

package/dist/components/Select/components/Tag/Tag.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 import type { TagGroupPropVariant } from '../../../TagGroup';
-type TagProps = {
+type TagProps = ExtendableComponentPropsWithRef<{
     /**
      * The variant to use.
      * @default 'theme-fade'
@@ -12,6 +13,6 @@ type TagProps = {
     icon?: ReactNode;
     isDisabled?: boolean;
     onRemove?: () => void;
-};
-export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLDivElement>>;
+}, 'div'>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Select/components/Tag/Tag.js

@@ -17,7 +17,8 @@ const Tag = forwardRef((props, ref) => {
     style,
     isDisabled,
     children,
-    onRemove
+    onRemove,
+    ...other
   } = props;
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const rootProps = mergeProps({
@@ -28,6 +29,7 @@ const Tag = forwardRef((props, ref) => {
       textNormalMedium,
       className
     ),
+    ...other,
     style
   });
   const removeButtonProps = {

package/dist/components/Select/components/TagGroup/TagGroup.module.css.js

@@ -3,21 +3,18 @@ const hasStartAddon = "kbq-taggroup-hasStartAddon-40d1f9";
 const base = "kbq-taggroup-8253a5";
 const tag = "kbq-taggroup-tag-b9306f";
 const more = "kbq-taggroup-more-b2d6b9";
-const hidden = "kbq-taggroup-hidden-eadb46";
 const s = {
   container,
   hasStartAddon,
   base,
   tag,
-  more,
-  hidden
+  more
 };
 export {
   base,
   container,
   s as default,
   hasStartAddon,
-  hidden,
   more,
   tag
 };

package/dist/components/Select/components/TagGroup/TagGroupResponsive.js

@@ -34,9 +34,10 @@ const TagGroupResponsive = ({
             children: state.selectedItems?.map((item, i) => /* @__PURE__ */ jsx(
               Tag,
               {
+                className: s.tag,
                 ref: itemsRefs[i],
-                className: clsx(s.tag, !visibleMap[i] && s.hidden),
                 isDisabled,
+                "aria-hidden": !visibleMap[i] || void 0,
                 variant: isInvalid ? "error-fade" : "contrast-fade",
                 onRemove: () => {
                   if (state.selectionManager.isSelected(item.key)) {
@@ -52,8 +53,9 @@ const TagGroupResponsive = ({
         /* @__PURE__ */ jsx(
           "div",
           {
+            className: s.more,
             ref: itemsRefs[itemsRefs.length - 1],
-            className: clsx(s.more, !visibleMap[length] && s.hidden),
+            "aria-hidden": !visibleMap[length] || void 0,
             children: t.format("more", { count: hiddenCount })
           }
         )

package/dist/components/Select/intl.js

@@ -3,14 +3,12 @@ const intlMessages = {
     "empty items": "Нет вариантов выбора",
     loading: "Загрузка…",
     "selected items": "Выбранные элементы",
-    clear: "Очистить",
     more: ({ count }) => `еще ${count}`
   },
   "en-US": {
     "empty items": "No options available",
     "selected items": "Selected items",
     loading: "Loading…",
-    clear: "Clear",
     more: ({ count }) => `${count} more`
   }
 };

package/dist/components/SidePanel/SidePanel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, cloneElement, isValidElement } from "react";
+import { forwardRef } from "react";
 import { deprecate } from "@koobiq/logger";
 import { useBoolean, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useOverlayTriggerState, useOverlayTrigger, useModalOverlay, Overlay } from "@koobiq/react-primitives";
@@ -55,7 +55,7 @@ const SidePanelComponent = forwardRef(
       { type: "dialog" },
       { ...state, isOpen: isOpenState }
     );
-    const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
+    const { modalProps: modalPropsAria, underlayProps } = useModalOverlay(
       {
         ...props,
         shouldCloseOnInteractOutside,
@@ -65,12 +65,6 @@ const SidePanelComponent = forwardRef(
       { ...state, isOpen: isOpened },
       modalRef
     );
-    const resolvedChildren = () => {
-      if (typeof children === "function")
-        return cloneElement(children({ close }), overlayProps);
-      if (isValidElement(children)) return cloneElement(children, overlayProps);
-      return children;
-    };
     const containerProps = mergeProps(
       {
         ref: containerRef,
@@ -90,12 +84,13 @@ const SidePanelComponent = forwardRef(
         onClose: close,
         role: "dialog",
         hideCloseButton,
-        children: resolvedChildren()
+        children: typeof children === "function" ? children({ close }) : children
       },
+      overlayProps,
       slotProps?.dialog
     );
     const panelProps = mergeProps(
-      modalCommonProps,
+      modalPropsAria,
       {
         ref: modalRef,
         className: s.panel

package/dist/components/Tabs/utils.d.ts

@@ -12,4 +12,4 @@ export type TabsMeta = {
     };
     activeTabMeta: null | DOMRect;
 };
-export declare const getTabsMeta: (tabListRef: RefObject<HTMLElement>, scrollBoxRef: RefObject<HTMLElement>, activeTabRef: RefObject<HTMLElement>) => TabsMeta;
+export declare const getTabsMeta: (tabListRef: RefObject<HTMLElement | null>, scrollBoxRef: RefObject<HTMLElement | null>, activeTabRef: RefObject<HTMLElement | null>) => TabsMeta;

package/dist/components/Textarea/Textarea.d.ts

@@ -4,7 +4,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "data-testid" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "cols" | "data-testid" | "rows" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;

package/dist/components/ToastProvider/components/Toast/Toast.js

@@ -59,7 +59,7 @@ function Toast({
     { variant: "theme-contrast", className: s.closeIcon },
     slotProps?.closeIcon
   );
-  return /* @__PURE__ */ jsx("div", { ...toastProps, children: /* @__PURE__ */ jsxs("div", { className: s.wrapper, children: [
+  return /* @__PURE__ */ jsx("div", { ...toastProps, tabIndex: void 0, children: /* @__PURE__ */ jsxs("div", { className: s.wrapper, children: [
     !hideCloseButton && /* @__PURE__ */ jsx(IconButton, { ...closeButtonProps, children: /* @__PURE__ */ jsx(IconXmarkS16, {}) }),
     !hideIcon && /* @__PURE__ */ jsx(
       ToastStatusIcon,

package/dist/components/ToastProvider/components/ToastRegion/ToastRegion.js

@@ -42,8 +42,9 @@ function ToastRegionRender({
     },
     props
   );
+  const visibleToasts = stackDirection === "ascending" ? [...state.visibleToasts].reverse() : state.visibleToasts;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { ...regionProps, children: /* @__PURE__ */ jsx(TransitionGroup, { component: null, appear: true, enter: true, children: state.visibleToasts.map((toast, idx) => {
+    /* @__PURE__ */ jsx("div", { ...regionProps, children: /* @__PURE__ */ jsx(TransitionGroup, { component: null, appear: true, enter: true, children: visibleToasts.map((toast, idx) => {
       const nodeRef = getNodeRef(toast.key);
       return /* @__PURE__ */ jsx(
         Transition,
@@ -62,7 +63,7 @@ function ToastRegionRender({
                 "data-transition": transition,
                 "data-placement": placement,
                 style: {
-                  zIndex: stackDirection === "ascending" ? -(idx + 1) : -(total - (idx + 1)),
+                  "--toast-transition-z-index": stackDirection === "ascending" ? -(idx + 1) : -(total - (idx + 1)),
                   "--toast-transition-block-size": `${inner?.clientHeight}px`,
                   "--toast-transition-duration": `${TRANSITION_TIMEOUT}ms`
                 }

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | "placement" | `data-${string}` | "variant" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "style" | "className" | "id" | "placement" | `data-${string}` | "variant" | "offset" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
     disabled?: boolean;
 }> & {
@@ -15,6 +15,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<imp
     closeDelay?: number;
     id?: string;
     className?: string;
+    style?: import("react").CSSProperties;
     portalContainer?: Element;
 } & {
     open?: boolean;