@koobiq/react-components 0.26.0 → 0.27.1

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.d.ts

@@ -1,2 +1,4 @@
-import type { ContextValue } from '@koobiq/react-primitives';
-export declare const AccordionSummaryContext: import("react").Context<ContextValue<import("@react-types/button").AriaButtonProps<"button">, HTMLButtonElement>>;
+import type { ContextValue, AriaButtonProps } from '@koobiq/react-primitives';
+type AccordionSummaryContextValue = ContextValue<AriaButtonProps<'button'>, HTMLButtonElement>;
+export declare const AccordionSummaryContext: import("react").Context<AccordionSummaryContextValue>;
+export {};

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.js

@@ -1,7 +1,5 @@
 import { createContext } from "react";
-const AccordionSummaryContext = createContext(
-  null
-);
+const AccordionSummaryContext = createContext(null);
 export {
   AccordionSummaryContext
 };

package/dist/components/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useCallback } from "react";
 import { useDOMRef, useFilter, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
-import { useComboBoxState, removeDataAttributes, useSlottedContext, FormContext, useComboBox, FieldErrorContext } from "@koobiq/react-primitives";
+import { useComboBoxState, removeDataAttributes, useSlottedContext, FormContext, useComboBox, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Autocomplete.module.css.js";
 import { ListInner, List } from "../List/List.js";
@@ -200,15 +200,31 @@ function AutocompleteRender(props, ref) {
     },
     slotProps?.input
   );
-  return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
-    /* @__PURE__ */ jsxs("div", { className: s.body, children: [
-      /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
-    ] }),
-    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              "clear-button": {}
+            }
+          }
+        ]
+      ],
+      children: /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+        /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+        /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+          /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
+          /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+        ] }),
+        /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
+      ] })
+    }
+  );
 }
 const AutocompleteComponent = forwardRef(
   AutocompleteRender

package/dist/components/Dialog/Dialog.js

@@ -5,9 +5,10 @@ import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListen
 import { useDialog, Provider, ButtonContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Dialog.module.css.js";
-import { DialogBodyContext, DialogBody } from "./components/DialogBody.js";
+import { DialogBodyContext } from "./components/DialogBodyContext.js";
 import { DialogCloseButton } from "./components/DialogCloseButton.js";
 import { DialogHeader } from "./components/DialoglHeader.js";
+import { DialogBody } from "./components/DialogBody.js";
 import { DialogFooter } from "./components/DialogFooter.js";
 const DialogComponent = forwardRef(
   ({ onClose, children, slotProps, hideCloseButton, ...other }, ref) => {

package/dist/components/Dialog/components/DialogBody.d.ts

@@ -1,6 +1,5 @@
 import type { ReactNode, ComponentRef } from 'react';
 import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-import type { ContextValue } from '@koobiq/react-primitives';
 export type DialogBodyRef = ComponentRef<'div'>;
 export type DialogBodyProps = ExtendableComponentPropsWithRef<{
     /** Additional CSS-classes. */
@@ -10,5 +9,4 @@ export type DialogBodyProps = ExtendableComponentPropsWithRef<{
     /** Unique identifier for testing purposes. */
     'data-testid'?: string;
 }, 'div'>;
-export declare const DialogBodyContext: import("react").Context<ContextValue<DialogBodyProps, HTMLDivElement>>;
 export declare const DialogBody: import("react").ForwardRefExoticComponent<Omit<DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/DialogBody.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, forwardRef } from "react";
+import { forwardRef } from "react";
 import { clsx } from "@koobiq/react-core";
 import { useContextProps } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../styles/utility.js";
 import s from "../Dialog.module.css.js";
-const DialogBodyContext = createContext(null);
+import { DialogBodyContext } from "./DialogBodyContext.js";
 const DialogBody = forwardRef(
   ({ children, className, ...other }, ref) => {
     const [, ctxRef] = useContextProps({}, ref, DialogBodyContext);
@@ -26,6 +26,5 @@ const DialogBody = forwardRef(
 );
 DialogBody.displayName = "DialogBody";
 export {
-  DialogBody,
-  DialogBodyContext
+  DialogBody
 };

package/dist/components/Dialog/components/DialogBodyContext.d.ts

@@ -0,0 +1,3 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+import type { DialogBodyProps } from './DialogBody';
+export declare const DialogBodyContext: import("react").Context<ContextValue<DialogBodyProps, HTMLDivElement>>;

package/dist/components/Dialog/components/DialogBodyContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const DialogBodyContext = createContext(null);
+export {
+  DialogBodyContext
+};

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

@@ -2,3 +2,4 @@ export * from './DialoglHeader';
 export * from './DialogBody';
 export * from './DialogFooter';
 export * from './DialogCloseButton';
+export * from './DialogBodyContext';

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/SearchInput/SearchInput.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconMagnifyingGlass16 } from "@koobiq/react-icons";
-import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { useForm } from "../Form/FormContext.js";
 import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
@@ -122,14 +122,30 @@ const SearchInput = forwardRef(
       errorMessagePropsAria,
       slotProps?.errorMessage
     );
-    return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
-      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
-        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(
+      Provider,
+      {
+        values: [
+          [
+            ButtonContext,
+            {
+              slots: {
+                [DEFAULT_SLOT]: {},
+                "clear-button": {}
+              }
+            }
+          ]
+        ],
+        children: /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+          /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
+          /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+            /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
+            /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+            /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+          ] })
+        ] })
+      }
+    );
   }
 );
 SearchInput.displayName = "SearchInput";

