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

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableColumnHeader, useTableSelectAllCheckbox, VisuallyHidden } from "@koobiq/react-primitives";
+import s from "../TableColumnHeader/TableColumnHeader.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableSelectAllCell({
+  column,
+  state
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const { checkboxProps } = useTableSelectAllCheckbox(state);
+  return /* @__PURE__ */ jsx("th", { className: s.base, ...columnHeaderProps, ref, children: state.selectionManager.selectionMode === "single" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] }) : /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableSelectAllCell
+};

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

@@ -0,0 +1 @@
+export * from './TableSelectAllCell';

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

@@ -0,0 +1,7 @@
+export * from './TableRowGroup';
+export * from './TableHeaderRow';
+export * from './TableColumnHeader';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableSelectAllCell';
+export * from './TableCheckboxCell';

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

@@ -0,0 +1 @@
+export * from './Table';

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

@@ -0,0 +1,49 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { TableStateProps } from '@koobiq/react-primitives';
+import type { Key } from '@react-types/shared';
+export declare const tablePropDivider: readonly ["none", "row"];
+export type TablePropDivider = (typeof tablePropDivider)[number];
+export type TablePropChildren<T> = TableStateProps<T>['children'];
+export type TablePropBlockSize = CSSProperties['blockSize'];
+export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
+export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
+export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Type of separators in the table.
+     * @default 'none'
+     */
+    divider?: TablePropDivider;
+    /**
+     * Flag indicating a fixed table header.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * The elements that make up the table.
+     * Includes the Table.Header, Table.Body, Table.Column, and Table.Row.
+     */
+    children?: TablePropChildren<T>;
+    /** Ref to the control. */
+    ref?: Ref<HTMLDivElement>;
+    /** Height of the table container. */
+    blockSize?: TablePropBlockSize;
+    /** Minimum height of the table container. */
+    minBlockSize?: TablePropMinBlockSize;
+    /** Maximum height of the table container. */
+    maxBlockSize?: TablePropMaxBlockSize;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        container?: ComponentPropsWithRef<'div'>;
+        table?: ComponentPropsWithRef<'table'>;
+    };
+};
+export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;
+export type TableRef = ComponentRef<'table'>;

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

@@ -0,0 +1,2 @@
+import type { TablePropBlockSize } from './types';
+export declare const normalizeBlockSize: (value: TablePropBlockSize | undefined) => string | undefined;

package/dist/components/Table/utils.js

@@ -0,0 +1,8 @@
+import { isNumber } from "@koobiq/react-core";
+const normalizeBlockSize = (value) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+export {
+  normalizeBlockSize
+};

package/dist/components/TagGroup/Tag.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-core';
+import type { IconButtonProps } from '../IconButton';
+export type TagProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        icon?: ComponentPropsWithRef<'span'>;
+        content?: ComponentPropsWithRef<'span'>;
+        removeIcon?: IconButtonProps;
+    };
+};
+export declare function Tag<T>(_props: TagProps<T>): null;
+export declare namespace Tag {
+    var getCollectionNode: unknown;
+}

package/dist/components/TagGroup/Tag.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item } from "@koobiq/react-primitives";
+const ItemInner = Item;
+function Tag(_props) {
+  return null;
+}
+Tag.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Tag
+};

package/dist/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,2 @@
+import type { TagGroupComponent } from './types';
+export declare const TagGroup: TagGroupComponent;

