From e0bd73eb5ec10c47ae154d83aa808d3835ea70f7 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Sat, 6 Jan 2024 15:51:04 -0500 Subject: [PATCH] fix: date picker context issue (#260) --- .changeset/sixty-chairs-tell.md | 5 ++++ .../calendar/components/calendar-cell.svelte | 4 ++-- .../calendar/components/calendar-day.svelte | 4 ++-- .../components/calendar-grid-body.svelte | 4 ++-- .../components/calendar-grid-head.svelte | 4 ++-- .../components/calendar-grid-row.svelte | 4 ++-- .../calendar/components/calendar-grid.svelte | 4 ++-- .../components/calendar-head-cell.svelte | 4 ++-- .../components/calendar-header.svelte | 4 ++-- .../components/calendar-heading.svelte | 4 ++-- .../components/calendar-next-button.svelte | 4 ++-- .../components/calendar-prev-button.svelte | 4 ++-- .../bits/calendar/components/calendar.svelte | 4 ++-- src/lib/bits/calendar/ctx.ts | 10 +++++--- .../components/date-picker-grid-body.svelte | 19 +++++++++++++++ .../components/date-picker-grid-head.svelte | 23 +++++++++++++++++++ .../components/date-picker-grid-row.svelte | 21 +++++++++++++++++ .../components/date-picker-head-cell.svelte | 19 +++++++++++++++ .../components/date-picker-header.svelte | 20 ++++++++++++++++ src/lib/bits/date-picker/index.ts | 10 ++++---- .../date-range-picker-grid-body.svelte | 20 ++++++++++++++++ .../date-range-picker-grid-head.svelte | 19 +++++++++++++++ .../date-range-picker-grid-row.svelte | 20 ++++++++++++++++ .../date-range-picker-head-cell.svelte | 20 ++++++++++++++++ .../date-range-picker-header.svelte | 20 ++++++++++++++++ src/lib/bits/date-range-picker/index.ts | 10 ++++---- 26 files changed, 247 insertions(+), 37 deletions(-) create mode 100644 .changeset/sixty-chairs-tell.md create mode 100644 src/lib/bits/date-picker/components/date-picker-grid-body.svelte create mode 100644 src/lib/bits/date-picker/components/date-picker-grid-head.svelte create mode 100644 src/lib/bits/date-picker/components/date-picker-grid-row.svelte create mode 100644 src/lib/bits/date-picker/components/date-picker-head-cell.svelte create mode 100644 src/lib/bits/date-picker/components/date-picker-header.svelte create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-header.svelte diff --git a/.changeset/sixty-chairs-tell.md b/.changeset/sixty-chairs-tell.md new file mode 100644 index 000000000..982f38e19 --- /dev/null +++ b/.changeset/sixty-chairs-tell.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +fix: date picker context issue diff --git a/src/lib/bits/calendar/components/calendar-cell.svelte b/src/lib/bits/calendar/components/calendar-cell.svelte index 07d8a59bf..1e9a4064b 100644 --- a/src/lib/bits/calendar/components/calendar-cell.svelte +++ b/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" diff --git a/src/lib/bits/calendar/components/calendar-day.svelte b/src/lib/bits/calendar/components/calendar-day.svelte index 3fe8d479e..9377fff41 100644 --- a/src/lib/bits/calendar/components/calendar-day.svelte +++ b/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); diff --git a/src/lib/bits/calendar/components/calendar-grid-body.svelte b/src/lib/bits/calendar/components/calendar-grid-body.svelte index 316b2216d..196ad99dd 100644 --- a/src/lib/bits/calendar/components/calendar-grid-body.svelte +++ b/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"); {#if asChild} diff --git a/src/lib/bits/calendar/components/calendar-grid-head.svelte b/src/lib/bits/calendar/components/calendar-grid-head.svelte index 641142d25..728b0415f 100644 --- a/src/lib/bits/calendar/components/calendar-grid-head.svelte +++ b/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 }; diff --git a/src/lib/bits/calendar/components/calendar-grid-row.svelte b/src/lib/bits/calendar/components/calendar-grid-row.svelte index 811ebd41a..f6dd01a84 100644 --- a/src/lib/bits/calendar/components/calendar-grid-row.svelte +++ b/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"); {#if asChild} diff --git a/src/lib/bits/calendar/components/calendar-grid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte index faa3a1bce..49512ead4 100644 --- a/src/lib/bits/calendar/components/calendar-grid.svelte +++ b/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); diff --git a/src/lib/bits/calendar/components/calendar-head-cell.svelte b/src/lib/bits/calendar/components/calendar-head-cell.svelte index 2ee7e8978..76543b524 100644 --- a/src/lib/bits/calendar/components/calendar-head-cell.svelte +++ b/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"); {#if asChild} diff --git a/src/lib/bits/calendar/components/calendar-header.svelte b/src/lib/bits/calendar/components/calendar-header.svelte index 92ad4808b..5ab8a92db 100644 --- a/src/lib/bits/calendar/components/calendar-header.svelte +++ b/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"); {#if asChild} diff --git a/src/lib/bits/calendar/components/calendar-heading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte index 27d3a77a8..59a14f94e 100644 --- a/src/lib/bits/calendar/components/calendar-heading.svelte +++ b/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); diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte index f8bd47d07..b0a9aa04b 100644 --- a/src/lib/bits/calendar/components/calendar-next-button.svelte +++ b/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); diff --git a/src/lib/bits/calendar/components/calendar-prev-button.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte index a7947989e..bebeb24a7 100644 --- a/src/lib/bits/calendar/components/calendar-prev-button.svelte +++ b/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); diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte index 0c0389fda..105de5a31 100644 --- a/src/lib/bits/calendar/components/calendar.svelte +++ b/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); diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts index 967d291e9..e18c90daa 100644 --- a/src/lib/bits/calendar/ctx.ts +++ b/src/lib/bits/calendar/ctx.ts @@ -26,9 +26,10 @@ type GetReturn = Omit, "updateOption">; export function setCtx(props: CreateCalendarProps) { 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(props: CreateCalendarProps(NAME); + + const ctx = getContext(NAME); + console.log(ctx); + return ctx; } diff --git a/src/lib/bits/date-picker/components/date-picker-grid-body.svelte b/src/lib/bits/date-picker/components/date-picker-grid-body.svelte new file mode 100644 index 000000000..196ad99dd --- /dev/null +++ b/src/lib/bits/date-picker/components/date-picker-grid-body.svelte @@ -0,0 +1,19 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-picker/components/date-picker-grid-head.svelte b/src/lib/bits/date-picker/components/date-picker-grid-head.svelte new file mode 100644 index 000000000..728b0415f --- /dev/null +++ b/src/lib/bits/date-picker/components/date-picker-grid-head.svelte @@ -0,0 +1,23 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-picker/components/date-picker-grid-row.svelte b/src/lib/bits/date-picker/components/date-picker-grid-row.svelte new file mode 100644 index 000000000..f6dd01a84 --- /dev/null +++ b/src/lib/bits/date-picker/components/date-picker-grid-row.svelte @@ -0,0 +1,21 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-picker/components/date-picker-head-cell.svelte b/src/lib/bits/date-picker/components/date-picker-head-cell.svelte new file mode 100644 index 000000000..76543b524 --- /dev/null +++ b/src/lib/bits/date-picker/components/date-picker-head-cell.svelte @@ -0,0 +1,19 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-picker/components/date-picker-header.svelte b/src/lib/bits/date-picker/components/date-picker-header.svelte new file mode 100644 index 000000000..5ab8a92db --- /dev/null +++ b/src/lib/bits/date-picker/components/date-picker-header.svelte @@ -0,0 +1,20 @@ + + +{#if asChild} + +{:else} +
+ +
+{/if} diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts index 993ef26e7..e47cf0da6 100644 --- a/src/lib/bits/date-picker/index.ts +++ b/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"; diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte new file mode 100644 index 000000000..bb2801f0c --- /dev/null +++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte @@ -0,0 +1,20 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte new file mode 100644 index 000000000..eb83df1be --- /dev/null +++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte @@ -0,0 +1,19 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte new file mode 100644 index 000000000..32d4124d1 --- /dev/null +++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte @@ -0,0 +1,20 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte new file mode 100644 index 000000000..0e8b4c0a6 --- /dev/null +++ b/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte @@ -0,0 +1,20 @@ + + +{#if asChild} + +{:else} + + + +{/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte new file mode 100644 index 000000000..5ab8a92db --- /dev/null +++ b/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte @@ -0,0 +1,20 @@ + + +{#if asChild} + +{:else} +
+ +
+{/if} diff --git a/src/lib/bits/date-range-picker/index.ts b/src/lib/bits/date-range-picker/index.ts index 53be1db8d..d50e1ad52 100644 --- a/src/lib/bits/date-range-picker/index.ts +++ b/src/lib/bits/date-range-picker/index.ts @@ -14,10 +14,10 @@ export { default as Segment } from "./components/date-range-picker-segment.svelt export { default as Trigger } from "./components/date-range-picker-trigger.svelte"; export { default as Root } from "./components/date-range-picker.svelte"; export { default as Grid } from "./components/date-range-picker-grid.svelte"; -export { default as GridBody } from "$lib/bits/range-calendar/components/range-calendar-grid-body.svelte"; -export { default as GridHead } from "$lib/bits/range-calendar/components/range-calendar-grid-head.svelte"; -export { default as GridRow } from "$lib/bits/range-calendar/components/range-calendar-grid-row.svelte"; -export { default as HeadCell } from "$lib/bits/range-calendar/components/range-calendar-head-cell.svelte"; -export { default as Header } from "$lib/bits/range-calendar/components/range-calendar-header.svelte"; +export { default as GridBody } from "./components/date-range-picker-grid-body.svelte"; +export { default as GridHead } from "./components/date-range-picker-grid-head.svelte"; +export { default as GridRow } from "./components/date-range-picker-grid-row.svelte"; +export { default as HeadCell } from "./components/date-range-picker-head-cell.svelte"; +export { default as Header } from "./components/date-range-picker-header.svelte"; export type * from "./types.js";