fix: date picker context issue (#260)

.changeset/sixty-chairs-tell.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: date picker context issue

src/lib/bits/calendar/components/calendar-cell.svelte

@@ -10,11 +10,11 @@
 
 	const {
 		helpers: { isDateDisabled, isDateUnavailable },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
 	$: attrs = {
-		...getAttrs("cell"),
+		...getCalendarAttrs("cell"),
 		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
 		"data-disabled": $isDateDisabled(date) ? "" : undefined,
 		role: "gridcell"

src/lib/bits/calendar/components/calendar-day.svelte

@@ -15,10 +15,10 @@
 	const {
 		elements: { cell },
 		helpers: { isDateDisabled, isDateUnavailable, isDateSelected },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("day");
+	const attrs = getCalendarAttrs("day");
 	const dispatch = createDispatcher();
 
 	$: builder = $cell(date, month);

src/lib/bits/calendar/components/calendar-grid-body.svelte

@@ -5,9 +5,9 @@
 	type $$Props = GridBodyProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("grid-body");
+	const attrs = getCalendarAttrs("grid-body");
 </script>
 
 {#if asChild}

src/lib/bits/calendar/components/calendar-grid-head.svelte

@@ -6,10 +6,10 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
 	const attrs = {
-		...getAttrs("grid-head"),
+		...getCalendarAttrs("grid-head"),
 		"aria-hidden": true
 	};
 </script>

src/lib/bits/calendar/components/calendar-grid-row.svelte

@@ -7,9 +7,9 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("grid-row");
+	const attrs = getCalendarAttrs("grid-row");
 </script>
 
 {#if asChild}

src/lib/bits/calendar/components/calendar-grid.svelte

@@ -10,10 +10,10 @@
 
 	const {
 		elements: { grid },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("grid");
+	const attrs = getCalendarAttrs("grid");
 
 	$: builder = $grid;
 	$: Object.assign(builder, attrs);

src/lib/bits/calendar/components/calendar-head-cell.svelte

@@ -5,9 +5,9 @@
 	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("head-cell");
+	const attrs = getCalendarAttrs("head-cell");
 </script>
 
 {#if asChild}

src/lib/bits/calendar/components/calendar-header.svelte

@@ -6,9 +6,9 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("header");
+	const attrs = getCalendarAttrs("header");
 </script>
 
 {#if asChild}

src/lib/bits/calendar/components/calendar-heading.svelte

@@ -11,10 +11,10 @@
 	const {
 		elements: { heading },
 		states: { headingValue },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("heading");
+	const attrs = getCalendarAttrs("heading");
 
 	$: builder = $heading;
 	$: Object.assign(builder, attrs);

src/lib/bits/calendar/components/calendar-next-button.svelte

@@ -12,10 +12,10 @@
 
 	const {
 		elements: { nextButton },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("next-button");
+	const attrs = getCalendarAttrs("next-button");
 
 	$: builder = $nextButton;
 	$: Object.assign(builder, attrs);

src/lib/bits/calendar/components/calendar-prev-button.svelte

@@ -12,10 +12,10 @@
 
 	const {
 		elements: { prevButton },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("prev-button");
+	const attrs = getCalendarAttrs("prev-button");
 
 	$: builder = $prevButton;
 	$: Object.assign(builder, attrs);

src/lib/bits/calendar/components/calendar.svelte

@@ -50,7 +50,7 @@
 		},
 		updateOption,
 		ids,
-		getAttrs
+		getCalendarAttrs
 	} = setCtx({
 		defaultPlaceholder: placeholder,
 		defaultValue: value,
@@ -119,7 +119,7 @@
 	$: updateOption("weekdayFormat", weekdayFormat);
 	$: updateOption("numberOfMonths", numberOfMonths);
 
-	const attrs = getAttrs("root");
+	const attrs = getCalendarAttrs("root");
 
 	$: builder = $calendar;
 	$: Object.assign(builder, attrs);

src/lib/bits/calendar/ctx.ts

@@ -26,9 +26,10 @@ type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>) {
 	const { NAME, PARTS } = getCalendarData();
-	const getAttrs = createBitAttrs(NAME, PARTS);
+	const getCalendarAttrs = createBitAttrs(NAME, PARTS);
+	console.log(getCalendarAttrs);
 
-	const calendar = { ...createCalendar(removeUndefined(props)), getAttrs };
+	const calendar = { ...createCalendar(removeUndefined(props)), getCalendarAttrs };
 
 	setContext(NAME, calendar);
 
@@ -40,5 +41,8 @@ export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Mult
 
 export function getCtx() {
 	const { NAME } = getCalendarData();
-	return getContext<GetReturn>(NAME);
+
+	const ctx = getContext<GetReturn>(NAME);
+	console.log(ctx);
+	return ctx;
 }

src/lib/bits/date-picker/components/date-picker-grid-body.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tbody>
+{/if}

src/lib/bits/date-picker/components/date-picker-grid-head.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = {
+		...getCalendarAttrs("grid-head"),
+		"aria-hidden": true
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</thead>
+{/if}

src/lib/bits/date-picker/components/date-picker-grid-row.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}

src/lib/bits/date-picker/components/date-picker-head-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeadCellProps } from "../types.js";
+
+	type $$Props = HeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</th>
+{/if}

src/lib/bits/date-picker/components/date-picker-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}

src/lib/bits/date-picker/index.ts

@@ -8,11 +8,11 @@ export { default as Label } from "./components/date-picker-label.svelte";
 export { default as Segment } from "./components/date-picker-segment.svelte";
 export { default as Trigger } from "./components/date-picker-trigger.svelte";
 export { default as Root } from "./components/date-picker.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 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 GridBody } from "./components/date-picker-grid-body.svelte";
+export { default as GridHead } from "./components/date-picker-grid-head.svelte";
+export { default as GridRow } from "./components/date-picker-grid-row.svelte";
+export { default as HeadCell } from "./components/date-picker-head-cell.svelte";
+export { default as Header } from "./components/date-picker-header.svelte";
 export { default as Cell } from "./components/date-picker-cell.svelte";
 export { default as Day } from "./components/date-picker-day.svelte";
 export { default as Grid } from "./components/date-picker-grid.svelte";

src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</tbody>
+{/if}

src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = { ...getCalendarAttrs("grid-head"), "aria-hidden": true };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</thead>
+{/if}

src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}

src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeadCellProps } from "../types.js";
+
+	type $$Props = HeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</th>
+{/if}