@koobiq/react-components 0.2.2 → 0.3.0

package/dist/components/FieldComponents/FieldSelect/FieldSelect.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
 import type { FieldSelectBaseProps } from './index';
-export declare const FieldSelect: import("@koobiq/react-core").PolyForwardComponent<"button", FieldSelectBaseProps, ElementType>;
-export type FieldSelectProps<As extends ElementType = 'button'> = ComponentPropsWithRef<typeof FieldSelect<As>>;
+export declare const FieldSelect: import("@koobiq/react-core").PolyForwardComponent<"div", FieldSelectBaseProps, ElementType>;
+export type FieldSelectProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldSelect<As>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx, isString, isNumber, isNotNil } from "@koobiq/react-core";
+import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
+import { isPrimitiveNode } from "./utils.js";
 const FieldSelect = polymorphicForwardRef(
   ({
-    as = "button",
+    as = "div",
     isInvalid = false,
     isDisabled = false,
     variant = "filled",
@@ -12,28 +13,31 @@ const FieldSelect = polymorphicForwardRef(
     children,
     className,
     ...other
-  }, ref) => /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ...other,
-      as,
-      isDisabled,
-      "data-slot": "select-value",
-      className: clsx(
-        s.base,
-        s[variant],
-        isInvalid && s.invalid,
-        isDisabled && s.disabled,
-        !isNotNil(children) && s.hasPlaceholder,
-        className
-      ),
-      ref,
-      children: [
-        isString(children) || isNumber(children) ? /* @__PURE__ */ jsx("span", { className: s.content, children }) : children,
-        !isNotNil(children) && /* @__PURE__ */ jsx("span", { className: s.content, children: placeholder })
-      ]
-    }
-  )
+  }, ref) => {
+    const content = children ?? placeholder;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...other,
+        as,
+        isDisabled,
+        "data-slot": "select-value",
+        className: clsx(
+          s.base,
+          s[variant],
+          isInvalid && s.invalid,
+          isDisabled && s.disabled,
+          !isNotNil(children) && s.hasPlaceholder,
+          className
+        ),
+        ref,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: s.hiddenPlaceholder, "aria-hidden": true, children: placeholder }),
+          /* @__PURE__ */ jsx("div", { className: s.container, children: isPrimitiveNode(content) ? /* @__PURE__ */ jsx("span", { className: s.content, children: content }) : children })
+        ]
+      }
+    );
+  }
 );
 FieldSelect.displayName = "FieldSelect";
 export {

package/dist/components/FieldComponents/FieldSelect/FieldSelect.module.css.js

@@ -1,20 +1,26 @@
 const base = "kbq-fieldselect-0f0f5e";
+const container = "kbq-fieldselect-container-422b17";
 const content = "kbq-fieldselect-content-c36142";
 const invalid = "kbq-fieldselect-invalid-db8152";
 const disabled = "kbq-fieldselect-disabled-f0efd4";
 const hasPlaceholder = "kbq-fieldselect-hasPlaceholder-7b7518";
+const hiddenPlaceholder = "kbq-fieldselect-hiddenPlaceholder-a3a36d";
 const s = {
   base,
+  container,
   content,
   invalid,
   disabled,
-  hasPlaceholder
+  hasPlaceholder,
+  hiddenPlaceholder
 };
 export {
   base,
+  container,
   content,
   s as default,
   disabled,
   hasPlaceholder,
+  hiddenPlaceholder,
   invalid
 };

package/dist/components/FieldComponents/FieldSelect/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const isPrimitiveNode: (n: ReactNode) => n is string | number;

package/dist/components/FieldComponents/FieldSelect/utils.js

@@ -0,0 +1,4 @@
+const isPrimitiveNode = (n) => typeof n === "string" || typeof n === "number";
+export {
+  isPrimitiveNode
+};

package/dist/components/List/components/ListItemText/ListItemText.d.ts

@@ -1,16 +1,2 @@
-import type { ComponentRef, ReactNode } from 'react';
-import type { ExtendableComponentPropsWithRef, DataAttributeProps } from '@koobiq/react-core';
-import type { TypographyProps } from '../../../Typography';
-export type ListItemTextRef = ComponentRef<'div'>;
-export type ListItemTextProps = ExtendableComponentPropsWithRef<{
-    /** The content of the component. */
-    children?: ReactNode;
-    /** The helper text content. */
-    caption?: ReactNode;
-    /** The props used for each slot inside. */
-    slotProps?: {
-        text?: TypographyProps;
-        caption?: TypographyProps;
-    };
-} & DataAttributeProps, 'div'>;
-export declare const ListItemText: import("react").ForwardRefExoticComponent<Omit<ListItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { ListItemTextProps } from './types';
+export declare const ListItemText: import("react").ForwardRefExoticComponent<Omit<ListItemTextProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/List/components/ListItemText/ListItemText.js

@@ -5,7 +5,7 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import s from "./ListItemText.module.css.js";
 import { Typography } from "../../../Typography/Typography.js";
 const ListItemText = forwardRef(
-  ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(s.base, className), ...other, ref, children: [
+  ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("span", { className: clsx(s.base, className), ...other, ref, children: [
     /* @__PURE__ */ jsx(Typography, { as: "span", align: "start", ellipsis: true, ...slotProps?.text, children }),
     isNotNil(caption) && /* @__PURE__ */ jsx(
       Typography,

package/dist/components/List/components/ListItemText/index.d.ts

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

package/dist/components/List/components/ListItemText/types.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TypographyProps } from '../../../Typography';
+export type ListItemTextRef = ComponentRef<'span'>;
+export type ListItemTextProps = ExtendableComponentPropsWithRef<{
+    /** The content of the component. */
+    children?: ReactNode;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        text?: TypographyProps;
+        caption?: TypographyProps;
+    };
+} & DataAttributeProps, 'span'>;

package/dist/components/Select/Select.js

@@ -128,7 +128,7 @@ function SelectRender(props, ref) {
       startAddon,
       endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
         endAddon,
-        /* @__PURE__ */ jsx(IconChevronDownS16, {})
+        /* @__PURE__ */ jsx(IconChevronDownS16, { className: s.chevron })
       ] }),
       isInvalid,
       isDisabled,

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

@@ -1,18 +1,21 @@
 const base = "kbq-select-6d31ad";
 const fullWidth = "kbq-select-fullWidth-1dfc13";
 const addon = "kbq-select-addon-cbc524";
+const chevron = "kbq-select-chevron-0b4fa3";
 const popover = "kbq-select-popover-79fc05";
 const list = "kbq-select-list-8ffac0";
 const s = {
   base,
   fullWidth,
   addon,
+  chevron,
   popover,
   list
 };
 export {
   addon,
   base,
+  chevron,
   s as default,
   fullWidth,
   list,

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

@@ -67,7 +67,7 @@ export type SelectProps<T> = ExtendableProps<{
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** Ref to the control */
-    ref?: Ref<HTMLButtonElement>;
+    ref?: Ref<HTMLDivElement>;
     /** A render function for displaying the selected value. */
     renderValue?: (props: Node<T> | null) => ReactElement;
     /** The props used for each slot inside. */
@@ -82,5 +82,5 @@ export type SelectProps<T> = ExtendableProps<{
     };
 } & SelectDeprecatedProps, Omit<AriaSelectProps<T>, 'description' | 'validationState'>>;
 export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
-export type SelectRef = ComponentRef<'button'>;
+export type SelectRef = ComponentRef<'div'>;
 export {};

package/dist/components/TagGroup/components/Tag/Tag.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { useLocalizedStringFormatter, useFocusRing, useHover, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { 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 "./Tag.module.css.js";
 import { matchVariantToCloseButton } from "./utils.js";
 import { IconButton } from "../../../IconButton/IconButton.js";
@@ -13,7 +12,6 @@ function Tag(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
   });
@@ -53,12 +51,11 @@ function Tag(props) {
   );
   const removeButtonProps = mergeProps(
     {
+      isDisabled,
       tabIndex: -1,
       isCompact: true,
-      isDisabled,
       className: s.cancelIcon,
-      variant: matchVariantToCloseButton[variant],
-      "aria-label": stringFormatter.format("close")
+      variant: matchVariantToCloseButton[variant]
     },
     removeButtonPropsAria,
     slotProps?.removeIcon

package/dist/style.css

@@ -3104,6 +3104,10 @@
   pointer-events: none;
 }
 
+.kbq-select-addon-cbc524 > :not(.kbq-select-chevron-0b4fa3) {
+  pointer-events: all;
+}
+
 .kbq-select-popover-79fc05 {
   border-radius: var(--kbq-size-s);
   opacity: 0;
@@ -3128,7 +3132,6 @@
   --field-input-color: var(--kbq-foreground-contrast);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-  gap: var(--kbq-size-s);
   cursor: pointer;
   box-sizing: border-box;
   border-radius: inherit;
@@ -3136,7 +3139,6 @@
   color: var(--field-input-color);
   background: var(--field-input-bg-color);
   min-block-size: var(--field-control-size-height);
-  padding-block: 0;
   padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
   transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
   font-size: var(--kbq-typography-text-normal-font-size);
@@ -3150,12 +3152,19 @@
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
   border: none;
   outline: none;
+  flex-direction: column;
+  display: flex;
+}
+
+.kbq-fieldselect-container-422b17 {
   align-items: center;
+  gap: var(--kbq-size-xs);
+  block-size: 100%;
   display: flex;
 }
 
 .kbq-fieldselect-content-c36142 {
-  text-align: start;
+  padding-block: var(--kbq-size-xs);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -3176,6 +3185,15 @@
 .kbq-fieldselect-hasPlaceholder-7b7518 {
   --field-input-color: var(--field-input-placeholder-color);
 }
+
+.kbq-fieldselect-hiddenPlaceholder-a3a36d {
+  text-align: start;
+  visibility: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  block-size: 0;
+  overflow: hidden;
+}
 .kbq-divider-16da20 {
   border-style: solid;
   border-color: var(--kbq-line-contrast-less);
@@ -3401,15 +3419,14 @@
   --tag-outline-width: var(--kbq-size-3xs);
   cursor: default;
   vertical-align: top;
-  white-space: nowrap;
   box-sizing: border-box;
+  max-inline-size: 100%;
   color: var(--tag-color);
   align-items: center;
   gap: var(--kbq-size-3xs);
   block-size: var(--kbq-size-xxl);
   border-radius: var(--kbq-size-xxs);
   padding-inline: var(--kbq-size-xxs);
-  min-inline-size: var(--kbq-size-xxl);
   background-color: var(--tag-bg-color);
   outline-offset: calc(-1 * var(--tag-outline-width) / 2);
   outline: var(--tag-outline-width) solid var(--tag-outline-color);
@@ -3422,13 +3439,14 @@
 .kbq-tag-content-fe481b {
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-inline-size: 100%;
   margin-inline: var(--kbq-size-3xs);
   overflow: hidden;
 }
 
 .kbq-tag-icon-1e369b {
   color: var(--tag-icon-color);
-  flex-shrink: 0;
+  flex: none;
   justify-content: center;
   align-items: center;
   margin-inline-start: var(--kbq-size-3xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.2.2",
-    "@koobiq/react-core": "0.2.2",
-    "@koobiq/react-primitives": "0.2.2",
-    "@koobiq/react-icons": "0.2.2"
+    "@koobiq/logger": "0.3.0",
+    "@koobiq/react-icons": "0.3.0",
+    "@koobiq/react-core": "0.3.0",
+    "@koobiq/react-primitives": "0.3.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

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

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