diff --git a/.changeset/slimy-mails-argue.md b/.changeset/slimy-mails-argue.md new file mode 100644 index 000000000..e6c949607 --- /dev/null +++ b/.changeset/slimy-mails-argue.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +next: improve tree-shaking diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 67da17879..f7c2ca16a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -68,4 +68,7 @@ jobs: - name: Install dependencies run: pnpm install + - name: Build packages + run: pnpm build:packages + - run: pnpm test diff --git a/package.json b/package.json index 2fb51f607..56b0300d3 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "format": "prettier --write .", "lint": "prettier --check . && eslint .", "lint:fix": "eslint --fix .", - "test": "pnpm -F bits-ui test" + "test": "pnpm -F \"./packages/**\" --parallel --reporter append-only --color test", + "test:components": "pnpm -F @bits-ui/tests test" }, "keywords": [], "author": "Hunter Johnston ", diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json index 1ba9d4323..4fc31b2e1 100644 --- a/packages/bits-ui/package.json +++ b/packages/bits-ui/package.json @@ -30,20 +30,12 @@ "@sveltejs/kit": "^2.5.28", "@sveltejs/package": "^2.3.5", "@sveltejs/vite-plugin-svelte": "4.0.0-next.7", - "@testing-library/dom": "^10.3.1", - "@testing-library/jest-dom": "^6.4.6", - "@testing-library/svelte": "^5.2.1", - "@testing-library/user-event": "^14.5.2", - "@types/jest-axe": "^3.5.9", "@types/node": "^20.14.10", "@types/resize-observer-browser": "^0.1.11", - "@types/testing-library__jest-dom": "^5.14.9", - "@vitest/ui": "^2.1.1", "csstype": "^3.1.3", "jest-axe": "^9.0.0", "jsdom": "^24.1.0", "publint": "^0.2.11", - "resize-observer-polyfill": "^1.5.1", "svelte": "5.0.0-next.260", "svelte-check": "4.0.3", "tslib": "^2.7.0", @@ -57,7 +49,7 @@ "dependencies": { "@floating-ui/core": "^1.6.4", "@floating-ui/dom": "^1.6.7", - "@internationalized/date": "^3.5.4", + "@internationalized/date": "^3.5.6", "clsx": "^2.1.1", "esm-env": "^1.0.0", "runed": "^0.15.2", @@ -71,5 +63,6 @@ "pnpm": ">=8.7.0", "node": ">=18" }, + "sideEffects": false, "packageManager": "pnpm@9.6.0" } diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts index 229678fdd..141471e47 100644 --- a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts +++ b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts @@ -1,6 +1,6 @@ import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; import type { WithRefProps } from "$lib/internal/types.js"; -import { afterTick } from "$lib/internal/afterTick.js"; +import { afterTick } from "$lib/internal/after-tick.js"; import { getAriaDisabled, getAriaExpanded, @@ -9,10 +9,13 @@ import { getDataOrientation, } from "$lib/internal/attrs.js"; import { kbd } from "$lib/internal/kbd.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; -import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; +import { + type UseRovingFocusReturn, + useRovingFocus, +} from "$lib/internal/use-roving-focus.svelte.js"; import type { Orientation } from "$lib/shared/index.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { createContext } from "$lib/internal/create-context.js"; const ACCORDION_ROOT_ATTR = "data-accordion-root"; const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger"; @@ -163,18 +166,6 @@ export class AccordionItemState { this.root.toggleItem(this.value.current); }; - createTrigger(props: AccordionTriggerStateProps) { - return new AccordionTriggerState(props, this); - } - - createContent(props: AccordionContentStateProps) { - return new AccordionContentState(props, this); - } - - createHeader(props: AccordionHeaderStateProps) { - return new AccordionHeaderState(props, this); - } - props = $derived.by( () => ({ @@ -426,13 +417,16 @@ export function useAccordionItem(props: Omit import { type WritableBox, box } from "svelte-toolbelt"; import { useAccordionRoot } from "../accordion.svelte.js"; - import type { RootProps } from "../index.js"; - import { mergeProps } from "$lib/internal/mergeProps.js"; - import { useId } from "$lib/internal/useId.js"; + import type { AccordionRootProps } from "../types.js"; + import { mergeProps } from "$lib/internal/merge-props.js"; + import { useId } from "$lib/internal/use-id.js"; import { noop } from "$lib/internal/callbacks.js"; let { @@ -19,7 +19,7 @@ orientation = "vertical", controlledValue = false, ...restProps - }: RootProps = $props(); + }: AccordionRootProps = $props(); value === undefined && (value = type === "single" ? "" : []); diff --git a/packages/bits-ui/src/lib/bits/accordion/exports.ts b/packages/bits-ui/src/lib/bits/accordion/exports.ts new file mode 100644 index 000000000..49a5d8949 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/accordion/exports.ts @@ -0,0 +1,13 @@ +export { default as Root } from "./components/accordion.svelte"; +export { default as Item } from "./components/accordion-item.svelte"; +export { default as Header } from "./components/accordion-header.svelte"; +export { default as Trigger } from "./components/accordion-trigger.svelte"; +export { default as Content } from "./components/accordion-content.svelte"; + +export type { + AccordionRootProps as RootProps, + AccordionItemProps as ItemProps, + AccordionHeaderProps as HeaderProps, + AccordionTriggerProps as TriggerProps, + AccordionContentProps as ContentProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/accordion/index.ts b/packages/bits-ui/src/lib/bits/accordion/index.ts index 49a5d8949..e1e44b20b 100644 --- a/packages/bits-ui/src/lib/bits/accordion/index.ts +++ b/packages/bits-ui/src/lib/bits/accordion/index.ts @@ -1,13 +1 @@ -export { default as Root } from "./components/accordion.svelte"; -export { default as Item } from "./components/accordion-item.svelte"; -export { default as Header } from "./components/accordion-header.svelte"; -export { default as Trigger } from "./components/accordion-trigger.svelte"; -export { default as Content } from "./components/accordion-content.svelte"; - -export type { - AccordionRootProps as RootProps, - AccordionItemProps as ItemProps, - AccordionHeaderProps as HeaderProps, - AccordionTriggerProps as TriggerProps, - AccordionContentProps as ContentProps, -} from "./types.js"; +export * as Accordion from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/accordion/types.ts b/packages/bits-ui/src/lib/bits/accordion/types.ts index 7457fd117..2299eb0ce 100644 --- a/packages/bits-ui/src/lib/bits/accordion/types.ts +++ b/packages/bits-ui/src/lib/bits/accordion/types.ts @@ -19,7 +19,7 @@ export type BaseAccordionRootPropsWithoutHTML = { loop?: boolean; /** - * The orienation of the accordion. + * The orientation of the accordion. * * @defaultValue "vertical" */ diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte index 439e28466..331973b33 100644 --- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte +++ b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte @@ -1,8 +1,8 @@ ; -type AnchorElement = ButtonPropsWithoutHTML & +type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren> & { href: HTMLAnchorAttributes["href"]; type?: never; }; -type ButtonElement = ButtonPropsWithoutHTML & +type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren> & { type?: HTMLButtonAttributes["type"]; href?: never; }; -export type ButtonProps = AnchorElement | ButtonElement; +export type ButtonRootProps = AnchorElement | ButtonElement; diff --git a/packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts b/packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts index 531f9abf5..ed45d6ddc 100644 --- a/packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts +++ b/packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts @@ -7,10 +7,7 @@ import { } from "@internationalized/date"; import { DEV } from "esm-env"; import { untrack } from "svelte"; -import type { - RangeCalendarCellState, - RangeCalendarRootState, -} from "../range-calendar/range-calendar.svelte.js"; +import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js"; import { getAriaDisabled, getAriaHidden, @@ -22,16 +19,17 @@ import { getDataUnavailable, } from "$lib/internal/attrs.js"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { createContext } from "$lib/internal/create-context.js"; import type { WithRefProps } from "$lib/internal/types.js"; -import { useId } from "$lib/internal/useId.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; -import { type Announcer, getAnnouncer } from "$lib/shared/date/announcer.js"; +import { useId } from "$lib/internal/use-id.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; +import type { DateMatcher, Month } from "$lib/shared/index.js"; +import { type Announcer, getAnnouncer } from "$lib/internal/date-time/announcer.js"; +import { type Formatter, createFormatter } from "$lib/internal/date-time/formatter.js"; import { type CalendarParts, createAccessibleHeading, createMonths, - getCalendarBitsAttr, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, @@ -43,10 +41,8 @@ import { shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, -} from "$lib/shared/date/calendar-helpers.svelte.js"; -import { type Formatter, createFormatter } from "$lib/shared/date/formatter.js"; -import type { DateMatcher, Month } from "$lib/shared/date/types.js"; -import { isBefore, toDate } from "$lib/shared/date/utils.js"; +} from "$lib/internal/date-time/calendar-helpers.svelte.js"; +import { isBefore, toDate } from "$lib/internal/date-time/utils.js"; type CalendarRootStateProps = WithRefProps< WritableBoxedValues<{ @@ -279,21 +275,21 @@ export class CalendarRootState { }); }; - nextYear() { + nextYear = () => { this.placeholder.current = this.placeholder.current.add({ years: 1 }); - } + }; - prevYear() { + prevYear = () => { this.placeholder.current = this.placeholder.current.subtract({ years: 1 }); - } + }; - setYear(year: number) { + setYear = (year: number) => { this.placeholder.current = this.placeholder.current.set({ year }); - } + }; - setMonth(month: number) { + setMonth = (month: number) => { this.placeholder.current = this.placeholder.current.set({ month }); - } + }; isNextButtonDisabled = $derived.by(() => { return getIsNextButtonDisabled({ @@ -341,20 +337,20 @@ export class CalendarRootState { return `${this.calendarLabel.current} ${this.headingValue}`; }); - isOutsideVisibleMonths(date: DateValue) { + isOutsideVisibleMonths = (date: DateValue) => { return !this.visibleMonths.some((month) => isSameMonth(date, month)); - } + }; - isDateDisabled(date: DateValue) { + isDateDisabled = (date: DateValue) => { if (this.isDateDisabledProp.current(date) || this.disabled.current) return true; const minValue = this.minValue.current; const maxValue = this.maxValue.current; if (minValue && isBefore(date, minValue)) return true; if (maxValue && isBefore(maxValue, date)) return true; return false; - } + }; - isDateSelected(date: DateValue) { + isDateSelected = (date: DateValue) => { const value = this.value.current; if (Array.isArray(value)) { return value.some((d) => isSameDay(d, date)); @@ -363,7 +359,7 @@ export class CalendarRootState { } else { return isSameDay(value, date); } - } + }; #shiftFocus = (node: HTMLElement, add: number) => { return shiftCalendarFocus({ @@ -410,7 +406,7 @@ export class CalendarRootState { } }; - #handleMultipleUpdate(prev: DateValue[] | undefined, date: DateValue) { + #handleMultipleUpdate = (prev: DateValue[] | undefined, date: DateValue) => { if (!prev) return [date]; if (!Array.isArray(prev)) { if (DEV) throw new Error("Invalid value for multiple prop."); @@ -430,9 +426,9 @@ export class CalendarRootState { } return next; } - } + }; - #handleSingleUpdate(prev: DateValue | undefined, date: DateValue) { + #handleSingleUpdate = (prev: DateValue | undefined, date: DateValue) => { if (Array.isArray(prev)) { if (DEV) throw new Error("Invalid value for single prop."); } @@ -443,7 +439,7 @@ export class CalendarRootState { return undefined; } return date; - } + }; #onkeydown = (event: KeyboardEvent) => { handleCalendarKeydown({ @@ -459,9 +455,9 @@ export class CalendarRootState { weekdays: this.weekdays, })); - getBitsAttr(part: CalendarParts) { - return getCalendarBitsAttr(this, part); - } + getBitsAttr = (part: CalendarParts) => { + return `data-bits-calendar-${part}`; + }; props = $derived.by( () => @@ -478,46 +474,6 @@ export class CalendarRootState { onkeydown: this.#onkeydown, }) as const ); - - createHeading(props: CalendarHeadingStateProps) { - return new CalendarHeadingState(props, this); - } - - createGrid(props: CalendarGridStateProps) { - return new CalendarGridState(props, this); - } - - createCell(props: CalendarCellStateProps) { - return new CalendarCellState(props, this); - } - - createNextButton(props: CalendarNextButtonStateProps) { - return new CalendarNextButtonState(props, this); - } - - createPrevButton(props: CalendarPrevButtonStateProps) { - return new CalendarPrevButtonState(props, this); - } - - createGridBody(props: CalendarGridBodyStateProps) { - return new CalendarGridBodyState(props, this); - } - - createGridHead(props: CalendarGridHeadStateProps) { - return new CalendarGridHeadState(props, this); - } - - createGridRow(props: CalendarGridRowStateProps) { - return new CalendarGridRowState(props, this); - } - - createHeadCell(props: CalendarHeadCellStateProps) { - return new CalendarHeadCellState(props, this); - } - - createHeader(props: CalendarHeaderStateProps) { - return new CalendarHeaderState(props, this); - } } export type CalendarHeadingStateProps = WithRefProps; @@ -565,7 +521,7 @@ class CalendarCellState { month: CalendarCellStateProps["month"]; cellDate = $derived.by(() => toDate(this.date.current)); isDisabled = $derived.by(() => this.root.isDateDisabled(this.date.current)); - isUnvailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current)); + isUnavailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current)); isDateToday = $derived.by(() => isToday(this.date.current, getLocalTimeZone())); isOutsideMonth = $derived.by(() => !isSameMonth(this.date.current, this.month.current)); isOutsideVisibleMonths = $derived.by(() => this.root.isOutsideVisibleMonths(this.date.current)); @@ -597,7 +553,7 @@ class CalendarCellState { snippetProps = $derived.by(() => ({ disabled: this.isDisabled, - unavailable: this.isUnvailable, + unavailable: this.isUnavailable, selected: this.isSelectedDate, })); @@ -605,14 +561,14 @@ class CalendarCellState { return ( this.isDisabled || (this.isOutsideMonth && this.root.disableDaysOutsideMonth.current) || - this.isUnvailable + this.isUnavailable ); }); sharedDataAttrs = $derived.by( () => ({ - "data-unavailable": getDataUnavailable(this.isUnvailable), + "data-unavailable": getDataUnavailable(this.isUnavailable), "data-today": this.isDateToday ? "" : undefined, "data-outside-month": this.isOutsideMonth ? "" : undefined, "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined, @@ -637,10 +593,6 @@ class CalendarCellState { [this.root.getBitsAttr("cell")]: "", }) as const ); - - createDay(props: CalendarDayStateProps) { - return new CalendarDayState(props, this); - } } type CalendarDayStateProps = WithRefProps; @@ -678,7 +630,7 @@ class CalendarDayState { snippetProps = $derived.by(() => ({ disabled: this.cell.isDisabled, - unavailable: this.cell.isUnvailable, + unavailable: this.cell.isUnavailable, selected: this.cell.isSelectedDate, day: `${this.cell.date.current.day}`, })); @@ -969,58 +921,70 @@ export class CalendarHeaderState { ); } -const [setCalendarRootContext, getCalendarRootContext] = createContext< - CalendarRootState | RangeCalendarRootState ->(["Calendar.Root", "RangeCalendar.Root"], "Calendar.Root", false); +const [setCalendarRootContext, getCalendarRootContext] = createContext( + ["Calendar.Root", "RangeCalendar.Root"], + "Calendar.Root", + false +); -const [setCalendarCellContext, getCalendarCellContext] = createContext< - CalendarCellState | RangeCalendarCellState ->("Calendar.Cell"); +const [setCalendarCellContext, getCalendarCellContext] = + createContext("Calendar.Cell"); export function useCalendarRoot(props: CalendarRootStateProps) { return setCalendarRootContext(new CalendarRootState(props)); } export function useCalendarGrid(props: CalendarGridStateProps) { - return getCalendarRootContext().createGrid(props); + const root = getCalendarRootContext(); + return new CalendarGridState(props, root); } export function useCalendarCell(props: CalendarCellStateProps) { - return setCalendarCellContext(getCalendarRootContext().createCell(props)); + const root = getCalendarRootContext(); + return setCalendarCellContext(new CalendarCellState(props, root)); } export function useCalendarNextButton(props: CalendarNextButtonStateProps) { - return getCalendarRootContext().createNextButton(props); + const root = getCalendarRootContext(); + return new CalendarNextButtonState(props, root); } export function useCalendarPrevButton(props: CalendarPrevButtonStateProps) { - return getCalendarRootContext().createPrevButton(props); + const root = getCalendarRootContext(); + return new CalendarPrevButtonState(props, root); } export function useCalendarDay(props: CalendarDayStateProps) { - return getCalendarCellContext().createDay(props); + const cell = getCalendarCellContext(); + return new CalendarDayState(props, cell); } export function useCalendarGridBody(props: CalendarGridBodyStateProps) { - return getCalendarRootContext().createGridBody(props); + const root = getCalendarRootContext(); + return new CalendarGridBodyState(props, root); } export function useCalendarGridHead(props: CalendarGridHeadStateProps) { - return getCalendarRootContext().createGridHead(props); + const root = getCalendarRootContext(); + return new CalendarGridHeadState(props, root); } export function useCalendarGridRow(props: CalendarGridRowStateProps) { - return getCalendarRootContext().createGridRow(props); + const root = getCalendarRootContext(); + return new CalendarGridRowState(props, root); } export function useCalendarHeadCell(props: CalendarHeadCellStateProps) { - return getCalendarRootContext().createHeadCell(props); + const root = getCalendarRootContext(); + return new CalendarHeadCellState(props, root); } export function useCalendarHeader(props: CalendarHeaderStateProps) { - return getCalendarRootContext().createHeader(props); + const root = getCalendarRootContext(); + return new CalendarHeaderState(props, root); } export function useCalendarHeading(props: CalendarHeadingStateProps) { - return getCalendarRootContext().createHeading(props); + const root = getCalendarRootContext(); + return new CalendarHeadingState(props, root); } diff --git a/packages/bits-ui/src/lib/bits/calendar/components/calendar-cell.svelte b/packages/bits-ui/src/lib/bits/calendar/components/calendar-cell.svelte index b11e12584..aa260929d 100644 --- a/packages/bits-ui/src/lib/bits/calendar/components/calendar-cell.svelte +++ b/packages/bits-ui/src/lib/bits/calendar/components/calendar-cell.svelte @@ -1,9 +1,9 @@ - + {@render children?.()} - + {#if Array.isArray(value)} {#if value.length === 0} diff --git a/packages/bits-ui/src/lib/bits/combobox/exports.ts b/packages/bits-ui/src/lib/bits/combobox/exports.ts new file mode 100644 index 000000000..3a00d9062 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/combobox/exports.ts @@ -0,0 +1,30 @@ +export { default as Root } from "./components/combobox.svelte"; +export { default as Input } from "./components/combobox-input.svelte"; +export { default as Separator } from "../separator/components/separator.svelte"; +export { default as Arrow } from "$lib/bits/utilities/arrow/arrow.svelte"; +export { default as Trigger } from "./components/combobox-trigger.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; +export { default as Content } from "$lib/bits/listbox/components/listbox-content.svelte"; +export { default as ContentStatic } from "$lib/bits/listbox/components/listbox-content-static.svelte"; +export { default as Item } from "$lib/bits/listbox/components/listbox-item.svelte"; +export { default as Group } from "$lib/bits/listbox/components/listbox-group.svelte"; +export { default as GroupHeading } from "$lib/bits/listbox/components/listbox-group-heading.svelte"; +export { default as Viewport } from "$lib/bits/listbox/components/listbox-viewport.svelte"; +export { default as ScrollDownButton } from "$lib/bits/listbox/components/listbox-scroll-down-button.svelte"; +export { default as ScrollUpButton } from "$lib/bits/listbox/components/listbox-scroll-up-button.svelte"; + +export type { + ComboboxRootProps as RootProps, + ComboboxContentProps as ContentProps, + ComboboxContentStaticProps as ContentStaticProps, + ComboboxInputProps as InputProps, + ComboboxItemProps as ItemProps, + ComboboxGroupProps as GroupProps, + ComboboxGroupHeadingProps as GroupHeadingProps, + ComboboxPortalProps as PortalProps, + ComboboxArrowProps as ArrowProps, + ComboboxTriggerProps as TriggerProps, + ComboboxScrollDownButtonProps as ScrollDownButtonProps, + ComboboxScrollUpButtonProps as ScrollUpButtonProps, + ComboboxViewportProps as ViewportProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/combobox/index.ts b/packages/bits-ui/src/lib/bits/combobox/index.ts index 9393c5725..ceed69c05 100644 --- a/packages/bits-ui/src/lib/bits/combobox/index.ts +++ b/packages/bits-ui/src/lib/bits/combobox/index.ts @@ -1,33 +1 @@ -export { default as Root } from "./components/combobox.svelte"; -export { default as Input } from "./components/combobox-input.svelte"; -export { default as Separator } from "../separator/components/separator.svelte"; -export { default as Arrow } from "$lib/bits/utilities/arrow/arrow.svelte"; -export { default as Trigger } from "./components/combobox-trigger.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; - -export { - Content, - ContentStatic, - Item, - Group, - GroupHeading, - Viewport, - ScrollDownButton, - ScrollUpButton, -} from "$lib/bits/listbox/index.js"; - -export type { - ComboboxRootProps as RootProps, - ComboboxContentProps as ContentProps, - ComboboxContentStaticProps as ContentStaticProps, - ComboboxInputProps as InputProps, - ComboboxItemProps as ItemProps, - ComboboxGroupProps as GroupProps, - ComboboxGroupHeadingProps as GroupHeadingProps, - ComboboxPortalProps as PortalProps, - ComboboxArrowProps as ArrowProps, - ComboboxTriggerProps as TriggerProps, - ComboboxScrollDownButtonProps as ScrollDownButtonProps, - ComboboxScrollUpButtonProps as ScrollUpButtonProps, - ComboboxViewportProps as ViewportProps, -} from "./types.js"; +export * as Combobox from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/command/command.svelte.ts b/packages/bits-ui/src/lib/bits/command/command.svelte.ts index fa85509a7..cac9d91c4 100644 --- a/packages/bits-ui/src/lib/bits/command/command.svelte.ts +++ b/packages/bits-ui/src/lib/bits/command/command.svelte.ts @@ -2,11 +2,11 @@ import { untrack } from "svelte"; import { findNextSibling, findPreviousSibling } from "./utils.js"; import { commandScore } from "./command-score.js"; import type { CommandState } from "./types.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; +import { createContext } from "$lib/internal/create-context.js"; import type { WithRefProps } from "$lib/internal/types.js"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { afterSleep } from "$lib/internal/afterSleep.js"; +import { afterSleep } from "$lib/internal/after-sleep.js"; import { kbd } from "$lib/internal/kbd.js"; import { getAriaDisabled, @@ -17,7 +17,7 @@ import { } from "$lib/internal/attrs.js"; import { getFirstNonCommentChild } from "$lib/internal/dom.js"; import { srOnlyStyles } from "$lib/internal/style.js"; -import { afterTick } from "$lib/internal/afterTick.js"; +import { afterTick } from "$lib/internal/after-tick.js"; const ROOT_ATTR = "data-command-root"; const LIST_ATTR = "data-command-list"; @@ -125,7 +125,7 @@ class CommandRootState { const defaultState = { /** Value of the search query */ search: "", - /** Currnetly selected item value */ + /** Currently selected item value */ value: this.valueProp.current ?? "", filtered: { /** The count of all visible items. */ @@ -517,34 +517,6 @@ class CommandRootState { onkeydown: this.#onkeydown, }) as const ); - - createEmpty(props: CommandEmptyStateProps) { - return new CommandEmptyState(props, this); - } - - createGroupContainer(props: CommandGroupContainerStateProps) { - return new CommandGroupContainerState(props, this); - } - - createInput(props: CommandInputStateProps) { - return new CommandInputState(props, this); - } - - createItem(props: CommandItemStateProps) { - return new CommandItemState(props, this); - } - - createSeparator(props: CommandSeparatorStateProps) { - return new CommandSeparatorState(props, this); - } - - createList(props: CommandListStateProps) { - return new CommandListState(props, this); - } - - createLabel(props: CommandLabelStateProps) { - return new CommandLabelState(props, this); - } } type CommandEmptyStateProps = WithRefProps & @@ -1032,10 +1004,6 @@ class CommandListState { [LIST_ATTR]: "", }) as const ); - - createViewport(props: CommandViewportStateProps) { - return new CommandViewportState(props, this); - } } type CommandLabelStateProps = WithRefProps>; @@ -1131,27 +1099,33 @@ export function useCommandRoot(props: CommandRootStateProps) { } export function useCommandEmpty(props: CommandEmptyStateProps) { - return getCommandRootContext().createEmpty(props); + const root = getCommandRootContext(); + return new CommandEmptyState(props, root); } export function useCommandItem(props: CommandItemStateProps) { - return getCommandRootContext().createItem(props); + const root = getCommandRootContext(); + return new CommandItemState(props, root); } export function useCommandGroupContainer(props: CommandGroupContainerStateProps) { - return setCommandGroupContainerContext(getCommandRootContext().createGroupContainer(props)); + const root = getCommandRootContext(); + return setCommandGroupContainerContext(new CommandGroupContainerState(props, root)); } export function useCommandGroupHeading(props: CommandGroupHeadingStateProps) { - return getCommandGroupContainerContext().createGroupHeading(props); + const groupContainer = getCommandGroupContainerContext(); + return new CommandGroupHeadingState(props, groupContainer); } export function useCommandGroupItems(props: CommandGroupItemsStateProps) { - return getCommandGroupContainerContext().createGroupItems(props); + const groupContainer = getCommandGroupContainerContext(); + return new CommandGroupItemsState(props, groupContainer); } export function useCommandInput(props: CommandInputStateProps) { - return getCommandRootContext().createInput(props); + const root = getCommandRootContext(); + return new CommandInputState(props, root); } export function useCommandLoading(props: CommandLoadingStateProps) { @@ -1159,17 +1133,21 @@ export function useCommandLoading(props: CommandLoadingStateProps) { } export function useCommandSeparator(props: CommandSeparatorStateProps) { - return getCommandRootContext().createSeparator(props); + const root = getCommandRootContext(); + return new CommandSeparatorState(props, root); } export function useCommandList(props: CommandListStateProps) { - return setCommandListContext(getCommandRootContext().createList(props)); + const root = getCommandRootContext(); + return setCommandListContext(new CommandListState(props, root)); } export function useCommandViewport(props: CommandViewportStateProps) { - return getCommandListContext().createViewport(props); + const list = getCommandListContext(); + return new CommandViewportState(props, list); } export function useCommandLabel(props: CommandLabelStateProps) { - return getCommandRootContext().createLabel(props); + const root = getCommandRootContext(); + return new CommandLabelState(props, root); } diff --git a/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte b/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte index 48662ed59..e20c9a18c 100644 --- a/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte +++ b/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte @@ -1,9 +1,9 @@ - + {@render children?.()} - + diff --git a/packages/bits-ui/src/lib/bits/context-menu/exports.ts b/packages/bits-ui/src/lib/bits/context-menu/exports.ts new file mode 100644 index 000000000..8b248d312 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/context-menu/exports.ts @@ -0,0 +1,37 @@ +export { default as Root } from "./components/context-menu.svelte"; +export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte"; +export { default as Item } from "$lib/bits/menu/components/menu-item.svelte"; +export { default as Group } from "$lib/bits/menu/components/menu-group.svelte"; +export { default as GroupHeading } from "$lib/bits/menu/components/menu-group-heading.svelte"; +export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte"; +export { default as Content } from "./components/context-menu-content.svelte"; +export { default as ContentStatic } from "./components/context-menu-content-static.svelte"; +export { default as Trigger } from "./components/context-menu-trigger.svelte"; +export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte"; +export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte"; +export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte"; +export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte"; +export { default as SubContentStatic } from "$lib/bits/menu/components/menu-sub-content-static.svelte"; +export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte"; +export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; + +export type { + ContextMenuArrowProps as ArrowProps, + ContextMenuCheckboxItemProps as CheckboxItemProps, + ContextMenuGroupProps as GroupProps, + ContextMenuItemProps as ItemProps, + ContextMenuGroupHeadingProps as GroupHeadingProps, + ContextMenuRootProps as RootProps, + ContextMenuRadioGroupProps as RadioGroupProps, + ContextMenuRadioItemProps as RadioItemProps, + ContextMenuSeparatorProps as SeparatorProps, + ContextMenuSubContentProps as SubContentProps, + ContextMenuSubContentStaticProps as SubContentStaticProps, + ContextMenuSubProps as SubProps, + ContextMenuSubTriggerProps as SubTriggerProps, + ContextMenuContentProps as ContentProps, + ContextMenuContentStaticProps as ContentStaticProps, + ContextMenuTriggerProps as TriggerProps, + ContextMenuPortalProps as PortalProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/context-menu/index.ts b/packages/bits-ui/src/lib/bits/context-menu/index.ts index 8b248d312..7961b9012 100644 --- a/packages/bits-ui/src/lib/bits/context-menu/index.ts +++ b/packages/bits-ui/src/lib/bits/context-menu/index.ts @@ -1,37 +1 @@ -export { default as Root } from "./components/context-menu.svelte"; -export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte"; -export { default as Item } from "$lib/bits/menu/components/menu-item.svelte"; -export { default as Group } from "$lib/bits/menu/components/menu-group.svelte"; -export { default as GroupHeading } from "$lib/bits/menu/components/menu-group-heading.svelte"; -export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte"; -export { default as Content } from "./components/context-menu-content.svelte"; -export { default as ContentStatic } from "./components/context-menu-content-static.svelte"; -export { default as Trigger } from "./components/context-menu-trigger.svelte"; -export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte"; -export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte"; -export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte"; -export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte"; -export { default as SubContentStatic } from "$lib/bits/menu/components/menu-sub-content-static.svelte"; -export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte"; -export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; - -export type { - ContextMenuArrowProps as ArrowProps, - ContextMenuCheckboxItemProps as CheckboxItemProps, - ContextMenuGroupProps as GroupProps, - ContextMenuItemProps as ItemProps, - ContextMenuGroupHeadingProps as GroupHeadingProps, - ContextMenuRootProps as RootProps, - ContextMenuRadioGroupProps as RadioGroupProps, - ContextMenuRadioItemProps as RadioItemProps, - ContextMenuSeparatorProps as SeparatorProps, - ContextMenuSubContentProps as SubContentProps, - ContextMenuSubContentStaticProps as SubContentStaticProps, - ContextMenuSubProps as SubProps, - ContextMenuSubTriggerProps as SubTriggerProps, - ContextMenuContentProps as ContentProps, - ContextMenuContentStaticProps as ContentStaticProps, - ContextMenuTriggerProps as TriggerProps, - ContextMenuPortalProps as PortalProps, -} from "./types.js"; +export * as ContextMenu from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/context-menu/types.ts b/packages/bits-ui/src/lib/bits/context-menu/types.ts index b58e6f3db..0628046fb 100644 --- a/packages/bits-ui/src/lib/bits/context-menu/types.ts +++ b/packages/bits-ui/src/lib/bits/context-menu/types.ts @@ -24,22 +24,22 @@ export type ContextMenuTriggerProps = ContextMenuTriggerPropsWithoutHTML & Without; export type { - ArrowProps as ContextMenuArrowProps, - ContentStaticProps as ContextMenuContentStaticProps, - CheckboxItemProps as ContextMenuCheckboxItemProps, - GroupProps as ContextMenuGroupProps, - ItemProps as ContextMenuItemProps, - GroupHeadingProps as ContextMenuGroupHeadingProps, - RootProps as ContextMenuRootProps, - RadioGroupProps as ContextMenuRadioGroupProps, - RadioItemProps as ContextMenuRadioItemProps, - SeparatorProps as ContextMenuSeparatorProps, - SubContentProps as ContextMenuSubContentProps, - SubContentStaticProps as ContextMenuSubContentStaticProps, - SubProps as ContextMenuSubProps, - SubTriggerProps as ContextMenuSubTriggerProps, - PortalProps as ContextMenuPortalProps, -} from "$lib/bits/menu/index.js"; + MenuArrowProps as ContextMenuArrowProps, + MenuContentStaticProps as ContextMenuContentStaticProps, + MenuCheckboxItemProps as ContextMenuCheckboxItemProps, + MenuGroupProps as ContextMenuGroupProps, + MenuItemProps as ContextMenuItemProps, + MenuGroupHeadingProps as ContextMenuGroupHeadingProps, + MenuRootProps as ContextMenuRootProps, + MenuRadioGroupProps as ContextMenuRadioGroupProps, + MenuRadioItemProps as ContextMenuRadioItemProps, + MenuSeparatorProps as ContextMenuSeparatorProps, + MenuSubContentProps as ContextMenuSubContentProps, + MenuSubContentStaticProps as ContextMenuSubContentStaticProps, + MenuSubProps as ContextMenuSubProps, + MenuSubTriggerProps as ContextMenuSubTriggerProps, + MenuPortalProps as ContextMenuPortalProps, +} from "$lib/bits/menu/types.js"; export type { MenuRootPropsWithoutHTML as ContextMenuRootPropsWithoutHTML, diff --git a/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte b/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte index aa4342ca3..adf721bf9 100644 --- a/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte +++ b/packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte @@ -1,10 +1,10 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -200,4 +200,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/date-range-picker.svelte.ts b/packages/bits-ui/src/lib/bits/date-range-picker/date-range-picker.svelte.ts index 0818d198d..b797ec588 100644 --- a/packages/bits-ui/src/lib/bits/date-range-picker/date-range-picker.svelte.ts +++ b/packages/bits-ui/src/lib/bits/date-range-picker/date-range-picker.svelte.ts @@ -1,8 +1,8 @@ import type { DateValue } from "@internationalized/date"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { createContext } from "$lib/internal/createContext.js"; -import type { DateMatcher, Granularity, HourCycle, WeekStartsOn } from "$lib/shared/date/types.js"; -import type { DateRange, SegmentPart } from "$lib/shared/index.js"; +import { createContext } from "$lib/internal/create-context.js"; +import type { DateMatcher, DateRange, SegmentPart } from "$lib/shared/index.js"; +import type { Granularity, HourCycle, WeekStartsOn } from "$lib/shared/date/types.js"; type DateRangePickerRootStateProps = WritableBoxedValues<{ value: DateRange; diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/exports.ts b/packages/bits-ui/src/lib/bits/date-range-picker/exports.ts new file mode 100644 index 000000000..eec460247 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/date-range-picker/exports.ts @@ -0,0 +1,43 @@ +export { default as Root } from "./components/date-range-picker.svelte"; +export { default as Calendar } from "./components/date-range-picker-calendar.svelte"; +export { default as Trigger } from "./components/date-range-picker-trigger.svelte"; +export { default as Content } from "$lib/bits/date-picker/components/date-picker-content.svelte"; +export { default as Arrow } from "$lib/bits/popover/components/popover-arrow.svelte"; +export { default as Close } from "$lib/bits/popover/components/popover-close.svelte"; +export { default as Input } from "$lib/bits/date-range-field/components/date-range-field-input.svelte"; +export { default as Label } from "$lib/bits/date-range-field/components/date-range-field-label.svelte"; +export { default as Segment } from "$lib/bits/date-field/components/date-field-segment.svelte"; +export { default as GridBody } from "$lib/bits/calendar/components/calendar-grid-body.svelte"; +export { default as GridHead } from "$lib/bits/calendar/components/calendar-grid-head.svelte"; +export { default as GridRow } from "$lib/bits/calendar/components/calendar-grid-row.svelte"; +export { default as Grid } from "$lib/bits/calendar/components/calendar-grid.svelte"; +export { default as HeadCell } from "$lib/bits/calendar/components/calendar-head-cell.svelte"; +export { default as Header } from "$lib/bits/calendar/components/calendar-header.svelte"; +export { default as Heading } from "$lib/bits/calendar/components/calendar-heading.svelte"; +export { default as NextButton } from "$lib/bits/calendar/components/calendar-next-button.svelte"; +export { default as PrevButton } from "$lib/bits/calendar/components/calendar-prev-button.svelte"; +export { default as Cell } from "$lib/bits/range-calendar/components/range-calendar-cell.svelte"; +export { default as Day } from "$lib/bits/range-calendar/components/range-calendar-day.svelte"; + +export type { + DateRangePickerRootProps as RootProps, + DateRangePickerLabelProps as LabelProps, + DateRangePickerInputProps as InputProps, + DateRangePickerSegmentProps as SegmentProps, + DateRangePickerArrowProps as ArrowProps, + DateRangePickerCloseProps as CloseProps, + DateRangePickerContentProps as ContentProps, + DateRangePickerTriggerProps as TriggerProps, + DateRangePickerCalendarProps as CalendarProps, + DateRangePickerCellProps as CellProps, + DateRangePickerDayProps as DayProps, + DateRangePickerGridBodyProps as GridBodyProps, + DateRangePickerGridHeadProps as GridHeadProps, + DateRangePickerGridProps as GridProps, + DateRangePickerGridRowProps as GridRowProps, + DateRangePickerHeadCellProps as HeadCellProps, + DateRangePickerHeaderProps as HeaderProps, + DateRangePickerHeadingProps as HeadingProps, + DateRangePickerNextButtonProps as NextButtonProps, + DateRangePickerPrevButtonProps as PrevButtonProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/index.ts b/packages/bits-ui/src/lib/bits/date-range-picker/index.ts index ccc107d29..b8610db1e 100644 --- a/packages/bits-ui/src/lib/bits/date-range-picker/index.ts +++ b/packages/bits-ui/src/lib/bits/date-range-picker/index.ts @@ -1,43 +1 @@ -export { default as Root } from "./components/date-range-picker.svelte"; -export { default as Calendar } from "./components/date-range-picker-calendar.svelte"; -export { default as Trigger } from "./components/date-range-picker-trigger.svelte"; -export { default as Content } from "$lib/bits/date-picker/components/date-picker-content.svelte"; -export { Arrow } from "$lib/bits/popover/index.js"; -export { default as Close } from "$lib/bits/popover/components/popover-close.svelte"; -export { default as Input } from "$lib/bits/date-range-field/components/date-range-field-input.svelte"; -export { default as Label } from "$lib/bits/date-range-field/components/date-range-field-label.svelte"; -export { default as Segment } from "$lib/bits/date-field/components/date-field-segment.svelte"; -export { default as GridBody } from "$lib/bits/calendar/components/calendar-grid-body.svelte"; -export { default as GridHead } from "$lib/bits/calendar/components/calendar-grid-head.svelte"; -export { default as GridRow } from "$lib/bits/calendar/components/calendar-grid-row.svelte"; -export { default as Grid } from "$lib/bits/calendar/components/calendar-grid.svelte"; -export { default as HeadCell } from "$lib/bits/calendar/components/calendar-head-cell.svelte"; -export { default as Header } from "$lib/bits/calendar/components/calendar-header.svelte"; -export { default as Heading } from "$lib/bits/calendar/components/calendar-heading.svelte"; -export { default as NextButton } from "$lib/bits/calendar/components/calendar-next-button.svelte"; -export { default as PrevButton } from "$lib/bits/calendar/components/calendar-prev-button.svelte"; -export { default as Cell } from "$lib/bits/range-calendar/components/range-calendar-cell.svelte"; -export { default as Day } from "$lib/bits/range-calendar/components/range-calendar-day.svelte"; - -export type { - DateRangePickerRootProps as RootProps, - DateRangePickerLabelProps as LabelProps, - DateRangePickerInputProps as InputProps, - DateRangePickerSegmentProps as SegmentProps, - DateRangePickerArrowProps as ArrowProps, - DateRangePickerCloseProps as CloseProps, - DateRangePickerContentProps as ContentProps, - DateRangePickerTriggerProps as TriggerProps, - DateRangePickerCalendarProps as CalendarProps, - DateRangePickerCellProps as CellProps, - DateRangePickerDayProps as DayProps, - DateRangePickerGridBodyProps as GridBodyProps, - DateRangePickerGridHeadProps as GridHeadProps, - DateRangePickerGridProps as GridProps, - DateRangePickerGridRowProps as GridRowProps, - DateRangePickerHeadCellProps as HeadCellProps, - DateRangePickerHeaderProps as HeaderProps, - DateRangePickerHeadingProps as HeadingProps, - DateRangePickerNextButtonProps as NextButtonProps, - DateRangePickerPrevButtonProps as PrevButtonProps, -} from "./types.js"; +export * as DateRangePicker from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/types.ts b/packages/bits-ui/src/lib/bits/date-range-picker/types.ts index 583ee8535..009c1b805 100644 --- a/packages/bits-ui/src/lib/bits/date-range-picker/types.ts +++ b/packages/bits-ui/src/lib/bits/date-range-picker/types.ts @@ -1,16 +1,15 @@ import type { DateValue } from "@internationalized/date"; import type { OnChangeFn, WithChild, Without } from "$lib/internal/types.js"; import type { PrimitiveDivAttributes } from "$lib/shared/attributes.js"; -import type { EditableSegmentPart } from "$lib/shared/date/field/types.js"; import type { DateMatcher, DateOnInvalid, + DateRange, DateRangeValidator, - Granularity, - WeekStartsOn, -} from "$lib/shared/date/types.js"; -import type { DateRange } from "$lib/shared/index.js"; + EditableSegmentPart, +} from "$lib/shared/index.js"; import type { CalendarRootSnippetProps } from "$lib/types.js"; +import type { Granularity, WeekStartsOn } from "$lib/shared/date/types.js"; export type DateRangePickerRootPropsWithoutHTML = WithChild<{ /** diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte index c92484987..d1120263d 100644 --- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte +++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte @@ -1,9 +1,9 @@ - + {@render children?.()} - + {#if Array.isArray(value)} {#if value.length === 0} diff --git a/packages/bits-ui/src/lib/bits/listbox/exports.ts b/packages/bits-ui/src/lib/bits/listbox/exports.ts new file mode 100644 index 000000000..abf2e0746 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/listbox/exports.ts @@ -0,0 +1,25 @@ +export { default as Root } from "./components/listbox.svelte"; +export { default as Content } from "./components/listbox-content.svelte"; +export { default as ContentStatic } from "./components/listbox-content-static.svelte"; +export { default as Item } from "./components/listbox-item.svelte"; +export { default as Group } from "./components/listbox-group.svelte"; +export { default as GroupHeading } from "./components/listbox-group-heading.svelte"; +export { default as Trigger } from "./components/listbox-trigger.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; +export { default as Viewport } from "./components/listbox-viewport.svelte"; +export { default as ScrollUpButton } from "./components/listbox-scroll-up-button.svelte"; +export { default as ScrollDownButton } from "./components/listbox-scroll-down-button.svelte"; + +export type { + ListboxRootProps as RootProps, + ListboxContentProps as ContentProps, + ListboxContentStaticProps as ContentStaticProps, + ListboxItemProps as ItemProps, + ListboxGroupProps as GroupProps, + ListboxGroupHeadingProps as GroupHeadingProps, + ListboxTriggerProps as TriggerProps, + ListboxViewportProps as ViewportProps, + ListboxScrollUpButtonProps as ScrollUpButtonProps, + ListboxScrollDownButtonProps as ScrollDownButtonProps, + ListboxPortalProps as PortalProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/listbox/index.ts b/packages/bits-ui/src/lib/bits/listbox/index.ts index 08418c708..d8ae5c2a4 100644 --- a/packages/bits-ui/src/lib/bits/listbox/index.ts +++ b/packages/bits-ui/src/lib/bits/listbox/index.ts @@ -1,27 +1 @@ -export { default as Root } from "./components/listbox.svelte"; -export { default as Content } from "./components/listbox-content.svelte"; -export { default as ContentStatic } from "./components/listbox-content-static.svelte"; -export { default as Item } from "./components/listbox-item.svelte"; -export { default as Group } from "./components/listbox-group.svelte"; -export { default as GroupHeading } from "./components/listbox-group-label.svelte"; -export { default as Label } from "./components/listbox-label.svelte"; -export { default as Trigger } from "./components/listbox-trigger.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; -export { default as Viewport } from "./components/listbox-viewport.svelte"; -export { default as ScrollUpButton } from "./components/listbox-scroll-up-button.svelte"; -export { default as ScrollDownButton } from "./components/listbox-scroll-down-button.svelte"; - -export type { - ListboxRootProps as RootProps, - ListboxContentProps as ContentProps, - ListboxContentStaticProps as ContentStaticProps, - ListboxItemProps as ItemProps, - ListboxGroupProps as GroupProps, - ListboxGroupHeadingProps as GroupHeadingProps, - ListboxTriggerProps as TriggerProps, - ListboxViewportProps as ViewportProps, - ListboxScrollUpButtonProps as ScrollUpButtonProps, - ListboxScrollDownButtonProps as ScrollDownButtonProps, - ListboxPortalProps as PortalProps, - // ListboxLabelProps as LabelProps, -} from "./types.js"; +export * as Listbox from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts b/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts index 4af017ace..cbd498db0 100644 --- a/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts +++ b/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts @@ -2,7 +2,7 @@ import { Previous } from "runed"; import { untrack } from "svelte"; import { styleToString } from "svelte-toolbelt"; import type { InteractOutsideEvent } from "../utilities/dismissible-layer/types.js"; -import { afterTick } from "$lib/internal/afterTick.js"; +import { afterTick } from "$lib/internal/after-tick.js"; import { backward, forward, next, prev } from "$lib/internal/arrays.js"; import { getAriaExpanded, @@ -13,13 +13,13 @@ import { getRequired, } from "$lib/internal/attrs.js"; import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { createContext } from "$lib/internal/create-context.js"; import { kbd } from "$lib/internal/kbd.js"; import type { WithRefProps } from "$lib/internal/types.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; import { noop } from "$lib/internal/callbacks.js"; import { addEventListener } from "$lib/internal/events.js"; -import { type Typeahead, useTypeahead } from "$lib/internal/useTypeahead.svelte.js"; +import { type Typeahead, useTypeahead } from "$lib/internal/use-typeahead.svelte.js"; import { srOnlyStyles } from "$lib/internal/style.js"; // prettier-ignore @@ -140,22 +140,6 @@ class ListboxBaseRootState { toggleMenu = () => { this.toggleOpen(); }; - - createComboTrigger(props: ListboxComboTriggerStateProps) { - return new ListboxComboTriggerState(props, this); - } - - createGroup(props: ListboxGroupStateProps) { - return new ListboxGroupState(props, this); - } - - createHiddenInput(props: ListboxHiddenInputStateProps) { - return new ListboxHiddenInputState(props, this); - } - - createContent(props: ListboxContentStateProps) { - return new ListboxContentState(props, this); - } } type ListboxSingleRootStateProps = ListboxBaseRootStateProps & @@ -209,18 +193,6 @@ class ListboxSingleRootState extends ListboxBaseRootState { if (!firstCandidate) return; this.setHighlightedNode(firstCandidate); }; - - createInput(props: ListboxInputStateProps) { - return new ListboxInputState(props, this); - } - - createTrigger(props: ListboxTriggerStateProps) { - return new ListboxTriggerState(props, this); - } - - createItem(props: ListboxItemStateProps) { - return new ListboxItemState(props, this); - } } type ListboxMultipleRootStateProps = ListboxBaseRootStateProps & @@ -274,18 +246,6 @@ class ListboxMultipleRootState extends ListboxBaseRootState { if (!firstCandidate) return; this.setHighlightedNode(firstCandidate); }; - - createInput(props: ListboxInputStateProps) { - return new ListboxInputState(props, this); - } - - createTrigger(props: ListboxTriggerStateProps) { - return new ListboxTriggerState(props, this); - } - - createItem(props: ListboxItemStateProps) { - return new ListboxItemState(props, this); - } } type ListboxRootState = ListboxSingleRootState | ListboxMultipleRootState; @@ -714,20 +674,6 @@ class ListboxContentState { onpointermove: this.#onpointermove, }) as const ); - - createViewportState = (props: ListboxViewportStateProps) => { - return new ListboxViewportState(props, this); - }; - - createScrollUpButtonState = (props: ListboxScrollButtonImplStateProps) => { - const state = new ListboxScrollButtonImplState(props, this); - return new ListboxScrollUpButtonState(state); - }; - - createScrollDownButtonState = (props: ListboxScrollButtonImplStateProps) => { - const state = new ListboxScrollButtonImplState(props, this); - return new ListboxScrollDownButtonState(state); - }; } type ListboxItemStateProps = WithRefProps< @@ -858,10 +804,6 @@ class ListboxGroupState { "aria-labelledby": this.labelNode?.id ?? undefined, }) as const ); - - createGroupHeading(props: ListboxGroupHeadingStateProps) { - return new ListboxGroupHeadingState(props, this); - } } type ListboxGroupHeadingStateProps = WithRefProps; @@ -1187,47 +1129,51 @@ export function useListboxRoot(props: InitListboxProps) { } export function useListboxInput(props: ListboxInputStateProps) { - return getListboxRootContext().createInput(props); + return new ListboxInputState(props, getListboxRootContext()); } export function useListboxContent(props: ListboxContentStateProps) { - return setListboxContentContext(getListboxRootContext().createContent(props)); + return setListboxContentContext(new ListboxContentState(props, getListboxRootContext())); } export function useListboxTrigger(props: ListboxTriggerStateProps) { - return getListboxRootContext().createTrigger(props); + return new ListboxTriggerState(props, getListboxRootContext()); } export function useListboxComboTrigger(props: ListboxComboTriggerStateProps) { - return getListboxRootContext().createComboTrigger(props); + return new ListboxComboTriggerState(props, getListboxRootContext()); } export function useListboxItem(props: ListboxItemStateProps) { - return getListboxRootContext().createItem(props); + return new ListboxItemState(props, getListboxRootContext()); } export function useListboxViewport(props: ListboxViewportStateProps) { - return getListboxContentContext().createViewportState(props); + return new ListboxViewportState(props, getListboxContentContext()); } export function useListboxScrollUpButton(props: ListboxScrollButtonImplStateProps) { - return getListboxContentContext().createScrollUpButtonState(props); + return new ListboxScrollUpButtonState( + new ListboxScrollButtonImplState(props, getListboxContentContext()) + ); } export function useListboxScrollDownButton(props: ListboxScrollButtonImplStateProps) { - return getListboxContentContext().createScrollDownButtonState(props); + return new ListboxScrollDownButtonState( + new ListboxScrollButtonImplState(props, getListboxContentContext()) + ); } export function useListboxGroup(props: ListboxGroupStateProps) { - return setListboxGroupContext(getListboxRootContext().createGroup(props)); + return setListboxGroupContext(new ListboxGroupState(props, getListboxRootContext())); } export function useListboxGroupHeading(props: ListboxGroupHeadingStateProps) { - return getListboxGroupContext().createGroupHeading(props); + return new ListboxGroupHeadingState(props, getListboxGroupContext()); } export function useListboxHiddenInput(props: ListboxHiddenInputStateProps) { - return getListboxRootContext().createHiddenInput(props); + return new ListboxHiddenInputState(props, getListboxRootContext()); } //////////////////////////////////// diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte index 52e0c561a..d1133952c 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte @@ -1,14 +1,14 @@ - + diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte index c8d488dac..2e2845d92 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte @@ -1,9 +1,9 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -34,4 +34,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte index e2b48f20e..ce974fbb5 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte @@ -1,8 +1,8 @@ - + {@render children?.()} - + diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte index bec95b984..44ad276a4 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte @@ -1,10 +1,10 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -35,4 +35,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu.svelte index 02f32e218..5ad566014 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu.svelte @@ -1,9 +1,9 @@ - + {@render children?.()} - + diff --git a/packages/bits-ui/src/lib/bits/menu/index.ts b/packages/bits-ui/src/lib/bits/menu/exports.ts similarity index 100% rename from packages/bits-ui/src/lib/bits/menu/index.ts rename to packages/bits-ui/src/lib/bits/menu/exports.ts diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts index c91e2f763..37e2f4f7c 100644 --- a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts +++ b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts @@ -16,10 +16,10 @@ import { focusFirst } from "$lib/internal/focus.js"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; import { addEventListener } from "$lib/internal/events.js"; import type { AnyFn, WithRefProps } from "$lib/internal/types.js"; -import { executeCallbacks } from "$lib/internal/executeCallbacks.js"; -import { useTypeahead } from "$lib/internal/useTypeahead.svelte.js"; +import { executeCallbacks } from "$lib/internal/execute-callbacks.js"; +import { useTypeahead } from "$lib/internal/use-typeahead.svelte.js"; import { isElement, isElementOrSVGElement, isHTMLElement } from "$lib/internal/is.js"; -import { useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js"; +import { useRovingFocus } from "$lib/internal/use-roving-focus.svelte.js"; import { kbd } from "$lib/internal/kbd.js"; import { getAriaChecked, @@ -29,25 +29,14 @@ import { getDataDisabled, getDataOpenClosed, } from "$lib/internal/attrs.js"; -import { mergeProps } from "$lib/internal/mergeProps.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { mergeProps } from "$lib/internal/merge-props.js"; +import { createContext } from "$lib/internal/create-context.js"; import type { Direction } from "$lib/shared/index.js"; -import { afterTick } from "$lib/internal/afterTick.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; +import { afterTick } from "$lib/internal/after-tick.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; import { isPointerInGraceArea, makeHullFromElements } from "$lib/internal/polygon.js"; -import { onDestroyEffect } from "$lib/internal/onDestroyEffect.svelte.js"; - -// const TRIGGER_ATTR = "data-menu-trigger"; -// const CONTENT_ATTR = "data-menu-content"; -// const ITEM_ATTR = "data-menu-item"; -// const SEPARATOR_ATTR = "data-menu-separator"; -// const SUB_TRIGGER_ATTR = "data-menu-sub-trigger"; -// const CHECKBOX_ITEM_ATTR = "data-menu-checkbox-item"; -// const GROUP_ATTR = "data-menu-group"; -// const LABEL_ATTR = "data-menu-group-heading"; -// const RADIO_GROUP_ATTR = "data-menu-radio-group"; -// const RADIO_ITEM_ATTR = "data-menu-radio-item"; -// const ARROW_ATTR = "data-menu-arrow"; +import { onDestroyEffect } from "$lib/internal/on-destroy-effect.svelte.js"; + export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger"; const [setMenuRootContext, getMenuRootContext] = createContext("Menu.Root"); @@ -69,23 +58,6 @@ const [setMenuRadioGroupContext, getMenuRadioGroupContext] = type MenuVariant = "context-menu" | "dropdown-menu" | "menubar"; -function createAttrs(variant: MenuVariant) { - return { - trigger: `data-${variant}-trigger`, - content: `data-${variant}-content`, - item: `data-${variant}-item`, - separator: `data-${variant}-separator`, - subTrigger: `data-${variant}-sub-trigger`, - checkboxItem: `data-${variant}-checkbox-item`, - group: `data-${variant}-group`, - groupHeading: `data-${variant}-group-heading`, - radioGroup: `data-${variant}-radio-group`, - radioItem: `data-${variant}-radio-item`, - arrow: `data-${variant}-arrow`, - subContent: `data-${variant}-sub-content`, - } as const; -} - export type MenuRootStateProps = ReadableBoxedValues<{ dir: Direction; variant: MenuVariant; @@ -98,7 +70,6 @@ class MenuRootState { variant: MenuRootStateProps["variant"]; isUsingKeyboard = box(false); dir: MenuRootStateProps["dir"]; - attrs = $derived.by(() => createAttrs(this.variant.current)); constructor(props: MenuRootStateProps) { this.onClose = props.onClose; @@ -142,21 +113,9 @@ class MenuRootState { }); } - createMenu(props: MenuMenuStateProps) { - return new MenuMenuState(props, this); - } - - createGroup(props: MenuGroupStateProps) { - return new MenuGroupState(props, this); - } - - createSeparator(props: MenuSeparatorStateProps) { - return new MenuSeparatorState(props, this); - } - - createArrow() { - return new MenuArrowState(this); - } + getAttr = (name: string) => { + return `data-${this.variant.current}-${name}`; + }; } type MenuMenuStateProps = WritableBoxedValues<{ @@ -197,22 +156,6 @@ class MenuMenuState { onClose = () => { this.open.current = false; }; - - createContent(props: MenuContentStateProps) { - return new MenuContentState(props, this); - } - - createSubmenu(props: MenuMenuStateProps) { - return new MenuMenuState(props, this.root, this); - } - - createDropdownTrigger(props: DropdownMenuTriggerStateProps) { - return new DropdownMenuTriggerState(props, this); - } - - createContextTrigger(props: ContextMenuTriggerStateProps) { - return new ContextMenuTriggerState(props, this); - } } type MenuContentStateProps = ReadableBoxedValues<{ @@ -266,7 +209,7 @@ class MenuContentState { this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch; this.rovingFocusGroup = useRovingFocus({ rootNodeId: this.parentMenu.contentId, - candidateAttr: this.parentMenu.root.attrs.item, + candidateAttr: this.parentMenu.root.getAttr("item"), loop: this.#loop, orientation: box.with(() => "vertical"), }); @@ -277,7 +220,7 @@ class MenuContentState { if (!node) return []; const candidates = Array.from( node.querySelectorAll( - `[${this.parentMenu.root.attrs.item}]:not([data-disabled])` + `[${this.parentMenu.root.getAttr("item")}]:not([data-disabled])` ) ); return candidates; @@ -300,7 +243,7 @@ class MenuContentState { if (!isHTMLElement(target) || !isHTMLElement(currentTarget)) return; const isKeydownInside = - target.closest(`[${this.parentMenu.root.attrs.content}]`)?.id === + target.closest(`[${this.parentMenu.root.getAttr("content")}]`)?.id === this.parentMenu.contentId.current; const isModifierKey = e.ctrlKey || e.altKey || e.metaKey; const isCharacterKey = e.key.length === 1; @@ -409,7 +352,7 @@ class MenuContentState { id: this.#id.current, role: "menu", "aria-orientation": getAriaOrientation("vertical"), - [this.parentMenu.root.attrs.content]: "", + [this.parentMenu.root.getAttr("content")]: "", "data-state": getDataOpenClosed(this.parentMenu.open.current), onkeydown: this.#onkeydown, onblur: this.#onblur, @@ -421,28 +364,6 @@ class MenuContentState { }, }) as const ); - - createItem(props: MenuItemSharedStateProps & MenuItemStateProps) { - const item = new MenuItemSharedState(props, this); - return new MenuItemState(props, item); - } - - createCheckboxItem( - props: MenuItemSharedStateProps & MenuItemStateProps & MenuCheckboxItemStateProps - ) { - const item = new MenuItemState(props, new MenuItemSharedState(props, this)); - return new MenuCheckboxItemState(props, item); - } - - createRadioGroup(props: MenuRadioGroupStateProps) { - return new MenuRadioGroupState(props, this); - } - - createSubTrigger(props: MenuItemSharedStateProps) { - const item = new MenuItemSharedState(props, this); - const submenu = getMenuMenuContext(); - return new MenuSubTriggerState(item, this, submenu); - } } type MenuItemSharedStateProps = ReadableBoxedValues<{ @@ -519,7 +440,7 @@ class MenuItemSharedState { "aria-disabled": getAriaDisabled(this.disabled.current), "data-disabled": getDataDisabled(this.disabled.current), "data-highlighted": this.#isFocused ? "" : undefined, - [this.content.parentMenu.root.attrs.item]: "", + [this.content.parentMenu.root.getAttr("item")]: "", // onpointermove: this.#onpointermove, onpointerleave: this.#onpointerleave, @@ -712,7 +633,7 @@ class MenuSubTriggerState { "aria-controls": this.#submenu.open.current ? this.#submenu.contentId.current : undefined, - [this.#submenu.root.attrs.subTrigger]: "", + [this.#submenu.root.getAttr("sub-trigger")]: "", onclick: this.#onclick, onpointermove: this.#onpointermove, onpointerleave: this.#onpointerleave, @@ -753,7 +674,7 @@ class MenuCheckboxItemState { role: "menuitemcheckbox", "aria-checked": getAriaChecked(this.#checked.current), "data-state": getCheckedState(this.#checked.current), - [this.#item.root.attrs.checkboxItem]: "", + [this.#item.root.getAttr("checkbox-item")]: "", }) as const ); } @@ -783,13 +704,9 @@ class MenuGroupState { id: this.#id.current, role: "group", "aria-labelledby": this.groupHeadingId, - [this.root.attrs.group]: "", + [this.root.getAttr("group")]: "", }) as const ); - - createGroupHeading(props: MenuGroupHeadingStateProps) { - return new MenuGroupHeadingState(props, this); - } } type MenuGroupHeadingStateProps = WithRefProps; @@ -817,7 +734,7 @@ class MenuGroupHeadingState { ({ id: this.#id.current, role: "group", - [this.#group.root.attrs.groupHeading]: "", + [this.#group.root.getAttr("group-heading")]: "", }) as const ); } @@ -845,7 +762,7 @@ class MenuSeparatorState { ({ id: this.#id.current, role: "group", - [this.#root.attrs.separator]: "", + [this.#root.getAttr("separator")]: "", }) as const ); } @@ -860,7 +777,7 @@ class MenuArrowState { props = $derived.by( () => ({ - [this.#root.attrs.arrow]: "", + [this.#root.getAttr("arrow")]: "", }) as const ); } @@ -877,7 +794,7 @@ class MenuRadioGroupState { #id: MenuRadioGroupStateProps["id"]; value: MenuRadioGroupStateProps["value"]; #ref: MenuRadioGroupStateProps["ref"]; - #content: MenuContentState; + content: MenuContentState; groupHeadingId = $state(null); root: MenuRootState; @@ -885,7 +802,7 @@ class MenuRadioGroupState { this.value = props.value; this.#id = props.id; this.#ref = props.ref; - this.#content = content; + this.content = content; this.root = content.parentMenu.root; useRefById({ @@ -898,22 +815,11 @@ class MenuRadioGroupState { this.value.current = v; }; - createRadioItem( - props: MenuItemSharedStateProps & MenuItemStateProps & MenuRadioItemStateProps - ) { - const item = this.#content.createItem(props); - return new MenuRadioItemState(props, item, this); - } - - createGroupHeading(props: MenuGroupHeadingStateProps) { - return new MenuGroupHeadingState(props, this); - } - props = $derived.by( () => ({ id: this.#id.current, - [this.root.attrs.radioGroup]: "", + [this.root.getAttr("radio-group")]: "", role: "group", "aria-labelledby": this.groupHeadingId, }) as const @@ -956,7 +862,7 @@ class MenuRadioItemState { props = $derived.by( () => ({ - [this.#group.root.attrs.radioItem]: "", + [this.#group.root.getAttr("radio-item")]: "", ...this.#item.props, role: "menuitemradio", "aria-checked": getAriaChecked(this.isChecked), @@ -1036,7 +942,7 @@ class DropdownMenuTriggerState { "aria-controls": this.#ariaControls, "data-disabled": getDataDisabled(this.#disabled.current), "data-state": getDataOpenClosed(this.#parentMenu.open.current), - [this.#parentMenu.root.attrs.trigger]: "", + [this.#parentMenu.root.getAttr("trigger")]: "", // onpointerdown: this.#onpointerdown, onkeydown: this.#onkeydown, @@ -1169,63 +1075,78 @@ export function useMenuRoot(props: MenuRootStateProps) { } export function useMenuMenu(root: MenuRootState, props: MenuMenuStateProps) { - return setMenuMenuContext(root.createMenu(props)); + const menu = new MenuMenuState(props, root); + return setMenuMenuContext(menu); } export function useMenuSubmenu(props: MenuMenuStateProps) { - return setMenuMenuContext(getMenuMenuContext().createSubmenu(props)); + const menu = getMenuMenuContext(); + return setMenuMenuContext(new MenuMenuState(props, menu.root, menu)); } export function useMenuSubTrigger(props: MenuItemSharedStateProps) { - return getMenuContentContext().createSubTrigger(props); + const content = getMenuContentContext(); + const item = new MenuItemSharedState(props, content); + const submenu = getMenuMenuContext(); + return new MenuSubTriggerState(item, content, submenu); } export function useMenuDropdownTrigger(props: DropdownMenuTriggerStateProps) { - return getMenuMenuContext().createDropdownTrigger(props); -} - -export function useMenuPortal() { - return getMenuMenuContext(); + const menu = getMenuMenuContext(); + return new DropdownMenuTriggerState(props, menu); } export function useMenuContextTrigger(props: ContextMenuTriggerStateProps) { - return getMenuMenuContext().createContextTrigger(props); + const menu = getMenuMenuContext(); + return new ContextMenuTriggerState(props, menu); } export function useMenuContent(props: MenuContentStateProps) { - return setMenuContentContext(getMenuMenuContext().createContent(props)); + const menu = getMenuMenuContext(); + return setMenuContentContext(new MenuContentState(props, menu)); } export function useMenuItem(props: MenuItemCombinedProps) { - return getMenuContentContext().createItem(props); + const content = getMenuContentContext(); + const item = new MenuItemSharedState(props, content); + return new MenuItemState(props, item); } export function useMenuCheckboxItem(props: MenuItemCombinedProps & MenuCheckboxItemStateProps) { - return getMenuContentContext().createCheckboxItem(props); + const content = getMenuContentContext(); + const item = new MenuItemState(props, new MenuItemSharedState(props, content)); + return new MenuCheckboxItemState(props, item); } export function useMenuRadioGroup(props: MenuRadioGroupStateProps) { - return setMenuGroupContext( - setMenuRadioGroupContext(getMenuContentContext().createRadioGroup(props)) - ); + const content = getMenuContentContext(); + const radioGroup = new MenuRadioGroupState(props, content); + return setMenuGroupContext(setMenuRadioGroupContext(radioGroup)); } export function useMenuRadioItem(props: MenuRadioItemStateProps & MenuItemCombinedProps) { - return getMenuRadioGroupContext().createRadioItem(props); + const radioGroup = getMenuRadioGroupContext(); + const sharedItem = new MenuItemSharedState(props, radioGroup.content); + const item = new MenuItemState(props, sharedItem); + return new MenuRadioItemState(props, item, radioGroup); } export function useMenuGroup(props: MenuGroupStateProps) { - return setMenuGroupContext(getMenuRootContext().createGroup(props)); + const root = getMenuRootContext(); + return setMenuGroupContext(new MenuGroupState(props, root)); } export function useMenuGroupHeading(props: MenuGroupHeadingStateProps) { - return getMenuGroupContext().createGroupHeading(props); + const group = getMenuGroupContext(); + return new MenuGroupHeadingState(props, group); } export function useMenuSeparator(props: MenuSeparatorStateProps) { - return getMenuRootContext().createSeparator(props); + const root = getMenuRootContext(); + return new MenuSeparatorState(props, root); } export function useMenuArrow() { - return getMenuRootContext().createArrow(); + const root = getMenuRootContext(); + return new MenuArrowState(root); } diff --git a/packages/bits-ui/src/lib/bits/menu/types.ts b/packages/bits-ui/src/lib/bits/menu/types.ts index c5796c7d8..feabe96cc 100644 --- a/packages/bits-ui/src/lib/bits/menu/types.ts +++ b/packages/bits-ui/src/lib/bits/menu/types.ts @@ -165,6 +165,8 @@ export type MenuSubPropsWithoutHTML = WithChildren<{ controlledOpen?: boolean; }>; +export type MenuSubProps = MenuSubPropsWithoutHTML; + export type MenuSubContentPropsWithoutHTML = Expand< WithChild< Omit & _SharedMenuContentProps, diff --git a/packages/bits-ui/src/lib/bits/menubar/components/menubar-content-static.svelte b/packages/bits-ui/src/lib/bits/menubar/components/menubar-content-static.svelte index 5c0f268cc..6d7515c66 100644 --- a/packages/bits-ui/src/lib/bits/menubar/components/menubar-content-static.svelte +++ b/packages/bits-ui/src/lib/bits/menubar/components/menubar-content-static.svelte @@ -1,9 +1,9 @@ - + diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte index 63696a364..434fb317f 100644 --- a/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte +++ b/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte @@ -1,9 +1,9 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -34,4 +34,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte index f75528788..2a74ec1ce 100644 --- a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte +++ b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte @@ -1,8 +1,8 @@ - + {@render children?.()} - + diff --git a/packages/bits-ui/src/lib/bits/popover/exports.ts b/packages/bits-ui/src/lib/bits/popover/exports.ts new file mode 100644 index 000000000..7b43cd78a --- /dev/null +++ b/packages/bits-ui/src/lib/bits/popover/exports.ts @@ -0,0 +1,18 @@ +export { default as Root } from "./components/popover.svelte"; +export { default as Arrow } from "./components/popover-arrow.svelte"; +export { default as Content } from "./components/popover-content.svelte"; +export { default as ContentStatic } from "./components/popover-content-static.svelte"; +export { default as Trigger } from "./components/popover-trigger.svelte"; +export { default as Close } from "./components/popover-close.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; + +export type { + PopoverRootProps as RootProps, + PopoverArrowProps as ArrowProps, + PopoverContentProps as ContentProps, + PopoverContentStaticProps as ContentStaticProps, + PopoverTriggerProps as TriggerProps, + PopoverCloseProps as CloseProps, +} from "./types.js"; + +export type { PortalProps } from "$lib/bits/utilities/portal/types.js"; diff --git a/packages/bits-ui/src/lib/bits/popover/index.ts b/packages/bits-ui/src/lib/bits/popover/index.ts index 7b43cd78a..098d935e2 100644 --- a/packages/bits-ui/src/lib/bits/popover/index.ts +++ b/packages/bits-ui/src/lib/bits/popover/index.ts @@ -1,18 +1 @@ -export { default as Root } from "./components/popover.svelte"; -export { default as Arrow } from "./components/popover-arrow.svelte"; -export { default as Content } from "./components/popover-content.svelte"; -export { default as ContentStatic } from "./components/popover-content-static.svelte"; -export { default as Trigger } from "./components/popover-trigger.svelte"; -export { default as Close } from "./components/popover-close.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; - -export type { - PopoverRootProps as RootProps, - PopoverArrowProps as ArrowProps, - PopoverContentProps as ContentProps, - PopoverContentStaticProps as ContentStaticProps, - PopoverTriggerProps as TriggerProps, - PopoverCloseProps as CloseProps, -} from "./types.js"; - -export type { PortalProps } from "$lib/bits/utilities/portal/types.js"; +export * as Popover from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts index bec0b1651..0c5bf7612 100644 --- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts +++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts @@ -1,8 +1,8 @@ import type { WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; import { kbd } from "$lib/internal/kbd.js"; import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { createContext } from "$lib/internal/create-context.js"; import type { WithRefProps } from "$lib/internal/types.js"; type PopoverRootStateProps = WritableBoxedValues<{ @@ -27,18 +27,6 @@ class PopoverRootState { if (!this.open.current) return; this.open.current = false; }; - - createTrigger = (props: PopoverTriggerStateProps) => { - return new PopoverTriggerState(props, this); - }; - - createContent = (props: PopoverContentStateProps) => { - return new PopoverContentState(props, this); - }; - - createClose = (props: PopoverCloseStateProps) => { - return new PopoverCloseState(props, this); - }; } type PopoverTriggerStateProps = WithRefProps; @@ -180,13 +168,13 @@ export function usePopoverRoot(props: PopoverRootStateProps) { } export function usePopoverTrigger(props: PopoverTriggerStateProps) { - return getPopoverRootContext().createTrigger(props); + return new PopoverTriggerState(props, getPopoverRootContext()); } export function usePopoverContent(props: PopoverContentStateProps) { - return getPopoverRootContext().createContent(props); + return new PopoverContentState(props, getPopoverRootContext()); } export function usePopoverClose(props: PopoverCloseStateProps) { - return getPopoverRootContext().createClose(props); + return new PopoverCloseState(props, getPopoverRootContext()); } diff --git a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte index 87f185b99..2f895dd8e 100644 --- a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte +++ b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte @@ -1,9 +1,9 @@ diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte index d3ae04865..7faf89366 100644 --- a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte +++ b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte @@ -4,7 +4,7 @@ import { useScrollAreaScrollbarY } from "../scroll-area.svelte.js"; import type { _ScrollbarStubProps } from "../types.js"; import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte"; - import { mergeProps } from "$lib/internal/mergeProps.js"; + import { mergeProps } from "$lib/internal/merge-props.js"; let { ...restProps }: _ScrollbarStubProps = $props(); @@ -14,7 +14,7 @@ mounted: box.with(() => isMounted.current), }); - const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props)); + const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props)) as any; diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar.svelte index 0c7b68067..a0090c4a7 100644 --- a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar.svelte +++ b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar.svelte @@ -1,19 +1,19 @@ diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte index 717f38657..d26f9d863 100644 --- a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte +++ b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte @@ -1,11 +1,16 @@ - + diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte index b45cd16a7..d1d92c9a0 100644 --- a/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte +++ b/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte @@ -1,10 +1,10 @@ - {/if} {/snippet} - + diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte index bce6b2004..cece5b1c9 100644 --- a/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte +++ b/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte @@ -1,15 +1,15 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -35,4 +35,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte b/packages/bits-ui/src/lib/bits/select/components/select-value.svelte index d1dc2f48a..d48a5cb04 100644 --- a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte +++ b/packages/bits-ui/src/lib/bits/select/components/select-value.svelte @@ -1,7 +1,7 @@ - + {@render children?.()} {#if rootState.isFormControl.current} {#key rootState.nativeSelectKey} @@ -82,4 +82,4 @@ {/key} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/select/exports.ts b/packages/bits-ui/src/lib/bits/select/exports.ts new file mode 100644 index 000000000..91123efbb --- /dev/null +++ b/packages/bits-ui/src/lib/bits/select/exports.ts @@ -0,0 +1,33 @@ +export { default as Root } from "./components/select.svelte"; +export { default as Arrow } from "./components/select-arrow.svelte"; +export { default as Content } from "./components/select-content.svelte"; +export { default as Group } from "./components/select-group.svelte"; +export { default as GroupHeading } from "./components/select-group-heading.svelte"; +export { default as Item } from "./components/select-item.svelte"; +export { default as ItemText } from "./components/select-item-text.svelte"; +export { default as Separator } from "./components/select-separator.svelte"; +export { default as Trigger } from "./components/select-trigger.svelte"; +export { default as Value } from "./components/select-value.svelte"; +export { default as Viewport } from "./components/select-viewport.svelte"; +export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte"; +export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; + +export type { + SelectRootProps as RootProps, + SelectContentProps as ContentProps, + SelectItemProps as ItemProps, + SelectTriggerProps as TriggerProps, + SelectValueProps as ValueProps, + SelectItemTextProps as ItemTextProps, + SelectContentImplProps as ContentImplProps, + SelectViewportProps as ViewportProps, + SelectPortalProps as PortalProps, + SelectScrollUpButtonProps as ScrollDownButtonProps, + SelectScrollUpButtonProps as ScrollUpButtonProps, + SelectIconProps as IconProps, + SelectGroupProps as GroupProps, + SelectGroupHeadingProps as GroupHeadingProps, + SelectSeparatorProps as SeparatorProps, + SelectArrowProps as ArrowProps, +} from "./types.js"; diff --git a/packages/bits-ui/src/lib/bits/select/index.ts b/packages/bits-ui/src/lib/bits/select/index.ts index 91123efbb..f72551f10 100644 --- a/packages/bits-ui/src/lib/bits/select/index.ts +++ b/packages/bits-ui/src/lib/bits/select/index.ts @@ -1,33 +1 @@ -export { default as Root } from "./components/select.svelte"; -export { default as Arrow } from "./components/select-arrow.svelte"; -export { default as Content } from "./components/select-content.svelte"; -export { default as Group } from "./components/select-group.svelte"; -export { default as GroupHeading } from "./components/select-group-heading.svelte"; -export { default as Item } from "./components/select-item.svelte"; -export { default as ItemText } from "./components/select-item-text.svelte"; -export { default as Separator } from "./components/select-separator.svelte"; -export { default as Trigger } from "./components/select-trigger.svelte"; -export { default as Value } from "./components/select-value.svelte"; -export { default as Viewport } from "./components/select-viewport.svelte"; -export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte"; -export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; - -export type { - SelectRootProps as RootProps, - SelectContentProps as ContentProps, - SelectItemProps as ItemProps, - SelectTriggerProps as TriggerProps, - SelectValueProps as ValueProps, - SelectItemTextProps as ItemTextProps, - SelectContentImplProps as ContentImplProps, - SelectViewportProps as ViewportProps, - SelectPortalProps as PortalProps, - SelectScrollUpButtonProps as ScrollDownButtonProps, - SelectScrollUpButtonProps as ScrollUpButtonProps, - SelectIconProps as IconProps, - SelectGroupProps as GroupProps, - SelectGroupHeadingProps as GroupHeadingProps, - SelectSeparatorProps as SeparatorProps, - SelectArrowProps as ArrowProps, -} from "./types.js"; +export * as Select from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/select/select.svelte.ts b/packages/bits-ui/src/lib/bits/select/select.svelte.ts index 961e2f535..b95650a9b 100644 --- a/packages/bits-ui/src/lib/bits/select/select.svelte.ts +++ b/packages/bits-ui/src/lib/bits/select/select.svelte.ts @@ -7,12 +7,12 @@ import { type ReadableBox, type WritableBox, box } from "svelte-toolbelt"; import { SvelteMap } from "svelte/reactivity"; import { untrack } from "svelte"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { useId } from "$lib/internal/useId.js"; +import { useId } from "$lib/internal/use-id.js"; import type { Direction } from "$lib/shared/index.js"; -import { createContext } from "$lib/internal/createContext.js"; -import { useFormControl } from "$lib/internal/useFormControl.svelte.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; -import { type Typeahead, useTypeahead } from "$lib/internal/useTypeahead.svelte.js"; +import { createContext } from "$lib/internal/create-context.js"; +import { useFormControl } from "$lib/internal/use-form-control.svelte.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; +import { type Typeahead, useTypeahead } from "$lib/internal/use-typeahead.svelte.js"; import { getAriaDisabled, getAriaExpanded, @@ -24,13 +24,13 @@ import { getDataOpenClosed, } from "$lib/internal/attrs.js"; import { kbd } from "$lib/internal/kbd.js"; -import { afterTick } from "$lib/internal/afterTick.js"; +import { afterTick } from "$lib/internal/after-tick.js"; import { clamp } from "$lib/internal/clamp.js"; import { noop } from "$lib/internal/callbacks.js"; import { addEventListener } from "$lib/internal/events.js"; import { sleep } from "$lib/internal/sleep.js"; import type { WithRefProps } from "$lib/internal/types.js"; -import { afterSleep } from "$lib/internal/afterSleep.js"; +import { afterSleep } from "$lib/internal/after-sleep.js"; export const OPEN_KEYS = [kbd.SPACE, kbd.ENTER, kbd.ARROW_UP, kbd.ARROW_DOWN]; export const SELECTION_KEYS = [" ", kbd.ENTER]; @@ -156,22 +156,6 @@ export class SelectRootState { node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`) ); }; - - createTrigger(props: SelectTriggerStateProps) { - return new SelectTriggerState(props, this); - } - - createValue() { - return new SelectValueState(this); - } - - createContent() { - return new SelectContentFragState(this); - } - - createContentImpl(props: SelectContentStateProps) { - return new SelectContentState(props, this); - } } type SelectTriggerStateProps = WithRefProps< @@ -597,32 +581,6 @@ export class SelectContentState { [CONTENT_ATTR]: "", }) as const ); - - createItem(props: SelectItemStateProps) { - return new SelectItemState(props, this); - } - - createViewport(props: SelectViewportStateProps) { - return new SelectViewportState(props, this); - } - - createItemAlignedPosition(props: SelectItemAlignedPositionStateProps) { - return new SelectItemAlignedPositionState(props, this); - } - - createFloatingPosition() { - return new SelectFloatingPositionState(this); - } - - createScrollDownButton(props: SelectScrollButtonImplStateProps) { - const state = new SelectScrollButtonImplState(props, this); - return new SelectScrollDownButtonState(state); - } - - createScrollUpButton(props: SelectScrollButtonImplStateProps) { - const state = new SelectScrollButtonImplState(props, this); - return new SelectScrollUpButtonState(state); - } } type SelectItemStateProps = WithRefProps< @@ -762,10 +720,6 @@ class SelectItemState { ontouchend: this.#ontouchend, }) as const ); - - createText(props: SelectItemTextStateProps) { - return new SelectItemTextState(props, this); - } } type SelectItemTextStateProps = WithRefProps; @@ -1361,15 +1315,11 @@ class SelectGroupState { [GROUP_ATTR]: "", }) as const ); - - createGroupHeading(props: SelectGroupHeadingStateProps) { - return new SelectGroupHeading(props, this); - } } type SelectGroupHeadingStateProps = WithRefProps; -class SelectGroupHeading { +class SelectGroupHeadingState { #id: SelectGroupHeadingStateProps["id"]; #ref: SelectGroupHeadingStateProps["ref"]; group: SelectGroupState; @@ -1480,50 +1430,52 @@ export function useSelectRoot(props: SelectRootStateProps) { } export function useSelectContentFrag() { - return getSelectRootContext().createContent(); + return new SelectContentFragState(getSelectRootContext()); } export function useSelectContent(props: SelectContentStateProps) { - return setSelectContentContext(getSelectRootContext().createContentImpl(props)); + return setSelectContentContext(new SelectContentState(props, getSelectRootContext())); } export function useSelectItemAlignedPosition(props: SelectItemAlignedPositionStateProps) { const contentContext = getSelectContentContext(); - const alignedPositionState = contentContext.createItemAlignedPosition(props); + const alignedPositionState = new SelectItemAlignedPositionState(props, contentContext); contentContext.alignedPositionState = alignedPositionState; return setSelectContentItemAlignedContext(alignedPositionState); } export function useSelectFloatingPosition() { - return getSelectContentContext().createFloatingPosition(); + return new SelectFloatingPositionState(getSelectContentContext()); } export function useSelectTrigger(props: SelectTriggerStateProps) { - return getSelectRootContext().createTrigger(props); + return new SelectTriggerState(props, getSelectRootContext()); } export function useSelectValue() { - return getSelectRootContext().createValue(); + return new SelectValueState(getSelectRootContext()); } export function useSelectItem(props: SelectItemStateProps) { - return setSelectItemContext(getSelectContentContext().createItem(props)); + return setSelectItemContext(new SelectItemState(props, getSelectContentContext())); } export function useSelectItemText(props: SelectItemTextStateProps) { - return getSelectItemContext().createText(props); + return new SelectItemTextState(props, getSelectItemContext()); } export function useSelectViewport(props: SelectViewportStateProps) { - return getSelectContentContext().createViewport(props); + return new SelectViewportState(props, getSelectContentContext()); } export function useSelectScrollUpButton(props: SelectScrollButtonImplStateProps) { - return getSelectContentContext().createScrollUpButton(props); + const state = new SelectScrollButtonImplState(props, getSelectContentContext()); + return new SelectScrollUpButtonState(state); } export function useSelectScrollDownButton(props: SelectScrollButtonImplStateProps) { - return getSelectContentContext().createScrollDownButton(props); + const state = new SelectScrollButtonImplState(props, getSelectContentContext()); + return new SelectScrollDownButtonState(state); } export function useSelectGroup(props: SelectGroupStateProps) { @@ -1531,7 +1483,7 @@ export function useSelectGroup(props: SelectGroupStateProps) { } export function useSelectGroupHeading(props: SelectGroupHeadingStateProps) { - return getSelectGroupContext().createGroupHeading(props); + return new SelectGroupHeadingState(props, getSelectGroupContext()); } export function useSelectArrow(props: SelectArrowStateProps) { diff --git a/packages/bits-ui/src/lib/bits/separator/components/separator.svelte b/packages/bits-ui/src/lib/bits/separator/components/separator.svelte index a9dacb237..05fee8cbf 100644 --- a/packages/bits-ui/src/lib/bits/separator/components/separator.svelte +++ b/packages/bits-ui/src/lib/bits/separator/components/separator.svelte @@ -1,9 +1,9 @@ - + diff --git a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte index b704594e0..c84c7cda4 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte +++ b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte @@ -1,9 +1,9 @@ - + {#if child} {@render child({ props: mergedProps })} {:else} @@ -36,4 +36,4 @@ {@render children?.()} {/if} - + diff --git a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte index 37b83fb95..dbb69fe68 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte +++ b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte @@ -1,8 +1,8 @@ - + {@render children?.()} - + diff --git a/packages/bits-ui/src/lib/bits/tooltip/exports.ts b/packages/bits-ui/src/lib/bits/tooltip/exports.ts new file mode 100644 index 000000000..d892e79a3 --- /dev/null +++ b/packages/bits-ui/src/lib/bits/tooltip/exports.ts @@ -0,0 +1,18 @@ +export { default as Root } from "./components/tooltip.svelte"; +export { default as Content } from "./components/tooltip-content.svelte"; +export { default as ContentStatic } from "./components/tooltip-content-static.svelte"; +export { default as Trigger } from "./components/tooltip-trigger.svelte"; +export { default as Arrow } from "./components/tooltip-arrow.svelte"; +export { default as Provider } from "./components/tooltip-provider.svelte"; +export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; + +export type { + TooltipProviderPropsWithoutHTML as ProviderProps, + TooltipRootPropsWithoutHTML as RootProps, + TooltipArrowProps as ArrowProps, + TooltipContentProps as ContentProps, + TooltipContentStaticProps as ContentStaticProps, + TooltipTriggerProps as TriggerProps, +} from "./types.js"; + +export type { PortalProps } from "$lib/bits/utilities/portal/types.js"; diff --git a/packages/bits-ui/src/lib/bits/tooltip/index.ts b/packages/bits-ui/src/lib/bits/tooltip/index.ts index d892e79a3..a554ebb0b 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/index.ts +++ b/packages/bits-ui/src/lib/bits/tooltip/index.ts @@ -1,18 +1 @@ -export { default as Root } from "./components/tooltip.svelte"; -export { default as Content } from "./components/tooltip-content.svelte"; -export { default as ContentStatic } from "./components/tooltip-content-static.svelte"; -export { default as Trigger } from "./components/tooltip-trigger.svelte"; -export { default as Arrow } from "./components/tooltip-arrow.svelte"; -export { default as Provider } from "./components/tooltip-provider.svelte"; -export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte"; - -export type { - TooltipProviderPropsWithoutHTML as ProviderProps, - TooltipRootPropsWithoutHTML as RootProps, - TooltipArrowProps as ArrowProps, - TooltipContentProps as ContentProps, - TooltipContentStaticProps as ContentStaticProps, - TooltipTriggerProps as TriggerProps, -} from "./types.js"; - -export type { PortalProps } from "$lib/bits/utilities/portal/types.js"; +export * as Tooltip from "./exports.js"; diff --git a/packages/bits-ui/src/lib/bits/tooltip/tooltip.svelte.ts b/packages/bits-ui/src/lib/bits/tooltip/tooltip.svelte.ts index 19913ecb8..e96bcbe8b 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/tooltip.svelte.ts +++ b/packages/bits-ui/src/lib/bits/tooltip/tooltip.svelte.ts @@ -3,11 +3,11 @@ import { useEventListener } from "runed"; import { untrack } from "svelte"; import { TOOLTIP_OPEN_EVENT } from "./utils.js"; import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js"; -import { useTimeoutFn } from "$lib/internal/useTimeoutFn.svelte.js"; -import { useRefById } from "$lib/internal/useRefById.svelte.js"; +import { useTimeoutFn } from "$lib/internal/use-timeout-fn.svelte.js"; +import { useRefById } from "$lib/internal/use-ref-by-id.svelte.js"; import { isElement, isFocusVisible } from "$lib/internal/is.js"; -import { useGraceArea } from "$lib/internal/useGraceArea.svelte.js"; -import { createContext } from "$lib/internal/createContext.js"; +import { useGraceArea } from "$lib/internal/use-grace-area.svelte.js"; +import { createContext } from "$lib/internal/create-context.js"; import { getDataDisabled } from "$lib/internal/attrs.js"; import type { WithRefProps } from "$lib/internal/types.js"; @@ -66,10 +66,6 @@ class TooltipProviderState { onClose = () => { this.#startTimer(); }; - - createRoot(props: TooltipRootStateProps) { - return new TooltipRootState(props, this); - } } type TooltipRootStateProps = ReadableBoxedValues<{ @@ -190,14 +186,6 @@ class TooltipRootState { this.#timerFn.stop(); } }; - - createTrigger(props: TooltipTriggerStateProps) { - return new TooltipTriggerState(props, this); - } - - createContent(props: TooltipContentStateProps) { - return new TooltipContentState(props, this); - } } type TooltipTriggerStateProps = WithRefProps< @@ -373,13 +361,13 @@ export function useTooltipProvider(props: TooltipProviderStateProps) { } export function useTooltipRoot(props: TooltipRootStateProps) { - return setTooltipRootContext(getTooltipProviderContext().createRoot(props)); + return setTooltipRootContext(new TooltipRootState(props, getTooltipProviderContext())); } export function useTooltipTrigger(props: TooltipTriggerStateProps) { - return getTooltipRootContext().createTrigger(props); + return new TooltipTriggerState(props, getTooltipRootContext()); } export function useTooltipContent(props: TooltipContentStateProps) { - return getTooltipRootContext().createContent(props); + return new TooltipContentState(props, getTooltipRootContext()); } diff --git a/packages/bits-ui/src/lib/bits/utilities/arrow/arrow.svelte b/packages/bits-ui/src/lib/bits/utilities/arrow/arrow.svelte index 5f61c50db..f9eb16a08 100644 --- a/packages/bits-ui/src/lib/bits/utilities/arrow/arrow.svelte +++ b/packages/bits-ui/src/lib/bits/utilities/arrow/arrow.svelte @@ -1,7 +1,7 @@ diff --git a/packages/bits-ui/src/tests/accordion/accordion.test.ts b/packages/tests/src/tests/accordion/accordion.test.ts similarity index 99% rename from packages/bits-ui/src/tests/accordion/accordion.test.ts rename to packages/tests/src/tests/accordion/accordion.test.ts index 7bbb3f17c..afbc188d8 100644 --- a/packages/bits-ui/src/tests/accordion/accordion.test.ts +++ b/packages/tests/src/tests/accordion/accordion.test.ts @@ -3,14 +3,13 @@ import { render, waitFor } from "@testing-library/svelte/svelte5"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; import { tick } from "svelte"; -import { getTestKbd, setupUserEvents } from "../utils.js"; +import { getTestKbd, setupUserEvents, sleep } from "../utils.js"; import AccordionSingleTest from "./accordion-single-test.svelte"; import AccordionMultiTest from "./accordion-multi-test.svelte"; import AccordionTestIsolated from "./accordion-test-isolated.svelte"; import AccordionSingleTestControlledSvelte from "./accordion-single-test-controlled.svelte"; import AccordionMultiTestControlled from "./accordion-multi-test-controlled.svelte"; import AccordionSingleForceMountTest from "./accordion-single-force-mount-test.svelte"; -import { sleep } from "$lib/internal/sleep.js"; export type Item = { value: string; diff --git a/packages/bits-ui/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte b/packages/tests/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte similarity index 97% rename from packages/bits-ui/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte rename to packages/tests/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte index 17f991d9c..ba94ef78e 100644 --- a/packages/bits-ui/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte +++ b/packages/tests/src/tests/alert-dialog/alert-dialog-force-mount-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/avatar/avatar.test.ts b/packages/tests/src/tests/avatar/avatar.test.ts similarity index 100% rename from packages/bits-ui/src/tests/avatar/avatar.test.ts rename to packages/tests/src/tests/avatar/avatar.test.ts diff --git a/packages/bits-ui/src/tests/calendar/calendar-multi-test.svelte b/packages/tests/src/tests/calendar/calendar-multi-test.svelte similarity index 96% rename from packages/bits-ui/src/tests/calendar/calendar-multi-test.svelte rename to packages/tests/src/tests/calendar/calendar-multi-test.svelte index e44514b12..7afb177d7 100644 --- a/packages/bits-ui/src/tests/calendar/calendar-multi-test.svelte +++ b/packages/tests/src/tests/calendar/calendar-multi-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/calendar/calendar-test.svelte b/packages/tests/src/tests/calendar/calendar-test.svelte similarity index 96% rename from packages/bits-ui/src/tests/calendar/calendar-test.svelte rename to packages/tests/src/tests/calendar/calendar-test.svelte index dc38fe24d..d9b4b7fdf 100644 --- a/packages/bits-ui/src/tests/calendar/calendar-test.svelte +++ b/packages/tests/src/tests/calendar/calendar-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/calendar/calendar.test.ts b/packages/tests/src/tests/calendar/calendar.test.ts similarity index 100% rename from packages/bits-ui/src/tests/calendar/calendar.test.ts rename to packages/tests/src/tests/calendar/calendar.test.ts diff --git a/packages/bits-ui/src/tests/checkbox/checkbox-test.svelte b/packages/tests/src/tests/checkbox/checkbox-test.svelte similarity index 89% rename from packages/bits-ui/src/tests/checkbox/checkbox-test.svelte rename to packages/tests/src/tests/checkbox/checkbox-test.svelte index b5067b9d0..87596f73d 100644 --- a/packages/bits-ui/src/tests/checkbox/checkbox-test.svelte +++ b/packages/tests/src/tests/checkbox/checkbox-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/checkbox/checkbox.test.ts b/packages/tests/src/tests/checkbox/checkbox.test.ts similarity index 99% rename from packages/bits-ui/src/tests/checkbox/checkbox.test.ts rename to packages/tests/src/tests/checkbox/checkbox.test.ts index ea6c40496..1e675fc35 100644 --- a/packages/bits-ui/src/tests/checkbox/checkbox.test.ts +++ b/packages/tests/src/tests/checkbox/checkbox.test.ts @@ -2,9 +2,9 @@ import { render } from "@testing-library/svelte/svelte5"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; import { tick } from "svelte"; +import type { Checkbox } from "bits-ui"; import { getTestKbd, setupUserEvents } from "../utils.js"; import CheckboxTest from "./checkbox-test.svelte"; -import type { Checkbox } from "$lib/index.js"; const kbd = getTestKbd(); diff --git a/packages/bits-ui/src/tests/collapsible/collapsible-force-mount-test.svelte b/packages/tests/src/tests/collapsible/collapsible-force-mount-test.svelte similarity index 95% rename from packages/bits-ui/src/tests/collapsible/collapsible-force-mount-test.svelte rename to packages/tests/src/tests/collapsible/collapsible-force-mount-test.svelte index 440aaa390..c8a24332b 100644 --- a/packages/bits-ui/src/tests/collapsible/collapsible-force-mount-test.svelte +++ b/packages/tests/src/tests/collapsible/collapsible-force-mount-test.svelte @@ -1,5 +1,5 @@
diff --git a/packages/bits-ui/src/tests/label/label.test.ts b/packages/tests/src/tests/label/label.test.ts similarity index 100% rename from packages/bits-ui/src/tests/label/label.test.ts rename to packages/tests/src/tests/label/label.test.ts diff --git a/packages/bits-ui/src/tests/link-preview/link-preview-force-mount-test.svelte b/packages/tests/src/tests/link-preview/link-preview-force-mount-test.svelte similarity index 95% rename from packages/bits-ui/src/tests/link-preview/link-preview-force-mount-test.svelte rename to packages/tests/src/tests/link-preview/link-preview-force-mount-test.svelte index b02a566d7..434a262c9 100644 --- a/packages/bits-ui/src/tests/link-preview/link-preview-force-mount-test.svelte +++ b/packages/tests/src/tests/link-preview/link-preview-force-mount-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/menubar/menubar.test.ts b/packages/tests/src/tests/menubar/menubar.test.ts similarity index 98% rename from packages/bits-ui/src/tests/menubar/menubar.test.ts rename to packages/tests/src/tests/menubar/menubar.test.ts index 7208c2f78..cba79e6b1 100644 --- a/packages/bits-ui/src/tests/menubar/menubar.test.ts +++ b/packages/tests/src/tests/menubar/menubar.test.ts @@ -3,9 +3,9 @@ import { userEvent } from "@testing-library/user-event"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; import { tick } from "svelte"; +import type { Menubar } from "bits-ui"; import { getTestKbd } from "../utils.js"; import MenubarTest from "./menubar-test.svelte"; -import type { Menubar } from "$lib/index.js"; const kbd = getTestKbd(); diff --git a/packages/bits-ui/src/tests/pagination/pagination-test.svelte b/packages/tests/src/tests/pagination/pagination-test.svelte similarity index 92% rename from packages/bits-ui/src/tests/pagination/pagination-test.svelte rename to packages/tests/src/tests/pagination/pagination-test.svelte index b530ec94f..3e2ba0fee 100644 --- a/packages/bits-ui/src/tests/pagination/pagination-test.svelte +++ b/packages/tests/src/tests/pagination/pagination-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/pagination/pagination.test.ts b/packages/tests/src/tests/pagination/pagination.test.ts similarity index 93% rename from packages/bits-ui/src/tests/pagination/pagination.test.ts rename to packages/tests/src/tests/pagination/pagination.test.ts index 3a2fcf78a..12214ca20 100644 --- a/packages/bits-ui/src/tests/pagination/pagination.test.ts +++ b/packages/tests/src/tests/pagination/pagination.test.ts @@ -2,7 +2,6 @@ import { render } from "@testing-library/svelte"; import { axe } from "jest-axe"; import { setupUserEvents } from "../utils.js"; import PaginationTest, { type PaginationTestProps } from "./pagination-test.svelte"; -import { isHTMLElement } from "$lib/internal/is.js"; function setup(props: PaginationTestProps = { count: 100 }) { const user = setupUserEvents(); @@ -26,8 +25,8 @@ function setup(props: PaginationTestProps = { count: 100 }) { function getPageButton(el: HTMLElement, page: number) { const btn = el.querySelector(`[data-value="${page}"]`); - if (!isHTMLElement(btn)) { - throw new Error(`Page button ${page} not found`); + if (!(btn instanceof HTMLElement)) { + throw new TypeError(`Page button ${page} not found`); } return btn; } diff --git a/packages/bits-ui/src/tests/pin-input/pin-input-test.svelte b/packages/tests/src/tests/pin-input/pin-input-test.svelte similarity index 90% rename from packages/bits-ui/src/tests/pin-input/pin-input-test.svelte rename to packages/tests/src/tests/pin-input/pin-input-test.svelte index 0ff778d0e..593c3a835 100644 --- a/packages/bits-ui/src/tests/pin-input/pin-input-test.svelte +++ b/packages/tests/src/tests/pin-input/pin-input-test.svelte @@ -1,9 +1,8 @@ diff --git a/packages/bits-ui/src/tests/progress/progress.test.ts b/packages/tests/src/tests/progress/progress.test.ts similarity index 97% rename from packages/bits-ui/src/tests/progress/progress.test.ts rename to packages/tests/src/tests/progress/progress.test.ts index e0dece2f4..a9371100f 100644 --- a/packages/bits-ui/src/tests/progress/progress.test.ts +++ b/packages/tests/src/tests/progress/progress.test.ts @@ -2,8 +2,8 @@ import { render } from "@testing-library/svelte/svelte5"; import { userEvent } from "@testing-library/user-event"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; +import type { Progress } from "bits-ui"; import ProgressTest from "./progress-test.svelte"; -import type { Progress } from "$lib/index.js"; function setup(props: Progress.RootProps = {}) { const user = userEvent.setup(); diff --git a/packages/bits-ui/src/tests/radio-group/radio-group-test.svelte b/packages/tests/src/tests/radio-group/radio-group-test.svelte similarity index 94% rename from packages/bits-ui/src/tests/radio-group/radio-group-test.svelte rename to packages/tests/src/tests/radio-group/radio-group-test.svelte index af204a9e5..1274c2346 100644 --- a/packages/bits-ui/src/tests/radio-group/radio-group-test.svelte +++ b/packages/tests/src/tests/radio-group/radio-group-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/range-calendar/range-calendar.test.ts b/packages/tests/src/tests/range-calendar/range-calendar.test.ts similarity index 100% rename from packages/bits-ui/src/tests/range-calendar/range-calendar.test.ts rename to packages/tests/src/tests/range-calendar/range-calendar.test.ts diff --git a/packages/bits-ui/src/tests/scroll-area/scroll-area-test.svelte b/packages/tests/src/tests/scroll-area/scroll-area-test.svelte similarity index 96% rename from packages/bits-ui/src/tests/scroll-area/scroll-area-test.svelte rename to packages/tests/src/tests/scroll-area/scroll-area-test.svelte index dc9fe34cf..a1fdbd8a1 100644 --- a/packages/bits-ui/src/tests/scroll-area/scroll-area-test.svelte +++ b/packages/tests/src/tests/scroll-area/scroll-area-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/separator/separator.test.ts b/packages/tests/src/tests/separator/separator.test.ts similarity index 95% rename from packages/bits-ui/src/tests/separator/separator.test.ts rename to packages/tests/src/tests/separator/separator.test.ts index fda777ffa..1d343d3e0 100644 --- a/packages/bits-ui/src/tests/separator/separator.test.ts +++ b/packages/tests/src/tests/separator/separator.test.ts @@ -2,8 +2,8 @@ import { render } from "@testing-library/svelte/svelte5"; import { userEvent } from "@testing-library/user-event"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; +import type { Separator } from "bits-ui"; import SeparatorTest from "./separator-test.svelte"; -import type { Separator } from "$lib/index.js"; function setup(props: Separator.RootProps = {}) { const user = userEvent.setup(); diff --git a/packages/bits-ui/src/tests/slider/slider-range-test.svelte b/packages/tests/src/tests/slider/slider-range-test.svelte similarity index 95% rename from packages/bits-ui/src/tests/slider/slider-range-test.svelte rename to packages/tests/src/tests/slider/slider-range-test.svelte index 4e7ff7885..795aa0724 100644 --- a/packages/bits-ui/src/tests/slider/slider-range-test.svelte +++ b/packages/tests/src/tests/slider/slider-range-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/slider/slider-test.svelte b/packages/tests/src/tests/slider/slider-test.svelte similarity index 97% rename from packages/bits-ui/src/tests/slider/slider-test.svelte rename to packages/tests/src/tests/slider/slider-test.svelte index 05ab745a7..01b65fd65 100644 --- a/packages/bits-ui/src/tests/slider/slider-test.svelte +++ b/packages/tests/src/tests/slider/slider-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/switch/switch.test.ts b/packages/tests/src/tests/switch/switch.test.ts similarity index 98% rename from packages/bits-ui/src/tests/switch/switch.test.ts rename to packages/tests/src/tests/switch/switch.test.ts index 2cacc2fa4..1c8b5122c 100644 --- a/packages/bits-ui/src/tests/switch/switch.test.ts +++ b/packages/tests/src/tests/switch/switch.test.ts @@ -2,9 +2,9 @@ import { render } from "@testing-library/svelte/svelte5"; import { userEvent } from "@testing-library/user-event"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; +import type { Switch } from "bits-ui"; import { getTestKbd } from "../utils.js"; import SwitchTest from "./switch-test.svelte"; -import type { Switch } from "$lib/index.js"; const kbd = getTestKbd(); diff --git a/packages/bits-ui/src/tests/tabs/tabs-test.svelte b/packages/tests/src/tests/tabs/tabs-test.svelte similarity index 92% rename from packages/bits-ui/src/tests/tabs/tabs-test.svelte rename to packages/tests/src/tests/tabs/tabs-test.svelte index 7014a0594..995c785c3 100644 --- a/packages/bits-ui/src/tests/tabs/tabs-test.svelte +++ b/packages/tests/src/tests/tabs/tabs-test.svelte @@ -1,5 +1,5 @@ diff --git a/packages/bits-ui/src/tests/toggle/toggle.test.ts b/packages/tests/src/tests/toggle/toggle.test.ts similarity index 98% rename from packages/bits-ui/src/tests/toggle/toggle.test.ts rename to packages/tests/src/tests/toggle/toggle.test.ts index 25f4f126a..4fdbafbe9 100644 --- a/packages/bits-ui/src/tests/toggle/toggle.test.ts +++ b/packages/tests/src/tests/toggle/toggle.test.ts @@ -2,9 +2,9 @@ import { render } from "@testing-library/svelte/svelte5"; import { userEvent } from "@testing-library/user-event"; import { axe } from "jest-axe"; import { describe, it } from "vitest"; +import type { Toggle } from "bits-ui"; import { getTestKbd } from "../utils.js"; import ToggleTest from "./toggle-test.svelte"; -import type { Toggle } from "$lib/index.js"; const kbd = getTestKbd(); diff --git a/packages/bits-ui/src/tests/toolbar/toolbar-test.svelte b/packages/tests/src/tests/toolbar/toolbar-test.svelte similarity index 96% rename from packages/bits-ui/src/tests/toolbar/toolbar-test.svelte rename to packages/tests/src/tests/toolbar/toolbar-test.svelte index e2f351459..5099600ab 100644 --- a/packages/bits-ui/src/tests/toolbar/toolbar-test.svelte +++ b/packages/tests/src/tests/toolbar/toolbar-test.svelte @@ -1,5 +1,5 @@