@moysklad/uikit 28.1.0 → 31.20.0

package/README.md

@@ -57,6 +57,7 @@ ReactDOM.render(
 - AutoComplete
 - Badge
 - Banner
+- BentoBlock
 - BodyL
 - BodyText
 - BodyTextStrong
@@ -70,12 +71,13 @@ ReactDOM.render(
 - Chip
 - Counter
 - Datepicker
+- DateRange
 - Dot
 - Dropdown
+- EditableDate
 - EditableTitle
 - EmptyState
 - EmptyStateLarge
-- FieldRow
 - FileUploader
 - H1
 - H2
@@ -87,16 +89,19 @@ ReactDOM.render(
 - HStack
 - ImagePreview
 - Indicator
-- Info
+- Informer
 - Input
-- InputClear
 - InputUnit
 - Label
 - LabelValue
+- LabelValueCheckbox
 - LabelValueDate
+- LabelValueFile
 - LabelValueInput
+- LabelValueLink
 - LabelValueSelect
 - LabelValueTextfield
+- Layout
 - Link
 - Listing
 - MentionsTextfield
@@ -104,6 +109,7 @@ ReactDOM.render(
 - Multiselect
 - OverlayActions
 - Pagination
+- Panel
 - Progressbar
 - Quantity
 - Radiobutton
@@ -117,6 +123,7 @@ ReactDOM.render(
 - Skeleton
 - Snackbar
 - Spinner
+- StatusBadge
 - Switch
 - Tabs
 - Text
@@ -125,4 +132,5 @@ ReactDOM.render(
 - Tooltip
 - Typography
 - VerticalTab
+- ViewersStack
 - VStack

package/dist/colorVariables.css

@@ -18,6 +18,7 @@
         --light-grey-alpha-8: #84a0ca14;
         --light-grey-alpha-10: #84a0ca1a;
         --light-grey-alpha-12: #84a0ca1f;
+        --light-blue-50: #dff0fe;
         --light-blue-100: #bfddf7bf;
         --light-blue-200: #b9d3f0cc;
         --light-blue-350: #b5cae8f2;
@@ -65,6 +66,7 @@
         --bgd-grey: var(--light-grey-100);
         --bgd-secondary: var(--light-grey-200);
         --bgd-overlay: #01040b5c;
+        --bgd-accent: var(--light-blue-50);
         --button-primary-normal: var(--product-blue-700);
         --button-primary-hover: var(--product-blue-600);
         --button-primary-focus: var(--product-blue-500);
@@ -77,13 +79,13 @@
         --button-secondary-disabled: var(--light-grey-100);
         --border-normal: var(--light-grey-400);
         --border-hover: var(--dark-grey-grey-800);
+        --border-focused: var(--dark-grey-dark-900);
         --border-disable: var(--light-grey-200);
         --border-accent: var(--product-blue-700);
         --border-critical: var(--colorful-red-600);
         --elements-normal: var(--dark-grey-grey-800);
         --elements-hover: var(--dark-grey-dark-900);
         --elements-disable: var(--light-grey-400);
-        --elements-disabled: var(--dark-grey-grey-500);
         --elements-inactive: var(--dark-grey-grey-500);
         --elements-accent: var(--product-blue-700);
         --elements-positive: var(--colorful-green-600);
@@ -170,6 +172,36 @@
         --status-black-01-bg: #c5c7cc;
       }
     }
+
+    @layer gwt-status {
+      :root {
+        --gwt-statuses-grey: #999;
+        --gwt-statuses-red: #e92919;
+        --gwt-statuses-orange: #e68116;
+        --gwt-statuses-brown: #694b1e;
+        --gwt-statuses-yellow-green: #bdae00;
+        --gwt-statuses-lime-green: #a2c617;
+        --gwt-statuses-mint-green: #86aa60;
+        --gwt-statuses-green: #008739;
+        --gwt-statuses-sky-blue: #85c6de;
+        --gwt-statuses-blue: #009fe3;
+        --gwt-statuses-dusty-blue: #427081;
+        --gwt-statuses-dark-blue: #00499a;
+        --gwt-statuses-pink: #ec619f;
+        --gwt-statuses-violet: #a466bd;
+        --gwt-statuses-dark-red: #8d1430;
+        --gwt-statuses-black: #000;
+      }
+    }
+
+    @layer viewers-stack {
+      :root {
+        --viewers-stack-green: #bae86b;
+        --viewers-stack-yellow: #ffcc71;
+        --viewers-stack-pink: #ffcad0;
+        --viewers-stack-violet: #b9aaff;
+      }
+    }
   }
 }
 

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { IHasTabIndex, IHasTestId } from '../../common/types';
-import type { ISelectOption } from '../Select/types';
+import type { IRenderActionsOptions, ISelectOption } from '../Select/types';
 import type { IRenderDropdownContentOptions, RenderInputOptions } from './type';
 export interface AutoCompleteProps<T, R> extends IHasTestId, IHasTabIndex {
     /** @deprecated задается через компонент в renderInput **/
@@ -25,8 +25,10 @@ export interface AutoCompleteProps<T, R> extends IHasTestId, IHasTabIndex {
     renderInput: ({ inputId, ref, onOpen, onClose, onChange, }: RenderInputOptions<R>) => ReactNode;
     renderDropdownContent?: (options: IRenderDropdownContentOptions<T>) => ReactNode;
     helpComponent?: ReactNode;
+    renderDropdownActions?: (options: IRenderActionsOptions) => ReactNode;
+    maxDropdownHeight?: number;
 }
 export declare const AutoComplete: {
-    <T, R extends HTMLElement>({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY, offsetX, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, }: AutoCompleteProps<T, R>): import("react/jsx-runtime").JSX.Element;
+    <T, R extends HTMLElement>({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY, offsetX, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, renderDropdownActions, maxDropdownHeight, }: AutoCompleteProps<T, R>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/AutoComplete/AutoComplete.js

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../common/css/cn.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
 import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Info } from "../Info/Info.js";
 import { Label } from "../Label/Label.js";
 import { OptionsList } from "../Select/OptionsList/OptionsList.js";
 import { useId } from "../../hooks/useId/index.js";
+import { DropdownActionsContainer } from "../Select/DropdownActionsContainer/DropdownActionsContainer.js";
+import { useDropdownPadding } from "../Select/useDropdownPadding.js";
 import AutoComplete_module from "./AutoComplete.module.js";
-const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY = 0, offsetX = 0, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id })=>{
+const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY = 0, offsetX = 0, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, renderDropdownActions, maxDropdownHeight })=>{
     const [cursor, setCursor] = useState(null);
     const inputId = useId(id);
     const { open, triggerRef, handleClose, handleOpen, triggerAriaProps: baseTriggerAriaProps, dropdownAriaProps } = useDropdown({
@@ -27,6 +29,7 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         open,
         options
     ]);
+    const { scrollPaddings, dropdownActionsContainerRefCb } = useDropdownPadding();
     useEffect(()=>{
         const triggerElement = triggerRef.current;
         if (!triggerElement) return;
@@ -38,15 +41,6 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         listboxTriggerAriaProps,
         triggerRef
     ]);
-    const getDropdownStyle = ()=>{
-        const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
-        if (renderDropdownContent) return {
-            minWidth: triggerWidth
-        };
-        return {
-            width: triggerWidth
-        };
-    };
     const handleSelect = useCallback((option)=>{
         if (!option) return;
         onSelectOption?.(option);
@@ -56,6 +50,17 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         handleClose,
         onSelectOption
     ]);
+    const getDropdownStyle = ()=>{
+        const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
+        if (renderDropdownContent) return {
+            minWidth: triggerWidth,
+            ...scrollPaddings
+        };
+        return {
+            width: triggerWidth,
+            ...scrollPaddings
+        };
+    };
     const handleMouseDown = useCallback((e, option)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -101,7 +106,7 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
                 warning: warning,
                 disabled: disabled
             }),
-            options && /*#__PURE__*/ jsx(Dropdown, {
+            options && /*#__PURE__*/ jsxs(Dropdown, {
                 ...dropdownAriaProps,
                 open: open,
                 triggerRef: triggerRef,
@@ -112,26 +117,35 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
                 className: dropdownClassName,
                 style: getDropdownStyle(),
                 onClose: handleClose,
-                children: renderDropdownContent ? renderDropdownContent({
-                    cursor,
-                    testId,
-                    listboxId,
-                    options,
-                    onSelect: handleSelect,
-                    onMouseDown: handleMouseDown,
-                    onSetCursor: setCursor
-                }) : /*#__PURE__*/ jsx(OptionsList, {
-                    listboxId: listboxId,
-                    skipSelectOnTab: true,
-                    items: options,
-                    optionClassName: optionClassName,
-                    onSelect: handleSelect,
-                    onMouseDown: handleMouseDown,
-                    testId: testId,
-                    searchable: false,
-                    cursor: cursor,
-                    onSetCursor: setCursor
-                })
+                maxHeight: maxDropdownHeight,
+                children: [
+                    renderDropdownContent ? renderDropdownContent({
+                        cursor,
+                        testId,
+                        listboxId,
+                        options,
+                        onSelect: handleSelect,
+                        onMouseDown: handleMouseDown,
+                        onSetCursor: setCursor
+                    }) : /*#__PURE__*/ jsx(OptionsList, {
+                        listboxId: listboxId,
+                        skipSelectOnTab: true,
+                        items: options,
+                        optionClassName: optionClassName,
+                        onSelect: handleSelect,
+                        onMouseDown: handleMouseDown,
+                        testId: testId,
+                        searchable: false,
+                        cursor: cursor,
+                        onSetCursor: setCursor
+                    }),
+                    renderDropdownActions && /*#__PURE__*/ jsx(DropdownActionsContainer, {
+                        ref: dropdownActionsContainerRefCb,
+                        children: renderDropdownActions({
+                            closeDropdown: handleClose
+                        })
+                    })
+                ]
             })
         ]
     });

