@koobiq/react-components 0.3.0 → 0.4.0

package/dist/components/Select/components/Tag/Tag.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocalizedStringFormatter, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "../../../TagGroup/components/Tag/Tag.module.css.js";
+import intlMessages from "./intl.json.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+const Tag = forwardRef((props, ref) => {
+  const {
+    variant = "theme-fade",
+    icon,
+    className,
+    style,
+    isDisabled,
+    children,
+    onRemove
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const rootProps = mergeProps({
+    className: clsx(
+      s.base,
+      s[variant],
+      isDisabled && s.disabled,
+      textNormalMedium,
+      className
+    ),
+    style
+  });
+  const removeButtonProps = {
+    isCompact: true,
+    isDisabled,
+    className: s.cancelIcon,
+    variant: matchVariantToCloseButton[variant],
+    "aria-label": stringFormatter.format("remove")
+  };
+  const contentProps = mergeProps({
+    className: s.content
+  });
+  const iconProps = mergeProps({
+    className: s.icon
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, ...rootProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(children) && /* @__PURE__ */ jsx("span", { ...contentProps, children }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        as: "div",
+        size: "l",
+        ...removeButtonProps,
+        tabIndex: void 0,
+        onPress: onRemove,
+        children: /* @__PURE__ */ jsx(IconXmarkS16, {})
+      }
+    )
+  ] });
+});
+Tag.displayName = "SelectTag";
+export {
+  Tag
+};

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

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

package/dist/components/Select/components/Tag/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "remove": "Удалить" },
+  "en-US": { "remove": "Remove" }
+};
+export {
+  intlMessages as default
+};

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

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

package/dist/components/Select/components/Tag/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/Select/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { MultiSelectState } from '@koobiq/react-primitives';
+import type { SelectPropSelectedTagsOverflow } from '../../types';
+export type TagGroupProps<T> = {
+    state: MultiSelectState<T>;
+    states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    };
+    selectedTagsOverflow?: SelectPropSelectedTagsOverflow;
+};
+export declare const TagGroup: FC<TagGroupProps<unknown>>;

package/dist/components/Select/components/TagGroup/TagGroup.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { logger } from "@koobiq/logger";
+import { TagGroupMultiline } from "./TagGroupMultiline.js";
+import { TagGroupResponsive } from "./TagGroupResponsive.js";
+function assertNever(x) {
+  logger.error(`Unhandled selectedTagsOverflow variant: ${x}`);
+  return null;
+}
+const TagGroup = ({
+  selectedTagsOverflow = "responsive",
+  ...rest
+}) => {
+  switch (selectedTagsOverflow) {
+    case "responsive":
+      return /* @__PURE__ */ jsx(TagGroupResponsive, { ...rest });
+    case "multiline":
+      return /* @__PURE__ */ jsx(TagGroupMultiline, { ...rest });
+    default:
+      return assertNever(selectedTagsOverflow);
+  }
+};
+export {
+  TagGroup
+};

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

@@ -0,0 +1,23 @@
+const container = "kbq-taggroup-container-c4d544";
+const hasStartAddon = "kbq-taggroup-hasStartAddon-40d1f9";
+const base = "kbq-taggroup-8253a5";
+const tag = "kbq-taggroup-tag-b9306f";
+const more = "kbq-taggroup-more-b2d6b9";
+const hidden = "kbq-taggroup-hidden-eadb46";
+const s = {
+  container,
+  hasStartAddon,
+  base,
+  tag,
+  more,
+  hidden
+};
+export {
+  base,
+  container,
+  s as default,
+  hasStartAddon,
+  hidden,
+  more,
+  tag
+};

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { TagGroupProps } from './TagGroup';
+export declare const TagGroupMultiline: FC<TagGroupProps<unknown>>;

package/dist/components/Select/components/TagGroup/TagGroupMultiline.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { Tag } from "../Tag/Tag.js";
+import { useFieldInputGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+const TagGroupMultiline = ({
+  state,
+  states
+}) => {
+  const { isDisabled, isInvalid } = states;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFieldInputGroup();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: s.base,
+          "data-limit-tags": "multiline",
+          "aria-label": t.format("selected items"),
+          children: state.selectedItems?.map((item) => /* @__PURE__ */ jsx(
+            Tag,
+            {
+              className: s.tag,
+              isDisabled,
+              variant: isInvalid ? "error-fade" : "contrast-fade",
+              onRemove: () => {
+                if (state.selectionManager.isSelected(item.key)) {
+                  state.selectionManager.toggleSelection(item.key);
+                }
+              },
+              children: item.textValue
+            },
+            item.key
+          ))
+        }
+      )
+    }
+  );
+};
+export {
+  TagGroupMultiline
+};

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { TagGroupProps } from './TagGroup';
+export declare const TagGroupResponsive: FC<TagGroupProps<unknown>>;

