@tap-payments/os-micro-frontend-shared 0.1.96-test.24 → 0.1.96-test.25

package/build/components/LanguageDropdown/LanguageDropdown.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { Menu, MenuItem } from '../index.js';
+import { Button } from './style';
+const languages = ['EN', 'AR'];
+export default function LanguageDropdown({ defaultLanguage = 'EN', onChange }) {
+    const [language, setLanguage] = useState(defaultLanguage);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCLose = () => {
+        setAnchorEl(null);
+    };
+    const onClick = (lang) => {
+        setLanguage(lang);
+        onChange === null || onChange === void 0 ? void 0 : onChange(lang);
+        onCLose();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCLose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ onClick: onOpen, open: open }, { children: _jsx(Box, Object.assign({ component: "span" }, { children: language })) })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', width: 31.8 } }, { children: languages.map((lang) => lang !== language && (_jsx(MenuItem, Object.assign({ onClick: () => onClick(lang) }, { children: lang }), lang))) }))] }) })));
+}

package/build/components/LanguageDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import LanguageDropdown from './LanguageDropdown';
+export default LanguageDropdown;

package/build/components/LanguageDropdown/index.js

@@ -0,0 +1,2 @@
+import LanguageDropdown from './LanguageDropdown';
+export default LanguageDropdown;

package/build/components/LanguageDropdown/style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open?: boolean | undefined;
+}, {}, {}>;

package/build/components/LanguageDropdown/style.js

@@ -0,0 +1,5 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Button = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, fontSize: '11px', color: theme.palette.text.primary, padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', height: 32, gap: '4px' }, (open && {
+    borderColor: theme.palette.info.dark,
+}))));

package/build/components/LeftPeekRightExpandingChip/LeftPeekRightExpandingChip.d.ts

@@ -1,2 +1,12 @@
 import { type LeftPeekRightExpandingChipProps } from './type';
+/**
+ * LeftPeekRightExpandingChip
+ *
+ * Renders the last item of `icons` in a main chip and the remaining items as a vertical,
+ * left‑aligned peek stack (collapsed to 24px). Hovering the main chip reveals and expands
+ * the peek chips to the right and shifts the main chip accordingly. The top‑most peek chip
+ * stays anchored while the rest slide out to the right preserving the original order.
+ * Uses Framer Motion for smooth enter/leave and x‑translation, with z-index control via `expandedZIndex`.
+ * Peek chip content is rendered only on hover to minimize layout work.
+ */
 export default function LeftPeekRightExpandingChip({ icons, expandedZIndex, sx }: LeftPeekRightExpandingChipProps): import("react/jsx-runtime").JSX.Element;

package/build/components/LeftPeekRightExpandingChip/LeftPeekRightExpandingChip.js

@@ -3,15 +3,28 @@ import Box from '@mui/material/Box';
 import { AnimatePresence } from 'framer-motion';
 import { Root, Container, PeekStack, PeekChip, MainChip, tableCellSx } from './style';
 import { useLeftPeekRightExpandingChip } from './useLeftPeekRightExpandingChip';
