@koobiq/react-components 0.0.1-beta.9 → 0.1.0

package/dist/components/RadioGroup/components/Radio/Radio.module.css.js

@@ -4,8 +4,8 @@ const icon = "kbq-radio-icon-148a68";
 const normal = "kbq-radio-normal-81ed3e";
 const big = "kbq-radio-big-06db10";
 const hovered = "kbq-radio-hovered-3999f1";
-const checked = "kbq-radio-checked-a71e68";
-const error = "kbq-radio-error-52bb9e";
+const selected = "kbq-radio-selected-15ea41";
+const invalid = "kbq-radio-invalid-e69d52";
 const focusVisible = "kbq-radio-focusVisible-6613a5";
 const disabled = "kbq-radio-disabled-d60f1e";
 const start = "kbq-radio-start-e3dab7";
@@ -17,8 +17,8 @@ const s = {
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   disabled,
   start,
@@ -27,15 +27,15 @@ const s = {
 export {
   base,
   big,
-  checked,
   circle,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
   icon,
+  invalid,
   normal,
+  selected,
   start
 };

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

@@ -1,27 +1,42 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseRadioProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
 export declare const radioPropSize: readonly ["normal", "big"];
 export type RadioPropSize = (typeof radioPropSize)[number];
 export declare const radioPropLabelPlacement: readonly ["start", "end"];
 export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
-export type RadioProps = UseRadioProps & {
-    /** The helper text content. */
-    caption?: string;
+type RadioDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+};
+export type RadioProps = ExtendableProps<{
+    /** The content of the component. */
+    children?: ReactNode;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: RadioPropSize;
     /**
      * The position of the label.
-     * @default end
-     * */
+     * @default 'end'
+     */
     labelPlacement?: RadioPropLabelPlacement;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
         circle?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+} & RadioDeprecatedProps, RadioPropsPrimitive>;
+export {};

package/dist/components/RadioGroup/components/Radio/types.js

@@ -1,3 +1,4 @@
+import "@koobiq/react-primitives";
 const radioPropSize = ["normal", "big"];
 const radioPropLabelPlacement = ["start", "end"];
 export {

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

@@ -1,37 +1,64 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
-import type { UseRadioGroupProps } from '@koobiq/react-primitives';
+import type { RadioGroupProps as RadioGroupPrimitiveProps } from '@koobiq/react-primitives';
 import type { RadioGroupDescriptionProps, RadioGroupLabelProps } from './components';
 export declare const radioGroupPropSize: readonly ["normal", "big"];
 export type RadioGroupPropSize = (typeof radioGroupPropSize)[number];
 export declare const radioGroupPropOrientation: readonly ["horizontal", "vertical"];
 export type RadioGroupPropOrientation = (typeof radioGroupPropOrientation)[number];
+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.
+     */
+    required?: boolean;
+};
 export type RadioGroupBaseProps = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** The content of the component. */
     children?: ReactNode;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: RadioGroupPropSize;
-    /** Slots */
-    slotProps?: {
-        root?: ComponentPropsWithRef<'div'>;
-        description?: RadioGroupDescriptionProps;
-        label?: RadioGroupLabelProps;
-    };
     /**
      * The axis the Radio Button(s) should align with.
      * @default 'vertical'
      */
     orientation?: RadioGroupPropOrientation;
-    /** The current value (controlled). */
-    value?: UseRadioGroupProps['value'];
-    /** The default value (uncontrolled). */
-    defaultValue?: UseRadioGroupProps['defaultValue'];
-    /** Handler that is called when the value changes. */
-    onChange?: UseRadioGroupProps['onChange'];
-}, UseRadioGroupProps>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        description?: RadioGroupDescriptionProps;
+        label?: RadioGroupLabelProps;
+    };
+} & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validate' | 'validationBehavior' | 'validationState' | 'errorMessage'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;
+export {};

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

@@ -0,0 +1,11 @@
+import { Item, Section } from '../Collections';
+import { ListItemText } from '../List';
+import type { SelectComponent } from './index';
+declare const SelectComponent: SelectComponent;
+type CompoundedComponent = typeof SelectComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const Select: CompoundedComponent;
+export {};

package/dist/components/Select/Select.js