package/dist/components/Select/Select.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 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 { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Select.module.css.js";
 import { SelectList } from "./components/SelectList/SelectList.js";
@@ -185,21 +185,37 @@ function SelectRender(props, ref) {
     return state2.selectedItems[0].textValue;
   };
   const renderValue = renderValueProp || renderDefaultValue;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
-      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
-        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(state, {
-          isInvalid,
-          isDisabled: props.isDisabled,
-          isRequired: props.isRequired
-        }) }) }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Provider,
+    {
+      values: [
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              "clear-button": {}
+            }
+          }
+        ]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+          /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+          /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+            /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(state, {
+              isInvalid,
+              isDisabled: props.isDisabled,
+              isRequired: props.isRequired
+            }) }) }),
+            /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+            /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
+      ]
+    }
+  );
 }
 const SelectComponent = forwardRef(SelectRender);
 const Select = SelectComponent;

package/dist/components/SelectNext/Select.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
-import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, FieldErrorContext } from "@koobiq/react-primitives";
+import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Select.module.css.js";
 import { SelectList } from "./components/SelectList/SelectList.js";
@@ -197,21 +197,37 @@ function SelectInner({
     return state.selectedItems[0].textValue;
   };
   const renderValue = renderValueProp || renderDefaultValue;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
-      /* @__PURE__ */ jsxs("div", { className: s.body, children: [
-        /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
-          isInvalid,
-          isDisabled: props.isDisabled,
-          isRequired: props.isRequired
-        }) }) }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Provider,
+    {
+      values: [
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              "clear-button": {}
+            }
+          }
+        ]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+          /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+          /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+            /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
+              isInvalid,
+              isDisabled: props.isDisabled,
+              isRequired: props.isRequired
+            }) }) }),
+            /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+            /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
+      ]
+    }
+  );
 }
 function StandaloneSelect({
   props: inProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,16 +25,16 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@koobiq/design-tokens": "^3.15.0",
+    "@koobiq/design-tokens": "^3.15.2",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.26.0",
-    "@koobiq/react-core": "0.26.0",
-    "@koobiq/react-icons": "0.26.0",
-    "@koobiq/react-primitives": "0.26.0"
+    "@koobiq/logger": "0.27.1",
+    "@koobiq/react-icons": "0.27.1",
+    "@koobiq/react-primitives": "0.27.1",
+    "@koobiq/react-core": "0.27.1"
   },
   "peerDependencies": {
-    "@koobiq/design-tokens": "^3.15.0",
+    "@koobiq/design-tokens": "^3.15.2",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x"
   },