+/**
+ * LeftPeekRightExpandingChip
+ *
+ * Renders the last item of `icons` in a main chip and the remaining items as a vertical,
+ * left‑aligned peek stack (collapsed to 24px). Hovering the main chip reveals and expands
+ * the peek chips to the right and shifts the main chip accordingly. The top‑most peek chip
+ * stays anchored while the rest slide out to the right preserving the original order.
+ * Uses Framer Motion for smooth enter/leave and x‑translation, with z-index control via `expandedZIndex`.
+ * Peek chip content is rendered only on hover to minimize layout work.
+ */
 export default function LeftPeekRightExpandingChip({ icons = [], expandedZIndex = 1000, sx }) {
     const { handleMouseEnter, handleRootMouseLeave, rootRef, mainChipRef, isHovering, peekItems, mainShiftX, mainIcon } = useLeftPeekRightExpandingChip({ icons });
-    return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, tableCellSx), sx), "data-testid": "LeftPeekRightExpandingChipBox" }, { children: _jsx(Root, Object.assign({ ref: rootRef, onMouseLeave: handleRootMouseLeave, onMouseEnter: handleMouseEnter }, { children: _jsxs(Container, Object.assign({ "data-testid": "Container", initial: false }, { children: [_jsx(PeekStack, Object.assign({ "data-testid": "PeekStack", onMouseEnter: handleMouseEnter, onMouseLeave: handleRootMouseLeave, style: { pointerEvents: isHovering ? 'auto' : 'none' } }, { children: _jsx(AnimatePresence, Object.assign({ initial: false }, { children: peekItems.map(({ key, rIdx, offX, hoverX, zIndex, refCb, content }) => (_jsx(PeekChip, Object.assign({ "data-testid": `LeftPeekChip-${rIdx}`, ref: refCb, initial: { opacity: 0, scale: 0.95, x: offX, y: 0 }, animate: { opacity: 1, scale: 1, x: isHovering ? hoverX : offX, y: 0 }, exit: { opacity: 0, scale: 0.95, x: offX, y: 0 }, transition: { duration: 0.18, ease: 'easeOut' }, style: {
+    return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, tableCellSx), sx), "data-testid": "LeftPeekRightExpandingChipBox" }, { children: _jsx(Root, Object.assign({ ref: rootRef, onMouseLeave: handleRootMouseLeave, onMouseEnter: handleMouseEnter }, { children: _jsxs(Container, Object.assign({ "data-testid": "Container", initial: false }, { children: [_jsx(PeekStack, Object.assign({ "data-testid": "PeekStack", 
+                        // Allow the expanded chips area to keep hover active
+                        onMouseEnter: handleMouseEnter, onMouseLeave: handleRootMouseLeave, style: { pointerEvents: isHovering ? 'auto' : 'none' } }, { children: _jsx(AnimatePresence, Object.assign({ initial: false }, { children: peekItems.map(({ key, rIdx, offX, hoverX, zIndex, refCb, content }) => (_jsx(PeekChip, Object.assign({ "data-testid": `LeftPeekChip-${rIdx}`, ref: refCb, initial: { opacity: 0, scale: 0.95, x: offX, y: 0 }, animate: { opacity: 1, scale: 1, x: isHovering ? hoverX : offX, y: 0 }, exit: { opacity: 0, scale: 0.95, x: offX, y: 0 }, transition: { duration: 0.18, ease: 'easeOut' }, style: {
                                     zIndex,
                                     width: isHovering ? 'auto' : 24,
                                     minWidth: 24,
                                     padding: isHovering ? '0 6px' : 0,
                                     whiteSpace: 'nowrap',
                                     overflow: isHovering ? 'visible' : 'hidden',
+                                    // Make the expanded chip area interactive to preserve hover
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                 } }, { children: isHovering && _jsx(_Fragment, { children: content }) }), key))) })) })), _jsx(MainChip, Object.assign({ "data-testid": "MainChip", ref: mainChipRef, style: { zIndex: expandedZIndex + 10, padding: '0 6px' }, initial: false, animate: { x: isHovering ? mainShiftX : 0 }, transition: { duration: 0.18, ease: 'easeOut' } }, { children: mainIcon }))] })) })) })));
 }

package/build/components/LeftPeekRightExpandingChip/style.js

@@ -24,6 +24,7 @@ export const PeekStack = styled('div')(() => ({
 export const PeekChip = styled(motion.div)(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 12,
+    // width controlled in component to switch between 24 and auto
     height: 24,
     display: 'flex',
     alignItems: 'center',

package/build/components/LeftPeekRightExpandingChip/useLeftPeekRightExpandingChip.js

@@ -2,19 +2,30 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CHIP_GAP, DEFAULT_CHIP_MIN_WIDTH } from './style';
 export function useLeftPeekRightExpandingChip({ icons }) {
     var _a;
+    // ======================
+    // State
+    // ======================
     const [isHovering, setIsHovering] = useState(false);
     const [rightWidths, setRightWidths] = useState([]);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
     const rootRef = useRef(null);
     const mainChipRef = useRef(null);
     const rightChipRefs = useRef([]);
     const hoverTimeoutRef = useRef(null);
+    // Prepare icons: last is MainChip, the rest are peeks
     const safeIcons = icons !== null && icons !== void 0 ? icons : [];
     const lastIndex = Math.max(0, ((_a = safeIcons.length) !== null && _a !== void 0 ? _a : 1) - 1);
     const mainIcon = safeIcons[lastIndex];
     const peekIcons = safeIcons.slice(0, lastIndex);
+    // ======================
+    // Computed values
+    // ======================
     const { peekItems, mainShiftX, guardLeft, guardWidth } = useMemo(() => {
         const n = peekIcons.length;
         const measured = rightWidths.length === n && rightWidths.every((w) => w > 0);
+        // Anchor stacked offset for all peeks
         const anchorOffXAll = -6 * n;
         const totalPeekWidth = measured ? rightWidths.reduce((acc, w) => acc + w, 0) : n * DEFAULT_CHIP_MIN_WIDTH;
         const gapsTotal = Math.max(0, n - 1) * CHIP_GAP;
@@ -42,10 +53,14 @@ export function useLeftPeekRightExpandingChip({ icons }) {
                 content: peekIcons[origIdx],
             });
         }
+        // Guard box covers the full horizontal span of the expanded peeks
         const guardLeft = anchorOffXEach;
         const guardWidth = totalPeekWidth + gapsTotal;
         return { peekItems: items, mainShiftX: mainShift, guardLeft, guardWidth };
     }, [peekIcons, rightWidths, isHovering]);
+    // ======================
+    // Callbacks
+    // ======================
     const clearHoverTimeout = useCallback(() => {
         if (hoverTimeoutRef.current) {
             clearTimeout(hoverTimeoutRef.current);
@@ -53,8 +68,8 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         }
     }, []);
     const measureRightWidths = useCallback(() => {
-        const TARGET_PADDING_X = 12;
-        const BORDER_X = 2;
+        const TARGET_PADDING_X = 12; /* 6px each side when expanded */
+        const BORDER_X = 2; /* 1px each side */
         const next = peekIcons.map((_, origIdx) => {
             const el = rightChipRefs.current[origIdx];
             if (!el)
@@ -77,12 +92,18 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         clearHoverTimeout();
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, [clearHoverTimeout]);
+    // ======================
+    // Effects
+    // ======================
     useEffect(() => {
         return () => clearHoverTimeout();
     }, [clearHoverTimeout]);
+    // Measure initially and when count changes
     useEffect(() => {
         measureRightWidths();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [peekIcons.length]);
+    // Re-measure shortly after hover begins to capture dynamic size
     useEffect(() => {
         if (!isHovering)
             return;
@@ -91,15 +112,22 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         });
         return () => window.cancelAnimationFrame(id);
     }, [isHovering, measureRightWidths]);
+    // ======================
+    // Public API
+    // ======================
     return {
+        // hover state/handlers
         isHovering,
         handleMouseEnter,
         handleRootMouseLeave,
+        // refs
         rootRef,
         mainChipRef,
+        // render data
         peekItems,
         mainShiftX,
         mainIcon,
+        // guard for hover persistence over gaps
         guardLeft,
         guardWidth,
     };

package/build/components/MFWidgetLoader/MFWidgetLoader.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 const MFWidgetLoader = () => {
-    return (_jsxs(Stack, Object.assign({ height: '100%', borderRadius: '0 0 12px 12px', overflow: 'hidden' }, { children: [_jsxs(Stack, Object.assign({ direction: 'row', spacing: 1, height: '4.1875rem', sx: {
+    return (_jsxs(Stack, Object.assign({ height: "100%", borderRadius: "0 0 12px 12px", overflow: "hidden" }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, height: "4.1875rem", sx: {
                     pb: '1.2rem',
                     paddingInline: '32px',
                     pt: '4px',
-                    background: (theme) => theme.palette.background.transparent[0]
-                } }, { children: [_jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: 'rounded', width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: 'rounded', width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: 'rounded', width: 70, height: 33 })] })), _jsx(Box, { flex: 1, bgcolor: '#fff' })] })));
+                    background: (theme) => theme.palette.background.transparent[0],
+                } }, { children: [_jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 }), _jsx(Skeleton, { sx: { bgcolor: 'gray.300' }, variant: "rounded", width: 70, height: 33 })] })), _jsx(Box, { flex: 1, bgcolor: "#fff" })] })));
 };
 export default MFWidgetLoader;

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -13,6 +13,7 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
     const [dropdownWidth, setDropdownWidth] = useState(0);
     const [isHovered, setIsHovered] = useState(false);
     const isOpen = Boolean(anchorEl);
+    // Update internal state when props change (but only when dropdown is closed)
     useEffect(() => {
         if (!isOpen) {
             setInternalSelectedValues(selectedValues);
@@ -27,10 +28,12 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
             return;
         }
         setAnchorEl(buttonRef.current);
+        // Set initial dropdown width to prevent shrinking
         const buttonWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 200;
         setDropdownWidth(Math.max(buttonWidth, 200));
     };
     const handleClose = () => {
+        // To prevent unnecessary updates, we check if the selection has actually changed.
         const hasChanged = JSON.stringify([...internalSelectedValues].sort()) !== JSON.stringify([...selectedValues].sort());
         if (hasChanged) {
             onSelectionChange(internalSelectedValues);

package/build/components/NestedDropdown/Dropdown.js

@@ -38,11 +38,14 @@ function Dropdown(_a) {
                 return i;
             });
             const newList = updateList(list);
+            // update all children
             setList(newList);
             if (updatedList)
                 updatedList(newList);
+            // notify parent with the new children
             if (onChildrenChange)
                 onChildrenChange(newList);
+            // notify parent with selected / unselected children
             if (onSelect)
                 onSelect(changedChildren);
         }

package/build/components/RFH/Inputs/FormInput/FormInput.js

@@ -19,6 +19,7 @@ function FormInput(_a) {
     return (_jsx(Controller, { name: name, control: control, defaultValue: props.defaultValue, render: ({ field, fieldState }) => {
             var _a;
             return (_jsx(InputBase, Object.assign({}, props, field, { hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, hideArrows: hideArrows, onWheel: (e) => {
+                    // eslint-disable-next-line
                     e.target instanceof HTMLElement && e.target.blur();
                 } })));
         } }));

package/build/components/RFH/Inputs/MultiSelect/MultiSelect.js

@@ -23,6 +23,7 @@ export default function MultiSelect(_a) {
                     field.onChange(e);
                 } }, { children: (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
                     var _a, _b, _c;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const isSelected = (_a = field.value) === null || _a === void 0 ? void 0 : _a.some((v) => {
                         if (isOptionEqualToValue) {
                             return isOptionEqualToValue(v, option);

package/build/components/RangeCalender/RangeCalender.js

@@ -22,6 +22,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
     const open = Boolean(anchorEl);
     const [isError, setIsError] = useState(false);
     const { t } = useTranslation();
+    // eslint-disable-next-line
     const calendarRef = useRef();
     const isHijri = mode === 'hijri';
     const onCloseCalender = () => {

package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.js

@@ -16,7 +16,9 @@ import { darkLeftArrowIcon, darkRightArrowIcon } from '../../../../constants/ind
 import { ArrowButton } from './style';
 import { getLocale, getCalender } from '../../utils';
 const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-function RangeDatepicker(_a, ref) {
+function RangeDatepicker(_a, 
+// eslint-disable-next-line
+ref) {
     var { isAr = false, isHijri, values, onChange, numberOfMonths = 2 } = _a, props = __rest(_a, ["isAr", "isHijri", "values", "onChange", "numberOfMonths"]);
     const getArrow = (direction) => {
         if (direction === 'right') {

package/build/components/RangeCalender/style.js

@@ -39,7 +39,7 @@ export const CalenderWrapper = styled(Box)(({ theme }) => ({
         padding: 0,
     },
     '.rmdp-day.rmdp-today span': {
-        backgroundColor: 'transparent',
+        backgroundColor: 'transparent !important',
         color: theme.palette.info.dark,
     },
     '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.d.ts

@@ -1,3 +1,35 @@
 import { RightLeftExpandingCenterChipProps } from './type';
+/**
+ * Component: RightLeftExpandingCenterChip
+ *
+ * Renders a center chip with optional inline expandable content and animated
+ * stacks of chips that expand to the left and right when hovering the center.
+ *
+ * Behavior
+ * - Hover activation: Only when the pointer enters the CenterChip. Hover persists
+ *   across expanded icons and the gaps between them via transparent HoverBridge overlays.
+ *   Hover ends when the pointer leaves the main wrapper (with a small debounce handled
+ *   inside the useRightLeftExpandingCenterChip hook).
+ * - Anchoring: Left/Right expanded sections are anchored to the start/end of the center
+ *   content using measured anchors from the hook.
+ * - Motion & layout:
+ *   - ExpandableContainer width is driven by a MotionValue (expandedMV) based on measured
+ *     width of the expandable content; AnimatePresence provides smooth mount/unmount.
+ *   - The whole center group shifts by shiftX to visually compensate the inline expansion.
+ *   - Left/Right chips slide out using computed offsets derived from measured chip widths.
+ * - Overlay order: expandedZIndex controls the base z-index for expanded sections; individual
+ *   chips stack above this base so later items appear beneath earlier items.
+ *
+ * Props
+ * @param leftIcons - Icons/chips to show expanding to the left while hovering.
+ * @param rightIcons - Icons/chips to show expanding to the right while hovering.
+ * @param centerIcon - Static content inside the center chip.
+ * @param expandableCenterRight - Optional inline content that expands to the right within the center chip.
+ * @param expandableCenterLeft - Optional inline content that expands to the left within the center chip.
+ * @param expandedZIndex - Base z-index for expanded sections and icons (default 1000).
+ * @param props - Additional Box props forwarded to the root container.
+ *
+ * @returns Root Box containing the motion-driven chip UI.
+ */
 declare function RightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex, ...props }: Readonly<RightLeftExpandingCenterChipProps>): import("react/jsx-runtime").JSX.Element;
 export default RightLeftExpandingCenterChip;

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -14,6 +14,38 @@ import Box from '@mui/material/Box';
 import { AnimatePresence } from 'framer-motion';
 import { CenterIconWrapper, ExpandedSection, PeekContainer, CenterChip, LeftPeekChip, RightPeekChip, LeftExpandIcon, RightExpandIcon, ExpandChip, CenterShiftWrapper, CenterContent, ExpandableContainer, ExpandableInner, tableCellSx, CHIP_GAP, HoverBridge, } from './style';
 import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRightLeftExpandingCenterChip';
+/**
+ * Component: RightLeftExpandingCenterChip
+ *
+ * Renders a center chip with optional inline expandable content and animated
+ * stacks of chips that expand to the left and right when hovering the center.
+ *
+ * Behavior
+ * - Hover activation: Only when the pointer enters the CenterChip. Hover persists
+ *   across expanded icons and the gaps between them via transparent HoverBridge overlays.
+ *   Hover ends when the pointer leaves the main wrapper (with a small debounce handled
+ *   inside the useRightLeftExpandingCenterChip hook).
+ * - Anchoring: Left/Right expanded sections are anchored to the start/end of the center
+ *   content using measured anchors from the hook.
+ * - Motion & layout:
+ *   - ExpandableContainer width is driven by a MotionValue (expandedMV) based on measured
+ *     width of the expandable content; AnimatePresence provides smooth mount/unmount.
+ *   - The whole center group shifts by shiftX to visually compensate the inline expansion.
+ *   - Left/Right chips slide out using computed offsets derived from measured chip widths.
+ * - Overlay order: expandedZIndex controls the base z-index for expanded sections; individual
+ *   chips stack above this base so later items appear beneath earlier items.
+ *
+ * Props
+ * @param leftIcons - Icons/chips to show expanding to the left while hovering.
+ * @param rightIcons - Icons/chips to show expanding to the right while hovering.
+ * @param centerIcon - Static content inside the center chip.
+ * @param expandableCenterRight - Optional inline content that expands to the right within the center chip.
+ * @param expandableCenterLeft - Optional inline content that expands to the left within the center chip.
+ * @param expandedZIndex - Base z-index for expanded sections and icons (default 1000).
+ * @param props - Additional Box props forwarded to the root container.
+ *
+ * @returns Root Box containing the motion-driven chip UI.
+ */
 function RightLeftExpandingCenterChip(_a) {
     var { leftIcons = [], rightIcons = [], centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenterRight", "expandableCenterLeft", "expandedZIndex"]);
     const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableRightInnerRef, expandableLeftInnerRef, expandedRightMV, expandedLeftMV, shiftX, rightShift, leftShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft });
@@ -41,7 +73,7 @@ function RightLeftExpandingCenterChip(_a) {
                                     opacity: isHovering ? 1 : 0,
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                     borderRadius: '12px 0 0 12px',
-                                    borderRight: 'none',
+                                    borderRight: 'none', // Remove right border for seamless connection
                                 }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableLeftInner", ref: expandableLeftInnerRef }, { children: expandableCenterLeft })) }))), expandableCenterRight && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableRightContainer", style: {
                                     width: expandedRightMV,
                                     position: 'absolute',
@@ -52,7 +84,7 @@ function RightLeftExpandingCenterChip(_a) {
                                     opacity: isHovering ? 1 : 0,
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                     borderRadius: '0 12px 12px 0',
-                                    borderLeft: 'none',
+                                    borderLeft: 'none', // Remove left border for seamless connection
                                 }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableRightInner", ref: expandableRightInnerRef }, { children: expandableCenterRight })) }))), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(RightPeekChip, { "data-testid": "RightPeekChip", initial: { opacity: 0, scale: 0.95, x: 4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: 6 } : { opacity: 1, scale: 1, x: 5 }, exit: { opacity: 0, scale: 0.95, x: 4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "right-peek")) }))] })), isHovering && leftIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "LeftHoverBridge", side: "left", style: { width: leftHoverWidth, right: `calc(100% - ${anchors.left}px)`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), isHovering && rightIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "RightHoverBridge", side: "right", style: { width: rightHoverWidth, left: `${anchors.right}px`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "LeftExpandedSection", side: "left", style: {
                                 right: `calc(100% - ${anchors.left}px)`,
                                 top: '50%',
@@ -62,6 +94,7 @@ function RightLeftExpandingCenterChip(_a) {
                             }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: leftIcons.map((icon, index) => {
                                 var _a;
                                 const leftOffset = (_a = leftOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                // Add shift to avoid overlap with expandable left content (no gap since it's seamless)
                                 const totalOffset = leftOffset + leftShift;
                                 return (_jsx(LeftExpandIcon, Object.assign({ "data-testid": `LeftExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: -totalOffset } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (leftIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `LeftExpandChip-${index}`, ref: (el) => (leftChipRefs.current[index] = el) }, { children: icon })) }), `left-${index}`));
                             }) }), "left-expanded")) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "RightExpandedSection", side: "right", style: {
@@ -73,6 +106,7 @@ function RightLeftExpandingCenterChip(_a) {
                             }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: rightIcons.map((icon, index) => {
                                 var _a;
                                 const base = (_a = rightOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                // Shift accounts for seamless right expandable content
                                 const shift = rightShift;
                                 return (_jsx(RightExpandIcon, Object.assign({ "data-testid": `RightExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: shift + base } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (rightIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `RightExpandChip-${index}`, ref: (el) => (rightChipRefs.current[index] = el) }, { children: icon })) }), `right-${index}`));
                             }) }), "right-expanded")) }))] })) })) })));

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { motion } from 'framer-motion';
+// Shared spacing between chips
 export const CHIP_GAP = 3;
 export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     display: 'flex',
