@expcat/tigercat-react 1.4.0 → 1.5.0

package/dist/{chunk-QIL24WZD.mjs → chunk-DEQZZKY5.mjs}

@@ -1,3 +1,6 @@
+import {
+  useInputGroupContext
+} from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
 } from "./chunk-WHYHLUXG.mjs";
@@ -19,7 +22,7 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Input = ({
-  size = "md",
+  size,
   type = "text",
   status = "default",
   errorMessage,
@@ -51,6 +54,8 @@ var Input = ({
   ...props
 }) => {
   injectShakeStyle();
+  const inputGroup = useInputGroupContext();
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
   const wrapperRef = useRef(null);
   const inputRef = useRef(null);
   const reactId = useId();
@@ -92,21 +97,21 @@ var Input = ({
   const showPasswordToggle = showPassword && type === "password" && !disabled;
   const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
   const inputClasses = getInputClasses({
-    size,
+    size: effectiveSize,
     status,
     hasPrefix,
     hasSuffix
   });
   const renderSuffix = () => {
     if (activeError) {
-      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(size), children: errorMessage });
+      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), children: errorMessage });
     }
     if (showClear) {
       return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: getInputClearButtonClasses(size),
+          className: getInputClearButtonClasses(effectiveSize),
           onClick: handleClear,
           "aria-label": "Clear input",
           tabIndex: -1,
@@ -119,7 +124,7 @@ var Input = ({
         "button",
         {
           type: "button",
-          className: getInputPasswordToggleClasses(size),
+          className: getInputPasswordToggleClasses(effectiveSize),
           onClick: togglePasswordVisibility,
           "aria-label": passwordVisible ? "Hide password" : "Show password",
           tabIndex: -1,
@@ -128,7 +133,7 @@ var Input = ({
       );
     }
     if (suffix) {
-      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", size), children: suffix });
+      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", effectiveSize), children: suffix });
     }
     return null;
   };
@@ -140,7 +145,7 @@ var Input = ({
       style,
       onAnimationEnd: handleAnimationEnd,
       children: [
-        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", size), children: prefix }),
+        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", effectiveSize), children: prefix }),
         /* @__PURE__ */ jsx(
           "input",
           {

package/dist/{chunk-TEYL5X56.js → chunk-DH4B2COV.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkKYNWNTGOjs = require('./chunk-KYNWNTGO.js');
+var _chunkHFGTJEQWjs = require('./chunk-HFGTJEQW.js');
 
 
 var _chunk5ALMTE35js = require('./chunk-5ALMTE35.js');
 
 
-var _chunkZRHDNGWOjs = require('./chunk-ZRHDNGWO.js');
+var _chunkBR3WLDH7js = require('./chunk-BR3WLDH7.js');
 
 
 var _chunkLZG24TDBjs = require('./chunk-LZG24TDB.js');
@@ -38,6 +38,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
+
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
@@ -123,6 +124,9 @@ var LoadingSpinner = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
 
 
 
+
+
+
 function useTableState(input) {
   const {
     columns,
@@ -238,7 +242,7 @@ function useTableState(input) {
   }, [columns, fixedOverrides, effectiveHiddenColumnKeys]);
   const totalColumnCount = _react.useMemo.call(void 0, () => {
     let count = displayColumns.length;
-    if (rowSelection && rowSelection.showCheckbox !== false) count++;
+    if (_tigercatcore.hasTableSelectionColumn.call(void 0, rowSelection)) count++;
     if (expandable) count++;
     return count;
   }, [displayColumns.length, rowSelection, expandable]);
@@ -281,14 +285,14 @@ function useTableState(input) {
     if (filterMode === "advanced" && advancedFilterRules.length > 0) {
       data = _tigercatcore.filterDataAdvanced.call(void 0, data, advancedFilterRules);
     } else {
-      data = _tigercatcore.filterData.call(void 0, data, filterState);
+      data = _tigercatcore.filterTableData.call(void 0, data, columns, filterState);
     }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
       data = _tigercatcore.sortData.call(void 0, data, sortState.key, sortState.direction, _optionalChain([column, 'optionalAccess', _25 => _25.sortFn]));
     }
     return data;
-  }, [dataSource, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
+  }, [dataSource, columns, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
   const paginatedData = _react.useMemo.call(void 0, () => {
     if (pagination === false) {
       return processedData;
@@ -406,28 +410,28 @@ function useTableState(input) {
     }
     _optionalChain([onSelectionChange, 'optionalCall', _41 => _41(newKeys)]);
   }
+  const selectionState = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getTableSelectionState.call(void 0, {
+      records: paginatedData,
+      rowKeys: pageRowKeys,
+      selectedRowKeys,
+      getCheckboxProps: _optionalChain([rowSelection, 'optionalAccess', _42 => _42.getCheckboxProps])
+    }),
+    [paginatedData, pageRowKeys, selectedRowKeys, rowSelection]
+  );
   function handleSelectAll(checked) {
-    if (checked) {
-      const newKeys = pageRowKeys;
-      if (!isSelectionControlled) {
-        setUncontrolledSelectedRowKeys(newKeys);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _42 => _42(newKeys)]);
-    } else {
-      if (!isSelectionControlled) {
-        setUncontrolledSelectedRowKeys([]);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _43 => _43([])]);
+    const newKeys = _tigercatcore.getNextTableSelectAllKeys.call(void 0, 
+      selectedRowKeys,
+      selectionState.selectableRowKeys,
+      checked
+    );
+    if (!isSelectionControlled) {
+      setUncontrolledSelectedRowKeys(newKeys);
     }
+    _optionalChain([onSelectionChange, 'optionalCall', _43 => _43(newKeys)]);
   }
-  const allSelected = _react.useMemo.call(void 0, () => {
-    if (pageRowKeys.length === 0) return false;
-    return pageRowKeys.every((key) => selectedRowKeySet.has(key));
-  }, [pageRowKeys, selectedRowKeySet]);
-  const someSelected = _react.useMemo.call(void 0, 
-    () => selectedRowKeys.length > 0 && !allSelected,
-    [selectedRowKeys.length, allSelected]
-  );
+  const allSelected = selectionState.allSelected;
+  const someSelected = selectionState.someSelected;
   const [editingCell, setEditingCell] = _react.useState.call(void 0, 
     null
   );
@@ -557,9 +561,10 @@ function renderTableHeader(ctx, view) {
     columnLockable,
     columnDraggable,
     lockColumnAriaLabel,
-    unlockColumnAriaLabel
+    unlockColumnAriaLabel,
+    labels
   } = view;
-  const expandHeaderTh = expandable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: _tigercatcore.getExpandIconCellClasses.call(void 0, size), "aria-label": "Expand" }) : null;
+  const expandHeaderTh = expandable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: _tigercatcore.getExpandIconCellClasses.call(void 0, size), "aria-label": labels.expandText }) : null;
   const expandAtStart = _optionalChain([expandable, 'optionalAccess', _52 => _52.expandIconPosition]) !== "end";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { className: _tigercatcore.getTableHeaderClasses.call(void 0, stickyHeader), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
     expandAtStart && expandHeaderTh,
@@ -640,7 +645,7 @@ function renderTableHeader(ctx, view) {
                 onChange: (e) => ctx.handleFilter(column.key, e.target.value),
                 onClick: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: "All" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: labels.allText }),
                   column.filter.options.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: opt.value, children: opt.label }, opt.value))
                 ]
               }
@@ -649,7 +654,7 @@ function renderTableHeader(ctx, view) {
               {
                 type: "text",
                 className: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
-                placeholder: column.filter.placeholder || "Filter...",
+                placeholder: column.filter.placeholder || labels.filterPlaceholder,
                 onInput: (e) => ctx.handleFilter(column.key, e.target.value),
                 onClick: (e) => e.stopPropagation()
               }
@@ -682,6 +687,7 @@ function renderTableHeader(ctx, view) {
 
 
 
+
 function renderTableBody(ctx, view) {
   const {
     size,
@@ -691,8 +697,11 @@ function renderTableBody(ctx, view) {
     emptyText,
     rowSelection,
     expandable,
+    labels,
     rowClassName,
-    rowDraggable
+    rowDraggable,
+    interactiveRows,
+    virtualWindow
   } = view;
   if (loading) {
     return null;
@@ -744,7 +753,7 @@ function renderTableBody(ctx, view) {
       {
         type: "button",
         className: "inline-flex items-center justify-center",
-        "aria-label": isExpanded ? "Collapse row" : "Expand row",
+        "aria-label": isExpanded ? labels.collapseRowAriaLabel : labels.expandRowAriaLabel,
         "aria-expanded": isExpanded,
         onClick: (e) => {
           e.stopPropagation();
@@ -762,6 +771,15 @@ function renderTableBody(ctx, view) {
           _tigercatcore.getTableRowClasses.call(void 0, hoverable, striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.hasFixedColumns && "group"
         ),
+        "aria-selected": rowSelection ? isSelected : void 0,
+        tabIndex: interactiveRows ? 0 : void 0,
+        onKeyDown: interactiveRows ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (_tigercatcore.isActivationKey.call(void 0, e)) {
+            e.preventDefault();
+            ctx.handleRowClick(record, index, key);
+          }
+        } : void 0,
         draggable: rowDraggable ? true : void 0,
         children: [
           expandAtStart && expandToggleCell,
@@ -862,6 +880,33 @@ function renderTableBody(ctx, view) {
       }
     );
   }
+  if (virtualWindow && virtualWindow.endIndex >= virtualWindow.startIndex) {
+    const { startIndex, endIndex, topPad, bottomPad } = virtualWindow;
+    const windowed = [];
+    if (topPad > 0) {
+      windowed.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { colSpan: ctx.totalColumnCount, style: { height: `${topPad}px`, padding: 0 } }) }, "virtual-top")
+      );
+    }
+    for (let index = startIndex; index <= endIndex; index++) {
+      windowed.push(renderDataRow(ctx.paginatedData[index], index));
+    }
+    if (bottomPad > 0) {
+      windowed.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { colSpan: ctx.totalColumnCount, style: { height: `${bottomPad}px`, padding: 0 } }) }, "virtual-bottom")
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "tbody",
+      {
+        onClick: handleBodyClick,
+        onDragStart: rowDraggable ? handleBodyDragStart : void 0,
+        onDragOver: rowDraggable ? handleBodyDragOver : void 0,
+        onDrop: rowDraggable ? handleBodyDrop : void 0,
+        children: windowed
+      }
+    );
+  }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "tbody",
     {
@@ -1031,7 +1076,7 @@ function Table({
   virtual = false,
   autoVirtual = true,
   virtualHeight = 400,
-  virtualItemHeight: _virtualItemHeight = 40,
+  virtualItemHeight = 40,
   autoVirtualThreshold = 1e4,
   virtualThreshold = 1e3,
   editable = false,
@@ -1184,6 +1229,16 @@ function Table({
     [autoVirtual, autoVirtualThreshold, dataSource.length, virtual, virtualThreshold]
   );
   const effectiveVirtual = virtualRecommendation.enabled;
+  const [virtualScrollTop, setVirtualScrollTop] = _react.useState.call(void 0, 0);
+  const virtualWindow = _react.useMemo.call(void 0, 
+    () => effectiveVirtual ? _tigercatcore.getTableVirtualWindow.call(void 0, 
+      virtualScrollTop,
+      typeof virtualHeight === "number" ? virtualHeight : 400,
+      virtualItemHeight,
+      ctx.paginatedData.length
+    ) : void 0,
+    [effectiveVirtual, virtualScrollTop, virtualHeight, virtualItemHeight, ctx.paginatedData.length]
+  );
   const wrapperStyle = _react.useMemo.call(void 0, () => {
     if (effectiveVirtual) {
       return {
@@ -1222,6 +1277,7 @@ function Table({
         maxHeight || (virtual ? virtualHeight : void 0)
       ),
       style: wrapperStyle,
+      onScroll: effectiveVirtual ? (e) => setVirtualScrollTop(e.target.scrollTop) : void 0,
       "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
       "data-tiger-virtual-auto": virtualRecommendation.autoEnabled ? "true" : void 0,
       "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
@@ -1229,7 +1285,16 @@ function Table({
       "data-tiger-measured-row-height": measuredRowHeights[0] || void 0,
       "aria-busy": loading,
       children: [
-        exportable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: _tigercatcore.tableExportButtonClasses, onClick: ctx.handleExport, children: exportFormat === "excel" ? "Export Excel" : "Export CSV" }) }),
+        exportable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.tableExportButtonClasses,
+            "aria-label": exportFormat === "excel" ? tableLabels.exportExcelAriaLabel : tableLabels.exportCsvAriaLabel,
+            onClick: ctx.handleExport,
+            children: exportFormat === "excel" ? tableLabels.exportExcelText : tableLabels.exportCsvText
+          }
+        ) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "table",
           {
@@ -1267,7 +1332,8 @@ function Table({
                 columnLockable,
                 columnDraggable,
                 lockColumnAriaLabel: tableLabels.lockColumnAriaLabel,
-                unlockColumnAriaLabel: tableLabels.unlockColumnAriaLabel
+                unlockColumnAriaLabel: tableLabels.unlockColumnAriaLabel,
+                labels: tableLabels
               }),
               renderTableBody(ctx, {
                 size,
@@ -1277,8 +1343,11 @@ function Table({
                 emptyText: tableLabels.emptyText,
                 rowSelection: internalRowSelection,
                 expandable: internalExpandable,
+                labels: tableLabels,
                 rowClassName: internalRowClassName,
-                rowDraggable
+                rowDraggable,
+                interactiveRows: !!onRowClick || !!internalRowSelection,
+                virtualWindow
               }),
               renderSummaryRow(ctx, {
                 size,
@@ -1306,7 +1375,7 @@ function Table({
                 }
               ) }) : null,
               ctx.displayColumns.some((column) => column.sortable) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkKYNWNTGOjs.Select,
+                _chunkHFGTJEQWjs.Select,
                 {
                   size: "sm",
                   value: ctx.sortState.key && ctx.sortState.direction ? `${ctx.sortState.key}:${ctx.sortState.direction}` : "",
@@ -1337,7 +1406,7 @@ function Table({
                   }
                 }
               ) }) : null,
-              ctx.paginatedData.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getTableResponsiveCardClasses.call(void 0, cardPadding), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZRHDNGWOjs.Empty, { showImage: false, description: tableLabels.emptyText }) }) : ctx.paginatedData.map((record, index) => {
+              ctx.paginatedData.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getTableResponsiveCardClasses.call(void 0, cardPadding), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBR3WLDH7js.Empty, { showImage: false, description: tableLabels.emptyText }) }) : ctx.paginatedData.map((record, index) => {
                 const key = ctx.pageRowKeys[index];
                 const isExpanded = ctx.expandedRowKeySet.has(key);
                 const isSelected = ctx.selectedRowKeySet.has(key);

package/dist/{chunk-BONUUJU3.mjs → chunk-DJOFM2VO.mjs}

@@ -43,14 +43,7 @@ var Splitter = ({
     const totalGutter = (paneCount2 - 1) * gutterSize;
     const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
     if (controlledSizes && controlledSizes.length > 0) {
-      if (total > 0) {
-        const sum = controlledSizes.reduce((a, b) => a + b, 0);
-        if (sum > 0) {
-          setPaneSizes(controlledSizes.map((s) => s / sum * total));
-        }
-      } else {
-        setPaneSizes([...controlledSizes]);
-      }
+      setPaneSizes([...controlledSizes]);
     } else {
       if (total > 0) {
         const eachSize = total / paneCount2;

package/dist/{chunk-SQTOVSDU.mjs → chunk-DO3MVZZN.mjs}

@@ -238,7 +238,7 @@ function useTimePickerState(allProps) {
     updateTime(hours24, selectedMinutes, selectedSeconds);
   };
   const updateTime = (hours, minutes, seconds) => {
-    if (!isTimeInRange(hours, minutes, minTime, maxTime)) {
+    if (!isTimeInRange(hours, minutes, minTime, maxTime, seconds)) {
       return;
     }
     let timeString = formatTime(hours, minutes, seconds, showSeconds);
@@ -305,10 +305,13 @@ function useTimePickerState(allProps) {
   };
   const isHourDisabled = (hour) => {
     const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
-    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime);
+    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime, selectedSeconds);
   };
   const isMinuteDisabled = (minute) => {
-    return !isTimeInRange(selectedHours, minute, minTime, maxTime);
+    return !isTimeInRange(selectedHours, minute, minTime, maxTime, selectedSeconds);
+  };
+  const isSecondDisabled = (second) => {
+    return !isTimeInRange(selectedHours, selectedMinutes, minTime, maxTime, second);
   };
   const handleInputClick = () => {
     togglePanel();
@@ -391,7 +394,8 @@ function useTimePickerState(allProps) {
     selectSecond,
     selectPeriod,
     isHourDisabled,
-    isMinuteDisabled
+    isMinuteDisabled,
+    isSecondDisabled
   };
 }
 
@@ -432,7 +436,7 @@ function renderTimePickerMobile(ctx) {
         value: ctx.selectedSeconds,
         "aria-label": ctx.labels.second,
         onChange: (event) => ctx.selectSecond(Number(event.target.value)),
-        children: ctx.secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+        children: ctx.secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, disabled: ctx.isSecondDisabled(second), children: padTwo(second) }, second))
       }
     ),
     ctx.format === "12" && /* @__PURE__ */ jsxs(
@@ -523,11 +527,13 @@ function renderTimePickerDesktop(ctx) {
       /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: ctx.labels.second }),
       /* @__PURE__ */ jsx2("div", { className: timePickerColumnListClasses, children: ctx.secondsList.map((second) => {
         const isSelected = ctx.selectedSeconds === second;
+        const isDisabled = ctx.isSecondDisabled(second);
         return /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
-            className: getTimePickerItemClasses(isSelected, false),
+            className: getTimePickerItemClasses(isSelected, isDisabled),
+            disabled: isDisabled,
             onClick: () => ctx.selectSecond(second),
             "data-tiger-timepicker-unit": "second",
             "aria-label": getTimePickerOptionAriaLabel(

package/dist/{chunk-SDZKL3IB.mjs → chunk-E355NVP7.mjs}

@@ -25,9 +25,17 @@ import {
   normalizeStringOption,
   createInstanceCounter
 } from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MESSAGE_CONTAINER_ID = "tiger-message-container";
 var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
+var MESSAGE_POSITIONS = [
+  "top",
+  "top-left",
+  "top-right",
+  "bottom",
+  "bottom-left",
+  "bottom-right"
+];
 var messageInstances = [];
 var containerRoot = null;
 var updateCallback = null;
@@ -91,17 +99,12 @@ var MessageItem = ({ message, onClose }) => {
     }
   );
 };
-var MessageContainer = ({ position = "top" }) => {
-  const [messages, setMessages] = useState(() => [...messageInstances]);
-  useEffect(() => {
-    updateCallback = () => {
-      setMessages([...messageInstances]);
-    };
-    return () => {
-      updateCallback = null;
-    };
-  }, []);
+var MessageContainer = ({
+  position = "top",
+  messages = messageInstances.filter((message) => message.position === position)
+}) => {
   const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
+  const containerId = position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${position}`;
   const handleRemove = useCallback((id) => {
     removeMessage(id);
   }, []);
@@ -109,14 +112,31 @@ var MessageContainer = ({ position = "top" }) => {
     "div",
     {
       className: containerClasses,
-      id: MESSAGE_CONTAINER_ID,
+      id: containerId,
       "aria-live": "polite",
       "aria-relevant": "additions",
+      "data-tiger-message-position": position,
       "data-tiger-message-container": true,
       children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, onClose: handleRemove }, message.id))
     }
   );
 };
+var MessageHost = () => {
+  const [messages, setMessages] = useState(() => [...messageInstances]);
+  useEffect(() => {
+    updateCallback = () => {
+      setMessages([...messageInstances]);
+    };
+    return () => {
+      updateCallback = null;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: MESSAGE_POSITIONS.map((position) => {
+    const positionedMessages = messages.filter((message) => message.position === position);
+    if (positionedMessages.length === 0) return null;
+    return /* @__PURE__ */ jsx(MessageContainer, { position, messages: positionedMessages }, position);
+  }) });
+};
 function ensureContainer() {
   if (!isBrowser()) {
     return;
@@ -138,7 +158,7 @@ function ensureContainer() {
   }
   containerRoot = createRoot(rootEl);
   flushSync(() => {
-    containerRoot?.render(/* @__PURE__ */ jsx(MessageContainer, {}));
+    containerRoot?.render(/* @__PURE__ */ jsx(MessageHost, {}));
   });
 }
 function addMessage(config) {
@@ -151,7 +171,8 @@ function addMessage(config) {
     closable: config.closable || false,
     onClose: config.onClose,
     icon: config.icon,
-    className: config.className
+    className: config.className,
+    position: config.position ?? "top"
   };
   messageInstances.push(instance);
   const rootId = `${MESSAGE_CONTAINER_ID}-root`;