@koobiq/react-components 0.0.1-beta.1 → 0.0.1-beta.11

package/dist/components/Select/Select.js

@@ -0,0 +1,172 @@
+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 { ListInner } from "../List/List.js";
+import s from "./Select.module.css.js";
+import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
+import { PopoverInner } from "../Popover/Popover.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";
+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("div", { ...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 Select = forwardRef(SelectRender);
+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 SelectComponent = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectRef = ComponentRef<'button'>;

package/dist/components/SidePanel/SidePanel.js

@@ -10,20 +10,21 @@ import { Dialog } from "../Dialog/Dialog.js";
 const SidePanel = 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,10 +59,10 @@ 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
     );
@@ -81,8 +83,8 @@ const SidePanel = forwardRef(
     const panelProps = mergeProps(
       modalCommonProps,
       {
-        className: s.panel,
-        ref: modalRef
+        ref: modalRef,
+        className: s.panel
       },
       slotProps?.panel
     );

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

@@ -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/SkeletonBlock/SkeletonBlock.module.css.js

@@ -2,7 +2,6 @@ const base = "kbq-skeletonblock-e98401";
 const hasChildren = "kbq-skeletonblock-hasChildren-88ab53";
 const s = {
   base,
-  "skeleton-wave": "kbq-skeletonblock-skeleton-wave-3094a0",
   hasChildren
 };
 export {

package/dist/components/SkeletonTypography/utils.js

@@ -4,10 +4,13 @@ const getRowWidth = (idx, rows = 0) => {
     return "50%";
   }
   switch (idx % 3) {
+    // The first, fourth etc.
     case 0:
       return "95%";
+    // The second, fifth etc.
     case 1:
       return "100%";
+    // The third, sixth etc.
     case 2:
       return "90%";
   }

package/dist/components/Toggle/Toggle.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { Toggle as Toggle$1 } from "@koobiq/react-primitives";
 import s from "./Toggle.module.css.js";
 const Toggle = forwardRef(

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

@@ -7,7 +7,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
-    anchorRef?: import("react").RefObject<HTMLElement>;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
     arrowBoundaryOffset?: number;
     offset?: number;
     crossOffset?: number;
@@ -17,4 +17,5 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     trigger?: "focus";
     id?: string;
     className?: string;
+    portalContainer?: Element;
 } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDOMRef, useBoolean, FocusableProvider, mergeProps, clsx } from "@koobiq/react-core";
+import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
 import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import { utilClasses } from "../../styles/utility.js";
@@ -10,17 +10,18 @@ const Tooltip = forwardRef((props, ref) => {
   const {
     delay = 120,
     disabled = false,
-    defaultOpen,
     closeDelay = 120,
     hideArrow = false,
     variant = "contrast",
-    onOpenChange,
     placement: placementProp = "top",
     control,
     children,
     anchorRef,
     crossOffset,
+    defaultOpen,
+    onOpenChange,
     open: openProp,
+    portalContainer,
     offset: offsetProp,
     arrowBoundaryOffset,
     ...other
@@ -38,6 +39,7 @@ const Tooltip = forwardRef((props, ref) => {
   });
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
+  const controlRefCallback = useMultiRef([controlRef]);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     {
       delay,
@@ -67,20 +69,20 @@ const Tooltip = forwardRef((props, ref) => {
   const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
-      ref: controlRef,
+      ref: controlRefCallback,
       ...triggerProps
     }) }),
     /* @__PURE__ */ jsx(
       Transition,
       {
         onEnter: on,
-        timeout: 300,
+        timeout: 120,
         onExited: off,
         in: openState,
         nodeRef: domRef,
         unmountOnExit: true,
         appear: true,
-        children: (transition) => /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsxs(
+        children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ...mergeProps(localTooltipProps, tooltipProps),
@@ -108,8 +110,7 @@ const Tooltip = forwardRef((props, ref) => {
             ]
           }
         ) })
-      },
-      placement
+      }
     )
   ] });
 });

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

@@ -1,7 +1,7 @@
-import type { ReactNode, ComponentRef, Ref, ReactElement, HTMLAttributes, RefObject } from 'react';
+import type { ReactNode, RefObject, ComponentRef, ReactElement, DOMAttributes } from 'react';
 import type { DataAttributeProps } from '@koobiq/react-core';
-export type TooltipPropControl = (props: HTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
+export type TooltipPropControl = (props: DOMAttributes<HTMLElement> & {
+    ref: ((node: HTMLElement | null) => void) | null;
 }) => ReactElement;
 export declare const tooltipPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
 export declare const tooltipPropVariant: readonly ["contrast", "contrast-fade", "error", "warning", "theme"];
@@ -34,7 +34,7 @@ export type TooltipProps = {
      * */
     placement?: TooltipPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * The minimum distance the arrow's edge should be from the edge of the overlay element.
      * @default 0
@@ -77,5 +77,10 @@ export type TooltipProps = {
     id?: string;
     /** Additional CSS-classes. */
     className?: string;
+    /**
+     * The container element in which the component portal will be placed.
+     * @default document.body
+     */
+    portalContainer?: Element;
 } & DataAttributeProps;
 export type TooltipRef = ComponentRef<'div'>;

package/dist/components/Typography/Typography.js

@@ -27,11 +27,11 @@ const Typography = polymorphicForwardRef(
       "data-ellipsis": ellipsis,
       className: clsx(
         s.base,
+        textVariant[variant],
         display && s[display],
         ellipsis && s.ellipsis,
         align && s[`align-${align}`],
-        textVariant[variant],
-        foregroundColor[color],
+        color === "inherit" ? s["color-inherit"] : foregroundColor[color],
         className
       ),
       ...other,

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

@@ -12,7 +12,8 @@ const s = {
   "align-center": "kbq-typography-align-center-2d47fd",
   "align-initial": "kbq-typography-align-initial-faf6dd",
   "align-inherit": "kbq-typography-align-inherit-00f946",
-  ellipsis
+  ellipsis,
+  "color-inherit": "kbq-typography-color-inherit-35de13"
 };
 export {
   base,

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

@@ -5,7 +5,7 @@ export declare const typographyPropDisplay: readonly ["block", "inline", "inline
 export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
 export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
 export type TypographyPropAlign = (typeof typographyPropAlign)[number];
-export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited"];
+export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited", "inherit"];
 export type TypographyPropColor = (typeof typographyPropColor)[number];
 export type TypographyBaseProps = {
     /**

package/dist/components/Typography/types.js

@@ -74,7 +74,8 @@ const typographyPropColor = [
   "success-secondary",
   "warning",
   "warning-secondary",
-  "visited"
+  "visited",
+  "inherit"
 ];
 export {
   typographyPropAlign,

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Provider';
+export * from './FlexBox';
 export * from './Container';
 export * from './Alert';
 export * from './Button';
@@ -21,4 +22,7 @@ export * from './Modal';
 export * from './SidePanel';
 export * from './Popover';
 export * from './Tooltip';
+export * from './List';
+export * from './AnimatedIcon';
+export * from './Select';
 export * from './layout';

package/dist/components/layout/flex/flex.d.ts

@@ -13,13 +13,24 @@ export type FlexPropDirection = (typeof flexPropDirection)[number];
 export declare const flexPropOrder: readonly [-1, 0, 1];
 export type FlexPropOrder = (typeof flexPropOrder)[number];
 export type FlexProps = {
-    alignItems?: FlexPropAlignItems;
-    justifyContent?: FlexPropJustifyContent;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap;
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
     flex?: FlexPropFlex;
+    /** Defines the `flex-wrap` property. */
     wrap?: FlexPropWrap;
-    direction?: FlexPropDirection;
-    gap?: FlexPropGap;
+    /** Defines the `order` property. */
     order?: FlexPropOrder;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent;
 };
 export type FlexParams = (props: FlexProps, className?: string) => string;
 export declare const flex: FlexParams;

package/dist/components/layout/flex/flex.js

@@ -47,15 +47,20 @@ const flex = (props, className) => {
     wrap,
     direction,
     gap,
+    rowGap: rowGapProp,
+    colGap: colGapProp,
     order: orderProp
   } = props;
   const order = String(orderProp);
+  const colGap = colGapProp ?? gap;
+  const rowGap = rowGapProp ?? gap;
   return clsx(
     s.base,
-    gap && s[`gap_${gap}`],
     flex2 && s[`flex_${flex2}`],
     wrap && s[`wrap_${wrap}`],
     order && s[`order_${order}`],
+    rowGap && s[`gap_row_${rowGap}`],
+    colGap && s[`gap_column_${colGap}`],
     direction && s[`direction_${direction}`],
     alignItems && s[`alignItems_${alignItems}`],
     justifyContent && s[`justifyContent_${justifyContent}`],