bits-ui 2.11.5 → 2.11.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/bits/accordion/components/accordion.svelte.d.ts +1 -1
  2. package/dist/bits/calendar/components/calendar.svelte.d.ts +1 -1
  3. package/dist/bits/checkbox/components/checkbox-group.svelte.d.ts +1 -1
  4. package/dist/bits/checkbox/components/checkbox.svelte.d.ts +1 -1
  5. package/dist/bits/command/components/command-input.svelte.d.ts +1 -1
  6. package/dist/bits/command/components/command.svelte.d.ts +1 -1
  7. package/dist/bits/date-range-field/components/date-range-field.svelte.d.ts +1 -1
  8. package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts +1 -1
  9. package/dist/bits/menu/components/menu-checkbox-group.svelte.d.ts +1 -1
  10. package/dist/bits/menu/components/menu-checkbox-item.svelte.d.ts +1 -1
  11. package/dist/bits/menu/components/menu-radio-group.svelte.d.ts +1 -1
  12. package/dist/bits/menu/menu.svelte.d.ts +1 -1
  13. package/dist/bits/menu/menu.svelte.js +2 -17
  14. package/dist/bits/navigation-menu/components/navigation-menu-sub.svelte.d.ts +1 -1
  15. package/dist/bits/navigation-menu/components/navigation-menu.svelte.d.ts +1 -1
  16. package/dist/bits/pin-input/components/pin-input.svelte.d.ts +1 -1
  17. package/dist/bits/radio-group/components/radio-group.svelte.d.ts +1 -1
  18. package/dist/bits/range-calendar/components/range-calendar.svelte.d.ts +1 -1
  19. package/dist/bits/rating-group/components/rating-group.svelte.d.ts +1 -1
  20. package/dist/bits/slider/components/slider.svelte.d.ts +1 -1
  21. package/dist/bits/switch/components/switch.svelte.d.ts +1 -1
  22. package/dist/bits/tabs/components/tabs.svelte.d.ts +1 -1
  23. package/dist/bits/time-range-field/components/time-range-field.svelte.d.ts +1 -1
  24. package/dist/bits/toggle-group/components/toggle-group.svelte.d.ts +1 -1
  25. package/dist/bits/toolbar/components/toolbar-group.svelte.d.ts +1 -1
  26. package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js +9 -4
  27. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
1
  import type { AccordionRootProps } from "../types.js";
2
- declare const Accordion: import("svelte").Component<AccordionRootProps, {}, "ref" | "value">;
2
+ declare const Accordion: import("svelte").Component<AccordionRootProps, {}, "value" | "ref">;
3
3
  type Accordion = ReturnType<typeof Accordion>;
4
4
  export default Accordion;
@@ -1,4 +1,4 @@
1
1
  import type { CalendarRootProps } from "../types.js";
2
- declare const Calendar: import("svelte").Component<CalendarRootProps, {}, "ref" | "value" | "placeholder">;
2
+ declare const Calendar: import("svelte").Component<CalendarRootProps, {}, "value" | "placeholder" | "ref">;
3
3
  type Calendar = ReturnType<typeof Calendar>;
4
4
  export default Calendar;
@@ -1,4 +1,4 @@
1
1
  import type { CheckboxGroupProps } from "../types.js";
2
- declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "ref" | "value">;
2
+ declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value" | "ref">;
3
3
  type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
4
4
  export default CheckboxGroup;
@@ -1,4 +1,4 @@
1
1
  import type { CheckboxRootProps } from "../types.js";
2
- declare const Checkbox: import("svelte").Component<CheckboxRootProps, {}, "ref" | "checked" | "indeterminate">;
2
+ declare const Checkbox: import("svelte").Component<CheckboxRootProps, {}, "checked" | "indeterminate" | "ref">;
3
3
  type Checkbox = ReturnType<typeof Checkbox>;
4
4
  export default Checkbox;
@@ -1,4 +1,4 @@
1
1
  import type { CommandInputProps } from "../types.js";
2
- declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "ref" | "value">;
2
+ declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "value" | "ref">;
3
3
  type CommandInput = ReturnType<typeof CommandInput>;
4
4
  export default CommandInput;
