@koobiq/react-components 0.0.1-beta.3 → 0.0.1-beta.30

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,11 +1,12 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { mergeProps, clsx } from "@koobiq/react-core";
 import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
-import { flex } from "../layout/flex/flex.js";
 import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
 import { RadioGroupContext } from "./RadioContext.js";
 import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.js";
+import { flex } from "../layout/flex/flex.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const { size, label, children, slotProps, description, orientation } = props;

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
+import { IconCircleXs16 } from "@koobiq/react-icons";
 import { Radio as Radio$1 } from "@koobiq/react-primitives";
 import s from "./Radio.module.css.js";
 import { useRadioGroupState } from "../../RadioContext.js";
@@ -33,7 +34,7 @@ const Radio = forwardRef(
     const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...circleProps }),
+      /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
       isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
     ] });
   }

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

@@ -1,5 +1,6 @@
 const base = "kbq-radio-c3ed31";
 const circle = "kbq-radio-circle-a0903b";
+const icon = "kbq-radio-icon-148a68";
 const normal = "kbq-radio-normal-81ed3e";
 const big = "kbq-radio-big-06db10";
 const hovered = "kbq-radio-hovered-3999f1";
@@ -12,6 +13,7 @@ const end = "kbq-radio-end-8689f9";
 const s = {
   base,
   circle,
+  icon,
   normal,
   big,
   hovered,
@@ -33,6 +35,7 @@ export {
   error,
   focusVisible,
   hovered,
+  icon,
   normal,
   start
 };

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

@@ -15,7 +15,7 @@ export type RadioProps = UseRadioProps & {
     /**
      * The position of the label.
      * @default end
-     * */
+     */
     labelPlacement?: RadioPropLabelPlacement;
     /** Additional CSS-classes. */
     className?: string;

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

@@ -14,9 +14,9 @@ export type RadioGroupBaseProps = ExtendableProps<{
     /**
      * Size.
      * @default normal
-     * */
+     */
     size?: RadioGroupPropSize;
-    /** Slots */
+    /** Slots. */
     slotProps?: {
         root?: ComponentPropsWithRef<'div'>;
         description?: RadioGroupDescriptionProps;

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

@@ -0,0 +1,11 @@
+import { Item, Section } from '../Collections';
+import { ListItemText } from '../List';
+import type { SelectComponentProp } from './index';
+declare const SelectComponent: SelectComponentProp;
+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,180 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, useBoolean, mergeProps, clsx, useElementSize } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { useSelectState, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import s from "./Select.module.css.js";
+import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
+import { PopoverInner } from "../Popover/Popover.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,
+    hiddenLabel = false,
+    "data-testid": testId,
+    open,
+    onOpenChange,
+    defaultOpen,
+    items,
+    error,
+    caption,
+    endAddon,
+    required,
+    disabled,
+    children,
+    slotProps,
+    startAddon,
+    selectedKey,
+    placeholder,
+    errorMessage,
+    disabledKeys,
+    onSelectionChange,
+    defaultSelectedKey,
+    renderValue: renderValueProp,
+    ...other
+  } = props;
+  const state = useSelectState({
+    ...other,
+    items,
+    defaultOpen,
+    onOpenChange,
+    isOpen: open,
+    placeholder,
+    selectedKey,
+    disabledKeys,
+    errorMessage,
+    isInvalid: error,
+    onSelectionChange,
+    defaultSelectedKey,
+    isRequired: required,
+    isDisabled: disabled,
+    children
+  });
+  const domRef = useDOMRef(ref);
+  const [opened, { on, off }] = useBoolean(state.isOpen);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    labelProps: labelPropsCommon
+  } = useSelect(
+    {
+      ...other,
+      placeholder,
+      errorMessage,
+      disabledKeys,
+      isInvalid: error,
+      isRequired: required,
+      isDisabled: disabled
+    },
+    { ...state, isOpen: state.isOpen || opened },
+    domRef
+  );
+  const rootProps = mergeProps(
+    {
+      "data-testid": testId,
+      "data-fullwidth": fullWidth,
+      "data-disabled": disabled,
+      "data-required": required,
+      "data-error": error,
+      className: clsx(s.base, fullWidth && s.fullWidth)
+    },
+    other
+  );
+  const { ref: containerRef, width } = useElementSize();
+  const listProps = mergeProps(
+    { className: s.list, state },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { hidden: hiddenLabel, required },
+    slotProps?.label,
+    labelPropsCommon
+  );
+  const groupProps = mergeProps(
+    {
+      slotProps: {
+        end: { className: s.addon },
+        start: { className: s.addon }
+      },
+      startAddon,
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(IconChevronDownS16, {})
+      ] }),
+      error,
+      ref: containerRef
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      error,
+      disabled,
+      ref: domRef,
+      placeholder
+    },
+    slotProps?.control,
+    valueProps,
+    triggerProps
+  );
+  const captionProps = slotProps?.caption;
+  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  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, children: props.label }),
+      /* @__PURE__ */ jsx(
+        HiddenSelect,
+        {
+          state,
+          isDisabled: disabled,
+          triggerRef: domRef,
+          label: props.label,
+          name: props.name
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    ] }),
+    /* @__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,87 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { Node } from '@koobiq/react-primitives';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../List';
+import type { PopoverProps } from '../Popover';
+export type SelectKey = string | number;
+export type SelectPropOnSelectionChange = (selected: SelectKey) => void;
+export type SelectProps<T extends object> = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** The contents of the collection. */
+    children?: ListPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: ListPropItems<T>;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The text appears in a control until the user puts focus on the field. */
+    placeholder?: string;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     */
+    error?: boolean;
+    /** Message for the error state */
+    errorMessage?: string | number;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    hiddenLabel?: boolean;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     */
+    required?: boolean;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLButtonElement>;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: ListPropDisabledKeys<T>;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: SelectKey;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: SelectKey | null;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: SelectPropOnSelectionChange;
+    /** Sets the open state of the menu. */
+    open?: boolean;
+    /** Sets the default open state of the menu. */
+    defaultOpen?: boolean;
+    /** Method that is called when the open state of the menu changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** A render function for displaying the selected value. */
+    renderValue?: (props: Node<T> | null) => ReactElement;
+    name?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FieldLabelProps;
+        list?: ListPropChildren<T>;
+        control?: FieldSelectProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+    };
+};
+export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectRef = ComponentRef<'button'>;

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

