From 42979dd6203cf3e6179da997de7fe352adf0e352 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Tue, 9 Jan 2024 15:45:41 -0500 Subject: [PATCH] feat/fix: add `readonlySegments` & fix dialog exit transitons (#272) --- .changeset/bright-gorillas-hope.md | 5 +++++ .changeset/good-tigers-turn.md | 5 +++++ .changeset/gorgeous-carrots-fail.md | 5 +++++ .changeset/nice-bees-scream.md | 5 +++++ .changeset/shaggy-ears-brush.md | 5 +++++ package.json | 2 +- pnpm-lock.yaml | 22 +++++++------------ src/content/api-reference/date-field.ts | 7 ++++++ src/content/api-reference/date-range-field.ts | 8 +++++++ src/content/api-reference/menubar.ts | 6 +++++ src/lib/bits/alert-dialog/ctx.ts | 3 ++- .../date-field/components/date-field.svelte | 3 +++ src/lib/bits/date-range-field/_types.ts | 12 ++++++++-- .../components/date-range-field.svelte | 3 +++ .../menubar/components/menubar-menu.svelte | 3 --- .../bits/menubar/components/menubar.svelte | 4 +++- src/lib/bits/progress/_types.ts | 4 ++-- src/lib/shared/index.ts | 4 ++-- src/tests/progress/ProgressTest.svelte | 2 +- 19 files changed, 81 insertions(+), 27 deletions(-) create mode 100644 .changeset/bright-gorillas-hope.md create mode 100644 .changeset/good-tigers-turn.md create mode 100644 .changeset/gorgeous-carrots-fail.md create mode 100644 .changeset/nice-bees-scream.md create mode 100644 .changeset/shaggy-ears-brush.md diff --git a/.changeset/bright-gorillas-hope.md b/.changeset/bright-gorillas-hope.md new file mode 100644 index 000000000..ccc829bfc --- /dev/null +++ b/.changeset/bright-gorillas-hope.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Progress: update `value` type to include `null` for `'indeterminate'` state diff --git a/.changeset/good-tigers-turn.md b/.changeset/good-tigers-turn.md new file mode 100644 index 000000000..0f152ebb9 --- /dev/null +++ b/.changeset/good-tigers-turn.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Menubar: move `preventScroll` prop from `Menubar.Menu` to `Menubar.Root` diff --git a/.changeset/gorgeous-carrots-fail.md b/.changeset/gorgeous-carrots-fail.md new file mode 100644 index 000000000..baeed7873 --- /dev/null +++ b/.changeset/gorgeous-carrots-fail.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +Date Range Field: add `readonlySegments` prop to specify certain segments as 'readonly' to the user diff --git a/.changeset/nice-bees-scream.md b/.changeset/nice-bees-scream.md new file mode 100644 index 000000000..35363642d --- /dev/null +++ b/.changeset/nice-bees-scream.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Date Field: add `readonlySegments` prop to specify certain segments as readonly diff --git a/.changeset/shaggy-ears-brush.md b/.changeset/shaggy-ears-brush.md new file mode 100644 index 000000000..2611e4be9 --- /dev/null +++ b/.changeset/shaggy-ears-brush.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +Alert Dialog: Fix bug with exit transitions diff --git a/package.json b/package.json index 90a0c6a14..c0fc0d9d8 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "type": "module", "dependencies": { "@internationalized/date": "^3.5.1", - "@melt-ui/svelte": "0.67.0", + "@melt-ui/svelte": "0.68.0", "nanoid": "^5.0.4" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7de75448..c4baebc24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ dependencies: specifier: ^3.5.1 version: 3.5.1 '@melt-ui/svelte': - specifier: 0.67.0 - version: 0.67.0(svelte@4.2.8) + specifier: 0.68.0 + version: 0.68.0(svelte@4.2.8) nanoid: specifier: ^5.0.4 version: 5.0.4 @@ -24,7 +24,7 @@ devDependencies: version: 0.16.5(svelte@4.2.8) '@melt-ui/pp': specifier: ^0.3.0 - version: 0.3.0(@melt-ui/svelte@0.67.0)(svelte@4.2.8) + version: 0.3.0(@melt-ui/svelte@0.68.0)(svelte@4.2.8) '@playwright/test': specifier: ^1.28.1 version: 1.36.2 @@ -1278,21 +1278,21 @@ packages: - supports-color dev: true - /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.67.0)(svelte@4.2.8): + /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.68.0)(svelte@4.2.8): resolution: {integrity: sha512-b07Bdh8l2KcwKVCXOY+SoBw1dk9eWvQfMSi6SoacpRVyVmmfpi0kV4oGt3HYF0tUCB3sEmVicxse50ZzZxEzEA==} engines: {pnpm: '>=8.6.3'} peerDependencies: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1 dependencies: - '@melt-ui/svelte': 0.67.0(svelte@4.2.8) + '@melt-ui/svelte': 0.68.0(svelte@4.2.8) estree-walker: 3.0.3 magic-string: 0.30.5 svelte: 4.2.8 dev: true - /@melt-ui/svelte@0.67.0(svelte@4.2.8): - resolution: {integrity: sha512-fd9PsDE6sKbeyExagqH0nOpZEnDqyr2efbkjfmCRRYXVW5vlDEOPaSB+mg4Tjch121102sFH1Od+MlXwmeHy3A==} + /@melt-ui/svelte@0.68.0(svelte@4.2.8): + resolution: {integrity: sha512-/QvA98hnYEodZtHJ71+ocum/WWp30hVNt3F8uiZKnNYwZDaiQYjlyR9AaGKYcZLCe6R68op1mfCzc0kTzJilyA==} peerDependencies: svelte: '>=3 <5' dependencies: @@ -1301,7 +1301,7 @@ packages: '@internationalized/date': 3.5.1 dequal: 2.0.3 focus-trap: 7.5.4 - nanoid: 4.0.2 + nanoid: 5.0.4 svelte: 4.2.8 /@nodelib/fs.scandir@2.1.5: @@ -5679,16 +5679,10 @@ packages: hasBin: true dev: true - /nanoid@4.0.2: - resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==} - engines: {node: ^14 || ^16 || >=18} - hasBin: true - /nanoid@5.0.4: resolution: {integrity: sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==} engines: {node: ^18 || >=20} hasBin: true - dev: false /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts index c041c484a..c99eb67c4 100644 --- a/src/content/api-reference/date-field.ts +++ b/src/content/api-reference/date-field.ts @@ -89,6 +89,13 @@ export const root: APISchema = { type: C.BOOLEAN, description: "Whether or not the field is readonly.", default: C.FALSE + }, + readonlySegments: { + type: { + type: C.ARRAY, + definition: "EditableSegmentPart[]" + }, + description: "An array of segments that should be readonly, which prevent user input on them." } }, slotProps: { diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts index 01bd84a5e..32e5c0a7a 100644 --- a/src/content/api-reference/date-range-field.ts +++ b/src/content/api-reference/date-range-field.ts @@ -92,6 +92,14 @@ export const root: APISchema = { type: C.BOOLEAN, description: "Whether or not the field is readonly.", default: C.FALSE + }, + readonlySegments: { + type: { + type: C.OBJECT, + definition: "{ start: EditableSegmentPart[]; end: EditableSegmentPart[]; }" + }, + description: + "The segments for the start and end fields that should be readonly, meaning users cannot edit them. This is useful for prepopulating fixed segments like years, months, or days." } }, slotProps: { diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts index 2ccc9ee8f..04d0119cf 100644 --- a/src/content/api-reference/menubar.ts +++ b/src/content/api-reference/menubar.ts @@ -21,6 +21,12 @@ export const root: APISchema = { description: "Whether or not to loop through the menubar menu triggers when navigating with the keyboard." }, + preventScroll: { + default: C.FALSE, + type: C.BOOLEAN, + description: + "Whether or not to prevent scrolling the body while a menu in the menubar is open." + }, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps, ids: idsSlotProp } diff --git a/src/lib/bits/alert-dialog/ctx.ts b/src/lib/bits/alert-dialog/ctx.ts index ddb72e96c..73dbfa9ef 100644 --- a/src/lib/bits/alert-dialog/ctx.ts +++ b/src/lib/bits/alert-dialog/ctx.ts @@ -25,7 +25,8 @@ export function setCtx(props: SetProps) { const getAttrs = createBitAttrs(NAME, PARTS); const initAlertDialog = createDialog({ ...removeUndefined(props), - role: "alertdialog" + role: "alertdialog", + forceVisible: true }); const alertDialog = { ...initAlertDialog, diff --git a/src/lib/bits/date-field/components/date-field.svelte b/src/lib/bits/date-field/components/date-field.svelte index b6c9e367a..3fd04274c 100644 --- a/src/lib/bits/date-field/components/date-field.svelte +++ b/src/lib/bits/date-field/components/date-field.svelte @@ -20,6 +20,7 @@ export let readonly: $$Props["readonly"] = undefined; export let validationId: $$Props["validationId"] = undefined; export let descriptionId: $$Props["descriptionId"] = undefined; + export let readonlySegments: $$Props["readonlySegments"] = undefined; const { states: { @@ -40,6 +41,7 @@ maxValue, minValue, readonly, + readonlySegments, isDateUnavailable, onValueChange: ({ next }) => { if (value !== next) { @@ -121,6 +123,7 @@ $: updateOption("maxValue", maxValue); $: updateOption("minValue", minValue); $: updateOption("readonly", readonly); + $: updateOption("readonlySegments", readonlySegments); diff --git a/src/lib/bits/date-range-field/_types.ts b/src/lib/bits/date-range-field/_types.ts index d974ea580..db2aec2de 100644 --- a/src/lib/bits/date-range-field/_types.ts +++ b/src/lib/bits/date-range-field/_types.ts @@ -7,10 +7,18 @@ import type { Expand, OnChangeFn, OmitDates, DOMElement } from "$lib/internal/index.js"; import type { DateRange, SegmentPart } from "$lib/shared/index.js"; import type { DateValue } from "@internationalized/date"; -import type { CreateDateFieldProps } from "@melt-ui/svelte"; +import type { CreateDateRangeFieldProps as ICreateDateRangeFieldProps } from "@melt-ui/svelte"; + +type CreateDateRangeFieldProps = Omit< + OmitDates, + "required" | "name" | "startIds" | "endIds" | "startName" | "endName" +>; type Props = Expand< - Omit, "required" | "name"> & { + Omit< + OmitDates, + "required" | "name" | "startIds" | "endIds" | "startName" | "endName" + > & { /** * The value of the date field. * You can bind this to a `DateValue` object to programmatically control the value. diff --git a/src/lib/bits/date-range-field/components/date-range-field.svelte b/src/lib/bits/date-range-field/components/date-range-field.svelte index fcac1d923..81a91ecab 100644 --- a/src/lib/bits/date-range-field/components/date-range-field.svelte +++ b/src/lib/bits/date-range-field/components/date-range-field.svelte @@ -20,6 +20,7 @@ export let readonly: $$Props["readonly"] = undefined; export let validationId: $$Props["validationId"] = undefined; export let descriptionId: $$Props["descriptionId"] = undefined; + export let readonlySegments: $$Props["readonlySegments"] = undefined; const { states: { @@ -41,6 +42,7 @@ minValue, readonly, isDateUnavailable, + readonlySegments, onValueChange: ({ next }) => { if (value !== next) { onValueChange?.(next); @@ -174,6 +176,7 @@ $: updateOption("maxValue", maxValue); $: updateOption("minValue", minValue); $: updateOption("readonly", readonly); + $: updateOption("readonlySegments", readonlySegments); $: idSlotProp = { start: $startIdValues, diff --git a/src/lib/bits/menubar/components/menubar-menu.svelte b/src/lib/bits/menubar/components/menubar-menu.svelte index c89863543..ff65a0151 100644 --- a/src/lib/bits/menubar/components/menubar-menu.svelte +++ b/src/lib/bits/menubar/components/menubar-menu.svelte @@ -9,7 +9,6 @@ export let portal: $$Props["portal"] = undefined; export let open: $$Props["open"] = undefined; export let onOpenChange: $$Props["onOpenChange"] = undefined; - export let preventScroll: $$Props["preventScroll"] = undefined; export let loop: $$Props["loop"] = undefined; export let dir: $$Props["dir"] = undefined; export let typeahead: $$Props["typeahead"] = undefined; @@ -27,7 +26,6 @@ closeOnOutsideClick, closeOnEscape, portal, - preventScroll, loop, dir, typeahead, @@ -57,7 +55,6 @@ $: updateOption("closeOnOutsideClick", closeOnOutsideClick); $: updateOption("closeOnEscape", closeOnEscape); $: updateOption("portal", portal); - $: updateOption("preventScroll", preventScroll); $: updateOption("loop", loop); $: updateOption("dir", dir); $: updateOption("closeFocus", closeFocus); diff --git a/src/lib/bits/menubar/components/menubar.svelte b/src/lib/bits/menubar/components/menubar.svelte index 4670f2af9..5afe3f964 100644 --- a/src/lib/bits/menubar/components/menubar.svelte +++ b/src/lib/bits/menubar/components/menubar.svelte @@ -10,6 +10,7 @@ export let closeOnEscape: $$Props["closeOnEscape"] = true; export let asChild: $$Props["asChild"] = false; export let id: $$Props["id"] = undefined; + export let preventScroll: $$Props["preventScroll"] = undefined; export let el: $$Props["el"] = undefined; const { @@ -17,7 +18,7 @@ updateOption, ids, getMenubarAttrs - } = setCtx({ loop, closeOnEscape }); + } = setCtx({ loop, closeOnEscape, preventScroll }); const idValues = derived([ids.menubar], ([$menubarId]) => ({ menubar: $menubarId @@ -30,6 +31,7 @@ $: updateOption("loop", loop); $: updateOption("closeOnEscape", closeOnEscape); + $: updateOption("preventScroll", preventScroll); $: builder = $menubar; $: Object.assign(builder, attrs); diff --git a/src/lib/bits/progress/_types.ts b/src/lib/bits/progress/_types.ts index 070ed792d..d3cd608d4 100644 --- a/src/lib/bits/progress/_types.ts +++ b/src/lib/bits/progress/_types.ts @@ -12,12 +12,12 @@ type Props = Expand< * The value of the progress bar. * You can bind this to a number value to programmatically control the value. */ - value?: CreateProgressProps["defaultValue"] & {}; + value?: CreateProgressProps["defaultValue"]; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn; } & DOMElement >; diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts index 9fe70c1b0..f1757ba0d 100644 --- a/src/lib/shared/index.ts +++ b/src/lib/shared/index.ts @@ -1,5 +1,5 @@ import type { DateValue } from "@internationalized/date"; -import type { Month, Page, PageItem, Ellipsis } from "@melt-ui/svelte"; +import type { Month, Page, PageItem, Ellipsis, EditableSegmentPart } from "@melt-ui/svelte"; export type Selected = { value: Value; @@ -25,4 +25,4 @@ export type SegmentPart = export type FocusTarget = string | HTMLElement | SVGElement | null; export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => FocusTarget); -export type { Month, Page, PageItem, Ellipsis }; +export type { Month, Page, PageItem, Ellipsis, EditableSegmentPart }; diff --git a/src/tests/progress/ProgressTest.svelte b/src/tests/progress/ProgressTest.svelte index 636163323..32f08c71f 100644 --- a/src/tests/progress/ProgressTest.svelte +++ b/src/tests/progress/ProgressTest.svelte @@ -2,7 +2,7 @@ import { Progress } from "$lib"; type $$Props = Progress.Props; - export let value = 0; + export let value: $$Props["value"] = 0;