@@ -0,0 +1,204 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./Select.module.css.js";
+import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
+import { ListInner } from "../List/List.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+function SelectRender(props, ref) {
+  const {
+    fullWidth = false,
+    "data-testid": testId,
+    className,
+    style,
+    open,
+    isOpen: isOpenProp,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
+    error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
+    caption,
+    placeholder,
+    endAddon,
+    slotProps,
+    startAddon,
+    label,
+    name,
+    errorMessage,
+    renderValue: renderValueProp
+  } = props;
+  const isOpen = isOpenProp ?? open;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Select: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Select: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Select: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Select: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Select: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
+  const domRef = useDOMRef(ref);
+  const state = useSelectState({
+    ...removeDataAttributes(props),
+    isOpen,
+    isInvalid,
+    isDisabled,
+    isRequired
+  });
+  const [opened, { on, off }] = useBoolean(state.isOpen);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    labelProps: labelPropsAria,
+    descriptionProps,
+    errorMessageProps
+  } = useSelect(
+    {
+      ...removeDataAttributes(props),
+      isOpen,
+      isInvalid,
+      isDisabled,
+      isRequired
+    },
+    { ...state, isOpen: state.isOpen || opened },
+    domRef
+  );
+  const { ref: containerRef, width } = useElementSize();
+  const rootProps = mergeProps({
+    "data-testid": testId,
+    "data-invalid": isInvalid,
+    "data-fullwidth": fullWidth,
+    "data-disabled": isDisabled,
+    "data-required": isRequired,
+    className: clsx(s.base, fullWidth && s.fullWidth, className),
+    style
+  });
+  const listProps = mergeProps(
+    { className: s.list, state },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    slotProps?.label,
+    labelPropsAria
+  );
+  const groupProps = mergeProps(
+    {
+      slotProps: {
+        end: { className: s.addon },
+        start: { className: s.addon }
+      },
+      startAddon,
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(IconChevronDownS16, {})
+      ] }),
+      isInvalid,
+      isDisabled,
+      ref: containerRef
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      isInvalid,
+      isDisabled,
+      ref: domRef,
+      placeholder
+    },
+    slotProps?.control,
+    valueProps,
+    triggerProps
+  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  const popoverProps = mergeProps(
+    {
+      state,
+      offset: 4,
+      size: width,
+      hideArrow: true,
+      anchorRef: domRef,
+      className: s.popover,
+      placement: "bottom start",
+      type: "listbox",
+      slotProps: {
+        transition: {
+          onEnter: on,
+          onExited: off
+        }
+      }
+    },
+    slotProps?.popover
+  );
+  const renderDefaultValue = (selectedItem) => selectedItem?.rendered;
+  const renderValue = renderValueProp || renderDefaultValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+      /* @__PURE__ */ jsx(
+        HiddenSelect,
+        {
+          name,
+          label,
+          state,
+          triggerRef: domRef,
+          isDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
+  ] });
+}
+const SelectComponent = forwardRef(SelectRender);
+const Select = SelectComponent;
+Select.Item = Item;
+Select.Section = Section;
+Select.ItemText = ListItemText;
+export {
+  Select
+};

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

@@ -0,0 +1,20 @@
+const base = "kbq-select-6d31ad";
+const fullWidth = "kbq-select-fullWidth-1dfc13";
+const addon = "kbq-select-addon-cbc524";
+const popover = "kbq-select-popover-79fc05";
+const list = "kbq-select-list-8ffac0";
+const s = {
+  base,
+  fullWidth,
+  addon,
+  popover,
+  list
+};
+export {
+  addon,
+  base,
+  s as default,
+  fullWidth,
+  list,
+  popover
+};

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

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

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

@@ -0,0 +1,86 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { ExtendableProps, Node } from '@koobiq/react-core';
+import type { AriaSelectProps } from '@koobiq/react-primitives';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { ListProps } from '../List';
+import type { PopoverProps } from '../Popover';
+export type SelectKey = string | number;
+type SelectDeprecatedProps = {
+    /**
+     * 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 input will indicate an error.
+     * @default false
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * Sets the open state of the menu.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
+export type SelectProps<T> = ExtendableProps<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    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;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLButtonElement>;
+    /** A render function for displaying the selected value. */
+    renderValue?: (props: Node<T> | null) => ReactElement;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FieldLabelProps;
+        list?: ListProps<T>;
+        control?: FieldSelectProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+    };
+} & SelectDeprecatedProps, Omit<AriaSelectProps<T>, 'description' | 'validationState'>>;
+export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
+export type SelectRef = ComponentRef<'button'>;
+export {};

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

@@ -1,2 +1,35 @@
-import type { SidePanelProps } from './types';
-export declare const SidePanel: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type BackdropProps } from '../Backdrop';
+import { Dialog, type DialogProps } from '../Dialog';
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").SidePanelPropSize;
+    placement?: import("./types").SidePanelPropPlacement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").SidePanelPropContent;
+    control?: import("./types").SidePanelPropControl;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnClickOutside?: boolean;
+    disableExitOnEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+    className?: string;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        panel?: import("react").ComponentPropsWithRef<"div">;
+    };
+} & {
+    open?: boolean;
+    position?: import("./types").SidePanelPropPosition;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof SidePanelComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const SidePanel: CompoundedComponent;
+export {};

package/dist/components/SidePanel/SidePanel.js

@@ -1,17 +1,19 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, cloneElement, isValidElement } 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";
 import { Transition } from "react-transition-group";
 import s from "./SidePanel.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const SidePanel = forwardRef(
+const SidePanelComponent = forwardRef(
   (props, ref) => {
     const {
       size = "medium",
       position = "left",
+      placement = "start",
       hideCloseButton = false,
       control,
       children,
@@ -19,7 +21,8 @@ const SidePanel = forwardRef(
       defaultOpen,
       onOpenChange,
       hideBackdrop,
-      open: openProp,
+      open,
+      isOpen: isOpenProp,
       portalContainer,
       disableFocusManagement,
       disableExitOnClickOutside,
@@ -27,19 +30,30 @@ const SidePanel = forwardRef(
       shouldCloseOnInteractOutside,
       ...other
     } = props;
+    const isOpen = isOpenProp ?? open;
+    if (process.env.NODE_ENV !== "production" && "open" in props) {
+      deprecate(
+        'SidePanel: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "position" in props) {
+      deprecate(
+        'SidePanel: the "position" prop is deprecated. Use "placement" prop to replace it.'
+      );
+    }
     const state = useOverlayTriggerState({
-      isOpen: openProp,
+      isOpen,
       onOpenChange,
       defaultOpen,
       ...other
     });
-    const { isOpen: openState, close } = state;
-    const [opened, { on, off }] = useBoolean(openState);
+    const { isOpen: isOpenState, close } = state;
+    const [isOpened, { on, off }] = useBoolean(isOpenState);
     const modalRef = useDOMRef(null);
     const containerRef = useDOMRef(ref);
     const { triggerProps, overlayProps } = useOverlayTrigger(
       { type: "dialog" },
-      { ...state, isOpen: openState }
+      { ...state, isOpen: isOpenState }
     );
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
@@ -48,7 +62,7 @@ const SidePanel = forwardRef(
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
-      { ...state, isOpen: opened },
+      { ...state, isOpen: isOpened },
       modalRef
     );
     const resolvedChildren = () => {
@@ -61,13 +75,13 @@ const SidePanel = forwardRef(
       {
         ref: containerRef,
         "data-size": size,
-        "data-position": position,
-        className: clsx(s.base, s[size], s[position])
+        "data-placement": placement,
+        className: clsx(s.base, s[size], s[position], s[placement])
       },
       other
     );
     const backdropProps = mergeProps(
-      { open: openState && !hideBackdrop },
+      { isOpen: isOpenState && !hideBackdrop },
       underlayProps,
       slotProps?.backdrop
     );
@@ -88,20 +102,15 @@ const SidePanel = forwardRef(
       },
       slotProps?.panel
     );
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        onClick: onPress,
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
+      control?.(triggerProps),
       /* @__PURE__ */ jsx(
         Transition,
         {
           onEnter: on,
           timeout: 300,
           onExited: off,
-          in: openState,
+          in: isOpenState,
           nodeRef: containerRef,
           unmountOnExit: true,
           appear: true,
@@ -121,7 +130,11 @@ const SidePanel = forwardRef(
     ] });
   }
 );
-SidePanel.displayName = "SidePanel";
+SidePanelComponent.displayName = "SidePanel";
+const SidePanel = SidePanelComponent;
+SidePanel.Header = Dialog.Header;
+SidePanel.Body = Dialog.Body;
+SidePanel.Footer = Dialog.Footer;
 export {
   SidePanel
 };