@@ -14,10 +15,12 @@ export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
     fontSize: '12px',
     color: theme.palette.text.primary,
 }));
+// Wrapper that applies the horizontal shift driven by a motion value
 export const CenterShiftWrapper = styled(motion.div)(() => ({
     display: 'inline-flex',
 }));
 export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -32,6 +35,7 @@ export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
     userSelect: 'none',
 }));
 export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
+    // Make wrapper take no layout width; spacing fully controlled by transform
     position: 'static',
     display: 'inline-flex',
     alignItems: 'center',
@@ -46,7 +50,13 @@ export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
     userSelect: 'none',
 }));
 export const ExpandedSection = styled(motion.div)(({ side }) => (Object.assign(Object.assign(Object.assign({ position: 'absolute', display: 'flex', alignItems: 'center' }, (side === 'left' ? { right: '100%', flexDirection: 'row-reverse', transformOrigin: 'right center' } : {})), (side === 'right' ? { left: '100%', flexDirection: 'row', transformOrigin: 'left center' } : {})), { top: '50%', transform: 'translateY(-50%)', gap: 0, pointerEvents: 'auto', overflow: 'visible' })));
-export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { pointerEvents: 'auto', background: 'transparent' })));
+// Invisible hover overlays to bridge gaps between chips
+export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { 
+    // width will be supplied inline via style prop
+    pointerEvents: 'auto', 
+    // transparent but present for hit-testing
+    background: 'transparent' })));
+// --- Peek chips (requested style) ---
 export const PeekContainer = styled(motion.div)(() => ({
     position: 'relative',
     display: 'inline-flex',
@@ -68,35 +78,46 @@ const baseChipStyles = (theme) => ({
     fontSize: 12,
     boxSizing: 'border-box',
     whiteSpace: 'nowrap',
+    // allow chip to grow with content
     overflow: 'visible',
 });
 export const CenterChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'relative', zIndex: 2, minWidth: 24, flex: '0 0 auto', display: 'inline-flex', overflow: 'hidden', willChange: 'transform' })));