package/dist/components/Badge/Badge.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { Help } from "../Help/Help.js";
+import { Help, HelpSize } from "../Help/Help.js";
 import { Hint } from "../Hint/Hint.js";
 import { Text, TextColor } from "../Text/Text.js";
 import { Placement } from "../Tooltip/Tooltip.js";
-import { Support12Icon } from "../../icon/index.js";
 import Badge_module from "./Badge.module.js";
 const badgeColors = {
     green: 'green',
@@ -54,7 +53,7 @@ const Badge = ({ icon, label, labelClassName, help, className, variant, hintPlac
                 help && /*#__PURE__*/ jsx(Help, {
                     testId: "badge-help",
                     className: Badge_module.help,
-                    icon: /*#__PURE__*/ jsx(Support12Icon, {}),
+                    size: HelpSize.S,
                     popup: /*#__PURE__*/ jsx(Text.Body, {
                         children: help
                     }),

package/dist/components/Badge/Badge_module.css

@@ -7,8 +7,8 @@
   padding: 0 8px;
 }
 
-.badge-gtxv4j .help-eK4Uwn svg path[stroke], .badge-gtxv4j .help-eK4Uwn:hover svg path[stroke] {
-  stroke: currentColor;
+.help-eK4Uwn:not(:hover, :active, :focus-visible, [data-visible="true"]) {
+  color: inherit;
 }
 
 .content-CwHzRb {
@@ -16,7 +16,6 @@
   align-items: center;
   gap: 4px;
   display: flex;
-  overflow: hidden;
 }
 
 .content-CwHzRb > svg {

package/dist/components/BentoBlock/BentoBlock.d.ts

@@ -0,0 +1,15 @@
+import { type ElementRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type ValueOf } from '../../common';
+import { BentoBlockPaddingVariant, BentoBlockTag } from './consts';
+type BentoBlockTagValue = ValueOf<typeof BentoBlockTag>;
+type DefaultBentoBlockTagValue = (typeof BentoBlockTag)['div'];
+export interface BentoBlockProps<Tag extends BentoBlockTagValue = DefaultBentoBlockTagValue> extends HTMLAttributes<HTMLDivElement> {
+    as?: Tag;
+    paddingVariant?: ValueOf<typeof BentoBlockPaddingVariant>;
+    containerClassName?: string;
+    testId?: string;
+}
+export declare const BentoBlock: <Tag extends BentoBlockTagValue = DefaultBentoBlockTagValue>(props: BentoBlockProps<Tag> & {
+    ref?: Ref<ElementRef<Tag>>;
+}) => ReactNode;
+export { BentoBlockPaddingVariant, BentoBlockTag } from './consts';

package/dist/components/BentoBlock/BentoBlock.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+import { getOptionalTestId } from "../../common/index.js";
+import { cn } from "../../common/css/index.js";
+import { BentoBlockPaddingVariant, BentoBlockTag } from "./consts.js";
+import BentoBlock_module from "./BentoBlock.module.js";
+const ForwardedRefBentoBlock = /*#__PURE__*/ forwardRef(({ as: element = BentoBlockTag.div, paddingVariant = BentoBlockPaddingVariant.P20, containerClassName, testId, ...props }, ref)=>/*#__PURE__*/ createElement(element, {
+        ...props,
+        ref,
+        'data-test-id': testId,
+        className: cn(BentoBlock_module.container, BentoBlock_module[paddingVariant], containerClassName)
+    }, /*#__PURE__*/ jsx("div", {
+        className: cn(BentoBlock_module.scrollContainer, props.className),
+        style: props.style,
+        "data-test-id": getOptionalTestId(testId, 'scroll-container'),
+        children: props.children
+    })));
+ForwardedRefBentoBlock.displayName = 'BentoBlock';
+const BentoBlock = ForwardedRefBentoBlock;
+export { BentoBlock, BentoBlockPaddingVariant, BentoBlockTag };

package/dist/components/BentoBlock/BentoBlock.module.js

@@ -0,0 +1,9 @@
+import "./BentoBlock_module.css";
+const BentoBlock_module = {
+    container: "container-xzbFVY",
+    p12: "p12-_3Iki0",
+    p16: "p16-ef7B_k",
+    p20: "p20-Xgd0vH",
+    scrollContainer: "scrollContainer-_5IBjn"
+};
+export default BentoBlock_module;

package/dist/components/BentoBlock/BentoBlock_module.css

@@ -0,0 +1,50 @@
+.container-xzbFVY {
+  --bento-padding: 20px;
+  --bento-scrollbar-width: 8px;
+  --bento-right-padding: calc((var(--bento-padding) - var(--bento-scrollbar-width)) / 2);
+  padding: var(--bento-padding);
+  padding-right: var(--bento-right-padding);
+  background-color: var(--bgd-white, #fff);
+  border-radius: 12px;
+  flex-direction: column;
+  display: flex;
+}
+
+.p12-_3Iki0 {
+  --bento-padding: 12px;
+}
+
+.p16-ef7B_k {
+  --bento-padding: 16px;
+}
+
+.p20-Xgd0vH {
+  --bento-padding: 20px;
+}
+
+.scrollContainer-_5IBjn {
+  scrollbar-gutter: stable;
+  padding-right: calc(var(--bento-right-padding) + var(--bento-scrollbar-width));
+  overflow: auto;
+}
+
+@supports selector(::-webkit-scrollbar) {
+  .scrollContainer-_5IBjn {
+    padding-right: var(--bento-right-padding);
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar {
+    width: var(--bento-scrollbar-width);
+    height: var(--bento-scrollbar-width);
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar-thumb {
+    background-color: var(--light-grey-400);
+    border-radius: 8px;
+  }
+}
+

package/dist/components/BentoBlock/consts.d.ts

@@ -0,0 +1,14 @@
+export declare const BentoBlockPaddingVariant: {
+    readonly P12: "p12";
+    readonly P16: "p16";
+    readonly P20: "p20";
+};
+export declare const BentoBlockTag: {
+    div: "div";
+    section: "section";
+    article: "article";
+    aside: "aside";
+    header: "header";
+    footer: "footer";
+    nav: "nav";
+};

package/dist/components/BentoBlock/consts.js

@@ -0,0 +1,15 @@
+const BentoBlockPaddingVariant = {
+    P12: 'p12',
+    P16: 'p16',
+    P20: 'p20'
+};
+const BentoBlockTag = {
+    div: 'div',
+    section: 'section',
+    article: 'article',
+    aside: 'aside',
+    header: 'header',
+    footer: 'footer',
+    nav: 'nav'
+};
+export { BentoBlockPaddingVariant, BentoBlockTag };

package/dist/components/BottomSheet/BottomSheet.js

@@ -3,12 +3,12 @@ import { memo, useCallback, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useLatestValue } from "@dnd-kit/utilities";
 import { AnimatePresence, motion, useDragControls } from "framer-motion";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../common/index.js";
 import { useSheetContext } from "./BottomSheetContextProvider.js";
 import { Text } from "../Text/Text.js";
 import { useMediaQuery } from "../../hooks/index.js";
 import { RemoveCloseIcon16Icon, Support20Icon } from "../../icon/index.js";
+import { debounce } from "../../utils/debounce/debounce.js";
 import { TRANSITION } from "./BottomSheet.constants.js";
 import { BottomSheetBody } from "./BottomSheetBody.js";
 import BottomSheet_module from "./BottomSheet.module.js";
@@ -125,7 +125,7 @@ const BottomSheet = /*#__PURE__*/ memo(({ testId = 'bottomSheet', isOpen, onClos
                 'TEXTAREA'
             ].includes(element.tagName);
         };
-        const scrollIntoActive = lodash_debounce(()=>{
+        const scrollIntoActive = debounce(()=>{
             if (!editableInFocus()) return;
             document.activeElement?.scrollIntoView({
                 block: 'nearest',

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,5 +1,7 @@
 import { type HTMLAttributes } from 'react';
 import { type TextAtomProps } from '../Text/Text.atom';
-type BreadcrumbItemProps = Omit<TextAtomProps, 'variant'> & HTMLAttributes<HTMLSpanElement>;
-export declare const BreadcrumbItem: import("react").MemoExoticComponent<({ className, onClick, ...otherProps }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element>;
-export {};
+export type BreadcrumbItemProps = Omit<TextAtomProps, 'variant'> & HTMLAttributes<HTMLSpanElement> & {
+    charLimitThreshold?: number;
+    hintZIndex?: number;
+};
+export declare const BreadcrumbItem: import("react").MemoExoticComponent<({ className, onClick, charLimitThreshold, hintZIndex, children, ...restProps }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Breadcrumbs/BreadcrumbItem.js

@@ -1,14 +1,45 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useMemo, useRef, useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { TextVariant } from "../Text/Text.js";
+import { HintWithSkip } from "../_shared/HintWithSkip/HintWithSkip.js";
+import { Text, TextColor, TextVariant } from "../Text/Text.js";
 import { TextAtom } from "../Text/Text.atom.js";
+import { Placement } from "../Tooltip/Tooltip.js";
 import Breadcrumbs_module from "./Breadcrumbs.module.js";
-const BreadcrumbItem = /*#__PURE__*/ memo(({ className, onClick, ...otherProps })=>/*#__PURE__*/ jsx(TextAtom, {
-        variant: TextVariant.caption,
-        className: cn(Breadcrumbs_module.item, className, onClick && Breadcrumbs_module.hasClick),
-        onClick: onClick,
-        ...otherProps
-    }));
+const HINT_SHOW_DELAY_SECONDS = 0.3;
+const BreadcrumbItem = /*#__PURE__*/ memo(({ className, onClick, charLimitThreshold, hintZIndex, children, ...restProps })=>{
+    const textElementRef = useRef(null);
+    const [isTextOverflow, setIsTextOverflow] = useState(false);
+    const value = useMemo(()=>{
+        const textValue = children;
+        const isOverflow = 'number' == typeof charLimitThreshold && charLimitThreshold > 0 && textValue.length - charLimitThreshold > 1;
+        setIsTextOverflow(isOverflow);
+        if (isOverflow) return `${textValue.substring(0, charLimitThreshold)}...`;
+        return textValue;
+    }, [
+        children,
+        charLimitThreshold
+    ]);
+    return /*#__PURE__*/ jsx(HintWithSkip, {
+        testId: restProps.testId,
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            colorToken: TextColor.invert,
+            children: children
+        }),
+        skip: !isTextOverflow,
+        placement: Placement.BOTTOM,
+        zIndex: hintZIndex,
+        mouseEnterDelay: HINT_SHOW_DELAY_SECONDS,
+        mouseLeaveDelay: 0,
+        children: /*#__PURE__*/ jsx(TextAtom, {
+            ref: textElementRef,
+            variant: TextVariant.caption,
+            className: cn(Breadcrumbs_module.item, className, onClick && Breadcrumbs_module.hasClick),
+            onClick: onClick,
+            ...restProps,
+            children: value
+        })
+    });
+});
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 export { BreadcrumbItem };

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,10 @@
 import { type FC, type HTMLAttributes } from 'react';
 import { type IHasTestId } from '../../common/types';
 import { BreadcrumbItem } from './BreadcrumbItem';
-export type IBreadcrumbsProps = HTMLAttributes<HTMLDivElement> & IHasTestId;
+export type IBreadcrumbsProps = HTMLAttributes<HTMLDivElement> & IHasTestId & {
+    charLimitThreshold?: number;
+    hintZIndex?: number;
+};
 export declare const Breadcrumbs: FC<IBreadcrumbsProps> & {
     Item: typeof BreadcrumbItem;
 };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,26 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 import { cn } from "../../common/css/cn.js";
 import { Right12Icon } from "../../icon/index.js";
 import { BreadcrumbItem } from "./BreadcrumbItem.js";
 import Breadcrumbs_module from "./Breadcrumbs.module.js";
-const renderBreadcrumbItems = (children)=>{
+const CHAR_LIMIT_THRESHOLD = 40;
+const renderBreadcrumbItems = (children, charLimitThreshold, hintZIndex)=>{
     const childrenArray = Children.toArray(children);
     const lastIndex = childrenArray.length - 1;
     return childrenArray.filter(isValidElement).map((child, idx)=>/*#__PURE__*/ jsxs("div", {
             className: Breadcrumbs_module.itemContainer,
             children: [
-                child,
+                /*#__PURE__*/ cloneElement(child, {
+                    charLimitThreshold,
+                    hintZIndex
+                }),
                 idx !== lastIndex && /*#__PURE__*/ jsx(Right12Icon, {})
             ]
         }, idx));
 };
-const Breadcrumbs = ({ children, className, testId, ...otherProps })=>{
-    const items = renderBreadcrumbItems(children);
+const Breadcrumbs = ({ children, className, testId, charLimitThreshold = CHAR_LIMIT_THRESHOLD, hintZIndex = 1, ...restProps })=>{
+    const items = renderBreadcrumbItems(children, charLimitThreshold, hintZIndex);
     return /*#__PURE__*/ jsx("div", {
         className: cn(Breadcrumbs_module.container, className),
         "data-test-id": testId,
-        ...otherProps,
+        ...restProps,
         children: items
     });
 };

package/dist/components/Button/Button.d.ts

@@ -20,13 +20,17 @@ export declare const ButtonColor: {
     readonly WHITE: "white";
 };
 export type ButtonColorValue = ValueOf<typeof ButtonColor>;
-export interface IButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>, IHasTestId {
+export interface ButtonOwnProps extends IHasTestId {
     variant?: ButtonVariantsValue;
     color?: ButtonColorValue;
     size?: ButtonSizeValue;
+    disabled?: boolean;
     isLoading?: boolean;
     isIconButton?: boolean;
     stretch?: boolean;
     withHorisontalPadding?: boolean;
+    noPadding?: boolean;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<IButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface IButtonProps extends ButtonOwnProps, Omit<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>, keyof ButtonOwnProps> {
+}
+export declare const Button: import("../_shared/utils/polymorphicClickableTypes").ClickableComponent<ButtonOwnProps, "button">;