@heymantle/litho 0.0.13 → 0.0.15

package/dist/esm/components/TabNavigation.js

@@ -84,9 +84,57 @@ var gradientOverlayStyles = tv({
         }
     }
 });
+var containerStyles = tv({
+    base: "w-2 h-2 rounded-full relative overflow-hidden bg-tint-2 flex-shrink-0",
+    variants: {
+        readStatus: {
+            full: ""
+        }
+    },
+    defaultVariants: {
+        readStatus: "read"
+    }
+});
+var readStatusStyles = tv({
+    base: "absolute w-full h-full",
+    variants: {
+        readStatus: {
+            read: "",
+            partiallyRead: "bg-brand-saturated",
+            unread: "bg-brand-saturated"
+        }
+    },
+    defaultVariants: {
+        readStatus: "read"
+    }
+});
+// Small read status indicator for tabs
+function TabReadStatusIndicator(param) {
+    var readStatus = param.readStatus;
+    if (!readStatus || !readStatus.status) {
+        return null;
+    }
+    var status = readStatus.status;
+    // Don't show indicator for read threads
+    if (status === "read") {
+        return null;
+    }
+    var containerClasses = containerStyles({
+        readStatus: status
+    });
+    var readStatusClasses = readStatusStyles({
+        readStatus: status
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: containerClasses,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: readStatusClasses
+        })
+    });
+}
 // Component to handle truncation detection and tooltip
 function TabTitle(param) {
-    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef;
+    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef, readStatus = param.readStatus;
     var _useState = _sliced_to_array(useState(false), 2), shouldShowTooltip = _useState[0], setShouldShowTooltip = _useState[1];
     useLayoutEffect(function() {
         if (!title || !(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) {
@@ -123,16 +171,21 @@ function TabTitle(param) {
         title,
         tabContainerRef
     ]);
-    var textElement = /*#__PURE__*/ _jsx("div", {
-        className: "overflow-hidden",
-        children: /*#__PURE__*/ _jsx(Text, {
-            variant: "bodyXs",
-            className: textStyles({
-                isActive: isActive
+    var textElement = /*#__PURE__*/ _jsxs("div", {
+        className: "overflow-hidden flex items-center gap-1.5 min-w-0",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                variant: "bodyXs",
+                className: "".concat(textStyles({
+                    isActive: isActive
+                }), " min-w-0 flex-1"),
+                clampLines: 1,
+                children: title
             }),
-            clampLines: 1,
-            children: title
-        })
+            readStatus && /*#__PURE__*/ _jsx(TabReadStatusIndicator, {
+                readStatus: readStatus
+            })
+        ]
     });
     // Only show tooltip if text is likely truncated based on character count vs tab width
     if (shouldShowTooltip) {
@@ -251,7 +304,8 @@ function TabNavigation() {
                                 }) : /*#__PURE__*/ _jsx(TabTitle, {
                                     title: tab.title,
                                     isActive: isActive,
-                                    tabContainerRef: tabRef
+                                    tabContainerRef: tabRef,
+                                    readStatus: tab.readStatus
                                 }),
                                 /*#__PURE__*/ _jsx("div", {
                                     className: "".concat(gradientOverlayStyles({

package/dist/esm/components/Table.js

@@ -160,6 +160,7 @@ import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
 import { styles } from "../styles/Table.js";
 import { SelectionType } from "../utilities/useIndexResourceState.js";
+import { useMobile } from "../utilities/useMobile.js";
 import { useMounted } from "../utilities/useMounted.js";
 import useTableScrollState from "../utilities/useTableScrollState.js";
 var TableContext = /*#__PURE__*/ createContext({});
@@ -447,6 +448,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                     var alignment = cellAlignment[indexAdjusted];
                     var isSortable = sortable && sortable.length > 0 && sortable[indexAdjusted];
                     var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
+                    // Check if this cell is covered by a fixed overlay
+                    var isCovered = !fixed && !reverseColumns && (fixedFirstColumns > 0 && indexAdjusted < fixedFirstColumns || fixedLastColumns > 0 && indexAdjusted >= headings.length - fixedLastColumns);
                     var sortContent = isSortable ? /*#__PURE__*/ _jsx("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
                         children: /*#__PURE__*/ _jsx(Icon, {
@@ -481,6 +484,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             ].includes(alignment) && sortContent
                         ]
                     });
+                    var hasTooltip = (heading.tooltip || heading.tooltipContent) && !isCovered;
                     return /*#__PURE__*/ _jsx(HeadingCell, {
                         className: styles.headingStyles({
                             hidden: hideCell,
@@ -498,7 +502,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             className: styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ _jsx(Tooltip, {
+                            children: heading.hidden ? null : hasTooltip ? /*#__PURE__*/ _jsx(Tooltip, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -614,12 +618,16 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                     value: {
                         columnsToRender: columnsToRender,
                         reverseColumns: reverseColumns,
-                        hideCellsOnMobile: hideCellsOnMobile
+                        hideCellsOnMobile: hideCellsOnMobile,
+                        isFixedOverlay: fixed,
+                        fixedFirstColumns: fixedFirstColumns,
+                        fixedLastColumns: fixedLastColumns
                     },
                     children: /*#__PURE__*/ _jsxs("table", {
                         className: styles.tableStyles(),
                         children: [
                             hasHeadings && renderHeadings({
+                                fixed: fixed,
                                 hidden: true,
                                 columnsToRender: columnsToRender,
                                 reverseColumns: reverseColumns,
@@ -752,7 +760,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
             increasedTableDensity: increasedTableDensity,
             tableContainerRef: tableContainerRef,
             cellAlignment: cellAlignment,
-            noBodyCellPadding: noBodyCellPadding
+            noBodyCellPadding: noBodyCellPadding,
+            columnWidths: columnWidths
         },
         children: /*#__PURE__*/ _jsxs("div", {
             "data-id": idRef.current,
@@ -803,8 +812,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             children: renderTable({
                                 classes: "relative overflow-hidden",
                                 fixed: true,
-                                columnsToRender: fixedFirstColumns,
-                                hideCellsOnMobile: true
+                                columnsToRender: fixedFirstColumns
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -822,8 +830,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                                 classes: "relative overflow-hidden",
                                 fixed: true,
                                 columnsToRender: fixedLastColumns,
-                                reverseColumns: true,
-                                hideCellsOnMobile: true
+                                reverseColumns: true
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -968,8 +975,11 @@ Table.Row.displayName = "Table.Row";
  */ function Cell(param) {
     var tmp = param.alignment, _alignment = tmp === void 0 ? "start" : tmp, children = param.children, _param_selectionCell = param.selectionCell, selectionCell = _param_selectionCell === void 0 ? false : _param_selectionCell;
     var _useContext = useContext(TableContext), cellAlignment = _useContext.cellAlignment, increasedTableDensity = _useContext.increasedTableDensity, selectable = _useContext.selectable, noBodyCellPadding = _useContext.noBodyCellPadding;
-    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender;
+    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender, isFixedOverlay = _useContext1.isFixedOverlay, fixedFirstColumns = _useContext1.fixedFirstColumns, fixedLastColumns = _useContext1.fixedLastColumns;
+    var isMobile = useMobile();
     var columnCount = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment.length) || 0;
+    // Use state instead of ref so changes trigger re-render
+    var _useState = _sliced_to_array(useState(-1), 2), cellIndex = _useState[0], setCellIndex = _useState[1];
     var cellIndexRef = useRef(null);
     var setCellRef = useCallback(function(node) {
         if (!node || cellIndexRef.current !== null) return;
@@ -977,16 +987,21 @@ Table.Row.displayName = "Table.Row";
         if ((parentRow === null || parentRow === void 0 ? void 0 : parentRow.tagName) === "TR") {
             var totalCells = parentRow.children.length;
             var index = node.cellIndex;
-            cellIndexRef.current = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            var calculatedIndex = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            cellIndexRef.current = calculatedIndex;
+            setCellIndex(calculatedIndex);
         }
     }, [
         reverseColumns,
         columnsToRender,
         columnCount
     ]);
-    var _cellIndexRef_current;
-    var cellIndex = (_cellIndexRef_current = cellIndexRef.current) !== null && _cellIndexRef_current !== void 0 ? _cellIndexRef_current : -1;
     var alignment = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment[cellIndex]) || _alignment;
+    // Check if this cell is covered by a fixed overlay
+    // When cellIndex is unknown (-1), conservatively assume the cell might be covered
+    // if there are any fixed columns. This prevents duplicate popovers during the
+    // brief window between initial render and when cellIndex is calculated.
+    var isCoveredByFixedOverlay = !isFixedOverlay && !reverseColumns && (cellIndex === -1 ? fixedFirstColumns > 0 || fixedLastColumns > 0 : fixedFirstColumns > 0 && cellIndex < fixedFirstColumns || fixedLastColumns > 0 && cellIndex >= columnCount - fixedLastColumns);
     return /*#__PURE__*/ _jsx("td", {
         ref: setCellRef,
         className: styles.cellStyles({
@@ -997,6 +1012,7 @@ Table.Row.displayName = "Table.Row";
             tableIsSelectable: selectable,
             noBodyCellPadding: noBodyCellPadding
         }),
+        inert: !isMobile && isCoveredByFixedOverlay || undefined,
         children: /*#__PURE__*/ _jsx("div", {
             className: styles.cellContentStyles({
                 alignment: alignment

package/dist/esm/components/Tabs.js

@@ -106,6 +106,7 @@ import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import { CaretDownMinor, CaretUpMinor } from "@shopify/polaris-icons";
 import * as PolarisIcons from "@shopify/polaris-icons";
+import Badge from "./Badge.js";
 var styles = tv({
     base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
     variants: {
@@ -140,6 +141,8 @@ var containerStyles = tv({
  * @param {boolean} [props.padded=true] - If true, applies padding to the Tabs container.
  * @param {boolean} [props.borderBottom=true] - If true, applies a bottom border to the Tabs container.
  * @param {boolean} [props.simpleTabs=false] - If true, simplifies the styling for the selected tab.
+ * @param {number} [props.badgeCount] - The number of badges to display for the tab.
+ * @param {string} [props.badgeStatus="default"] - The status of the badge.
  * @returns {JSX.Element} The Tabs component.
  */ function Tabs() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -253,6 +256,8 @@ var containerStyles = tv({
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
+                        badgeCount: tab.badgeCount,
+                        badgeStatus: tab.badgeStatus,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -345,9 +350,30 @@ var tabStyles = tv({
         }
     ]
 });
-function Tab() {
+/**
+ * Individual tab item component used within the Tabs component.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - Unique identifier for the tab, used to generate the DOM element ID.
+ * @param {boolean} [props.active] - Whether the tab's disclosure popover is currently active/open.
+ * @param {boolean} [props.selected] - Whether this tab is currently selected.
+ * @param {number} [props.index] - The index position of this tab in the tabs array.
+ * @param {string|React.ReactNode} [props.icon] - Icon to display. Can be a Polaris icon name string or a custom React node.
+ * @param {Function} [props.onSelect] - Callback fired when the tab is selected, receives the tab's index.
+ * @param {Function} [props.onClick] - Custom click handler that overrides the default onSelect behavior.
+ * @param {React.ReactNode} [props.children] - The content/label to display inside the tab.
+ * @param {boolean} [props.fullWidth] - Whether the tab should expand to fill available space.
+ * @param {boolean} [props.hidden] - Whether the tab should be visually hidden (used for overflow handling).
+ * @param {boolean} [props.simple] - Whether to use simplified styling (no background, column layout).
+ * @param {boolean} [props.disclosure=false] - Whether to show a disclosure caret icon when selected.
+ * @param {boolean} [props.alwaysShowDisclosureIcon=false] - Whether to always show the disclosure icon regardless of selection state.
+ * @param {boolean} [props.disabled=false] - Whether the tab is disabled.
+ * @param {string} [props.badgeStatus="default"] - The status variant of the badge (e.g., "default", "success", "warning").
+ * @param {number} [props.badgeCount] - If provided (>= 0), displays a badge with this count.
+ * @returns {JSX.Element} The Tab component.
+ */ function Tab() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled;
+    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_badgeStatus = props.badgeStatus, badgeStatus = _props_badgeStatus === void 0 ? "default" : _props_badgeStatus, badgeCount = props.badgeCount;
     var polarisIcon = typeof icon === "string" ? PolarisIcons[icon] : PolarisIcons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -388,6 +414,11 @@ function Tab() {
                     color: selected && simple ? "default" : selected ? "active" : "subdued",
                     size: simple ? "lg" : undefined
                 })
+            }),
+            badgeCount >= 0 && /*#__PURE__*/ _jsx(Badge, {
+                status: badgeStatus,
+                className: "ml-1",
+                children: badgeCount
             })
         ]
     });

package/dist/esm/components/TextField.js

@@ -226,10 +226,11 @@ var clearButtonStyles = tv({
  * @param {Function} [props.onKeyDown] - Handler for key down.
  * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
  * @param {string} [props.className] - Additional CSS classes.
+ * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
  * @returns {JSX.Element} The rendered TextField component.
  */ function TextField() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown;
+    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
     var suffix = maxLength && showCharacterCount ? "".concat(value.length, " / ").concat(maxLength) : _suffix;
     var _internalRef = useRef(null);
     var inputRef = _inputRef || _internalRef;
@@ -288,7 +289,7 @@ var clearButtonStyles = tv({
     var classes = styles({
         disabled: Boolean(disabled || readOnly),
         hasError: hasError,
-        focused: Boolean(focused && !readOnly),
+        focused: Boolean(focused && !readOnly && !disableFocusStyles),
         subdued: subdued,
         transparent: transparent
     });
@@ -511,6 +512,7 @@ var clearButtonStyles = tv({
                         insight: labelAction.insight,
                         icon: labelAction.insight ? MagicMajor : undefined,
                         color: labelAction.insight ? "insight" : undefined,
+                        disabled: labelAction.disabled,
                         removeUnderline: true,
                         children: labelAction.content
                     })