package/dist/components/Select/components/TagGroup/TagGroupResponsive.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useHideOverflowItems, useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { getHiddenCount } from "./utils.js";
+import { useFieldInputGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+import { Tag } from "../Tag/Tag.js";
+const TagGroupResponsive = ({
+  state,
+  states
+}) => {
+  const { isDisabled, isInvalid } = states;
+  const length = state?.selectedItems?.length || 0;
+  const { parentRef, visibleMap, itemsRefs } = useHideOverflowItems({
+    length: length + 1,
+    pinnedIndex: 0
+  });
+  const hiddenCount = getHiddenCount(visibleMap);
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFieldInputGroup();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      ref: parentRef,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.base,
+            "data-limit-tags": "responsive",
+            "aria-label": t.format("selected items"),
+            children: state.selectedItems?.map((item, i) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                ref: itemsRefs[i],
+                className: clsx(s.tag, !visibleMap[i] && s.hidden),
+                isDisabled,
+                variant: isInvalid ? "error-fade" : "contrast-fade",
+                onRemove: () => {
+                  if (state.selectionManager.isSelected(item.key)) {
+                    state.selectionManager.toggleSelection(item.key);
+                  }
+                },
+                children: item.textValue
+              },
+              item.key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: itemsRefs[itemsRefs.length - 1],
+            className: clsx(s.more, !visibleMap[length] && s.hidden),
+            children: t.format("more", { count: hiddenCount })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TagGroupResponsive
+};

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

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

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

@@ -0,0 +1 @@
+export declare const getHiddenCount: (map: boolean[]) => number;

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

@@ -0,0 +1,4 @@
+const getHiddenCount = (map) => map.filter((item) => !item).length;
+export {
+  getHiddenCount
+};

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

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

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

@@ -0,0 +1,2 @@
+declare const _default: Record<string, Record<string, string>>;
+export default _default;

package/dist/components/Select/intl.js

@@ -0,0 +1,15 @@
+const intlMessages = {
+  "ru-RU": {
+    "selected items": "Выбранные элементы",
+    clear: "Очистить",
+    more: ({ count }) => `еще ${count}`
+  },
+  "en-US": {
+    "selected items": "Selected items",
+    clear: "Clear",
+    more: ({ count }) => `${count} more`
+  }
+};
+export {
+  intlMessages as default
+};

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

@@ -1,49 +1,38 @@
 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 { ExtendableProps } from '@koobiq/react-core';
+import type { AriaSelectProps, MultiSelectState, useMultiSelectState } from '@koobiq/react-primitives';
 import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { IconButtonProps } from '../IconButton';
 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;
+export declare const selectPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
+export type SelectPropSelectedTagsOverflow = (typeof selectPropSelectedTagsOverflow)[number];
+export type SelectProps<T> = ExtendableProps<{
     /**
-     * Sets the open state of the menu.
-     * @deprecated
-     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     * Defines how selected tags are displayed when they exceed the available space.
+     *
+     *- `"multiline"` — tags wrap to multiple lines.
+     *- `"responsive"` — tags collapse into a summary (e.g., "3 more").
+     * @default "responsive"
      */
-    open?: boolean;
+    selectedTagsOverflow?: SelectPropSelectedTagsOverflow;
+    /** Handler that is called when the clear button is clicked. */
+    onClear?: () => void;
+    /** Sets the CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>['0']['defaultSelectedKeys'];
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
     /**
-     * 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.
+     * The type of selection that is allowed in the collection.
+     * @default 'single'
      */
-    hiddenLabel?: boolean;
-};
-export type SelectProps<T> = ExtendableProps<{
-    /** Additional CSS-classes. */
-    className?: string;
+    selectionMode?: 'single' | 'multiple';
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
@@ -69,18 +58,22 @@ export type SelectProps<T> = ExtendableProps<{
     /** Ref to the control */
     ref?: Ref<HTMLDivElement>;
     /** A render function for displaying the selected value. */
-    renderValue?: (props: Node<T> | null) => ReactElement;
+    renderValue?: (state: MultiSelectState<T>, states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    }) => ReactNode;
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
         label?: FieldLabelProps;
         list?: ListProps<T>;
-        control?: FieldSelectProps;
+        control?: FieldSelectProps<'div'>;
         caption?: FieldCaptionProps;
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
+        clearButton?: IconButtonProps;
     };
-} & SelectDeprecatedProps, Omit<AriaSelectProps<T>, 'description' | 'validationState'>>;
+}, Omit<AriaSelectProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
 export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'div'>;
-export {};

package/dist/components/Select/types.js

@@ -0,0 +1,7 @@
+const selectPropSelectedTagsOverflow = [
+  "multiline",
+  "responsive"
+];
+export {
+  selectPropSelectedTagsOverflow
+};

package/dist/index.js

@@ -62,6 +62,7 @@ import { List, ListInner } from "./components/List/List.js";
 import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
 import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
 import { Select } from "./components/Select/Select.js";
+import { selectPropSelectedTagsOverflow } from "./components/Select/types.js";
 import { Divider } from "./components/Divider/Divider.js";
 import { dividerPropDisplay } from "./components/Divider/types.js";
 import { Menu } from "./components/Menu/Menu.js";
@@ -177,6 +178,7 @@ export {
   radioGroupPropSize,
   radioPropLabelPlacement,
   radioPropSize,
+  selectPropSelectedTagsOverflow,
   sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize,