ydb-embedded-ui 18.6.0 → 19.0.0

package/dist/components/Drawer/Drawer.js

@@ -6,7 +6,7 @@ import { debounce } from 'lodash';
 import { cn } from '../../utils/cn';
 import { useSetting } from '../../utils/hooks/useSetting';
 import { CopyLinkButton } from '../CopyLinkButton/CopyLinkButton';
-import { useDrawerContext } from './DrawerContext';
+import { isClickInRightInset, useDrawerContextInternal } from './DrawerContext';
 import { normalizeDrawerWidthFromResize, normalizeDrawerWidthFromSavedString, } from './DrawerWidthUtils';
 import './Drawer.scss';
 const DEFAULT_DRAWER_WIDTH_PERCENTS = 60;
@@ -18,7 +18,8 @@ const DrawerPaneContentWrapper = ({ isVisible, onClose, children, drawerId = 'dr
     const [savedWidthString, setSavedWidthString] = useSetting(storageKey);
     const [userDrawerWidth, setUserDrawerWidth] = React.useState(undefined);
     const drawerRef = React.useRef(null);
-    const { containerWidth, itemContainerRef } = useDrawerContext();
+    const { containerWidth, itemContainerRef, rightInset, visibleRightInset } = useDrawerContextInternal();
+    const availableWidth = Math.max(0, containerWidth - visibleRightInset);
     const derivedDrawerWidth = React.useMemo(() => {
         return normalizeDrawerWidthFromSavedString({
             savedWidthString,
@@ -29,26 +30,30 @@ const DrawerPaneContentWrapper = ({ isVisible, onClose, children, drawerId = 'dr
             defaultPx: DEFAULT_DRAWER_WIDTH,
         });
     }, [containerWidth, defaultWidth, isPercentageWidth, savedWidthString]);
-    const drawerWidth = userDrawerWidth !== null && userDrawerWidth !== void 0 ? userDrawerWidth : derivedDrawerWidth;
+    const requestedDrawerWidth = userDrawerWidth !== null && userDrawerWidth !== void 0 ? userDrawerWidth : derivedDrawerWidth;
     // Calculate drawer width based on container width percentage if specified
-    const calculatedWidth = React.useMemo(() => {
+    const requestedWidth = React.useMemo(() => {
         if (isPercentageWidth && containerWidth > 0) {
-            return Math.round((containerWidth * (drawerWidth || DEFAULT_DRAWER_WIDTH_PERCENTS)) / 100);
+            return Math.round((containerWidth * (requestedDrawerWidth || DEFAULT_DRAWER_WIDTH_PERCENTS)) / 100);
         }
-        return drawerWidth || DEFAULT_DRAWER_WIDTH;
-    }, [containerWidth, isPercentageWidth, drawerWidth]);
+        return requestedDrawerWidth || DEFAULT_DRAWER_WIDTH;
+    }, [containerWidth, isPercentageWidth, requestedDrawerWidth]);
+    const calculatedWidth = Math.min(requestedWidth, availableWidth);
     const drawerOverlayStyle = React.useMemo(() => {
         return {
             overflow: 'hidden',
-            ...(containerWidth > 0 ? { width: containerWidth } : {}),
+            width: availableWidth,
         };
-    }, [containerWidth]);
+    }, [availableWidth]);
     React.useEffect(() => {
         if (!detectClickOutside || !isVisible) {
             return undefined;
         }
         const handleClickOutside = (event) => {
-            if (event._capturedInsideDrawer || !event.isTrusted) {
+            var _a;
+            if (event._capturedInsideDrawer ||
+                !event.isTrusted ||
+                isClickInRightInset(event, (_a = itemContainerRef === null || itemContainerRef === void 0 ? void 0 : itemContainerRef.current) !== null && _a !== void 0 ? _a : null, rightInset)) {
                 return;
             }
             if (drawerRef.current && !drawerRef.current.contains(event.target)) {
@@ -64,7 +69,7 @@ const DrawerPaneContentWrapper = ({ isVisible, onClose, children, drawerId = 'dr
             window.clearTimeout(listenerTimeoutId);
             document.removeEventListener('click', handleClickOutside);
         };
-    }, [isVisible, onClose, detectClickOutside]);
+    }, [detectClickOutside, isVisible, itemContainerRef, onClose, rightInset]);
     const saveWidthDebounced = React.useMemo(() => {
         return debounce((value) => setSavedWidthString(value), SAVE_DEBOUNCE_MS);
     }, [setSavedWidthString]);
@@ -95,7 +100,7 @@ const DrawerPaneContentWrapper = ({ isVisible, onClose, children, drawerId = 'dr
     if (!itemContainer) {
         return null;
     }
-    return (_jsx(GravityDrawer, { qa: drawerId, open: isVisible, onOpenChange: handleOpenChange, placement: direction, hideVeil: hideVeil, className: b('container', className), contentClassName: b('item'), style: drawerOverlayStyle, container: itemContainer, resizable: true, maxSize: containerWidth || undefined, size: calculatedWidth, onResizeEnd: handleResizeDrawer, disableBodyScrollLock: true, disableOutsideClick: detectClickOutside, floatingRef: detectClickOutside ? drawerRef : undefined, children: _jsx("div", { className: b('click-handler'), onClickCapture: handleClickInsideDrawer, children: children }) }));
+    return (_jsx(GravityDrawer, { qa: drawerId, open: isVisible, onOpenChange: handleOpenChange, placement: direction, hideVeil: hideVeil, className: b('container', className), contentClassName: b('item'), style: drawerOverlayStyle, container: itemContainer, resizable: true, maxSize: availableWidth, size: calculatedWidth, onResizeEnd: handleResizeDrawer, disableBodyScrollLock: true, disableOutsideClick: detectClickOutside, floatingRef: detectClickOutside ? drawerRef : undefined, children: _jsx("div", { className: b('click-handler'), onClickCapture: handleClickInsideDrawer, children: children }) }));
 };
 export const DrawerWrapper = ({ children, renderDrawerContent, isDrawerVisible, onCloseDrawer, drawerId, storageKey, defaultWidth, direction, className, detectClickOutside, isPercentageWidth, drawerControls = [], title, headerClassName, hideVeil, }) => {
     const onCloseDrawerRef = React.useRef(onCloseDrawer);

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/DrawerContext.d.ts

@@ -3,12 +3,21 @@ import './Drawer.scss';
 export interface DrawerContextType {
     containerWidth: number;
     itemContainerRef: React.RefObject<HTMLDivElement> | null;
+    rightInset: number;
     setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
+    setRightInset: React.Dispatch<React.SetStateAction<number>>;
+}
+interface DrawerInternalContextType extends DrawerContextType {
+    visibleRightInset: number;
 }
 interface DrawerContextProviderProps {
     children: React.ReactNode;
     className?: string;
+    rightInset?: number;
+    onRightInsetChange?: (rightInset: number) => void;
 }
-export declare const DrawerContextProvider: ({ children, className }: DrawerContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function isClickInRightInset(event: Pick<MouseEvent, 'clientX' | 'clientY'>, itemContainer: HTMLElement | null, rightInset: number): boolean;
+export declare const DrawerContextProvider: ({ children, className, rightInset: controlledRightInset, onRightInsetChange, }: DrawerContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useDrawerContext: () => DrawerContextType;
+export declare const useDrawerContextInternal: () => DrawerInternalContextType;
 export {};

package/dist/components/Drawer/DrawerContext.js

@@ -1,17 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../utils/cn';
+import { getVisibleRightInset } from './DrawerWidthUtils';
 import './Drawer.scss';
 const b = cn('ydb-drawer');
 const DrawerContext = React.createContext({
     containerWidth: 0,
     itemContainerRef: null,
+    rightInset: 0,
     setContainerWidth: () => { },
+    setRightInset: () => { },
+    visibleRightInset: 0,
 });
-export const DrawerContextProvider = ({ children, className }) => {
-    const [containerWidth, setContainerWidth] = React.useState(0);
+function normalizeRightInset(rightInset) {
+    return Number.isFinite(rightInset) ? Math.max(0, rightInset) : 0;
+}
+export function isClickInRightInset(event, itemContainer, rightInset) {
+    if (rightInset <= 0 || !itemContainer) {
+        return false;
+    }
+    const providerContainer = itemContainer.parentElement;
+    if (!providerContainer) {
+        return false;
+    }
+    const itemRight = itemContainer.getBoundingClientRect().right;
+    const providerRect = providerContainer.getBoundingClientRect();
+    return (event.clientX >= itemRight &&
+        event.clientX <= providerRect.right &&
+        event.clientY >= providerRect.top &&
+        event.clientY <= providerRect.bottom);
+}
+export const DrawerContextProvider = ({ children, className, rightInset: controlledRightInset, onRightInsetChange, }) => {
+    const [measuredContainerWidth, setContainerWidth] = React.useState(0);
+    const [rightViewportOverflow, setRightViewportOverflow] = React.useState(0);
+    const [internalRightInset, setInternalRightInset] = React.useState(0);
     const containerRef = React.useRef(null);
     const itemContainerRef = React.useRef(null);
+    const rightInset = normalizeRightInset(controlledRightInset !== null && controlledRightInset !== void 0 ? controlledRightInset : internalRightInset);
+    const rightInsetRef = React.useRef(rightInset);
+    rightInsetRef.current = rightInset;
+    const setRightInset = React.useCallback((nextRightInset) => {
+        const nextValue = normalizeRightInset(typeof nextRightInset === 'function'
+            ? nextRightInset(rightInsetRef.current)
+            : nextRightInset);
+        rightInsetRef.current = nextValue;
+        if (controlledRightInset === undefined) {
+            setInternalRightInset(nextValue);
+        }
+        onRightInsetChange === null || onRightInsetChange === void 0 ? void 0 : onRightInsetChange(nextValue);
+    }, [controlledRightInset, onRightInsetChange]);
     React.useEffect(() => {
         if (!containerRef.current) {
             return undefined;
@@ -22,7 +59,9 @@ export const DrawerContextProvider = ({ children, className }) => {
                 const visibleLeft = Math.max(containerRect.left, 0);
                 const visibleRight = Math.min(containerRect.right, window.innerWidth);
                 const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+                const nextRightViewportOverflow = Math.max(0, containerRect.right - visibleRight);
                 setContainerWidth(visibleWidth || containerRef.current.clientWidth);
+                setRightViewportOverflow(nextRightViewportOverflow);
             }
         };
         // Set initial width
@@ -30,23 +69,37 @@ export const DrawerContextProvider = ({ children, className }) => {
         // Update width on resize
         const resizeObserver = new ResizeObserver(updateWidth);
         resizeObserver.observe(containerRef.current);
+        window.addEventListener('resize', updateWidth);
         return () => {
             resizeObserver.disconnect();
+            window.removeEventListener('resize', updateWidth);
         };
     }, []);
+    const visibleRightInset = getVisibleRightInset({ rightInset, rightViewportOverflow });
     // Memoize the context value to prevent unnecessary re-renders
     const value = React.useMemo(() => ({
-        containerWidth,
+        containerWidth: measuredContainerWidth,
         setContainerWidth,
         itemContainerRef,
-    }), [containerWidth]);
-    return (_jsx(DrawerContext.Provider, { value: value, children: _jsxs("div", { ref: containerRef, className: b('drawer-container', className), children: [children, _jsx("div", { ref: itemContainerRef, className: b('item-container') })] }) }));
+        rightInset,
+        setRightInset,
+        visibleRightInset,
+    }), [measuredContainerWidth, rightInset, setRightInset, visibleRightInset]);
+    const itemContainerStyle = React.useMemo(() => {
+        if (rightInset === 0) {
+            return undefined;
+        }
+        return { width: `max(0px, calc(100% - ${rightInset}px))` };
+    }, [rightInset]);
+    return (_jsx(DrawerContext.Provider, { value: value, children: _jsxs("div", { ref: containerRef, className: b('drawer-container', className), children: [children, _jsx("div", { ref: itemContainerRef, className: b('item-container'), style: itemContainerStyle })] }) }));
 };
-export const useDrawerContext = () => {
+const useDrawerContextValue = () => {
     const context = React.useContext(DrawerContext);
     if (context === undefined) {
         throw Error('useDrawerContext must be used within a DrawerContextProvider');
     }
     return context;
 };
+export const useDrawerContext = () => useDrawerContextValue();
+export const useDrawerContextInternal = () => useDrawerContextValue();
 //# sourceMappingURL=DrawerContext.js.map

package/dist/components/Drawer/DrawerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContext.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerContext.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;AAQ3B,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAoB;IACzD,cAAc,EAAE,CAAC;IACjB,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAA6B,EAAE,EAAE;IACvF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;gBACvB,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;gBACnE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;gBACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;gBACtE,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC;gBAE7D,iBAAiB,CAAC,YAAY,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YACxE,CAAC;QACL,CAAC,CAAC;QAEF,oBAAoB;QACpB,WAAW,EAAE,CAAC;QAEd,yBAAyB;QACzB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,WAAW,CAAC,CAAC;QACvD,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACR,cAAc,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,8DAA8D;IAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,cAAc;QACd,iBAAiB;QACjB,gBAAgB;KACnB,CAAC,EACF,CAAC,cAAc,CAAC,CACnB,CAAC;IAEF,OAAO,CACH,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,eAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,SAAS,CAAC,aAC9D,QAAQ,EAKT,cAAK,GAAG,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,GAAI,IAC5D,GACe,CAC5B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAsB,EAAE;IACpD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,KAAK,CAAC,8DAA8D,CAAC,CAAC;IAChF,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC"}
+{"version":3,"file":"DrawerContext.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerContext.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/DrawerWidthUtils.d.ts

@@ -1,6 +1,10 @@
 export declare const MIN_DRAWER_WIDTH_PERCENTS = 1;
 export declare const MAX_DRAWER_WIDTH_PERCENTS = 100;
 export declare const MIN_DRAWER_WIDTH_PX = 1;
+export declare function getVisibleRightInset(args: {
+    rightInset: number;
+    rightViewportOverflow: number;
+}): number;
 export declare function normalizeDrawerWidthFromSavedString(args: {
     savedWidthString: string | undefined;
     defaultWidth?: number;

package/dist/components/Drawer/DrawerWidthUtils.js

@@ -5,6 +5,10 @@ export const MIN_DRAWER_WIDTH_PX = 1;
 function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
+export function getVisibleRightInset(args) {
+    const { rightInset, rightViewportOverflow } = args;
+    return Math.max(0, rightInset - Math.max(0, rightViewportOverflow));
+}
 function getFallbackWidth(args) {
     const { defaultWidth, isPercentageWidth, defaultPercents, defaultPx } = args;
     if (defaultWidth !== undefined) {

package/dist/components/Drawer/DrawerWidthUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerWidthUtils.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerWidthUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAC3C,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAC7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAErC,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAClD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,gBAAgB,CAAC,IAKzB;IACG,MAAM,EAAC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC;IAC3E,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,OAAO,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;AAC3D,CAAC;AAED,MAAM,UAAU,mCAAmC,CAAC,IAOnD;IACG,MAAM,EACF,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,SAAS,GACZ,GAAG,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,gBAAgB,CAAC;QAC9B,YAAY;QACZ,iBAAiB;QACjB,eAAe;QACf,SAAS;KACZ,CAAC,CAAC;IAEH,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAC/B,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACrC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,IAAI,iBAAiB,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC,GAAG,EAAE,yBAAyB,EAAE,yBAAyB,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,GAAG,GAAG,mBAAmB,EAAE,CAAC;QAC5B,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IACzC,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC;AAED,MAAM,UAAU,8BAA8B,CAAC,IAI9C;IACG,MAAM,EAAC,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAC,GAAG,IAAI,CAAC;IAEjE,IAAI,iBAAiB,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;QAC1C,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,cAAc,CAAC,GAAG,GAAG,CAAC,CAAC;QAC/E,MAAM,eAAe,GAAG,KAAK,CACzB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,CAC5B,CAAC;QAEF,OAAO;YACH,WAAW,EAAE,eAAe;YAC5B,gBAAgB,EAAE,eAAe,CAAC,QAAQ,EAAE;SACtC,CAAC;IACf,CAAC;IAED,MAAM,WAAW,GACb,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IACnF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;IAE7D,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAU,CAAC;AACrF,CAAC"}
+{"version":3,"file":"DrawerWidthUtils.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerWidthUtils.ts"],"names":[],"mappings":"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"}

package/dist/components/EntityName/EntityName.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './EntityName.scss';
+export interface EntityNameProps {
+    name?: string;
+    renderName?: (name?: string) => React.ReactNode;
+    path?: string;
+    externalLink?: boolean;
+    withLeftTrim?: boolean;
+    hasClipboardButton?: boolean;
+    infoPopoverContent?: React.ReactNode;
+    clipboardButtonAlwaysVisible?: boolean;
+    leadingContent?: React.ReactNode;
+    className?: string;
+}
+export declare function EntityName({ name, renderName, path, externalLink, withLeftTrim, hasClipboardButton, infoPopoverContent, clipboardButtonAlwaysVisible, leadingContent, className, }: EntityNameProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/EntityName/EntityName.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { CircleInfo } from '@gravity-ui/icons';
+import { Button, ClipboardButton, Icon, Popover, Link as UIKitLink } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
+import { YDB_POPOVER_CLASS_NAME } from '../../utils/constants';
+import { InternalLink } from '../InternalLink/InternalLink';
+import './EntityName.scss';
+const b = cn('ydb-entity-name');
+function defaultRenderName(name) {
+    return name !== null && name !== void 0 ? name : '';
+}
+export function EntityName({ name = '', renderName = defaultRenderName, path, externalLink = false, withLeftTrim = false, hasClipboardButton, infoPopoverContent, clipboardButtonAlwaysVisible = false, leadingContent, className, }) {
+    const [infoIconHovered, setInfoIconHovered] = React.useState(false);
+    const renderLink = () => {
+        if (path) {
+            if (externalLink) {
+                return (_jsx(UIKitLink, { className: b('name'), href: path, children: renderName(name) }));
+            }
+            return (_jsx(InternalLink, { className: b('name'), to: path, children: renderName(name) }));
+        }
+        return name && _jsx("span", { className: b('name'), children: renderName(name) });
+    };
+    return (_jsxs("div", { className: b(null, className), children: [leadingContent ? _jsx("div", { className: b('leading-content'), children: leadingContent }) : null, (path || name) && (_jsxs("div", { className: b('wrapper', {
+                    'with-clipboard-button': hasClipboardButton,
+                    'with-info-button': Boolean(infoPopoverContent),
+                    'with-link': Boolean(path),
+                }), children: [_jsx("span", { className: b('link', {
+                            'with-left-trim': withLeftTrim,
+                            'with-path': Boolean(path),
+                        }), title: name, children: renderLink() }), (hasClipboardButton || infoPopoverContent) && (_jsxs("div", { className: b('controls-wrapper', {
+                            visible: clipboardButtonAlwaysVisible || infoIconHovered,
+                        }), onClick: (e) => e.stopPropagation(), children: [infoPopoverContent && (_jsx(Popover, { className: YDB_POPOVER_CLASS_NAME, content: infoPopoverContent, placement: ['top-start', 'bottom-start'], onOpenChange: (visible) => setInfoIconHovered(visible), children: _jsx(Button, { view: "normal", size: "xs", className: b('info-icon', {
+                                        visible: clipboardButtonAlwaysVisible || infoIconHovered,
+                                    }), children: _jsx(Icon, { data: CircleInfo, size: "12" }) }) })), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "xs", view: "normal", className: b('clipboard-button', {
+                                    visible: clipboardButtonAlwaysVisible || infoIconHovered,
+                                }) }))] }))] }))] }));
+}
+//# sourceMappingURL=EntityName.js.map

package/dist/components/EntityName/EntityName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityName.js","sourceRoot":"","sources":["../../../src/components/EntityName/EntityName.tsx"],"names":[],"mappings":"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"}

package/dist/components/EntityName/EntityName.scss

@@ -0,0 +1,140 @@
+@use '../../styles/mixins.scss';
+
+.ydb-entity-name {
+    --button-width: 24px;
+    --entity-name-height: 20px;
+
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+
+    max-width: 100%;
+    height: var(--entity-name-height);
+
+    @include mixins.body-2-typography();
+
+    &__leading-content {
+        display: inline-flex;
+
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__info-icon,
+    &__clipboard-button {
+        // Default button height is 20px. When focused it has 24px height because of outline
+        // Negative offset is needed to prevent button to have bigger size when focused
+        --g-button-focus-outline-offset: -2px;
+        --g-button-focus-outline-width: 2px;
+
+        opacity: 0;
+        color: var(--g-color-text-secondary);
+
+        &_visible,
+        &:focus-visible,
+        &:hover,
+        .ydb-entity-name__wrapper:focus-within &,
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover & {
+            opacity: 1;
+        }
+
+        &:focus-visible,
+        .ydb-entity-name__wrapper:focus-within {
+            background-color: var(--g-color-base-float);
+        }
+        &:hover {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+
+        overflow: hidden;
+
+        height: var(--entity-name-height);
+
+        &_with-clipboard-button {
+            padding-right: var(--button-width);
+        }
+
+        &_with-info-button {
+            padding-right: var(--button-width);
+        }
+
+        &_with-clipboard-button {
+            &.ydb-entity-name__wrapper_with-info-button {
+                padding-right: calc(2 * var(--button-width));
+            }
+        }
+    }
+
+    &__controls-wrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        width: 0;
+
+        &_visible,
+        &:focus-within {
+            width: min-content;
+
+            background-color: var(--g-color-base-background);
+        }
+
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover & {
+            width: min-content;
+
+            background-color: var(--ydb-data-table-color-hover);
+        }
+    }
+
+    &__wrapper_with-clipboard-button &__link {
+        width: calc(100% + var(--button-width));
+    }
+
+    &__wrapper_with-info-button &__link {
+        width: calc(100% + var(--button-width));
+    }
+
+    &__wrapper_with-clipboard-button {
+        &.ydb-entity-name__wrapper_with-info-button .ydb-entity-name__link {
+            width: calc(100% + 2 * var(--button-width));
+        }
+    }
+
+    &__link {
+        display: inline-block;
+        overflow: hidden;
+
+        width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        & a:focus-visible {
+            outline-width: 2px;
+            outline-offset: -2px;
+        }
+    }
+
+    &__link_with-path {
+        color: var(--g-color-text-link);
+    }
+
+    &__link_with-left-trim {
+        text-align: end;
+        direction: rtl;
+
+        .ydb-entity-name__name {
+            unicode-bidi: plaintext;
+        }
+    }
+}

package/dist/components/EntityStatus/EntityStatus.d.ts

@@ -1,21 +1,24 @@
 import React from 'react';
+import type { LabelProps } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
-import type { StatusIconMode, StatusIconSize } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
+interface EntityStatusLabelProps {
+    status: EFlag;
+    note?: React.ReactNode;
+    children?: React.ReactNode;
+    withStatusName?: boolean;
+    size?: LabelProps['size'];
+    iconSize?: number;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+declare function EntityStatusLabel({ children, status, withStatusName, note, size, iconSize, onClick, }: EntityStatusLabelProps): import("react/jsx-runtime").JSX.Element;
 interface EntityStatusProps {
-    status?: EFlag;
-    name?: string;
-    renderName?: (name?: string) => React.ReactNode;
-    path?: string;
-    size?: StatusIconSize;
-    mode?: StatusIconMode;
-    showStatus?: boolean;
-    externalLink?: boolean;
-    withLeftTrim?: boolean;
-    hasClipboardButton?: boolean;
-    infoPopoverContent?: React.ReactNode;
-    clipboardButtonAlwaysVisible?: boolean;
+    children?: React.ReactNode;
     className?: string;
 }
-export declare function EntityStatus({ status, name, renderName, path, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, infoPopoverContent, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntityStatus({ className, children }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EntityStatus {
+    var Label: typeof EntityStatusLabel;
+    var displayName: string;
+}
 export {};

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,47 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { CircleInfo } from '@gravity-ui/icons';
-import { Button, ClipboardButton, Icon, Popover, Link as UIKitLink } from '@gravity-ui/uikit';
+import { ActionTooltip, Flex, HelpMark, Label } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
 import { cn } from '../../utils/cn';
-import { YDB_POPOVER_CLASS_NAME } from '../../utils/constants';
-import { InternalLink } from '../InternalLink/InternalLink';
-import { StatusIcon } from '../StatusIcon/StatusIcon';
+import { StatusIcon } from '../StatusIconNew/StatusIcon';
+import i18n from './i18n';
+import { EFlagToDescription } from './utils';
 import './EntityStatus.scss';
-const b = cn('entity-status');
-function defaultRenderName(name) {
-    return name !== null && name !== void 0 ? name : '';
+const b = cn('ydb-entity-status');
+const EFlagToLabelTheme = {
+    [EFlag.Red]: 'danger',
+    [EFlag.Blue]: 'info',
+    [EFlag.Green]: 'success',
+    [EFlag.Grey]: 'unknown',
+    [EFlag.Orange]: 'orange',
+    [EFlag.Yellow]: 'warning',
+};
+const EFlagToStatusName = {
+    get [EFlag.Red]() {
+        return i18n('title_red');
+    },
+    get [EFlag.Yellow]() {
+        return i18n('title_yellow');
+    },
+    get [EFlag.Orange]() {
+        return i18n('title_orange');
+    },
+    get [EFlag.Green]() {
+        return i18n('title_green');
+    },
+    get [EFlag.Grey]() {
+        return i18n('title_grey');
+    },
+    get [EFlag.Blue]() {
+        return i18n('title_blue');
+    },
+};
+function EntityStatusLabel({ children, status, withStatusName = true, note, size = 'm', iconSize = 14, onClick, }) {
+    const theme = EFlagToLabelTheme[status];
+    const isClickable = Boolean(onClick);
+    return (_jsx(ActionTooltip, { title: EFlagToDescription[status], disabled: Boolean(note), children: _jsx(Label, { theme: theme === 'orange' ? undefined : theme, icon: _jsx(StatusIcon, { size: iconSize, status: status }), size: size, className: b({ orange: theme === 'orange', clickable: isClickable }), onClick: onClick, interactive: isClickable, children: _jsxs(Flex, { gap: "2", wrap: "nowrap", children: [children, withStatusName ? EFlagToStatusName[status] : null, note && _jsx(HelpMark, { className: b('note'), children: note })] }) }) }));
 }
-export function EntityStatus({ status = EFlag.Grey, name = '', renderName = defaultRenderName, path, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, infoPopoverContent, clipboardButtonAlwaysVisible = false, className, }) {
-    const [infoIconHovered, setInfoIconHovered] = React.useState(false);
-    const renderIcon = () => {
-        if (!showStatus) {
-            return null;
-        }
-        return _jsx(StatusIcon, { className: b('icon'), status: status, size: size, mode: mode });
-    };
-    const renderLink = () => {
-        if (path) {
-            if (externalLink) {
-                return (_jsx(UIKitLink, { className: b('name'), href: path, children: renderName(name) }));
-            }
-            return (_jsx(InternalLink, { className: b('name'), to: path, children: renderName(name) }));
-        }
-        return name && _jsx("span", { className: b('name'), children: renderName(name) });
-    };
-    return (_jsxs("div", { className: b(null, className), children: [renderIcon(), (path || name) && (_jsxs("div", { className: b('wrapper', {
-                    'with-clipboard-button': hasClipboardButton,
-                    'with-info-button': Boolean(infoPopoverContent),
-                    'with-link': Boolean(path),
-                }), children: [_jsx("span", { className: b('link', {
-                            'with-left-trim': withLeftTrim,
-                            'with-path': Boolean(path),
-                        }), title: name, children: renderLink() }), (hasClipboardButton || infoPopoverContent) && (_jsxs("div", { className: b('controls-wrapper', {
-                            visible: clipboardButtonAlwaysVisible || infoIconHovered,
-                        }), onClick: (e) => e.stopPropagation(), children: [infoPopoverContent && (_jsx(Popover, { className: YDB_POPOVER_CLASS_NAME, content: infoPopoverContent, placement: ['top-start', 'bottom-start'], onOpenChange: (visible) => setInfoIconHovered(visible), children: _jsx(Button, { view: "normal", size: "xs", className: b('info-icon', {
-                                        visible: clipboardButtonAlwaysVisible || infoIconHovered,
-                                    }), children: _jsx(Icon, { data: CircleInfo, size: "12" }) }) })), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "xs", view: "normal", className: b('clipboard-button', {
-                                    visible: clipboardButtonAlwaysVisible || infoIconHovered,
-                                }) }))] }))] }))] }));
+export function EntityStatus({ className, children }) {
+    return (_jsx(Flex, { gap: "2", wrap: "nowrap", alignItems: "center", className: b(null, className), children: children }));
 }
+EntityStatus.Label = EntityStatusLabel;
+EntityStatus.displayName = 'EntityStatus';
 //# sourceMappingURL=EntityStatus.js.map