+// Static part of the center icon container
 export const CenterContent = styled(motion.span)(() => ({
     display: 'inline-flex',
     alignItems: 'center',
     transform: 'translateZ(0)',
 }));
+// Container that grows in width to reveal the expandable content
 export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     boxSizing: 'border-box',
     willChange: 'width',
+    // Style to look like a seamless continuation of the center chip
     border: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     height: '24px',
     alignItems: 'center',
-    paddingInline: '0px',
+    paddingInline: '0px', // Match center chip padding
 }));
+// Inner content of the expandable area
 export const ExpandableInner = styled(motion.span)(() => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
     alignItems: 'center',
     height: '100%',
 }));
-export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
-export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
+export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', 
+    // ensure circular end even without content
+    minWidth: 24, paddingInline: 0 })));
+// Chip for expanded icons (left/right lists)
 export const ExpandChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { minWidth: 24, flex: '0 0 auto', display: 'inline-flex' })));
+// Styles applied to the containing TableCell
 export const tableCellSx = {
     position: 'relative',
     overflow: 'visible',

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.d.ts

@@ -1,4 +1,9 @@
 import { type ReactNode } from 'react';
+/**
+ * Hook: useRightLeftExpandingCenterChip
+ * Encapsulates hover logic, measurement (anchors, chip widths, expandable width),
+ * and motion values for the RightLeftExpandingCenterChip component.
+ */
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
 export type UseRightLeftExpandingCenterChipArgs = {
     leftIcons: ReactNode[];