@johly/bits-ui 2.18.8 → 2.18.10

package/dist/bits/filter/components/filter-menu-node.svelte

@@ -139,7 +139,7 @@
 				<MenuSubContent
 					sideOffset={8}
 					align={getSubmenuAlign(meta)}
-					collisionAvoidance={{ side: "shift", align: "shift" }}
+					collisionAvoidance={{ side: "flip", align: "shift" }}
 				>
 					{#if column && meta?.kind === "column" && meta.editor === "text"}
 						<FilterTextEditor column={column as Column<unknown, "text">} {actions} />

package/dist/bits/filter/filter-fns.js

@@ -16,6 +16,11 @@ function isSameDay(a, b) {
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 }
+function setEquals(a, b) {
+    const aSet = new Set(a);
+    const bSet = new Set(b);
+    return aSet.size === bSet.size && [...aSet].every((value) => bSet.has(value));
+}
 export function optionFilterFn(inputData, filterValue) {
     if (!inputData)
         return false;
@@ -50,6 +55,10 @@ export function multiOptionFilterFn(inputData, filterValue) {
             return intersection(values, filterValues).length === filterValues.length;
         case "exclude if all":
             return intersection(values, filterValues).length !== filterValues.length;
+        case "include exactly":
+            return setEquals(values, filterValues);
+        case "exclude exactly":
+            return !setEquals(values, filterValues);
     }
 }
 export function dateFilterFn(inputData, filterValue) {
@@ -80,9 +89,11 @@ export function dateFilterFn(inputData, filterValue) {
         case "is on or before":
             return isSameDay(value, d1) || value.getTime() < startOfDay(d1).getTime();
         case "is between":
-            return value.getTime() >= startOfDay(d1).getTime() && value.getTime() <= endOfDay(d2).getTime();
+            return (value.getTime() >= startOfDay(d1).getTime() &&
+                value.getTime() <= endOfDay(d2).getTime());
         case "is not between":
-            return value.getTime() < startOfDay(d1).getTime() || value.getTime() > endOfDay(d2).getTime();
+            return (value.getTime() < startOfDay(d1).getTime() ||
+                value.getTime() > endOfDay(d2).getTime());
     }
 }
 export function textFilterFn(inputData, filterValue) {

package/dist/bits/filter/i18n.js

@@ -19,8 +19,10 @@ const en = {
     "filters.multiOption.includeAnyOf": "includes any of",
     "filters.multiOption.excludeAllOf": "excludes all of",
     "filters.multiOption.includeAllOf": "includes all of",
+    "filters.multiOption.includeExactly": "includes exactly",
     "filters.multiOption.excludeIfAnyOf": "excludes if any of",
     "filters.multiOption.excludeIfAll": "excludes if all of",
+    "filters.multiOption.excludeExactly": "excludes exactly",
     "filters.date.is": "is",
     "filters.date.isNot": "is not",
     "filters.date.isBefore": "is before",

package/dist/bits/filter/menu-nodes.js

@@ -143,7 +143,12 @@ function getOperatorRecord(column) {
 export function createOperatorNodes({ filter, column, actions, locale, }) {
     const operators = getOperatorRecord(column);
     const currentOperator = operators[filter.operator];
-    const relatedOperators = Object.values(operators).filter((operator) => currentOperator && operator.target === currentOperator.target);
+    const currentTarget = currentOperator?.target === "any"
+        ? filter.values.length > 1
+            ? "multiple"
+            : "single"
+        : currentOperator?.target;
+    const relatedOperators = Object.values(operators).filter((operator) => currentTarget && (operator.target === currentTarget || operator.target === "any"));
     return [
         {
             kind: "radio-group",
@@ -185,7 +190,8 @@ export function createColumnNodes({ columns, filters, actions, locale, strategy,
             };
         }
         if (isNumberColumn(column)) {
-            const unit = column.meta?.number?.unit;
+            const unit = column.meta
+                ?.number?.unit;
             return {
                 kind: "submenu",
                 id: column.id,

package/dist/bits/filter/operators.d.ts

@@ -1,5 +1,5 @@
 import type { ColumnDataType, FilterOperatorTarget, FilterOperators, FilterTypeOperatorDetails, FilterValues } from "./types.js";
-export declare const DEFAULT_OPERATORS: Record<ColumnDataType, Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>>;
+export declare const DEFAULT_OPERATORS: Record<ColumnDataType, Record<Exclude<FilterOperatorTarget, "any">, FilterOperators[ColumnDataType]>>;
 export declare const optionFilterOperators: {
     readonly is: {
         readonly key: "filters.option.is";
@@ -80,19 +80,35 @@ export declare const multiOptionFilterOperators: {
         readonly value: "include all of";
         readonly target: "multiple";
         readonly pluralOf: "include";
-        readonly relativeOf: ["include any of", "exclude if all", "exclude if any of"];
+        readonly relativeOf: ["include any of", "exclude if all", "include exactly", "exclude if any of"];
         readonly isNegated: false;
         readonly negation: "exclude if any of";
     };
+    readonly "include exactly": {
+        readonly key: "filters.multiOption.includeExactly";
+        readonly value: "include exactly";
+        readonly target: "any";
+        readonly relativeOf: ["include", "include any of", "include all of", "exclude exactly"];
+        readonly isNegated: false;
+        readonly negation: "exclude exactly";
+    };
     readonly "exclude if any of": {
         readonly key: "filters.multiOption.excludeIfAnyOf";
         readonly value: "exclude if any of";
         readonly target: "multiple";
         readonly pluralOf: "exclude";
-        readonly relativeOf: ["include any of", "exclude if all", "include all of"];
+        readonly relativeOf: ["include any of", "exclude if all", "include all of", "exclude exactly"];
         readonly isNegated: true;
         readonly negationOf: "include all of";
     };
+    readonly "exclude exactly": {
+        readonly key: "filters.multiOption.excludeExactly";
+        readonly value: "exclude exactly";
+        readonly target: "any";
+        readonly relativeOf: ["exclude", "exclude if any of", "exclude if all", "include exactly"];
+        readonly isNegated: true;
+        readonly negationOf: "include exactly";
+    };
 };
 export declare const dateFilterOperators: {
     readonly is: {

package/dist/bits/filter/operators.js

@@ -108,19 +108,35 @@ export const multiOptionFilterOperators = {
         value: "include all of",
         target: "multiple",
         pluralOf: "include",
-        relativeOf: ["include any of", "exclude if all", "exclude if any of"],
+        relativeOf: ["include any of", "exclude if all", "include exactly", "exclude if any of"],
         isNegated: false,
         negation: "exclude if any of",
     },
+    "include exactly": {
+        key: "filters.multiOption.includeExactly",
+        value: "include exactly",
+        target: "any",
+        relativeOf: ["include", "include any of", "include all of", "exclude exactly"],
+        isNegated: false,
+        negation: "exclude exactly",
+    },
     "exclude if any of": {
         key: "filters.multiOption.excludeIfAnyOf",
         value: "exclude if any of",
         target: "multiple",
         pluralOf: "exclude",
-        relativeOf: ["include any of", "exclude if all", "include all of"],
+        relativeOf: ["include any of", "exclude if all", "include all of", "exclude exactly"],
         isNegated: true,
         negationOf: "include all of",
     },
+    "exclude exactly": {
+        key: "filters.multiOption.excludeExactly",
+        value: "exclude exactly",
+        target: "any",
+        relativeOf: ["exclude", "exclude if any of", "exclude if all", "include exactly"],
+        isNegated: true,
+        negationOf: "include exactly",
+    },
 };
 export const dateFilterOperators = {
     is: {
@@ -289,7 +305,13 @@ export const numberFilterOperators = {
         value: "is less than or equal to",
         target: "single",
         singularOf: "is between",
-        relativeOf: ["is", "is not", "is greater than", "is less than", "is greater than or equal to"],
+        relativeOf: [
+            "is",
+            "is not",
+            "is greater than",
+            "is less than",
+            "is greater than or equal to",
+        ],
         isNegated: false,
         negation: "is greater than or equal to",
     },
@@ -344,7 +366,9 @@ export const filterTypeOperatorDetails = {
 };
 export function determineNewOperator(type, oldVals, nextVals, currentOperator) {
     const a = Array.isArray(oldVals) && Array.isArray(oldVals[0]) ? oldVals[0].length : oldVals.length;
-    const b = Array.isArray(nextVals) && Array.isArray(nextVals[0]) ? nextVals[0].length : nextVals.length;
+    const b = Array.isArray(nextVals) && Array.isArray(nextVals[0])
+        ? nextVals[0].length
+        : nextVals.length;
     if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))
         return currentOperator;
     const opDetails = filterTypeOperatorDetails[type][currentOperator];

package/dist/bits/filter/types.d.ts

@@ -106,7 +106,7 @@ export type BigIntFilterOperator = NumberFilterOperator;
 export type DateFilterOperator = "is" | "is not" | "is before" | "is on or after" | "is after" | "is on or before" | "is between" | "is not between";
 export type BooleanFilterOperator = "is" | "is not";
 export type OptionFilterOperator = "is" | "is not" | "is any of" | "is none of";
-export type MultiOptionFilterOperator = "include" | "exclude" | "include any of" | "include all of" | "exclude if any of" | "exclude if all";
+export type MultiOptionFilterOperator = "include" | "exclude" | "include any of" | "include all of" | "include exactly" | "exclude if any of" | "exclude if all" | "exclude exactly";
 export type FilterOperators = {
     text: TextFilterOperator;
     number: NumberFilterOperator;
@@ -126,7 +126,7 @@ export type FiltersState = FilterModel[];
 export type FilterDetails<T extends ColumnDataType> = {
     [key in FilterOperators[T]]: FilterOperatorDetails<key, T>;
 };
-export type FilterOperatorTarget = "single" | "multiple";
+export type FilterOperatorTarget = "single" | "multiple" | "any";
 export type FilterOperatorDetailsBase<OperatorValue, T extends ColumnDataType> = {
     key: string;
     value: OperatorValue;
@@ -141,6 +141,10 @@ export type FilterOperatorDetailsBase<OperatorValue, T extends ColumnDataType> =
 export type FilterOperatorDetails<OperatorValue, T extends ColumnDataType> = FilterOperatorDetailsBase<OperatorValue, T> & ({
     singularOf?: never;
     pluralOf?: never;
+} | {
+    target: "any";
+    singularOf?: never;
+    pluralOf?: never;
 } | {
     target: "single";
     singularOf: FilterOperators[T];

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -128,6 +128,13 @@
 			.requestAnimationFrame(measureListAlign);
 	}
 
+	function measureListAlignAndQueueRemeasure() {
+		if (align !== "list") return;
+		clearMeasureFrame();
+		measureListAlign();
+		queueMeasureListAlign();
+	}
+
 	$effect(() => {
 		if (align !== "list") {
 			listAlignOffset = 0;
@@ -137,7 +144,7 @@
 			listAlignOffset = 0;
 			return;
 		}
-		afterTick(queueMeasureListAlign);
+		afterTick(measureListAlignAndQueueRemeasure);
 	});
 
 	$effect(() => {
@@ -205,7 +212,7 @@
 
 	function handlePlaced() {
 		onPlaced();
-		queueMeasureListAlign();
+		measureListAlignAndQueueRemeasure();
 	}
 
 	function handleOnFocusOutside(e: FocusEvent) {

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -12,6 +12,72 @@ const OPPOSITE_SIDE = {
     bottom: "top",
     left: "right",
 };
+function getPaddingForSide(padding, side) {
+    if (typeof padding === "number")
+        return padding;
+    return padding?.[side] ?? 0;
+}
+function parsePixelValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function replacePlacementSide(placement, side) {
+    const [, align] = placement.split("-");
+    return (side + (align ? `-${align}` : ""));
+}
+function getFloatingContentNode(floating) {
+    return floating.firstElementChild instanceof HTMLElement
+        ? floating.firstElementChild
+        : floating instanceof HTMLElement
+            ? floating
+            : null;
+}
+function getIntendedFloatingWidth(floating, measuredWidth) {
+    const contentNode = getFloatingContentNode(floating);
+    if (!contentNode)
+        return measuredWidth;
+    const style = contentNode.ownerDocument.defaultView?.getComputedStyle(contentNode);
+    const rowWidth = style ? parsePixelValue(style.getPropertyValue("--row-width")) : 0;
+    const isSubmenu = contentNode.hasAttribute("data-menu-sub-content") ||
+        contentNode.hasAttribute("data-dropdown-menu-sub-content") ||
+        contentNode.hasAttribute("data-context-menu-sub-content") ||
+        contentNode.hasAttribute("data-menubar-sub-content");
+    return Math.max(measuredWidth, rowWidth, isSubmenu ? 250 : 0);
+}
+function preferOppositeSideWithRoom(opts) {
+    return {
+        name: "preferOppositeSideWithRoom",
+        async fn(state) {
+            const side = getSideFromPlacement(state.placement);
+            if (side !== "right" && side !== "left")
+                return {};
+            const referenceNode = state.elements.reference;
+            if (!("getBoundingClientRect" in referenceNode))
+                return {};
+            const referenceRect = referenceNode.getBoundingClientRect();
+            const floatingNode = state.elements.floating;
+            const win = getWindow(floatingNode);
+            const padding = opts.collisionPadding();
+            const sideOffset = opts.sideOffset();
+            const desiredWidth = getIntendedFloatingWidth(floatingNode, state.rects.floating.width);
+            const leftRoom = referenceRect.left - getPaddingForSide(padding, "left") - sideOffset;
+            const rightRoom = win.innerWidth -
+                referenceRect.right -
+                getPaddingForSide(padding, "right") -
+                sideOffset;
+            const currentRoom = side === "right" ? rightRoom : leftRoom;
+            const oppositeSide = OPPOSITE_SIDE[side];
+            const oppositeRoom = oppositeSide === "right" ? rightRoom : leftRoom;
+            if (currentRoom >= desiredWidth || oppositeRoom < desiredWidth)
+                return {};
+            return {
+                reset: {
+                    placement: replacePlacementSide(state.placement, oppositeSide),
+                },
+            };
+        },
+    };
+}
 const FloatingRootContext = new Context("Floating.Root");
 const FloatingContentContext = new Context("Floating.Content");
 const FloatingTooltipRootContext = new Context("Floating.Root");
@@ -96,6 +162,12 @@ export class FloatingContentState {
             mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
             alignmentAxis: this.opts.alignOffset.current,
         }),
+        this.opts.avoidCollisions.current &&
+            this.#collisionAvoidance.side === "flip" &&
+            preferOppositeSideWithRoom({
+                sideOffset: () => this.opts.sideOffset.current + this.#arrowHeight,
+                collisionPadding: () => this.opts.collisionPadding.current,
+            }),
         this.opts.avoidCollisions.current &&
             (this.#collisionAvoidance.side === "shift" ||
                 this.#collisionAvoidance.align === "shift") &&

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@johly/bits-ui",
-	"version": "2.18.8",
+	"version": "2.18.10",
 	"license": "MIT",
 	"repository": "github:johanohly/bits-ui",
 	"funding": "https://github.com/sponsors/huntabyte",