@koobiq/react-components 0.23.0 → 0.25.0

package/dist/components/SelectNext/components/Tag/Tag.js

@@ -0,0 +1,67 @@
+"use client";
+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,
+    ...other
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const rootProps = mergeProps({
+    className: clsx(
+      s.base,
+      s[variant],
+      isDisabled && s.disabled,
+      textNormalMedium,
+      className
+    ),
+    ...other,
+    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/SelectNext/components/Tag/index.d.ts

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

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

@@ -0,0 +1,13 @@
+import type { SelectState } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import type { SelectNextPropSelectedTagsOverflow } from '../../types';
+export type TagGroupProps<T extends object, M extends SelectionMode = 'single'> = {
+    state: SelectState<T, M>;
+    states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    };
+    selectedTagsOverflow?: SelectNextPropSelectedTagsOverflow;
+};
+export declare function TagGroup<T extends object, M extends SelectionMode = 'single'>({ selectedTagsOverflow, ...rest }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SelectNext/components/TagGroup/TagGroup.js

@@ -0,0 +1,25 @@
+"use client";
+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;
+}
+function 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/SelectNext/components/TagGroup/TagGroup.module.css.js

@@ -0,0 +1,20 @@
+const container = "kbq-taggroup-container-5d455a";
+const hasStartAddon = "kbq-taggroup-hasStartAddon-eb7d88";
+const base = "kbq-taggroup-b97495";
+const tag = "kbq-taggroup-tag-262753";
+const more = "kbq-taggroup-more-db5a34";
+const s = {
+  container,
+  hasStartAddon,
+  base,
+  tag,
+  more
+};
+export {
+  base,
+  container,
+  s as default,
+  hasStartAddon,
+  more,
+  tag
+};

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

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupMultiline<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+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 { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+function TagGroupMultiline({ state, states }) {
+  const { isDisabled, isInvalid } = states;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFormFieldControlGroup();
+  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/SelectNext/components/TagGroup/TagGroupResponsive.d.ts

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupResponsive<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+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 { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+import { Tag } from "../Tag/Tag.js";
+function 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 } = useFormFieldControlGroup();
+  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,
+              {
+                className: s.tag,
+                ref: itemsRefs[i],
+                isDisabled,
+                "aria-hidden": !visibleMap[i] || void 0,
+                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",
+          {
+            className: s.more,
+            ref: itemsRefs[itemsRefs.length - 1],
+            "aria-hidden": !visibleMap[length] || void 0,
+            children: t.format("more", { count: hiddenCount })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TagGroupResponsive
+};

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/SelectNext/intl.js

@@ -0,0 +1,21 @@
+const intlMessages = {
+  "ru-RU": {
+    "empty items": "Нет вариантов выбора",
+    "nothing found": "Ничего не найдено",
+    loading: "Загрузка…",
+    "selected items": "Выбранные элементы",
+    search: "Поиск",
+    more: ({ count }) => `+${count}`
+  },
+  "en-US": {
+    "empty items": "No options available",
+    "nothing found": "Nothing found",
+    "selected items": "Selected items",
+    loading: "Loading…",
+    search: "Search",
+    more: ({ count }) => `+${count}`
+  }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,99 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaSelectProps, SelectState } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import type { FormFieldLabelProps, FormFieldErrorProps, FormFieldSelectProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldControlGroupProps, FormFieldPropLabelPlacement } from '../FormField';
+import type { IconButtonProps } from '../IconButton';
+import type { PopoverProps } from '../Popover';
+import type { SearchInputProps } from '../SearchInput';
+import type { SelectListProps } from './components';
+export declare const selectNextPropSelectedTagsOverflow: readonly ["multiline", "responsive"];
+export type SelectNextPropSelectedTagsOverflow = (typeof selectNextPropSelectedTagsOverflow)[number];
+export declare const selectNextPropLabelPlacement: readonly ["top", "side"];
+export type SelectNextPropLabelPlacement = FormFieldPropLabelPlacement;
+export declare const selectNextPropLabelAlign: readonly ["start", "end"];
+export type SelectNextPropLabelAlign = FormFieldPropLabelAlign;
+export type SelectNextProps<T extends object, M extends SelectionMode = 'single'> = ExtendableProps<{
+    /**
+     * 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'
+     */
+    selectedTagsOverflow?: SelectNextPropSelectedTagsOverflow;
+    /** 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;
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     */
+    isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: SelectNextPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: SelectNextPropLabelAlign;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * If true, the input will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /** The load more spinner to render when loading additional items. */
+    isLoading?: boolean;
+    /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
+    onLoadMore?: () => void;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /** A render function for displaying the selected value. */
+    renderValue?: (state: SelectState<T, M>, states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    }) => ReactNode;
+    /** Content to display when no items are available. */
+    noItemsText?: ReactNode;
+    /** Content to display when items are loading. */
+    loadingText?: ReactNode;
+    /** Enables search input for filtering items in the list. */
+    isSearchable?: boolean;
+    /** The value of the Select search input (controlled). */
+    inputValue?: string;
+    /** The default value of the Select search input (uncontrolled). */
+    defaultInputValue?: string;
+    /** Handler that is called when the Select search input value changes. */
+    onInputChange?: (value: string) => void;
+    /** The filter function used to determine if an option should be included in the Select list. */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FormFieldLabelProps;
+        clearButton?: IconButtonProps;
+        control?: FormFieldSelectProps;
+        caption?: FormFieldCaptionProps;
+        group?: FormFieldControlGroupProps;
+        errorMessage?: FormFieldErrorProps;
+        list?: Omit<SelectListProps<T, M>, 'state'>;
+        'search-input'?: SearchInputProps;
+    };
+}, Omit<AriaSelectProps<T, M>, 'description' | 'validationState' | 'selectedKey' | 'onSelectionChange' | 'defaultSelectedKey'>>;
+export type SelectNextComponent = <T extends object, M extends SelectionMode = 'single'>(props: SelectNextProps<T, M>) => ReactElement | null;
+export type SelectNextRef = ComponentRef<'div'>;

package/dist/components/SelectNext/types.js

@@ -0,0 +1,12 @@
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
+const selectNextPropSelectedTagsOverflow = [
+  "multiline",
+  "responsive"
+];
+const selectNextPropLabelPlacement = formFieldPropLabelPlacement;
+const selectNextPropLabelAlign = formFieldPropLabelAlign;
+export {
+  selectNextPropLabelAlign,
+  selectNextPropLabelPlacement,
+  selectNextPropSelectedTagsOverflow
+};

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

@@ -0,0 +1,9 @@
+import type { Collection, Node } from '@react-types/shared';
+export declare function useCollectionRender<T>(collection: Collection<Node<T>>, parent: Node<T> | null): import("react").ReactNode;
+export declare function CollectionRoot<T>({ collection, }: {
+    collection: Collection<Node<T>>;
+}): import("react").ReactNode;
+export declare function CollectionBranch<T>({ collection, parent, }: {
+    collection: Collection<Node<T>>;
+    parent: Node<T>;
+}): import("react").ReactNode;

package/dist/components/SelectNext/utils.js

@@ -0,0 +1,26 @@
+import { useCachedChildren } from "@koobiq/react-primitives";
+function useCollectionRender(collection, parent) {
+  return useCachedChildren({
+    items: parent ? collection.getChildren(parent.key) : collection,
+    dependencies: [],
+    children(node) {
+      return node.render(node);
+    }
+  });
+}
+function CollectionRoot({
+  collection
+}) {
+  return useCollectionRender(collection, null);
+}
+function CollectionBranch({
+  collection,
+  parent
+}) {
+  return useCollectionRender(collection, parent);
+}
+export {
+  CollectionBranch,
+  CollectionRoot,
+  useCollectionRender
+};

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export * from './Tooltip';
 export * from './List';
 export * from './AnimatedIcon';
 export * from './Select';
+export * from './SelectNext';
 export * from './Divider';
 export * from './Menu';
 export * from './ButtonToggleGroup';
@@ -44,6 +45,7 @@ export * from './ToastProvider';
 export * from './Breadcrumbs';
 export * from './Accordion';
 export * from './ContenPanel';
+export * from './Navbar';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
-export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';
+export { useRouter, useLocale, useFilter, type Locale, type Key, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -75,7 +75,9 @@ import { ListItemText } from "./components/List/components/ListItemText/ListItem
 import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
 import { Select } from "./components/Select/Select.js";
 import { selectPropLabelAlign, selectPropLabelPlacement, selectPropSelectedTagsOverflow } from "./components/Select/types.js";
-import { Divider } from "./components/Divider/Divider.js";
+import { SelectNext } from "./components/SelectNext/Select.js";
+import { selectNextPropLabelAlign, selectNextPropLabelPlacement, selectNextPropSelectedTagsOverflow } from "./components/SelectNext/types.js";
+import { Divider, DividerNode } from "./components/Divider/Divider.js";
 import { dividerPropDisplay } from "./components/Divider/types.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
@@ -111,6 +113,8 @@ import { AccordionStateContext } from "./components/Accordion/AccordionStateCont
 import { ContentPanel } from "./components/ContenPanel/ContentPanel.js";
 import { ContentPanelContainer } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js";
 import { ContentPanelContainerContext } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.js";
+import { Navbar, NavbarComponent } from "./components/Navbar/Navbar.js";
+import { navbarPropVariant } from "./components/Navbar/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -143,6 +147,7 @@ export {
   DatePicker,
   DatePickerRender,
   Divider,
+  DividerNode,
   FlexBox,
   Form,
   FormContext,
@@ -173,6 +178,8 @@ export {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Navbar,
+  NavbarComponent,
   Popover,
   PopoverContent,
   PopoverFooter,
@@ -187,6 +194,7 @@ export {
   RouterProvider,
   SearchInput,
   Select,
+  SelectNext,
   SidePanel,
   SidePanelContent,
   SidePanelFooter,
@@ -253,6 +261,7 @@ export {
   inputPropLabelPlacement,
   inputPropVariant,
   modalPropSize,
+  navbarPropVariant,
   popoverPropPlacement,
   popoverPropSize,
   popoverPropType,
@@ -268,6 +277,9 @@ export {
   searchInputPropLabelAlign,
   searchInputPropLabelPlacement,
   searchInputPropVariant,
+  selectNextPropLabelAlign,
+  selectNextPropLabelPlacement,
+  selectNextPropSelectedTagsOverflow,
   selectPropLabelAlign,
   selectPropLabelPlacement,
   selectPropSelectedTagsOverflow,