@koobiq/react-components 0.8.0 → 0.10.0

package/dist/components/RadioGroup/RadioGroup.js

@@ -15,7 +15,7 @@ import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const {
-      size,
+      size = "normal",
       label,
       children,
       slotProps,
@@ -39,10 +39,10 @@ const RadioGroup = forwardRef(
       required
     } = props;
     const caption = captionProp ?? description;
-    const isDisabled = isDisabledProp ?? disabled ?? false;
-    const isInvalid = isInvalidProp ?? error ?? false;
-    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
-    const isRequired = isRequiredProp ?? required ?? false;
+    const isDisabled = isDisabledProp ?? disabled;
+    const isInvalid = isInvalidProp ?? error;
+    const isReadOnly = isReadOnlyProp ?? readonly;
+    const isRequired = isRequiredProp ?? required;
     if (process.env.NODE_ENV !== "production" && "description" in props) {
       deprecate(
         'RadioGroup: the "description" prop is deprecated. Use "caption" prop to replace it.'
@@ -82,10 +82,7 @@ const RadioGroup = forwardRef(
         ref,
         "data-size": size,
         "data-testid": testId,
-        "data-invalid": isInvalid,
-        "data-disabled": isDisabled,
-        "data-required": isRequired,
-        "data-readonly": isReadOnly
+        "data-orientation": orientation
       },
       slotProps?.root
     );
@@ -99,7 +96,7 @@ const RadioGroup = forwardRef(
       },
       slotProps?.radioGroup
     );
-    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2 }) => {
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isRequired: isRequired2 }) => {
       const labelProps = mergeProps(
         {
           as: "span",
@@ -110,7 +107,7 @@ const RadioGroup = forwardRef(
         },
         slotProps?.label
       );
-      const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
+      const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
       const captionProps = mergeProps({ children: caption }, slotProps?.caption);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),

package/dist/components/RadioGroup/components/Radio/types.d.ts

@@ -8,7 +8,6 @@ export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
 type RadioDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */

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

@@ -15,28 +15,24 @@ export type RadioGroupPropLabelAlign = FormControlPropLabelAlign;
 type RadioGroupDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, the component will indicate an error.
-     * @default false
      * @deprecated
      * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
      */
     error?: boolean;
     /**
      * It prevents the user from changing the value of the checkbox.
-     * @default false
      * @deprecated
      * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
      */
     readonly?: boolean;
     /**
      * If `true`, the input element is required.
-     * @default false
      * @deprecated
      * The "required" prop is deprecated. Use "isRequired" prop to replace it.
      */
@@ -71,11 +67,8 @@ export type RadioGroupBaseProps = ExtendableProps<{
     orientation?: RadioGroupPropOrientation;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /**
      * The label's overall position relative to the element it is labeling.
      * @default 'top'
@@ -94,6 +87,6 @@ export type RadioGroupBaseProps = ExtendableProps<{
         label?: FormControlLabelProps<'span'>;
         radioGroup?: ComponentPropsWithRef<'div'>;
     };
-} & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validate' | 'validationBehavior' | 'validationState' | 'errorMessage'>>;
+} & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validationState'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;
 export {};

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

@@ -1,7 +1,7 @@
-import { type FieldCaptionProps, type FieldContentGroupProps, type FieldErrorProps, type FieldInputProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description" | "errorMessage">, "caption" | "style" | "className" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;
@@ -18,7 +18,6 @@ export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit
         errorMessage?: FieldErrorProps;
         clearButton?: import("..").IconButtonProps;
     };
-    errorMessage?: import("react").ReactNode;
     caption?: import("react").ReactNode;
     variant?: import("./types").SearchInputPropVariant;
     fullWidth?: 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, IconXmarkCircle16 } from "@koobiq/react-icons";
-import { useSearchFieldState, removeDataAttributes, useSearchField } from "@koobiq/react-primitives";
+import { useSearchFieldState, removeDataAttributes, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { FormControl } from "../FormControl/FormControl.js";
@@ -18,20 +18,19 @@ const SearchInput = forwardRef(
     const {
       startAddon = /* @__PURE__ */ jsx(IconMagnifyingGlass16, { className: s.searchIcon }),
       variant = "filled",
-      fullWidth = false,
-      isLabelHidden = false,
+      fullWidth,
+      isLabelHidden,
       labelPlacement,
+      errorMessage,
       labelAlign,
       "data-testid": testId,
       style,
       className,
       caption,
-      errorMessage,
       isRequired,
       isReadOnly,
       label,
       endAddon,
-      isInvalid,
       isDisabled,
       slotProps
     } = props;
@@ -43,8 +42,10 @@ const SearchInput = forwardRef(
       inputProps: inputPropsAria,
       descriptionProps: descriptionPropsAria,
       errorMessageProps: errorMessagePropsAria,
-      clearButtonProps: clearButtonPropsAria
+      clearButtonProps: clearButtonPropsAria,
+      ...validation
     } = useSearchField(removeDataAttributes(props), state, domRef);
+    const { isInvalid } = validation;
     const rootProps = mergeProps(
       {
         style,
@@ -53,10 +54,10 @@ const SearchInput = forwardRef(
         fullWidth,
         "data-testid": testId,
         "data-variant": variant,
-        "data-invalid": isInvalid,
-        "data-disabled": isDisabled,
-        "data-required": isRequired,
-        "data-readonly": isReadOnly,
+        "data-invalid": isInvalid || void 0,
+        "data-readonly": isReadOnly || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-required": isRequired || void 0,
         className: clsx(s.base, className)
       },
       slotProps?.root
@@ -105,7 +106,7 @@ const SearchInput = forwardRef(
     );
     const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionPropsAria);
     const errorProps = mergeProps(
-      { isInvalid, children: errorMessage },
+      { children: errorMessage },
       slotProps?.errorMessage,
       errorMessagePropsAria
     );
@@ -114,7 +115,7 @@ const SearchInput = forwardRef(
       /* @__PURE__ */ jsxs(Field, { children: [
         /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
         /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
       ] })
     ] });
   }

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

@@ -18,7 +18,6 @@ export type SearchInputProps = ExtendableProps<{
     style?: CSSProperties;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
     /**
@@ -45,8 +44,6 @@ export type SearchInputProps = ExtendableProps<{
         errorMessage?: FieldErrorProps;
         clearButton?: IconButtonProps;
     };
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /** The helper text content. */
     caption?: ReactNode;
     /**
@@ -56,8 +53,7 @@ export type SearchInputProps = ExtendableProps<{
     variant?: SearchInputPropVariant;
     /**
      * If `true`, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
-} & DataAttributeProps, Omit<AriaSearchFieldProps, 'description' | 'errorMessage' | 'validationState'>>;
+} & DataAttributeProps, Omit<AriaSearchFieldProps, 'description' | 'validationState'>>;
 export type SearchInputRef = ComponentRef<'input'>;

package/dist/components/Select/Select.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
-import { useMultiSelectState, removeDataAttributes, useMultiSelect } from "@koobiq/react-primitives";
+import { 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";
@@ -22,10 +22,11 @@ import { Section } from "../Collections/Section.js";
 import { Divider } from "../Collections/Divider.js";
 function SelectRender(props, ref) {
   const {
-    fullWidth = false,
-    isClearable = false,
+    fullWidth,
+    isClearable,
     "data-testid": testId,
     selectionMode = "single",
+    noItemsText,
     selectedTagsOverflow = "responsive",
     labelPlacement,
     labelAlign,
@@ -55,13 +56,13 @@ function SelectRender(props, ref) {
     onClear?.();
   }, [onClear, state]);
   const {
-    isInvalid,
     menuProps,
     valueProps,
     triggerProps,
     labelProps: labelPropsAria,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   } = useMultiSelect(
     removeDataAttributes({
       ...props,
@@ -71,12 +72,13 @@ function SelectRender(props, ref) {
     state,
     domRef
   );
+  const { isInvalid } = validation;
   const { ref: containerRef, width } = useElementSize();
   const rootProps = mergeProps({
     "data-testid": testId,
-    "data-invalid": isInvalid,
-    "data-disabled": props.isDisabled,
-    "data-required": props.isRequired,
+    "data-invalid": isInvalid || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-required": props.isRequired || void 0,
     className,
     fullWidth,
     labelPlacement,
@@ -84,14 +86,14 @@ function SelectRender(props, ref) {
     style
   });
   const listProps = mergeProps(
-    { className: s.list, state },
-    slotProps?.list,
-    menuProps
+    { className: s.list, state, noItemsText },
+    menuProps,
+    slotProps?.list
   );
   const labelProps = mergeProps(
     { isHidden: isLabelHidden, children: label, isRequired },
-    slotProps?.label,
-    labelPropsAria
+    labelPropsAria,
+    slotProps?.label
   );
   const clearButtonProps = mergeProps(
     {
@@ -147,13 +149,9 @@ function SelectRender(props, ref) {
     slotProps?.popover
   );
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps(
-    { isInvalid, children: errorMessage },
-    slotProps?.errorMessage,
-    errorMessageProps
-  );
+  const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage, errorMessageProps);
   const renderDefaultValue = (state2, states) => {
-    if (!state2.selectedItems) return null;
+    if (!state2.selectedItems?.length) return null;
     if (selectionMode === "multiple")
       return /* @__PURE__ */ jsx(
         TagGroup,
@@ -176,7 +174,7 @@ function SelectRender(props, ref) {
           isRequired: props.isRequired
         }) }) }),
         /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })

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

@@ -1,8 +1,10 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { type MultiSelectState } from '@koobiq/react-primitives';
 import type { ListProps } from '../../../List';
 export type SelectListProps<T extends object> = {
     state: MultiSelectState<T>;
     listRef?: Ref<HTMLUListElement>;
-} & Omit<ListProps<T>, 'ref'>;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+} & Omit<ListProps<T>, 'ref' | 'children'>;
 export declare function SelectList<T extends object>(props: SelectListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.js

@@ -1,16 +1,28 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { useListBox } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.js";
 import s from "./SelectList.module.css.js";
 import { SelectOption } from "../SelectOption/SelectOption.js";
+import { isPrimitiveNode } from "../../../../utils/isPrimitiveNode.js";
 import { Typography } from "../../../Typography/Typography.js";
 import { ListSection } from "../../../List/components/ListSection/ListSection.js";
 import { Divider } from "../../../Divider/Divider.js";
-const { list } = utilClasses;
+const { list, typography } = utilClasses;
 function SelectList(props) {
-  const { label, className, style, slotProps, state, listRef } = props;
+  const {
+    label,
+    className,
+    style,
+    slotProps,
+    state,
+    listRef,
+    noItemsText: noItemsTextProp
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(listRef);
+  const isEmpty = state.collection.size === 0;
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
     {
@@ -24,15 +36,28 @@ function SelectList(props) {
     {
       style,
       ref: domRef,
-      className: clsx(list, className)
+      className: clsx(list, className),
+      "data-padded": true
     },
     slotProps?.list,
     listBoxProps
   );
+  const noItemsText = noItemsTextProp ?? t.format("empty items");
+  const emptyState = isEmpty ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "option",
+      className: clsx(s.empty, typography["text-normal"]),
+      ...!isPrimitiveNode(noItemsText) && {
+        style: { display: "contents" }
+      },
+      children: noItemsText
+    }
+  ) : null;
   const renderItems = (treeState) => [...treeState.collection].map((item) => {
     switch (item.type) {
       case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+        return /* @__PURE__ */ jsx(Divider, {}, item.key);
       case "item":
         return /* @__PURE__ */ jsx(SelectOption, { item, state }, item.key);
       case "section":
@@ -43,7 +68,10 @@ function SelectList(props) {
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
-    /* @__PURE__ */ jsx("ul", { ...listProps, children: renderItems(state) })
+    /* @__PURE__ */ jsxs("ul", { ...listProps, children: [
+      renderItems(state),
+      emptyState
+    ] })
   ] });
 }
 export {

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

@@ -1,11 +1,11 @@
 const label = "kbq-selectlist-label-4b49f4";
-const divider = "kbq-selectlist-divider-7c167f";
+const empty = "kbq-selectlist-empty-e6a9b0";
 const s = {
   label,
-  divider
+  empty
 };
 export {
   s as default,
-  divider,
+  empty,
   label
 };

package/dist/components/Select/components/SelectOption/SelectOption.js

@@ -25,11 +25,11 @@ function SelectOption({ item, state }) {
       className: clsx(listItem, textVariant["text-normal"], className),
       style,
       ref,
-      "data-hovered": isHovered,
-      "data-pressed": isPressed,
-      "data-disabled": isDisabled,
-      "data-selected": isSelected,
-      "data-focus-visible": isFocusVisible,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       children: [
         state.selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { isDisabled, isSelected, isReadOnly: true }),
         item.rendered

package/dist/components/Select/intl.js

@@ -1,10 +1,12 @@
 const intlMessages = {
   "ru-RU": {
+    "empty items": "Нет вариантов выбора",
     "selected items": "Выбранные элементы",
     clear: "Очистить",
     more: ({ count }) => `еще ${count}`
   },
   "en-US": {
+    "empty items": "No options available",
     "selected items": "Selected items",
     clear: "Clear",
     more: ({ count }) => `${count} more`

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

@@ -5,8 +5,8 @@ import { type FieldErrorProps, type FieldSelectProps, type FieldCaptionProps, ty
 import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
 import type { FormControlLabelProps } from '../FormControlLabel';
 import type { IconButtonProps } from '../IconButton';
-import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
+import type { SelectListProps } from './components';
 export declare const selectPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
 export type SelectPropSelectedTagsOverflow = (typeof selectPropSelectedTagsOverflow)[number];
 export declare const selectPropLabelPlacement: readonly ["top", "side"];
@@ -19,7 +19,7 @@ export type SelectProps<T> = ExtendableProps<{
      *
      *- `"multiline"` — tags wrap to multiple lines.
      *- `"responsive"` — tags collapse into a summary (e.g., "3 more").
-     * @default "responsive"
+     * @default 'responsive'
      */
     selectedTagsOverflow?: SelectPropSelectedTagsOverflow;
     /** Handler that is called when the clear button is clicked. */
@@ -34,6 +34,8 @@ export type SelectProps<T> = ExtendableProps<{
     onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
     /** The currently selected keys in the collection (controlled). */
     selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
+    validate?: Parameters<typeof useMultiSelectState>['0']['validate'];
+    validationBehavior?: Parameters<typeof useMultiSelectState>['0']['validationBehavior'];
     /**
      * The type of selection that is allowed in the collection.
      * @default 'single'
@@ -45,11 +47,8 @@ export type SelectProps<T> = ExtendableProps<{
     endAddon?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
     /**
@@ -66,7 +65,6 @@ export type SelectProps<T> = ExtendableProps<{
     caption?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** Unique identifier for testing purposes. */
@@ -79,17 +77,19 @@ export type SelectProps<T> = ExtendableProps<{
         isDisabled?: boolean;
         isRequired?: boolean;
     }) => ReactNode;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
         label?: FormControlLabelProps;
-        list?: ListProps<T>;
+        list?: Omit<SelectListProps<object>, 'state'>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;
         group?: FieldContentGroupProps;
         errorMessage?: FieldErrorProps;
         clearButton?: IconButtonProps;
     };
-}, Omit<AriaSelectProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
+}, Omit<AriaSelectProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
 export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'div'>;

package/dist/components/SidePanel/SidePanel.js

@@ -14,7 +14,7 @@ const SidePanelComponent = forwardRef(
       size = "medium",
       position = "left",
       placement = "start",
-      hideCloseButton = false,
+      hideCloseButton,
       control,
       children,
       slotProps,

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

@@ -48,7 +48,6 @@ export type SidePanelProps = {
     control?: SidePanelPropControl;
     /**
      * If `true`, the close button isn't shown.
-     * @default false
      */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
@@ -60,17 +59,14 @@ export type SidePanelProps = {
     portalContainer?: Element;
     /**
      * If `true`, the modal window won't close when clicked outside of it.
-     * @default false
      */
     disableExitOnClickOutside?: boolean;
     /**
      * If `true`, the modal window won't close when the ESC key is pressed.
-     * @default false
      */
     disableExitOnEscapeKeyDown?: boolean;
     /**
      * If `true`, the underlay (backdrop) under the modal window isn't shown.
-     * @default false
      */
     hideBackdrop?: boolean;
     /** Additional CSS-classes. */
@@ -79,7 +75,6 @@ export type SidePanelProps = {
     'data-testid'?: string | number;
     /**
      * If `true`, the focus trap in modal window is disabled.
-     * @default false
      */
     disableFocusManagement?: boolean;
     /**

package/dist/components/Table/Table.js

@@ -21,9 +21,9 @@ import { Cell } from "../Collections/Cell.js";
 const textNormal = utilClasses.typography["text-normal"];
 function TableRender(props, ref) {
   const {
-    stickyHeader = false,
-    fullWidth = false,
     divider = "none",
+    stickyHeader,
+    fullWidth,
     slotProps,
     selectionMode,
     selectionBehavior,
@@ -41,9 +41,9 @@ function TableRender(props, ref) {
   const tableProps = mergeProps(
     {
       className: clsx(s.base, fullWidth && s.fullWidth, textNormal, className),
-      "data-sticky-header": stickyHeader,
+      "data-sticky-header": stickyHeader || void 0,
       "data-divider": divider,
-      "data-fullwidth": fullWidth,
+      "data-fullwidth": fullWidth || void 0,
       ref: domRef,
       style
     },

package/dist/components/Table/components/TableRow/TableRow.js

@@ -29,11 +29,11 @@ function TableRow({ item, children, state }) {
         isFocusVisible && s.focusVisible,
         className
       ),
-      "data-hovered": isHovered,
-      "data-disabled": isDisabled,
-      "data-selected": isSelected,
-      "data-pressed": isPressed,
-      "data-focus-visible": isFocusVisible,
+      "data-hovered": isHovered || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       ...mergeProps(rowProps, hoverProps, focusProps),
       style,
       ref,

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

@@ -20,12 +20,10 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
     divider?: TablePropDivider;
     /**
      * If `true`, the button will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /**
      * Flag indicating a fixed table header.
-     * @default false
      */
     stickyHeader?: boolean;
     /**

package/dist/components/TagGroup/components/Tag/Tag.js

@@ -37,12 +37,12 @@ function Tag(props) {
       ),
       style,
       "data-variant": variant,
-      "data-focused": isFocused,
-      "data-pressed": isPressed,
-      "data-hovered": isHovered,
-      "aria-disabled": isDisabled,
-      "data-disabled": isDisabled,
-      "data-focus-visible": isFocusVisible
+      "data-focused": isFocused || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-focus-visible": isFocusVisible || void 0
     },
     rowProps,
     hoverProps,