package/dist/components/TagGroup/TagGroup.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useListState, useTagGroup } from "@koobiq/react-primitives";
+import s from "./TagGroup.module.css.js";
+import { TagInner } from "./components/TagInner/TagInner.js";
+function TagGroupRender(props, ref) {
+  const { variant = "theme-fade", style, className, slotProps } = props;
+  const domRef = useDOMRef(ref);
+  const state = useListState(props);
+  const { gridProps } = useTagGroup(props, state, domRef);
+  const rootProps = mergeProps(
+    { className: clsx(s.base, className), style, ref: domRef },
+    gridProps,
+    slotProps?.root
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TagInner, { item, variant, state }, item.key)) });
+}
+const TagGroup = forwardRef(TagGroupRender);
+export {
+  TagGroup
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-taggroup-20136b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/TagGroup/components/TagInner/TagInner.d.ts

@@ -0,0 +1,11 @@
+import type { AriaTagProps, ListState } from '@koobiq/react-primitives';
+import type { TagGroupPropVariant } from '../../index';
+export type TagInnerProps<T> = AriaTagProps<T> & {
+    state: ListState<T>;
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+};
+export declare function TagInner<T>(props: TagInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TagGroup/components/TagInner/TagInner.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useLocalizedStringFormatter, useFocusRing, useHover, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { useTag } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.json.js";
+import s from "./TagInner.module.css.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function TagInner(props) {
+  const { item, state, variant = "theme-fade" } = props;
+  const { slotProps, icon, className, style } = item.props;
+  const ref = useRef(null);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    within: false
+  });
+  const {
+    rowProps,
+    gridCellProps,
+    removeButtonProps: removeButtonPropsAria,
+    allowsRemoving,
+    isDisabled,
+    isPressed
+  } = useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const rootProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        isFocused && s.focused,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        textNormalMedium,
+        className
+      ),
+      style,
+      "data-variant": variant,
+      "data-focused": isFocused,
+      "data-pressed": isPressed,
+      "data-hovered": isHovered,
+      "aria-disabled": isDisabled,
+      "data-disabled": isDisabled,
+      "data-focus-visible": isFocusVisible
+    },
+    rowProps,
+    hoverProps,
+    focusProps,
+    slotProps?.root
+  );
+  const removeButtonProps = mergeProps(
+    {
+      tabIndex: -1,
+      isCompact: true,
+      isDisabled,
+      className: s.cancelIcon,
+      variant: matchVariantToCloseButton[variant],
+      "aria-label": stringFormatter.format("close")
+    },
+    removeButtonPropsAria,
+    slotProps?.removeIcon
+  );
+  const contentProps = mergeProps(
+    {
+      className: s.content
+    },
+    slotProps?.content
+  );
+  const iconProps = mergeProps(
+    {
+      className: s.icon
+    },
+    slotProps?.icon
+  );
+  return /* @__PURE__ */ jsx("div", { ref, ...rootProps, children: /* @__PURE__ */ jsxs("div", { ...gridCellProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(item.rendered) && /* @__PURE__ */ jsx("span", { ...contentProps, children: item.rendered }),
+    allowsRemoving && /* @__PURE__ */ jsx(IconButton, { size: "l", ...removeButtonProps, children: /* @__PURE__ */ jsx(IconXmarkS16, {}) })
+  ] }) });
+}
+export {
+  TagInner
+};

package/dist/components/TagGroup/components/TagInner/TagInner.module.css.js

@@ -0,0 +1,30 @@
+const base = "kbq-taginner-f9f19a";
+const content = "kbq-taginner-content-72ca39";
+const icon = "kbq-taginner-icon-df45be";
+const cancelIcon = "kbq-taginner-cancelIcon-8a3dbe";
+const hovered = "kbq-taginner-hovered-abf199";
+const focused = "kbq-taginner-focused-16f44f";
+const disabled = "kbq-taginner-disabled-0c6073";
+const s = {
+  base,
+  content,
+  icon,
+  cancelIcon,
+  "theme-fade": "kbq-taginner-theme-fade-68b99c",
+  "contrast-fade": "kbq-taginner-contrast-fade-39d7a7",
+  "error-fade": "kbq-taginner-error-fade-6d7d03",
+  "warning-fade": "kbq-taginner-warning-fade-9403c7",
+  hovered,
+  focused,
+  disabled
+};
+export {
+  base,
+  cancelIcon,
+  content,
+  s as default,
+  disabled,
+  focused,
+  hovered,
+  icon
+};

package/dist/components/TagGroup/components/TagInner/index.d.ts

@@ -0,0 +1 @@
+export * from './TagInner';

package/dist/components/TagGroup/components/TagInner/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonPropVariant } from '../../../IconButton';
+import type { TagGroupPropVariant } from '../../types';
+export declare const matchVariantToCloseButton: Record<TagGroupPropVariant, IconButtonPropVariant>;

package/dist/components/TagGroup/components/TagInner/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

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

@@ -0,0 +1 @@
+export * from './TagInner';

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

@@ -0,0 +1,3 @@
+export * from './TagGroup';
+export * from './Tag';
+export * from './types';

package/dist/components/TagGroup/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaTagGroupProps } from '@koobiq/react-primitives';
+export declare const tagGroupPropVariant: readonly ["theme-fade", "contrast-fade", "error-fade", "warning-fade"];
+export type TagGroupPropVariant = (typeof tagGroupPropVariant)[number];
+export type TagGroupProps<T> = ExtendableProps<{
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+    /** Ref to the HTML ul-element. */
+    ref?: Ref<HTMLElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+    };
+}, Omit<AriaTagGroupProps<T>, 'label' | 'errorMessage' | 'description' | 'onSelectionChange' | 'selectedKeys' | 'selectionMode' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'defaultSelectedKeys'>>;
+export type TagGroupComponent = <T>(props: TagGroupProps<T>) => ReactElement | null;
+export type TagGroupRef = ComponentRef<'div'>;

package/dist/components/TagGroup/types.js

@@ -0,0 +1,9 @@
+const tagGroupPropVariant = [
+  "theme-fade",
+  "contrast-fade",
+  "error-fade",
+  "warning-fade"
+];
+export {
+  tagGroupPropVariant
+};

package/dist/components/Textarea/Textarea.d.ts

@@ -1,21 +1,24 @@
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "className" | "disabled" | "required" | "cols" | "rows" | "error" | "variant" | "slotProps" | "fullWidth" | "errorMessage" | "hiddenLabel" | "expand"> & {
-    label?: import("react").ReactNode;
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    hiddenLabel?: boolean;
+    readonly?: boolean;
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "className" | "cols" | "rows" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "isLabelHidden" | "expand"> & {
     className?: string;
     variant?: import("./types").TextareaPropVariant;
-    error?: boolean;
-    errorMessage?: string | number;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
-    disabled?: boolean;
-    hiddenLabel?: boolean;
-    caption?: string | number;
-    required?: boolean;
+    isLabelHidden?: boolean;
+    caption?: import("react").ReactNode;
     rows?: number;
     cols?: number;
     expand?: import("./types").TextareaPropExpand;
+    'data-testid'?: string | number;
     slotProps?: {
         label?: import("../FieldComponents").FieldLabelProps;
         caption?: import("../FieldComponents").FieldCaptionProps;
-        textarea?: import("../FieldComponents").FieldInputProps;
+        textarea?: import("../FieldComponents").FieldInputProps<"textarea">;
         errorMessage?: import("../FieldComponents").FieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -1,14 +1,25 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps } from "@koobiq/react-core";
+import { TextField } from "@koobiq/react-primitives";
 import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 const Textarea = forwardRef((props, ref) => {
   const {
     variant = "filled",
     fullWidth = false,
-    hiddenLabel = false,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
+    error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
+    readonly,
+    isReadOnly: isReadOnlyProp,
     rows,
     cols,
     expand,
@@ -18,17 +29,51 @@ const Textarea = forwardRef((props, ref) => {
     label,
     ...other
   } = props;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Textarea: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Textarea: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Textarea: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+    deprecate(
+      'Textarea: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Textarea: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
   const rootProps = mergeProps(
     {
       label,
       fullWidth,
+      isDisabled,
+      isRequired,
+      isReadOnly,
+      isInvalid,
       errorMessage,
       "data-variant": variant,
       "data-fullwidth": fullWidth
     },
     other
   );
-  return /* @__PURE__ */ jsx(FieldControl, { inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
     TextareaContextConsumer,
     {
       ...values,
@@ -39,7 +84,7 @@ const Textarea = forwardRef((props, ref) => {
       variant,
       caption,
       slotProps,
-      hiddenLabel,
+      isLabelHidden,
       errorMessage,
       ref
     }

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -1,6 +1,6 @@
 import type { TextareaProps } from '../../types';
 export declare const TextareaContextConsumer: import("react").ForwardRefExoticComponent<{
-    required?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "hiddenLabel" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -13,14 +13,14 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     rows,
     cols,
     label,
-    error,
+    isInvalid,
     expand,
     caption,
     variant,
-    disabled,
-    required,
+    isDisabled,
+    isRequired,
     slotProps,
-    hiddenLabel,
+    isLabelHidden,
     errorMessage
   } = props;
   const { value } = useTextareaContext();
@@ -28,28 +28,31 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
   useTextareaAutosize(domRef, value, expand === "auto-size");
   const textareaProps = mergeProps(
     {
-      error,
+      isInvalid,
       rows,
       cols,
       variant,
       value,
-      disabled,
+      isDisabled,
       ...expand && { className: s[expand] },
       ref: domRef
     },
     slotProps?.textarea
   );
-  const captionProps = slotProps?.caption;
-  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage
+  );
   const labelProps = mergeProps(
-    { hidden: hiddenLabel, required },
+    { isHidden: isLabelHidden, children: label, isRequired },
     slotProps?.label
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps.children || label }),
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
     /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });
 });
 TextareaContextConsumer.displayName = "TextareaContextConsumer";