@@ -54,6 +54,6 @@ declare const Command: import("svelte").Component<CommandRootProps, {
54
54
  * @returns Array of valid item elements
55
55
  * @remarks Exposed for direct item access and bound checking
56
56
  */ getValidItems: () => HTMLElement[];
57
- }, "ref" | "value">;
57
+ }, "value" | "ref">;
58
58
  type Command = ReturnType<typeof Command>;
59
59
  export default Command;
@@ -1,4 +1,4 @@
1
1
  import type { DateRangeFieldRootProps } from "../types.js";
2
- declare const DateRangeField: import("svelte").Component<DateRangeFieldRootProps, {}, "ref" | "value" | "placeholder">;
2
+ declare const DateRangeField: import("svelte").Component<DateRangeFieldRootProps, {}, "value" | "placeholder" | "ref">;
3
3
  type DateRangeField = ReturnType<typeof DateRangeField>;
4
4
  export default DateRangeField;
@@ -1,4 +1,4 @@
1
1
  import type { DateRangePickerRootProps } from "../types.js";
2
- declare const DateRangePicker: import("svelte").Component<DateRangePickerRootProps, {}, "ref" | "value" | "placeholder" | "open">;
2
+ declare const DateRangePicker: import("svelte").Component<DateRangePickerRootProps, {}, "value" | "placeholder" | "ref" | "open">;
3
3
  type DateRangePicker = ReturnType<typeof DateRangePicker>;
4
4
  export default DateRangePicker;
@@ -1,4 +1,4 @@
1
1
  import type { MenuCheckboxGroupProps } from "../types.js";
2
- declare const MenuCheckboxGroup: import("svelte").Component<MenuCheckboxGroupProps, {}, "ref" | "value">;
2
+ declare const MenuCheckboxGroup: import("svelte").Component<MenuCheckboxGroupProps, {}, "value" | "ref">;
3
3
  type MenuCheckboxGroup = ReturnType<typeof MenuCheckboxGroup>;
4
4
  export default MenuCheckboxGroup;
@@ -1,4 +1,4 @@
1
1
  import type { MenuCheckboxItemProps } from "../types.js";
2
- declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "ref" | "checked" | "indeterminate">;
2
+ declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "checked" | "indeterminate" | "ref">;
3
3
  type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
4
4
  export default MenuCheckboxItem;
@@ -1,4 +1,4 @@
1
1
  import type { MenuRadioGroupProps } from "../types.js";
2
- declare const MenuRadioGroup: import("svelte").Component<MenuRadioGroupProps, {}, "ref" | "value">;
2
+ declare const MenuRadioGroup: import("svelte").Component<MenuRadioGroupProps, {}, "value" | "ref">;
3
3
  type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
4
4
  export default MenuRadioGroup;
@@ -7,6 +7,7 @@ import { IsUsingKeyboard } from "../../index.js";
7
7
  import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from "svelte/elements";
8
8
  import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
9
9
  export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
10
+ export declare const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
10
11
  export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
11
12
  type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
12
13
  export interface MenuRootStateOpts extends ReadableBoxedValues<{
@@ -70,7 +71,6 @@ export declare class MenuContentState {
70
71
  onItemEnter(): boolean;
71
72
  onItemLeave(e: BitsPointerEvent): void;
72
73
  onTriggerLeave(): boolean;
73
- onOpenAutoFocus: (e: Event) => void;
74
74
  handleInteractOutside(e: PointerEvent): void;
75
75
  readonly snippetProps: {
76
76
  open: boolean;
@@ -13,8 +13,8 @@ import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
13
13
  import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
14
14
  import { GraceArea } from "../../internal/grace-area.svelte.js";
15
15
  import { OpenChangeComplete } from "../../internal/open-change-complete.js";
16
- import { getTopMostDismissableLayer } from "../utilities/dismissible-layer/use-dismissable-layer.svelte.js";
17
16
  export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
17
+ export const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
18
18
  const MenuRootContext = new Context("Menu.Root");
19
19
  const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
20
20
  const MenuContentContext = new Context("Menu.Content");
@@ -182,6 +182,7 @@ export class MenuContentState {
182
182
  if (e.defaultPrevented || this.#isSub)
183
183
  return;
184
184
  if (this.parentMenu.triggerNode && isTabbable(this.parentMenu.triggerNode)) {
185
+ e.preventDefault();
185
186
  this.parentMenu.triggerNode.focus();
186
187
  }
187
188
  };
@@ -293,13 +294,6 @@ export class MenuContentState {
293
294
  return true;
294
295
  return false;
295
296
  }
296
- onOpenAutoFocus = (e) => {
297
- if (e.defaultPrevented)
298
- return;
299
- e.preventDefault();
300
- const contentNode = this.parentMenu.contentNode;
301
- contentNode?.focus();
302
- };
303
297
  handleInteractOutside(e) {
304
298
  if (!isElementOrSVGElement(e.target))
305
299
  return;
@@ -881,15 +875,6 @@ export class ContextMenuTriggerState {
881
875
  oncontextmenu(e) {
882
876
  if (e.defaultPrevented || this.opts.disabled.current)
883
877
  return;
884
- const topMostLayer = getTopMostDismissableLayer();
885
- if (topMostLayer) {
886
- const topLayerRef = topMostLayer[0].opts.ref.current;
887
- const topLayerRefContainsTrigger = topLayerRef?.contains(this.opts.ref.current);
888
- if (!topLayerRefContainsTrigger &&
889
- !topLayerRef?.hasAttribute?.("data-context-menu-content")) {
890
- return;
891
- }
892
- }
893
878
  this.#clearLongPressTimer();
894
879
  this.#handleOpen(e);
895
880
  e.preventDefault();
@@ -1,4 +1,4 @@
1
1
  import type { NavigationMenuSubProps } from "../types.js";
2
- declare const NavigationMenuSub: import("svelte").Component<NavigationMenuSubProps, {}, "ref" | "value">;
2
+ declare const NavigationMenuSub: import("svelte").Component<NavigationMenuSubProps, {}, "value" | "ref">;
3
3
  type NavigationMenuSub = ReturnType<typeof NavigationMenuSub>;
4
4
  export default NavigationMenuSub;
@@ -1,4 +1,4 @@
1
1
  import type { NavigationMenuRootProps } from "../types.js";
2
- declare const NavigationMenu: import("svelte").Component<NavigationMenuRootProps, {}, "ref" | "value">;
2
+ declare const NavigationMenu: import("svelte").Component<NavigationMenuRootProps, {}, "value" | "ref">;
3
3
  type NavigationMenu = ReturnType<typeof NavigationMenu>;
4
4
  export default NavigationMenu;
@@ -1,4 +1,4 @@
1
1
  import type { PinInputRootProps } from "../types.js";
2
- declare const PinInput: import("svelte").Component<PinInputRootProps, {}, "ref" | "value">;
2
+ declare const PinInput: import("svelte").Component<PinInputRootProps, {}, "value" | "ref">;
3
3
  type PinInput = ReturnType<typeof PinInput>;
4
4
  export default PinInput;
@@ -1,4 +1,4 @@
1
1
  import type { RadioGroupRootProps } from "../types.js";
2
- declare const RadioGroup: import("svelte").Component<RadioGroupRootProps, {}, "ref" | "value">;
2
+ declare const RadioGroup: import("svelte").Component<RadioGroupRootProps, {}, "value" | "ref">;
3
3
  type RadioGroup = ReturnType<typeof RadioGroup>;
4
4
  export default RadioGroup;
@@ -1,4 +1,4 @@
1
1
  import type { RangeCalendarRootProps } from "../types.js";
2
- declare const RangeCalendar: import("svelte").Component<RangeCalendarRootProps, {}, "ref" | "value" | "placeholder">;
2
+ declare const RangeCalendar: import("svelte").Component<RangeCalendarRootProps, {}, "value" | "placeholder" | "ref">;
3
3
  type RangeCalendar = ReturnType<typeof RangeCalendar>;
4
4
  export default RangeCalendar;
@@ -1,4 +1,4 @@
1
1
  import type { RatingGroupRootProps } from "../types.js";
2
- declare const RatingGroup: import("svelte").Component<RatingGroupRootProps, {}, "ref" | "value">;
2
+ declare const RatingGroup: import("svelte").Component<RatingGroupRootProps, {}, "value" | "ref">;
3
3
  type RatingGroup = ReturnType<typeof RatingGroup>;
4
4
  export default RatingGroup;
@@ -1,4 +1,4 @@
1
1
  import type { SliderRootProps } from "../types.js";
2
- declare const Slider: import("svelte").Component<SliderRootProps, {}, "ref" | "value">;
2
+ declare const Slider: import("svelte").Component<SliderRootProps, {}, "value" | "ref">;
3
3
  type Slider = ReturnType<typeof Slider>;
4
4
  export default Slider;
@@ -1,4 +1,4 @@
1
1
  import type { SwitchRootProps } from "../types.js";
2
- declare const Switch: import("svelte").Component<SwitchRootProps, {}, "ref" | "checked">;
2
+ declare const Switch: import("svelte").Component<SwitchRootProps, {}, "checked" | "ref">;
3
3
  type Switch = ReturnType<typeof Switch>;
4
4
  export default Switch;
@@ -1,4 +1,4 @@
1
1
  import type { TabsRootProps } from "../types.js";
2
- declare const Tabs: import("svelte").Component<TabsRootProps, {}, "ref" | "value">;
2
+ declare const Tabs: import("svelte").Component<TabsRootProps, {}, "value" | "ref">;
3
3
  type Tabs = ReturnType<typeof Tabs>;
4
4
  export default Tabs;
@@ -5,7 +5,7 @@ declare class __sveltets_Render<T extends TimeValue = Time> {
5
5
  props(): TimeRangeFieldRootProps<T>;
6
6
  events(): {};
7
7
  slots(): {};
8
- bindings(): "ref" | "value" | "placeholder";
8
+ bindings(): "value" | "placeholder" | "ref";
9
9
  exports(): {};
10
10
  }
11
11
  interface $$IsomorphicComponent {
@@ -1,4 +1,4 @@
1
1
  import type { ToggleGroupRootProps } from "../types.js";
2
- declare const ToggleGroup: import("svelte").Component<ToggleGroupRootProps, {}, "ref" | "value">;
2
+ declare const ToggleGroup: import("svelte").Component<ToggleGroupRootProps, {}, "value" | "ref">;
3
3
  type ToggleGroup = ReturnType<typeof ToggleGroup>;
4
4
  export default ToggleGroup;
@@ -1,4 +1,4 @@
1
1
  import type { ToolbarGroupProps } from "../types.js";
2
- declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "ref" | "value">;
2
+ declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "value" | "ref">;
3
3
  type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
4
4
  export default ToolbarGroup;
@@ -5,8 +5,9 @@ import {} from "../../../internal/events.js";
5
5
  import { debounce } from "../../../internal/debounce.js";
6
6
  import { noop } from "../../../internal/noop.js";
7
7
  import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
8
- import { isElement } from "../../../internal/is.js";
8
+ import { isElementOrSVGElement } from "../../../internal/is.js";
9
9
  import { isClickTrulyOutside } from "../../../internal/dom.js";
10
+ import { CONTEXT_MENU_CONTENT_ATTR, CONTEXT_MENU_TRIGGER_ATTR, } from "../../menu/menu.svelte.js";
10
11
  globalThis.bitsDismissableLayers ??= new Map();
11
12
  export class DismissibleLayerState {
12
13
  static create(opts) {
@@ -186,10 +187,14 @@ function isResponsibleLayer(node) {
186
187
  return firstLayerNode.opts.ref.current === node;
187
188
  }
188
189
  function isValidEvent(e, node) {
189
- if ("button" in e && e.button > 0)
190
- return false;
191
190
  const target = e.target;
192
- if (!isElement(target))
191
+ if (!isElementOrSVGElement(target))
192
+ return false;
193
+ const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
194
+ if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
195
+ return false;
196
+ const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
197
+ if (targetIsContextMenuTrigger && nodeIsContextMenu)
193
198
  return false;
194
199
  const ownerDocument = getOwnerDocument(target);
195
200
  const isValid = ownerDocument.documentElement.contains(target) &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "2.11.5",
3
+ "version": "2.11.7",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "funding": "https://github.com/sponsors/huntabyte",