@@ -1,2 +1,10 @@
+import { Dialog } from '../Dialog';
 import type { SidePanelProps } from './types';
-export declare const SidePanel: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<SidePanelProps & 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

@@ -7,23 +7,24 @@ 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 {
-      hideCloseButton = false,
-      position = "left",
       size = "medium",
-      disableExitOnEscapeKeyDown,
-      disableExitOnClickOutside,
-      disableFocusManagement,
-      portalContainer,
-      open: openProp,
-      hideBackdrop,
-      onOpenChange,
-      defaultOpen,
-      children,
+      position = "left",
+      hideCloseButton = false,
       control,
+      children,
       slotProps,
+      defaultOpen,
+      onOpenChange,
+      hideBackdrop,
+      open: openProp,
+      portalContainer,
+      disableFocusManagement,
+      disableExitOnClickOutside,
+      disableExitOnEscapeKeyDown,
+      shouldCloseOnInteractOutside,
       ...other
     } = props;
     const state = useOverlayTriggerState({
@@ -43,6 +44,7 @@ const SidePanel = forwardRef(
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
         ...props,
+        shouldCloseOnInteractOutside,
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
@@ -57,15 +59,15 @@ const SidePanel = forwardRef(
     };
     const containerProps = mergeProps(
       {
-        className: clsx(s.base, s[size], s[position]),
+        ref: containerRef,
         "data-size": size,
         "data-position": position,
-        ref: containerRef
+        className: clsx(s.base, s[size], s[position])
       },
       other
     );
     const backdropProps = mergeProps(
-      { open: openState && !hideBackdrop },
+      { isOpen: openState && !hideBackdrop },
       underlayProps,
       slotProps?.backdrop
     );
@@ -81,18 +83,13 @@ const SidePanel = forwardRef(
     const panelProps = mergeProps(
       modalCommonProps,
       {
-        className: s.panel,
-        ref: modalRef
+        ref: modalRef,
+        className: s.panel
       },
       slotProps?.panel
     );
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      control?.({
-        onClick: onPress,
-        disabled: isDisabled,
-        ...otherTriggerProps
-      }),
+      control?.(triggerProps),
       /* @__PURE__ */ jsx(
         Transition,
         {
@@ -119,7 +116,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
 };

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

@@ -1,4 +1,17 @@
 export * from './SidePanel';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as SidePanelHeader, DialogContent as SidePanelContent, DialogFooter as SidePanelFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Header` instead.
+ */
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Body` instead.
+ */
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Footer` instead.
+ */
+export declare const SidePanelFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SidePanel/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const SidePanelHeader = Dialog.Header;
+const SidePanelContent = Dialog.Body;
+const SidePanelFooter = Dialog.Footer;
+export {
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader
+};

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

@@ -14,12 +14,12 @@ export type SidePanelProps = {
     /**
      * Component width size.
      * @default medium
-     * */
+     */
     size?: SidePanelPropSize;
     /**
      * Side from which the side panel will appear.
      * @default left
-     * */
+     */
     position?: SidePanelPropPosition;
     /** If `true`, the component is shown. */
     open?: boolean;
@@ -32,7 +32,7 @@ export type SidePanelProps = {
     /**
      * If `true`, the close button isn't shown.
      * @default false
-     * */
+     */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
     onOpenChange?: (open: boolean) => void;
@@ -65,6 +65,13 @@ export type SidePanelProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

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

@@ -5,7 +5,7 @@ export type SkeletonTypographyBaseProps = {
     /**
      * Variant of typography.
      * @default text-normal
-     * */
+     */
     variant?: SkeletonTypographyPropVariant;
     /** Number of lines per paragraph. */
     rows?: number;

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

@@ -0,0 +1,12 @@
+import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
+import type { TableComponentProp } from './types';
+declare const TableComponent: TableComponentProp;
+type CompoundedComponent = typeof TableComponent & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Column: typeof Column;
+    Row: typeof Row;
+    Cell: typeof Cell;
+};
+export declare const Table: CompoundedComponent;
+export {};