@koobiq/react-components 0.3.1 → 0.5.0

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 { useFieldContentGroup } 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 } = useFieldContentGroup();
+  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 { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaSelectProps, MultiSelectState, useMultiSelectState } from '@koobiq/react-primitives';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldContentGroupProps } 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,7 +58,11 @@ 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;
@@ -77,10 +70,10 @@ export type SelectProps<T> = ExtendableProps<{
         list?: ListProps<T>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         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/components/Textarea/types.d.ts

@@ -1,9 +1,9 @@
 import type { ComponentRef, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextFieldProps } from '@koobiq/react-primitives';
-import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldContentGroupPropVariant, type FieldErrorProps, type FieldInputProps, type FieldLabelProps } from '../FieldComponents';
 export declare const textareaPropVariant: readonly ["filled", "transparent"];
-export type TextareaPropVariant = (typeof textareaPropVariant)[number];
+export type TextareaPropVariant = FieldContentGroupPropVariant;
 export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
 export type TextareaPropExpand = (typeof textareaPropExpand)[number];
 type TextareaDeprecatedProps = {

package/dist/components/Textarea/types.js

@@ -1,4 +1,5 @@
-const textareaPropVariant = ["filled", "transparent"];
+import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+const textareaPropVariant = fieldContentGroupPropVariant;
 const textareaPropExpand = ["auto-size", "vertical-resize"];
 export {
   textareaPropExpand,

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

@@ -1,7 +1,7 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaTimeFieldProps, TimeValue } from '@koobiq/react-primitives';
 import type { DateInputPropVariant } from '../DateInput';
-import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldContentGroupProps, FieldLabelProps } from '../FieldComponents';
 export type TimePickerProps<T extends TimeValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -25,7 +25,7 @@ export type TimePickerProps<T extends TimeValue> = {
     slotProps?: {
         root?: FieldControlProps;
         label?: FieldLabelProps;
-        group?: FieldInputGroupProps;
+        group?: FieldContentGroupProps;
         caption?: FieldCaptionProps;
         inputDate?: FieldInputDateProps;
         errorMessage?: FieldErrorProps;

package/dist/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './Calendar';
 export * from './DateInput';
 export * from './DatePicker';
 export * from './TimePicker';
+export * from './SearchInput';
 export * from './layout';
 export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

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";
@@ -76,6 +77,8 @@ import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js"
 import { dateInputPropVariant } from "./components/DateInput/types.js";
 import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
 import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker.js";
+import { SearchInput } from "./components/SearchInput/SearchInput.js";
+import { searchInputPropVariant } from "./components/SearchInput/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 {
@@ -126,6 +129,7 @@ export {
   RadioGroupDescription,
   RadioGroupLabel,
   RouterProvider,
+  SearchInput,
   Select,
   SidePanel,
   SidePanelContent,
@@ -177,6 +181,8 @@ export {
   radioGroupPropSize,
   radioPropLabelPlacement,
   radioPropSize,
+  searchInputPropVariant,
+  selectPropSelectedTagsOverflow,
   sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize,