@dragunio/fe-libs 0.1.10 → 0.1.12

package/dist/index.mjs

@@ -22,12 +22,15 @@ import {
   lock_unlocked,
   log_out,
   minus_square,
+  pin_02,
   plus,
   plus_square,
   search,
+  settings,
   trash,
+  unpin_02,
   x_close
-} from "./chunk-BAZJ5UJ5.mjs";
+} from "./chunk-Y2EURBYU.mjs";
 
 // packages/button/src/index.tsx
 import { forwardRef } from "react";
@@ -502,9 +505,17 @@ function Pagination({
 
 // packages/table/src/index.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var TableContext = createContext({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
+var TableContext = createContext({
+  striped: false,
+  columnsById: /* @__PURE__ */ new Map(),
+  columnWidths: {},
+  fixedColumnIds: /* @__PURE__ */ new Set(),
+  frozenColumnLefts: /* @__PURE__ */ new Map(),
+  minColumnWidth: MIN_COLUMN_WIDTH,
+  maxColumnWidth: MAX_COLUMN_WIDTH
+});
 function getColumnCount(headers, data) {
   return Math.max(headers.length, ...data.map((row) => row.length), 0);
 }
@@ -528,6 +539,17 @@ function getInitialColumnSizes(headers, data, sizes2, minColumnWidth = MIN_COLUM
 function sameSizes(left, right) {
   return left.length === right.length && left.every((size, index) => size === right[index]);
 }
+function clampColumnWidth(column, width, minColumnWidth, maxColumnWidth) {
+  const min = Math.max(1, column.minWidth ?? minColumnWidth);
+  const max = Math.max(min, column.maxWidth ?? maxColumnWidth);
+  return Math.min(max, Math.max(min, Math.round(width)));
+}
+function getColumnWidths(columns, widths, minColumnWidth, maxColumnWidth) {
+  return Object.fromEntries(columns.map((column) => [
+    column.id,
+    clampColumnWidth(column, widths?.[column.id] ?? column.width ?? minColumnWidth, minColumnWidth, maxColumnWidth)
+  ]));
+}
 function DataTable({
   headers,
   data,
@@ -542,6 +564,12 @@ function DataTable({
   defaultPage = 1,
   onPageChange,
   paginationPosition = "bottom-right",
+  columns: _columns,
+  columnWidths: _columnWidths,
+  fixedColumnIds: _fixedColumnIds,
+  onResize: _onResize,
+  onResizeEnd: _onResizeEnd,
+  maxColumnWidth: _maxColumnWidth,
   className,
   ...props
 }) {
@@ -637,9 +665,7 @@ function DataTable({
     resolvedPaginationPosition !== "top-right" && paginationControl
   ] });
 }
-function Table({
-  headers,
-  data,
+function ComposableTable({
   striped,
   children,
   pagination,
@@ -648,10 +674,140 @@ function Table({
   defaultPage,
   onPageChange,
   paginationPosition,
+  columns,
+  columnWidths,
+  fixedColumnIds,
+  onResize,
+  onResizeEnd,
+  minColumnWidth = MIN_COLUMN_WIDTH,
+  maxColumnWidth = MAX_COLUMN_WIDTH,
+  className,
+  style,
   ...props
 }) {
-  if (headers || data) return /* @__PURE__ */ jsx5(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
-  return /* @__PURE__ */ jsx5(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx5("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+  const safeMinColumnWidth = Math.max(1, minColumnWidth);
+  const safeMaxColumnWidth = Math.max(safeMinColumnWidth, maxColumnWidth);
+  const columnSignature = columns?.map((column) => [
+    column.id,
+    column.width,
+    column.minWidth,
+    column.maxWidth,
+    column.resizable
+  ].join(":")).join("|") ?? "";
+  const [uncontrolledColumnWidths, setUncontrolledColumnWidths] = useState4(() => getColumnWidths(columns ?? [], void 0, safeMinColumnWidth, safeMaxColumnWidth));
+  const [resizingColumnId, setResizingColumnId] = useState4();
+  const resizeState = useRef3();
+  const resolvedColumns = useMemo2(() => columns ?? [], [columns]);
+  const columnsById = useMemo2(() => new Map(resolvedColumns.map((column) => [column.id, column])), [resolvedColumns]);
+  const resolvedColumnWidths = useMemo2(() => getColumnWidths(
+    resolvedColumns,
+    columnWidths ?? uncontrolledColumnWidths,
+    safeMinColumnWidth,
+    safeMaxColumnWidth
+  ), [columnSignature, columnWidths, uncontrolledColumnWidths, resolvedColumns, safeMinColumnWidth, safeMaxColumnWidth]);
+  const resolvedFixedColumnIds = useMemo2(() => new Set(
+    (fixedColumnIds ?? []).filter((columnId) => columnsById.has(columnId))
+  ), [columnsById, fixedColumnIds]);
+  const frozenColumnLefts = useMemo2(() => {
+    let left = 0;
+    const offsets = /* @__PURE__ */ new Map();
+    resolvedColumns.forEach((column) => {
+      if (!resolvedFixedColumnIds.has(column.id)) return;
+      offsets.set(column.id, left);
+      left += resolvedColumnWidths[column.id] ?? 0;
+    });
+    return offsets;
+  }, [resolvedColumnWidths, resolvedColumns, resolvedFixedColumnIds]);
+  const lastFrozenColumnId = useMemo2(() => [...resolvedColumns].reverse().find((column) => resolvedFixedColumnIds.has(column.id))?.id, [resolvedColumns, resolvedFixedColumnIds]);
+  const tableWidth = resolvedColumns.reduce((total, column) => total + (resolvedColumnWidths[column.id] ?? 0), 0);
+  useEffect3(() => {
+    if (columnWidths) return;
+    setUncontrolledColumnWidths((currentWidths) => ({
+      ...getColumnWidths(resolvedColumns, void 0, safeMinColumnWidth, safeMaxColumnWidth),
+      ...currentWidths
+    }));
+  }, [columnSignature, columnWidths, resolvedColumns, safeMinColumnWidth, safeMaxColumnWidth]);
+  const updateColumnWidth = useCallback2((columnId, nextWidth, isComplete = false) => {
+    const column = columnsById.get(columnId);
+    if (!column) return;
+    const width = clampColumnWidth(column, nextWidth, safeMinColumnWidth, safeMaxColumnWidth);
+    const nextColumnWidths = { ...resolvedColumnWidths, [columnId]: width };
+    if (!columnWidths) setUncontrolledColumnWidths(nextColumnWidths);
+    onResize?.(columnId, width, nextColumnWidths);
+    if (isComplete) onResizeEnd?.(columnId, width, nextColumnWidths);
+  }, [columnWidths, columnsById, onResize, onResizeEnd, resolvedColumnWidths, safeMinColumnWidth, safeMaxColumnWidth]);
+  const startColumnResize = useCallback2((event, columnId) => {
+    const column = columnsById.get(columnId);
+    const width = resolvedColumnWidths[columnId];
+    if (!column || column.resizable === false || typeof width !== "number") return;
+    event.preventDefault();
+    resizeState.current = { columnId, startX: event.clientX, startWidth: width, width };
+    setResizingColumnId(columnId);
+  }, [columnsById, resolvedColumnWidths]);
+  const resizeColumnWithKeyboard = useCallback2((event, columnId) => {
+    if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    const width = resolvedColumnWidths[columnId];
+    if (typeof width !== "number") return;
+    event.preventDefault();
+    updateColumnWidth(columnId, width + (event.key === "ArrowLeft" ? -16 : 16), true);
+  }, [resolvedColumnWidths, updateColumnWidth]);
+  useEffect3(() => {
+    if (!resizingColumnId) return void 0;
+    const onPointerMove = (event) => {
+      const activeResize = resizeState.current;
+      if (!activeResize) return;
+      const width = activeResize.startWidth + event.clientX - activeResize.startX;
+      activeResize.width = width;
+      updateColumnWidth(activeResize.columnId, width);
+    };
+    const stopResizing = () => {
+      const activeResize = resizeState.current;
+      resizeState.current = void 0;
+      setResizingColumnId(void 0);
+      if (activeResize) updateColumnWidth(activeResize.columnId, activeResize.width, true);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stopResizing);
+    window.addEventListener("pointercancel", stopResizing);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stopResizing);
+      window.removeEventListener("pointercancel", stopResizing);
+    };
+  }, [resizingColumnId, updateColumnWidth]);
+  const tableContext = useMemo2(() => ({
+    striped: striped ?? false,
+    columnsById,
+    columnWidths: resolvedColumnWidths,
+    fixedColumnIds: resolvedFixedColumnIds,
+    frozenColumnLefts,
+    minColumnWidth: safeMinColumnWidth,
+    maxColumnWidth: safeMaxColumnWidth,
+    lastFrozenColumnId,
+    resizingColumnId,
+    startColumnResize,
+    resizeColumnWithKeyboard
+  }), [columnsById, frozenColumnLefts, lastFrozenColumnId, resizingColumnId, resizeColumnWithKeyboard, resolvedColumnWidths, resolvedFixedColumnIds, startColumnResize, striped]);
+  const tableStyle = resolvedColumns.length ? { ...style, width: tableWidth, minWidth: tableWidth } : style ?? {};
+  return /* @__PURE__ */ jsx5(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsxs5(
+    "table",
+    {
+      className,
+      "data-fe-table": true,
+      "data-striped": striped || void 0,
+      "data-resizing": resizingColumnId || void 0,
+      style: tableStyle,
+      ...props,
+      children: [
+        resolvedColumns.length > 0 && /* @__PURE__ */ jsx5("colgroup", { children: resolvedColumns.map((column) => /* @__PURE__ */ jsx5("col", { style: { width: `${resolvedColumnWidths[column.id]}px` } }, column.id)) }),
+        children
+      ]
+    }
+  ) });
+}
+function Table({ headers, data, ...props }) {
+  if (headers || data) return /* @__PURE__ */ jsx5(DataTable, { headers: headers ?? [], data: data ?? [], ...props });
+  return /* @__PURE__ */ jsx5(ComposableTable, { ...props });
 }
 function TableHead(props) {
   return /* @__PURE__ */ jsx5("thead", { ...props });
@@ -663,11 +819,50 @@ function TableRow({ children, ...props }) {
   const { striped } = useContext(TableContext);
   return /* @__PURE__ */ jsx5("tr", { "data-striped": striped || void 0, ...props, children });
 }
-function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ jsx5("td", { ...props, children });
+function getFrozenProps(columnId, context, className, style) {
+  if (!columnId || !context.fixedColumnIds.has(columnId)) return { className, style };
+  const frozenClassNames = [
+    className,
+    "fe-table__frozen",
+    context.lastFrozenColumnId === columnId && "fe-table__frozen--last"
+  ].filter(Boolean).join(" ");
+  return {
+    className: frozenClassNames,
+    style: { ...style, left: context.frozenColumnLefts.get(columnId) ?? 0 }
+  };
+}
+function TableCell({ children, columnId, className, style, ...props }) {
+  const context = useContext(TableContext);
+  const frozenProps = getFrozenProps(columnId, context, className, style);
+  return /* @__PURE__ */ jsx5("td", { "data-fe-table-column-id": columnId, ...props, ...frozenProps, children });
 }
-function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ jsx5("th", { scope: "col", ...props, children });
+function TableHeader({ children, columnId, className, style, ...props }) {
+  const context = useContext(TableContext);
+  const column = columnId ? context.columnsById.get(columnId) : void 0;
+  const minWidth = Math.max(1, column?.minWidth ?? context.minColumnWidth);
+  const maxWidth = Math.max(minWidth, column?.maxWidth ?? context.maxColumnWidth);
+  const frozenProps = getFrozenProps(columnId, context, className, style);
+  const isResizable = Boolean(column && column.resizable !== false && context.startColumnResize);
+  return /* @__PURE__ */ jsxs5("th", { scope: "col", "data-fe-table-column-id": columnId, ...props, ...frozenProps, children: [
+    /* @__PURE__ */ jsx5("span", { className: "fe-table__header-content", children }),
+    isResizable && columnId && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "fe-table__resize-handle",
+        role: "separator",
+        "aria-label": `Resize ${getText(children) || "column"}`,
+        "aria-orientation": "vertical",
+        "aria-valuemin": minWidth,
+        "aria-valuemax": maxWidth,
+        "aria-valuenow": context.columnWidths[columnId],
+        tabIndex: 0,
+        title: "Drag to resize column",
+        "data-resizing": context.resizingColumnId === columnId || void 0,
+        onPointerDown: (event) => context.startColumnResize?.(event, columnId),
+        onKeyDown: (event) => context.resizeColumnWithKeyboard?.(event, columnId)
+      }
+    )
+  ] });
 }
 function TableCaption(props) {
   return /* @__PURE__ */ jsx5("caption", { ...props });
@@ -1626,6 +1821,9 @@ var Selection = forwardRef9(
     disabled = false,
     name,
     onKeyDown,
+    maxWidth,
+    overflow = "ellipsis",
+    style,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -1636,6 +1834,7 @@ var Selection = forwardRef9(
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
+    const tooltipId = generatedId + "-tooltip";
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
     const resolvedDescription = description ?? helperText;
@@ -1662,6 +1861,26 @@ var Selection = forwardRef9(
     const [activeIndex, setActiveIndex] = useState11(0);
     const rootRef = useRef7(null);
     const menuRef = useRef7(null);
+    const valueRef = useRef7(null);
+    const [truncated, setTruncated] = useState11(false);
+    const [hovered, setHovered] = useState11(false);
+    const [focused, setFocused] = useState11(false);
+    const showsTags = tag && multiple && selectedOptions.length > 0;
+    const canTruncate = overflow === "ellipsis" && !showsTags && selectedOptions.length > 0;
+    const selectedKey = selectedOptions.map((option) => String(option.value)).join("|");
+    useLayoutEffect3(() => {
+      const node = valueRef.current;
+      if (!canTruncate || !node) {
+        setTruncated(false);
+        return;
+      }
+      const measure = () => setTruncated(node.scrollWidth > node.clientWidth + 1);
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [canTruncate, selectedKey]);
     const [menuPosition, setMenuPosition] = useState11(null);
     useEffect5(() => {
       const close = (event) => {
@@ -1726,6 +1945,12 @@ var Selection = forwardRef9(
       setQuery("");
     };
     const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const showTooltip = truncated && (hovered || focused) && !open;
+    const renderLabels = () => displayLabel?.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
+      item,
+      index < displayLabel.length - 1 ? ", " : ""
+    ] }, index));
+    const toPx = (length) => typeof length === "number" ? length + "px" : length;
     const onTriggerKeyDown = (event) => {
       onKeyDown?.(event);
       if (disabled) return;
@@ -1757,12 +1982,14 @@ var Selection = forwardRef9(
         className: [
           "fe-selection",
           "fe-selection--" + size,
+          "fe-selection--" + overflow,
           open && "fe-selection--open",
           clearable && selectedOptions.length > 0 && "fe-selection--clearable",
           hasError && "fe-selection--error",
           disabled && "fe-selection--disabled",
           className
         ].filter(Boolean).join(" "),
+        style: maxWidth === void 0 ? style : { ...style, maxWidth: toPx(maxWidth) },
         ...props,
         children: [
           /* @__PURE__ */ jsx15(
@@ -1796,16 +2023,24 @@ var Selection = forwardRef9(
                 "aria-invalid": hasError || void 0,
                 "aria-required": isRequired || void 0,
                 "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy,
+                "aria-describedby": getDescribedBy(
+                  describedBy,
+                  showTooltip ? tooltipId : void 0
+                ),
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
+                onMouseEnter: () => setHovered(true),
+                onMouseLeave: () => setHovered(false),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
                 children: [
                   /* @__PURE__ */ jsx15(
                     "span",
                     {
+                      ref: valueRef,
                       className: [
                         "fe-selection__value",
                         !selectedOptions.length && "is-placeholder",
@@ -1821,10 +2056,7 @@ var Selection = forwardRef9(
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
-                        item,
-                        index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+                      )) : renderLabels() : /* @__PURE__ */ jsxs12(Fragment2, { children: [
                         /* @__PURE__ */ jsx15("span", { children: placeholder }),
                         isRequired && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
@@ -1843,6 +2075,7 @@ var Selection = forwardRef9(
                 onClick: clear
               }
             ),
+            showTooltip && /* @__PURE__ */ jsx15("span", { id: tooltipId, role: "tooltip", className: "fe-selection__tooltip", children: renderLabels() }),
             open && menuPosition && createPortal2(
               /* @__PURE__ */ jsxs12(
                 "div",
@@ -1894,7 +2127,7 @@ var Selection = forwardRef9(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ jsx15("span", { children: option.label }),
+                            /* @__PURE__ */ jsx15("span", { className: "fe-selection__option-label", children: option.label }),
                             isSelected && /* @__PURE__ */ jsx15(
                               "span",
                               {
@@ -5637,10 +5870,13 @@ export {
   message,
   minus_square,
   normalizePhoneNumber,
+  pin_02,
   plus,
   plus_square,
   search,
+  settings,
   trash,
+  unpin_02,
   validateEmail,
   validatePassword,
   validatePhoneNumber,

package/dist/styles.css

@@ -182,6 +182,8 @@
   color: #a36200;
 }
 .fe-button--icon-only {
+  align-self: center;
+  aspect-ratio: 1 / 1;
   min-width: 24px;
   min-height: 24px;
   padding: 4px;
@@ -366,22 +368,45 @@
   background: var(--fe-tabs-accent);
 }
 .fe-tabs--segment .fe-tabs__list {
-  gap: 4px;
-  min-width: fit-content;
+  width: 100%;
+  min-width: 100%;
   padding: 4px;
-  border: 1px solid var(--fe-tabs-border);
-  border-radius: 12px;
-  background: var(--fe-tabs-surface);
+  border: 0;
+  border-radius: 999px;
+  background: #f1f2f4;
 }
 .fe-tabs--segment .fe-tabs__tab {
   min-height: 34px;
+  flex: 1 1 0;
   padding: 7px 12px;
-  border-radius: 8px;
+  border-radius: 999px;
+  color: #9ba0aa;
+  font-weight: 500;
+}
+.fe-tabs--segment .fe-tabs__tab + .fe-tabs__tab::before {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: 0;
+  width: 1px;
+  background: #e4e6eb;
+  content: "";
+}
+.fe-tabs--segment .fe-tabs__tab[aria-selected=true]::before,
+.fe-tabs--segment .fe-tabs__tab[aria-selected=true] + .fe-tabs__tab::before {
+  display: none;
 }
 .fe-tabs--segment .fe-tabs__tab[aria-selected=true] {
-  color: var(--fe-tabs-accent);
+  color: var(--fe-tabs-text);
   background: #fff;
-  box-shadow: 0 1px 2px rgb(16 24 40 / 14%);
+  box-shadow: none;
+  font-weight: 700;
+}
+.fe-tabs--segment .fe-tabs__tab:not(:disabled):hover {
+  color: var(--fe-tabs-text);
+}
+.fe-tabs--segment .fe-tabs__tab:disabled {
+  color: #c5c9d1;
 }
 .fe-tabs__panel {
   padding-top: 20px;
@@ -465,6 +490,41 @@ table[data-fe-table][data-striped] tbody tr:nth-child(even) {
 table[data-fe-table] tbody tr:hover {
   background: var(--fe-table-hover-background, #edf5ff);
 }
+.fe-table__frozen {
+  position: sticky;
+  z-index: 10;
+  background: var(--fe-table-background, #fff);
+}
+.fe-table__table thead .fe-table__frozen,
+table[data-fe-table] thead .fe-table__frozen {
+  position: sticky;
+  z-index: 12;
+  background: var(--fe-table-header-background, #f8fafc);
+}
+.fe-table__table[data-striped] tbody tr:nth-child(even) > .fe-table__frozen,
+table[data-fe-table][data-striped] tbody tr:nth-child(even) > .fe-table__frozen {
+  background: var(--fe-table-stripe-background, #f8fafc);
+}
+.fe-table__table tbody tr:hover > .fe-table__frozen,
+table[data-fe-table] tbody tr:hover > .fe-table__frozen {
+  background: var(--fe-table-hover-background, #edf5ff);
+}
+.fe-table__frozen--last {
+  box-shadow: 10px 0 16px -12px rgba(15, 23, 42, .42);
+}
+.fe-table__table tbody td:has(.fe-tooltip:hover),
+.fe-table__table tbody td:has(.fe-tooltip:focus-within),
+table[data-fe-table] tbody td:has(.fe-tooltip:hover),
+table[data-fe-table] tbody td:has(.fe-tooltip:focus-within) {
+  position: relative;
+  z-index: 13;
+}
+.fe-table__table tbody td.fe-table__frozen:has(.fe-tooltip:hover),
+.fe-table__table tbody td.fe-table__frozen:has(.fe-tooltip:focus-within),
+table[data-fe-table] tbody td.fe-table__frozen:has(.fe-tooltip:hover),
+table[data-fe-table] tbody td.fe-table__frozen:has(.fe-tooltip:focus-within) {
+  position: sticky;
+}
 .fe-table__header-content {
   display: block;
   padding-right: 16px;
@@ -472,32 +532,40 @@ table[data-fe-table] tbody tr:hover {
 .fe-table__resize-handle {
   position: absolute;
   z-index: 1;
-  top: 7px;
-  right: 4px;
-  width: 4px;
-  height: calc(100% - 14px);
+  top: 0;
+  right: -6px;
+  width: 12px;
+  height: 100%;
   border-radius: 4px;
-  background: var(--fe-table-resize-handle-background, #d6deea);
+  background: transparent;
   cursor: col-resize;
   touch-action: none;
   outline: none;
 }
 .fe-table__resize-handle::after {
+  position: absolute;
+  top: 10px;
+  left: 5px;
+  width: 3px;
+  height: calc(100% - 20px);
+  border-radius: 2px;
+  background: transparent;
+  content: "";
+  transition: background-color 150ms ease;
 }
-.fe-table__resize-handle:hover,
-.fe-table__resize-handle:focus-visible,
-.fe-table[data-resizing] .fe-table__resize-handle {
-  background: var(--fe-table-resize-handle-active-background, #bfdbfe);
-}
-.fe-table__resize-handle:hover::after,
+.fe-table__table th:hover .fe-table__resize-handle::after,
+table[data-fe-table] th:hover .fe-table__resize-handle::after,
 .fe-table__resize-handle:focus-visible::after,
-.fe-table[data-resizing] .fe-table__resize-handle::after {
+.fe-table__resize-handle[data-resizing]::after {
   background: var(--fe-table-resize-handle, #1d4ed8);
-  box-shadow: -3px 0 var(--fe-table-resize-handle, #1d4ed8), 3px 0 var(--fe-table-resize-handle, #1d4ed8);
 }
 .fe-table__resize-handle:focus-visible {
   box-shadow: 0 0 0 2px var(--fe-table-focus-ring, #2563eb);
 }
+table[data-fe-table][data-resizing] {
+  cursor: col-resize;
+  user-select: none;
+}
 
 /* packages/toggle/src/styles.css */
 .fe-toggle {
@@ -818,8 +886,9 @@ table[data-fe-table] tbody tr:hover {
   display: flex;
   align-items: center;
   width: 100%;
+  min-width: 0;
   min-height: 40px;
-  padding: 0 13px;
+  padding: 0 40px 0 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
   outline: 0;
@@ -834,7 +903,11 @@ table[data-fe-table] tbody tr:hover {
     background 0.15s;
 }
 .fe-selection--clearable .fe-selection__trigger {
-  padding-right: 64px;
+  padding-right: 72px;
+}
+.fe-selection--wrap .fe-selection__trigger {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .fe-selection--small .fe-selection__trigger {
   min-height: 34px;
@@ -854,19 +927,24 @@ table[data-fe-table] tbody tr:hover {
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.12);
 }
 .fe-selection__value {
-  display: flex;
+  display: block;
   width: 100%;
   min-width: 0;
   flex: 1 1 auto;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.fe-selection--wrap .fe-selection__value {
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
 .fe-selection__value.is-placeholder {
   color: #8b94a4;
 }
 .fe-selection__value.is-tags {
+  display: flex;
   flex-wrap: wrap;
   align-content: center;
   gap: 5px;
@@ -945,6 +1023,24 @@ table[data-fe-table] tbody tr:hover {
   outline: 2px solid #2878f0;
   outline-offset: 1px;
 }
+.fe-selection__tooltip {
+  position: absolute;
+  z-index: 50;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 7px 9px;
+  border-radius: 7px;
+  background: #20242c;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
 .fe-selection__chevron {
   position: absolute;
   top: 2px;
@@ -1005,6 +1101,7 @@ table[data-fe-table] tbody tr:hover {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
   min-height: 37px;
   padding: 8px 10px;
@@ -1030,7 +1127,12 @@ table[data-fe-table] tbody tr:hover {
   opacity: 0.45;
   cursor: not-allowed;
 }
+.fe-selection__option-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .fe-selection__check {
+  flex: none;
   font-weight: 800;
 }
 .fe-selection__empty {