@galaxy-io/dls 2.1.0 → 2.2.0

package/dist/inputs/CronInput.js

@@ -1,7 +1,13 @@
-import { FontFamily } from "../theme/enums.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { FontFamily, Orientation } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { useControlledState } from "../hooks/useControlledState.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Flex, { AlignItems } from "../layout/Flex.js";
+import Box from "../layout/Box.js";
+import Divider from "../layout/Divider.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import ButtonGroup from "../buttons/ButtonGroup.js";
 import { useDevWarning } from "./internal/devWarn.js";
@@ -9,7 +15,10 @@ import { FieldContext } from "../hooks/useField.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";
 import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { BareFieldContext, useIsBareField } from "./internal/bareField.js";
+import "./internal/innerButton.js";
 import { InputSize, InputVariant } from "./Input.js";
+import { useDedupedOpen, useRestoreFocusAfterOutsidePress, useRetriedFocus } from "./internal/useComboboxPopover.js";
 import TextInput from "./TextInput.js";
 import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
 import ToggleInput, { ToggleInputSize, ToggleInputVariant } from "./ToggleInput.js";
@@ -18,35 +27,45 @@ import { styled } from "@linaria/react";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { ClockIcon, XIcon } from "@phosphor-icons/react";
 import cronstrue from "cronstrue";
 //#region src/inputs/CronInput.tsx
 /**
 * The form control for a recurring schedule written as a five-field cron expression
-* (`minute hour day-of-month month day-of-week`). It shows a small builder: a frequency
-* (Hourly / Daily / Weekly / Monthly / Custom) and the fields that frequency needs (the minute, the
-* time, the weekdays, the day of the month), and writes the expression. Expressions the builder
-* cannot represent open in Custom, where the expression is edited as text. Under the fields a
-* sentence from `cronstrue` reads the schedule back ("Runs at 09:00, Monday through Friday.").
+* (`minute hour day-of-month month day-of-week`). A field shows the expression (or a placeholder)
+* and opens a schedule panel below it: the presets ("Every 15 minutes", "Weekdays at 09:00"), a
+* builder (a frequency, Hourly / Daily / Weekly / Monthly / Custom, and the fields that frequency
+* needs: the minute, the time, the weekdays, the day of the month), the expression itself as text,
+* and a sentence from `cronstrue` that reads the schedule back ("Runs at 09:00, Monday through
+* Friday."). Expressions the builder cannot represent show as Custom and are edited as text.
 *
-* The value is the expression string. CronInput never validates (the app passes `error`; the
-* sentence only says when it cannot read an expression), holds no time zone, and does not support
-* seconds or year fields. New in 2.0 (sources: rafa's CronInput and Filament's schedule fields).
+* The field is a select-only combobox with a dialog popup (`Popover` `MANUAL`, `DIALOG`), like
+* DateInput; CronInput moves focus to the expression field on open, so a schedule can be typed
+* straight away. The value is the expression string; an empty string shows the placeholder.
+*
+* CronInput never validates (the app passes `error`; the sentence only says when it cannot read an
+* expression), holds no time zone, and does not support seconds or year fields. Sources: rafa's
+* CronInput and Filament's schedule fields.
+*
+* SSR: closed by default, so the server renders the field only. Nothing here touches `window` or
+* `document` at module scope.
 */
-/** Canonical rungs; CronInput supports all five and passes the rung to every control it renders. */
+/** Canonical rungs; CronInput supports all five (the Input rung table). */
 var CronInputSize = /* @__PURE__ */ function(CronInputSize) {
-	/** 20px controls, caption text. */
+	/** 20px field, caption text, 12px icon. */
 	CronInputSize["X_SMALL"] = "X_SMALL";
-	/** 24px controls, body_sm text. */
+	/** 24px field, body_sm text, 12px icon. */
 	CronInputSize["SMALL"] = "SMALL";
-	/** 32px controls, body_md text. The default. */
+	/** 32px field, body_md text, 14px icon. The default. */
 	CronInputSize["MEDIUM"] = "MEDIUM";
-	/** 36px controls, body_lg text. */
+	/** 36px field, body_lg text, 14px icon. */
 	CronInputSize["LARGE"] = "LARGE";
-	/** 40px controls, body_lg text. */
+	/** 40px field, body_lg text, 16px icon. */
 	CronInputSize["X_LARGE"] = "X_LARGE";
 	return CronInputSize;
 }({});
-/** Resting fill of the builder's controls (Constitution V-A surface set). */
+/** Resting fill of the field (Constitution V-A surface set). */
 var CronInputVariant = /* @__PURE__ */ function(CronInputVariant) {
 	/** `background.base` fill. */
 	CronInputVariant["BASE"] = "BASE";
@@ -60,8 +79,43 @@ var CronInputVariant = /* @__PURE__ */ function(CronInputVariant) {
 }({});
 /** The uncontrolled default: daily at 00:00. */
 var CRON_INPUT_DEFAULT_VALUE = "0 0 * * *";
-/** Width of the two-digit selects (minute, hour, day of month). */
-/** Width of the Custom expression field without `fillWidth`. */
+/** The presets shown when the app passes none. */
+var CRON_INPUT_DEFAULT_PRESETS = [
+	{
+		label: "Every 5 minutes",
+		value: "*/5 * * * *"
+	},
+	{
+		label: "Every 15 minutes",
+		value: "*/15 * * * *"
+	},
+	{
+		label: "Hourly",
+		value: "0 * * * *"
+	},
+	{
+		label: "Daily at midnight",
+		value: "0 0 * * *"
+	},
+	{
+		label: "Weekdays at 09:00",
+		value: "0 9 * * 1-5"
+	},
+	{
+		label: "Weekly on Monday",
+		value: "0 0 * * 1"
+	},
+	{
+		label: "Monthly on the 1st",
+		value: "0 0 1 * *"
+	}
+];
+/** Field width without `fillWidth` (DateInput's single width). */
+/** The presets column's narrowest width. */
+/** Width of the two-digit selects (minute, hour, day of month), px for `Box width` (DateInput's time selects). */
+var CRON_INPUT_SELECT_WIDTH = 64;
+/** Frames to wait for the panel's portal before giving up on moving focus into it. */
+var CRON_INPUT_FOCUS_RETRY_FRAMES = 10;
 /** The neutral hint shown when `cronstrue` cannot read the expression. */
 var CRON_INPUT_HINT = "Enter five fields: minute, hour, day of month, month, day of week.";
 /** Each builder row's label; the label column is as wide as the longest, whichever rows show. */
@@ -246,7 +300,11 @@ function builderToValue(frequency, parts) {
 		case "MONTHLY": return `${minute} ${hour} ${dayOfMonth} * *`;
 	}
 }
-/** The sentence under the builder, or `null` when `cronstrue` cannot read the expression. */
+/** An expression with its fields single-spaced, for comparing against a preset. */
+function normalize(expression) {
+	return expression.trim().split(/\s+/).join(" ");
+}
+/** The sentence for an expression, or `null` when `cronstrue` cannot read it. */
 function describe(expression) {
 	if (expression.split(/\s+/).length !== 5) return null;
 	try {
@@ -262,34 +320,32 @@ function describe(expression) {
 		return null;
 	}
 }
-var CRON_INPUT_SIZE_TO_TOGGLE_INPUT_SIZE_MAP = {
-	["X_SMALL"]: ToggleInputSize.X_SMALL,
-	["SMALL"]: ToggleInputSize.SMALL,
-	["MEDIUM"]: ToggleInputSize.MEDIUM,
-	["LARGE"]: ToggleInputSize.LARGE,
-	["X_LARGE"]: ToggleInputSize.X_LARGE
-};
-var CRON_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP = {
-	["X_SMALL"]: SelectInputSize.X_SMALL,
-	["SMALL"]: SelectInputSize.SMALL,
-	["MEDIUM"]: SelectInputSize.MEDIUM,
-	["LARGE"]: SelectInputSize.LARGE,
-	["X_LARGE"]: SelectInputSize.X_LARGE
-};
-var CRON_INPUT_SIZE_TO_INPUT_SIZE_MAP = {
-	["X_SMALL"]: InputSize.X_SMALL,
-	["SMALL"]: InputSize.SMALL,
-	["MEDIUM"]: InputSize.MEDIUM,
-	["LARGE"]: InputSize.LARGE,
-	["X_LARGE"]: InputSize.X_LARGE
+/** Field icon px per rung: one step below the rung's III-A.4 icon (DateInput's). */
+var CRON_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 16
 };
+/** The clear button's rung: 20px up to MEDIUM, 24px for LARGE and X_LARGE (Input's). */
 var CRON_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
 	["X_SMALL"]: ButtonSize.X_SMALL,
-	["SMALL"]: ButtonSize.SMALL,
-	["MEDIUM"]: ButtonSize.MEDIUM,
-	["LARGE"]: ButtonSize.LARGE,
-	["X_LARGE"]: ButtonSize.X_LARGE
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL,
+	["X_LARGE"]: ButtonSize.SMALL
 };
+/** The clear button's px per rung, for the reserved padding (16 on X_SMALL: `X_SMALL_INNER_BUTTON_CSS`). */
+/** Field text step per rung (the canonical control text). */
+var CRON_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The `Field` a CronInput renders for its own `label` / `error` uses the same rung. */
 var CRON_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
 	["X_SMALL"]: FieldSize.X_SMALL,
 	["SMALL"]: FieldSize.SMALL,
@@ -297,53 +353,161 @@ var CRON_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
 	["LARGE"]: FieldSize.LARGE,
 	["X_LARGE"]: FieldSize.X_LARGE
 };
-/** Row labels use the rung's control text. */
-var CRON_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
-	["X_SMALL"]: TextSize.CAPTION,
-	["SMALL"]: TextSize.BODY_SM,
-	["MEDIUM"]: TextSize.BODY_MD,
-	["LARGE"]: TextSize.BODY_LG,
-	["X_LARGE"]: TextSize.BODY_LG
+/** Panel fill: SelectInput's map. A ghost field (`isGhost`) gets a readable `BASE` panel instead. */
+var CRON_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.PRIMARY,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
 };
-/** The preview uses Field's help steps. */
-var CRON_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP = {
-	["X_SMALL"]: TextSize.CAPTION,
-	["SMALL"]: TextSize.CAPTION,
-	["MEDIUM"]: TextSize.BODY_SM,
-	["LARGE"]: TextSize.BODY_SM,
-	["X_LARGE"]: TextSize.BODY_MD
+/** Holds the field box, the trailing parts and the hidden summary. */
+var Wrapper = /*#__PURE__*/ styled("div")({
+	name: "Wrapper",
+	class: "gx-CronInput-Wrapper-wmu78vg",
+	propsAsIs: false
+});
+/** Without `fillWidth`: 240px. */
+var WIDTH_CSS = "gx-CronInput-WIDTH_CSS-wvetpyb";
+/**
+* The combobox (focused element and Popover's reference). No outline; focus is `FOCUS_CSS`.
+* Declared before the frame maps.
+*/
+var Control = /*#__PURE__*/ styled("div")({
+	name: "Control",
+	class: "gx-CronInput-Control-cwvebjn",
+	propsAsIs: false
+});
+/** Rest look per variant: fill and hairline color. */
+var CRON_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-CronInput-BASE-bendsmc",
+	["PRIMARY"]: "gx-CronInput-PRIMARY-p1iubrvv",
+	["SECONDARY"]: "gx-CronInput-SECONDARY-s1i5sgim",
+	["TERTIARY"]: "gx-CronInput-TERTIARY-t1xjp6qf"
 };
-var CRON_INPUT_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP = {
-	["BASE"]: ToggleInputVariant.BASE,
-	["PRIMARY"]: ToggleInputVariant.PRIMARY,
-	["SECONDARY"]: ToggleInputVariant.SECONDARY,
-	["TERTIARY"]: ToggleInputVariant.TERTIARY
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-CronInput-GHOST_CSS-g73e2ix";
+/** Hover on an editable field: `border.hovered` (stronger than `border.primary`, Constitution III.6). */
+var CRON_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-CronInput-BASE-b1tyf0oc",
+	["PRIMARY"]: "gx-CronInput-PRIMARY-ppl1i3v",
+	["SECONDARY"]: "gx-CronInput-SECONDARY-s1r1kpa2",
+	["TERTIARY"]: "gx-CronInput-TERTIARY-tr1ns5a"
 };
-var CRON_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP = {
-	["BASE"]: SelectInputVariant.BASE,
-	["PRIMARY"]: SelectInputVariant.PRIMARY,
-	["SECONDARY"]: SelectInputVariant.SECONDARY,
-	["TERTIARY"]: SelectInputVariant.TERTIARY
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-CronInput-GHOST_HOVER_CSS-g1279sor";
+/**
+* Height, start inset, gap and the end inset that reserves the icon zone (rung padding + icon +
+* gap) per rung (SelectInput's table). The start inset subtracts the 0.5px hairline so the value
+* starts on a whole pixel.
+*/
+var CRON_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-CronInput-X_SMALL-x21adkg",
+	["SMALL"]: "gx-CronInput-SMALL-snda18n",
+	["MEDIUM"]: "gx-CronInput-MEDIUM-m1wqniqa",
+	["LARGE"]: "gx-CronInput-LARGE-l144xlp2",
+	["X_LARGE"]: "gx-CronInput-X_LARGE-xynnhma"
 };
-var CRON_INPUT_VARIANT_TO_INPUT_VARIANT_MAP = {
-	["BASE"]: InputVariant.BASE,
-	["PRIMARY"]: InputVariant.PRIMARY,
-	["SECONDARY"]: InputVariant.SECONDARY,
-	["TERTIARY"]: InputVariant.TERTIARY
+/** With `isClearable`: the end inset also reserves the clear button and a gap. */
+var CRON_INPUT_SIZE_TO_CLEARABLE_CSS_MAP = {
+	["X_SMALL"]: "gx-CronInput-X_SMALL-x11zmzgg",
+	["SMALL"]: "gx-CronInput-SMALL-sgvaglw",
+	["MEDIUM"]: "gx-CronInput-MEDIUM-mv01uf1",
+	["LARGE"]: "gx-CronInput-LARGE-lkzx5g9",
+	["X_LARGE"]: "gx-CronInput-X_LARGE-xvvvzs"
 };
-/** The group: the builder rows, then the preview sentence. */
-var Group = /*#__PURE__*/ styled("div")({
-	name: "Group",
-	class: "gx-CronInput-Group-gmu78vg",
+/**
+* Focus, from the mouse or the keyboard: `FIELD_FOCUS`, `border.focused` at 1px inside the frame. `:focus:hover`
+* beats the hover map, so a ghost field keeps it. Not applied while disabled (the disabled
+* combobox is a `tabIndex={-1}` div, which a click can still focus).
+*/
+var FOCUS_CSS = "gx-CronInput-FOCUS_CSS-f1067muk";
+/** Open: `border.focused`. */
+var OPEN_CSS = "gx-CronInput-OPEN_CSS-o54xey5";
+/** Error border at rest, on hover, with focus and while open. */
+var ERROR_CSS = "gx-CronInput-ERROR_CSS-e1hmaicf";
+/** Disabled keeps the resting hairline; the text, the icon and the cursor say disabled. */
+var DISABLED_CSS = "gx-CronInput-DISABLED_CSS-d66p23w";
+/** Read-only: no pointer affordance. */
+var READ_ONLY_CSS = "gx-CronInput-READ_ONLY_CSS-r1vuh2ii";
+/** Stretch to the parent's width (wrapper, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-CronInput-FILL_WIDTH_CSS-fpavuga";
+/** The expression (or placeholder): takes the row, truncates. */
+var ValueDisplay = /*#__PURE__*/ styled("span")({
+	name: "ValueDisplay",
+	class: "gx-CronInput-ValueDisplay-v18d3ls7",
 	propsAsIs: false
 });
+/** The clock icon and the clear button, laid over the field's end. */
+var Trailing = /*#__PURE__*/ styled("span")({
+	name: "Trailing",
+	class: "gx-CronInput-Trailing-t5fn29j",
+	propsAsIs: false
+});
+/** Trailing inset (the rung padding) and gap per rung. */
+var CRON_INPUT_SIZE_TO_TRAILING_CSS_MAP = {
+	["X_SMALL"]: "gx-CronInput-X_SMALL-x1f2acxv",
+	["SMALL"]: "gx-CronInput-SMALL-srskmwt",
+	["MEDIUM"]: "gx-CronInput-MEDIUM-m1p8cnb2",
+	["LARGE"]: "gx-CronInput-LARGE-lnz42gb",
+	["X_LARGE"]: "gx-CronInput-X_LARGE-x14lh8y9"
+};
+/** Wraps the clear button: the only part of `Trailing` that takes the pointer. */
+var ClearSlot = /*#__PURE__*/ styled("span")({
+	name: "ClearSlot",
+	class: "gx-CronInput-ClearSlot-cnjxgnh",
+	propsAsIs: false
+});
+/** Hidden clear button: keeps its width, leaves the tab order and the accessibility tree. */
+var CLEAR_HIDDEN_CSS = "gx-CronInput-CLEAR_HIDDEN_CSS-c1d4mcpq";
+/** The panel content: the main row, then the summary footer. */
+var PanelBody = /*#__PURE__*/ styled("div")({
+	name: "PanelBody",
+	class: "gx-CronInput-PanelBody-p11btr9k",
+	propsAsIs: false
+});
+/** The main row: presets, then the builder, 12px in and 12px apart. */
+var PanelMain = /*#__PURE__*/ styled("div")({
+	name: "PanelMain",
+	class: "gx-CronInput-PanelMain-p1az6570",
+	propsAsIs: false
+});
+/**
+* The summary footer: the schedule read back, set apart from the controls that make it. A hairline
+* above and a faint foreground tint, so it reads as the panel's output on every panel fill. It
+* wraps to the panel's width and never widens it.
+*/
+var Summary = /*#__PURE__*/ styled("div")({
+	name: "Summary",
+	class: "gx-CronInput-Summary-s1phzlk6",
+	propsAsIs: false
+});
+/** Centers the 12px icon on the summary's first 16px line. */
+var SummaryIcon = /*#__PURE__*/ styled("span")({
+	name: "SummaryIcon",
+	class: "gx-CronInput-SummaryIcon-su1hduy",
+	propsAsIs: false
+});
+/** The presets column. */
+var PresetList = /*#__PURE__*/ styled("div")({
+	name: "PresetList",
+	class: "gx-CronInput-PresetList-pryjels",
+	propsAsIs: false
+});
+/** One preset. Declared before its state classes. */
+var PresetButton = /*#__PURE__*/ styled("button")({
+	name: "PresetButton",
+	class: "gx-CronInput-PresetButton-pm47nq4",
+	propsAsIs: false
+});
+/** The preset whose value is the current expression. */
+var SELECTED_PRESET_CSS = "gx-CronInput-SELECTED_PRESET_CSS-safotm8";
 /**
 * Row labels in the first column, controls in the second. Controls keep their own width
-* (`justify-items: start`), so the wide weekday row never stretches the frequency toggle.
+* (`justify-items: start`), so the weekday row never stretches the frequency toggle.
 */
 var Rows = /*#__PURE__*/ styled("div")({
 	name: "Rows",
-	class: "gx-CronInput-Rows-rvetpyb",
+	class: "gx-CronInput-Rows-r1d29pk4",
 	propsAsIs: false
 });
 /**
@@ -352,50 +516,59 @@ var Rows = /*#__PURE__*/ styled("div")({
 */
 var LabelStack = /*#__PURE__*/ styled("span")({
 	name: "LabelStack",
-	class: "gx-CronInput-LabelStack-lwvebjn",
+	class: "gx-CronInput-LabelStack-l1tt5fyf",
 	propsAsIs: false
 });
 /** A row label that only sizes the label column: not painted, not announced. */
-var LABEL_SIZER_CSS = "gx-CronInput-LABEL_SIZER_CSS-lendsmc";
-/** Holds a two-digit select at its fixed width. */
-var SelectSlot = /*#__PURE__*/ styled("span")({
-	name: "SelectSlot",
-	class: "gx-CronInput-SelectSlot-s1iubrvv",
+var LABEL_SIZER_CSS = "gx-CronInput-LABEL_SIZER_CSS-l10uqwad";
+/** A full-width part of the rows grid (the divider above the expression). */
+var RowSpan = /*#__PURE__*/ styled("div")({
+	name: "RowSpan",
+	class: "gx-CronInput-RowSpan-r1231567",
 	propsAsIs: false
 });
-/** Holds the Custom expression field at its fixed width. */
-var ExpressionSlot = /*#__PURE__*/ styled("span")({
+/** Stretches the expression field across the control column. */
+var ExpressionSlot = /*#__PURE__*/ styled("div")({
 	name: "ExpressionSlot",
-	class: "gx-CronInput-ExpressionSlot-e1i5sgim",
+	class: "gx-CronInput-ExpressionSlot-e13n44nx",
 	propsAsIs: false
 });
-/** Stretch to the parent's width (group, and the `Field` wrapper when there is one). */
-var FILL_WIDTH_CSS = "gx-CronInput-FILL_WIDTH_CSS-f1xjp6qf";
-/** With `fillWidth`, the control column takes the rest of each row. */
-var ROWS_FILL_CSS = "gx-CronInput-ROWS_FILL_CSS-r73e2ix";
-/** With `fillWidth`, the Custom field fills its cell. */
-var EXPRESSION_FILL_CSS = "gx-CronInput-EXPRESSION_FILL_CSS-e1tyf0oc";
-/** The builder and its preview, wired to the nearest Field (the CronInput's own or the app's). */
-function CronGroup({ cronProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = CRON_INPUT_DEFAULT_VALUE, onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = cronProps;
+/** The field, the trailing parts and the schedule panel, wired to the nearest Field. */
+function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = CRON_INPUT_DEFAULT_VALUE, onChange, presets = CRON_INPUT_DEFAULT_PRESETS, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder = "Select schedule…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = cronProps;
+	const isBare = useIsBareField();
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
 		ariaLabelAttribute: rest["aria-label"],
 		ariaLabelledBy: rest["aria-labelledby"],
 		ariaDescribedBy,
-		describedByIds: (groupId) => [`${groupId}-preview`],
+		describedByIds: (fieldId) => [`${fieldId}-summary`],
 		error,
 		isError,
 		isRequired
 	});
-	const previewId = `${controlId}-preview`;
+	const panelId = `${controlId}-schedule`;
+	const summaryId = `${controlId}-summary`;
+	const expressionId = `${controlId}-expression-input`;
 	const rowLabelId = (row) => `${controlId}-${row}`;
+	const controlRef = useRef(null);
+	const mergedRef = useMergeRefs([controlRef, forwardedRef]);
+	const panelRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const isEditable = !isDisabled && !isReadOnly;
 	const [expression, setExpression] = useControlledState({
 		value,
 		defaultValue,
 		onChange
 	});
+	const { isOpen: isOpenState, setOpen: setOpenState } = useControlledOpenState({
+		isOpen,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const isShown = isOpenState && isEditable;
+	const { setOpen, isShownRef } = useDedupedOpen(isShown, setOpenState);
 	const lastEmittedRef = useRef(null);
 	const [builder, setBuilder] = useState(() => valueToBuilder(expression));
 	const [lastSeen, setLastSeen] = useState(expression);
@@ -403,12 +576,31 @@ function CronGroup({ cronProps, forwardedRef, isRoot }) {
 		setLastSeen(expression);
 		if (expression !== lastEmittedRef.current) setBuilder((previous) => valueToBuilder(expression, previous.parts));
 	}
+	/** Writes an expression the builder made. */
 	const emit = (next) => {
 		if (next === expression) return;
 		lastEmittedRef.current = next;
 		setExpression(next);
 	};
-	const isEditable = !isDisabled && !isReadOnly;
+	/** Writes an expression from outside the builder (typed, a preset, cleared). */
+	const commit = (next) => {
+		lastEmittedRef.current = null;
+		setExpression(next);
+	};
+	const shouldFocusExpressionRef = useRef(false);
+	const [lastShown, setLastShown] = useState(isShown);
+	if (lastShown !== isShown) {
+		setLastShown(isShown);
+		if (isShown) shouldFocusExpressionRef.current = true;
+	}
+	useRetriedFocus(shouldFocusExpressionRef, isShown, () => controlRef.current?.ownerDocument.getElementById(expressionId) ?? null, CRON_INPUT_FOCUS_RETRY_FRAMES);
+	const close = () => setOpen(false);
+	useRestoreFocusAfterOutsidePress({
+		isShown,
+		focusRef: controlRef,
+		insideRefs: [wrapperRef, panelRef],
+		focusScopeRefs: [panelRef]
+	});
 	const { frequency, parts } = builder;
 	/** Applies new parts in the current builder frequency and writes the expression. */
 	const updateParts = (next) => {
@@ -437,46 +629,65 @@ function CronGroup({ cronProps, forwardedRef, isRoot }) {
 		if (isOn && parts.weekdays.length === 1) return;
 		updateParts({ weekdays: isOn ? parts.weekdays.filter((selected) => selected !== day) : [...parts.weekdays, day].sort((a, b) => a - b) });
 	};
+	/** The field's keys: Enter, Space, ArrowDown and Alt+ArrowDown open the panel. */
+	const handleControlKeyDown = (event) => {
+		if (event.defaultPrevented || !isEditable || isShown) return;
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+			event.preventDefault();
+			setOpen(true);
+		}
+	};
+	const handleControlClick = () => {
+		if (!isEditable) return;
+		setOpen(!isShown);
+	};
+	/** Focus leaving both the field and the panel for another element closes the panel. */
+	const handleFocusOut = (event) => {
+		if (!isShownRef.current) return;
+		const next = event.relatedTarget;
+		if (next === null) return;
+		if (panelRef.current?.contains(next) || controlRef.current?.contains(next)) return;
+		close();
+	};
+	const clear = () => {
+		commit("");
+		if (isShown) close();
+		controlRef.current?.focus();
+	};
 	const trimmed = expression.trim();
 	const sentence = useMemo(() => describe(trimmed), [trimmed]);
-	useDevWarning(!hasName, "[@galaxy-io/dls] CronInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const hasValue = trimmed !== "";
+	useDevWarning(!hasName, "[@galaxy-io/dls] CronInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
 	const textSize = CRON_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
-	const helpSize = CRON_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP[size];
-	const selectSize = CRON_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP[size];
-	const selectVariant = CRON_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP[variant];
-	const controlState = {
-		isDisabled,
-		isReadOnly,
-		isError: isInvalid,
-		isRequired: isRequiredState
-	};
+	const isClearHidden = !hasValue || !isEditable;
 	const rowLabel = (row) => /* @__PURE__ */ jsx(Text, {
 		as: "span",
 		id: rowLabelId(row),
-		size: textSize,
-		variant: isDisabled ? TextVariant.DISABLED : TextVariant.SECONDARY,
+		size: TextSize.BODY_SM,
+		variant: TextVariant.SECONDARY,
 		children: ROW_LABELS[row]
 	});
 	/** A two-digit select named by its row label (plus its own name inside a time row). */
 	const numberSelect = (row, part, options, ownName) => {
 		const selectId = `${rowLabelId(row)}-${part}`;
-		return /* @__PURE__ */ jsx(SelectSlot, { children: /* @__PURE__ */ jsx(SelectInput, {
-			id: selectId,
-			...ownName === void 0 ? { "aria-labelledby": rowLabelId(row) } : {
-				ariaLabel: ownName,
-				"aria-labelledby": `${rowLabelId(row)} ${selectId}`
-			},
-			options,
-			value: String(parts[part]),
-			onChange: (next) => {
-				if (next !== null) updateParts({ [part]: Number(next) });
-			},
-			size: selectSize,
-			variant: selectVariant,
-			isGhost,
-			fillWidth: true,
-			...controlState
-		}) });
+		return /* @__PURE__ */ jsx(Box, {
+			width: CRON_INPUT_SELECT_WIDTH,
+			children: /* @__PURE__ */ jsx(SelectInput, {
+				id: selectId,
+				...ownName === void 0 ? { "aria-labelledby": rowLabelId(row) } : {
+					ariaLabel: ownName,
+					"aria-labelledby": `${rowLabelId(row)} ${selectId}`
+				},
+				options,
+				value: String(parts[part]),
+				onChange: (next) => {
+					if (next !== null) updateParts({ [part]: Number(next) });
+				},
+				size: SelectInputSize.SMALL,
+				variant: SelectInputVariant.SECONDARY,
+				fillWidth: true
+			})
+		});
 	};
 	const timeRow = /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("time"), /* @__PURE__ */ jsxs(Flex, {
 		alignItems: AlignItems.CENTER,
@@ -485,7 +696,7 @@ function CronGroup({ cronProps, forwardedRef, isRoot }) {
 			numberSelect("time", "hour", HOUR_OPTIONS, "Hour"),
 			/* @__PURE__ */ jsx(Text, {
 				as: "span",
-				size: textSize,
+				size: TextSize.BODY_SM,
 				variant: TextVariant.TERTIARY,
 				"aria-hidden": true,
 				children: ":"
@@ -493,98 +704,179 @@ function CronGroup({ cronProps, forwardedRef, isRoot }) {
 			numberSelect("time", "minute", MINUTE_OPTIONS, "Minute")
 		]
 	})] });
-	return /* @__PURE__ */ jsxs(Group, {
-		ref: forwardedRef,
-		role: "group",
-		id: controlId,
-		"aria-labelledby": field?.labelId,
-		"aria-label": ariaLabel,
-		"aria-describedby": describedBy,
-		...rest,
-		className: cx(fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+	const hasPresets = presets.length > 0;
+	const normalized = normalize(expression);
+	const body = /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsxs(PanelBody, {
+			onBlur: handleFocusOut,
+			children: [/* @__PURE__ */ jsxs(PanelMain, { children: [hasPresets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PresetList, {
+				role: "group",
+				"aria-label": "Presets",
+				children: presets.map((preset) => {
+					const isPresetSelected = normalize(preset.value) === normalized;
+					return /* @__PURE__ */ jsx(PresetButton, {
+						type: "button",
+						"aria-pressed": isPresetSelected,
+						onClick: () => {
+							commit(preset.value);
+							close();
+						},
+						className: cx(isPresetSelected && SELECTED_PRESET_CSS),
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							size: TextSize.BODY_SM,
+							variant: isPresetSelected ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+							children: preset.label
+						})
+					}, preset.label);
+				})
+			}), /* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL })] }), /* @__PURE__ */ jsxs(Rows, { children: [
+				/* @__PURE__ */ jsxs(LabelStack, { children: [rowLabel("frequency"), Object.entries(ROW_LABELS).map(([row, text]) => row === "frequency" ? null : /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_SM,
+					className: LABEL_SIZER_CSS,
+					"aria-hidden": true,
+					children: text
+				}, row))] }),
+				/* @__PURE__ */ jsx(ToggleInput, {
+					options: FREQUENCY_OPTIONS,
+					value: frequency,
+					onChange: changeFrequency,
+					size: ToggleInputSize.SMALL,
+					variant: ToggleInputVariant.SECONDARY,
+					"aria-labelledby": rowLabelId("frequency")
+				}),
+				frequency === "HOURLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("minute"), numberSelect("minute", "minute", MINUTE_OPTIONS)] }),
+				frequency === "DAILY" && timeRow,
+				frequency === "WEEKLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					rowLabel("weekdays"),
+					/* @__PURE__ */ jsx(ButtonGroup, {
+						isAttached: true,
+						"aria-labelledby": rowLabelId("weekdays"),
+						children: WEEKDAYS.map(({ day, label, name }) => /* @__PURE__ */ jsx(Button, {
+							variant: ButtonVariant.SECONDARY,
+							size: ButtonSize.SMALL,
+							label,
+							ariaLabel: name,
+							isActive: parts.weekdays.includes(day),
+							onClick: () => toggleWeekday(day)
+						}, day))
+					}),
+					timeRow
+				] }),
+				frequency === "MONTHLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					rowLabel("day"),
+					numberSelect("day", "dayOfMonth", DAY_OF_MONTH_OPTIONS),
+					timeRow
+				] }),
+				/* @__PURE__ */ jsx(RowSpan, { children: /* @__PURE__ */ jsx(Divider, {}) }),
+				rowLabel("expression"),
+				/* @__PURE__ */ jsx(ExpressionSlot, { children: /* @__PURE__ */ jsx(TextInput, {
+					id: expressionId,
+					"aria-labelledby": rowLabelId("expression"),
+					"aria-describedby": `${panelId}-sentence`,
+					family: FontFamily.MONO,
+					placeholder: "*/15 * * * *",
+					spellCheck: false,
+					value: expression,
+					onChange: (next) => {
+						if (isEditable) commit(next);
+					},
+					onEnter: close,
+					size: InputSize.SMALL,
+					variant: InputVariant.SECONDARY,
+					isError: isInvalid,
+					fillWidth: true
+				}) })
+			] })] }), /* @__PURE__ */ jsxs(Summary, { children: [/* @__PURE__ */ jsx(SummaryIcon, { children: /* @__PURE__ */ jsx(Icon, {
+				component: ClockIcon,
+				size: 12,
+				variant: sentence === null ? IconVariant.TERTIARY : IconVariant.SECONDARY,
+				"aria-hidden": true
+			}) }), /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				id: `${panelId}-sentence`,
+				size: TextSize.BODY_SM,
+				variant: sentence === null ? TextVariant.TERTIARY : TextVariant.PRIMARY,
+				children: sentence ?? CRON_INPUT_HINT
+			})] })]
+		})
+	});
+	const labelId = field?.labelId;
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		ref: wrapperRef,
+		className: cx(WIDTH_CSS, fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
 		...rootStyle(isRoot, style),
-		children: [/* @__PURE__ */ jsx(FieldContext.Provider, {
-			value: null,
-			children: /* @__PURE__ */ jsxs(Rows, {
-				className: cx(fillWidth && ROWS_FILL_CSS),
-				children: [
-					/* @__PURE__ */ jsxs(LabelStack, { children: [rowLabel("frequency"), Object.entries(ROW_LABELS).map(([row, text]) => row === "frequency" ? null : /* @__PURE__ */ jsx(Text, {
+		children: [
+			/* @__PURE__ */ jsx(Popover, {
+				ref: panelRef,
+				trigger: PopoverTrigger.MANUAL,
+				role: PopoverRole.DIALOG,
+				variant: isGhost ? PopoverVariant.BASE : CRON_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+				isOpen: isShown,
+				onOpenChange: setOpen,
+				isDisabled: !isEditable,
+				id: panelId,
+				ariaLabel: "Choose schedule",
+				body: /* @__PURE__ */ jsx(BareFieldContext.Provider, {
+					value: false,
+					children: body
+				}),
+				children: /* @__PURE__ */ jsx(Control, {
+					ref: mergedRef,
+					id: controlId,
+					role: "combobox",
+					tabIndex: isDisabled ? -1 : 0,
+					"aria-labelledby": labelId,
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					"aria-invalid": isInvalid ? true : void 0,
+					"aria-required": isRequiredState ? true : void 0,
+					"aria-readonly": isReadOnly ? true : void 0,
+					"aria-disabled": isDisabled ? true : void 0,
+					onKeyDown: handleControlKeyDown,
+					onClick: handleControlClick,
+					onBlur: handleFocusOut,
+					...rest,
+					className: cx(isGhost ? GHOST_CSS : CRON_INPUT_VARIANT_TO_CSS_MAP[variant], CRON_INPUT_SIZE_TO_CSS_MAP[size], isClearable && CRON_INPUT_SIZE_TO_CLEARABLE_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : CRON_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), !isDisabled && FOCUS_CSS, isShown && OPEN_CSS, isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, isReadOnly && READ_ONLY_CSS, isBare && "gx-bareField-BARE_FIELD_CSS-b1memido"),
+					children: /* @__PURE__ */ jsx(ValueDisplay, { children: /* @__PURE__ */ jsx(Text, {
 						as: "span",
 						size: textSize,
-						className: LABEL_SIZER_CSS,
-						"aria-hidden": true,
-						children: text
-					}, row))] }),
-					/* @__PURE__ */ jsx(ToggleInput, {
-						options: FREQUENCY_OPTIONS,
-						value: frequency,
-						onChange: changeFrequency,
-						size: CRON_INPUT_SIZE_TO_TOGGLE_INPUT_SIZE_MAP[size],
-						variant: CRON_INPUT_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP[variant],
-						isGhost,
-						"aria-labelledby": rowLabelId("frequency"),
-						fillWidth,
-						...controlState
-					}),
-					frequency === "HOURLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("minute"), numberSelect("minute", "minute", MINUTE_OPTIONS)] }),
-					frequency === "DAILY" && timeRow,
-					frequency === "WEEKLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						rowLabel("weekdays"),
-						/* @__PURE__ */ jsx(ButtonGroup, {
-							isAttached: true,
-							"aria-labelledby": rowLabelId("weekdays"),
-							fillWidth,
-							children: WEEKDAYS.map(({ day, label, name }) => /* @__PURE__ */ jsx(Button, {
-								variant: ButtonVariant.SECONDARY,
-								size: CRON_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
-								label,
-								ariaLabel: name,
-								isActive: parts.weekdays.includes(day),
-								isDisabled,
-								fillWidth,
-								...isReadOnly ? { "aria-disabled": true } : {},
-								onClick: () => toggleWeekday(day)
-							}, day))
-						}),
-						timeRow
-					] }),
-					frequency === "MONTHLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						rowLabel("day"),
-						numberSelect("day", "dayOfMonth", DAY_OF_MONTH_OPTIONS),
-						timeRow
-					] }),
-					frequency === "CUSTOM" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("expression"), /* @__PURE__ */ jsx(ExpressionSlot, {
-						className: cx(fillWidth && EXPRESSION_FILL_CSS),
-						children: /* @__PURE__ */ jsx(TextInput, {
-							"aria-labelledby": rowLabelId("expression"),
-							family: FontFamily.MONO,
-							placeholder: "*/15 * * * *",
-							spellCheck: false,
-							value: expression,
-							onChange: (next) => {
-								if (!isEditable) return;
-								lastEmittedRef.current = next;
-								setExpression(next);
-							},
-							size: CRON_INPUT_SIZE_TO_INPUT_SIZE_MAP[size],
-							variant: CRON_INPUT_VARIANT_TO_INPUT_VARIANT_MAP[variant],
-							isGhost,
-							fillWidth: true,
-							...controlState
-						})
-					})] })
-				]
+						...hasValue ? { family: FontFamily.MONO } : {},
+						variant: isDisabled ? TextVariant.DISABLED : hasValue ? TextVariant.PRIMARY : TextVariant.TERTIARY,
+						lineClamp: 1,
+						children: hasValue ? trimmed : placeholder
+					}) })
+				})
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				id: summaryId,
+				children: hasValue ? sentence ?? "" : ""
+			}),
+			/* @__PURE__ */ jsxs(Trailing, {
+				className: CRON_INPUT_SIZE_TO_TRAILING_CSS_MAP[size],
+				children: [isClearable && /* @__PURE__ */ jsx(ClearSlot, {
+					className: cx(isClearHidden && CLEAR_HIDDEN_CSS),
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: ButtonVariant.TERTIARY,
+						size: CRON_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+						icon: XIcon,
+						ariaLabel: "Clear",
+						onClick: clear,
+						className: cx(size === "X_SMALL" && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+					})
+				}), /* @__PURE__ */ jsx(Icon, {
+					component: ClockIcon,
+					size: CRON_INPUT_SIZE_TO_ICON_PX_MAP[size],
+					variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+					"aria-hidden": true
+				})]
 			})
-		}), /* @__PURE__ */ jsx(Text, {
-			as: "p",
-			id: previewId,
-			size: helpSize,
-			variant: isDisabled ? TextVariant.DISABLED : sentence === null ? TextVariant.TERTIARY : TextVariant.SECONDARY,
-			children: sentence ?? CRON_INPUT_HINT
-		})]
+		]
 	});
 }
-/** A five-field cron expression, edited through a frequency builder with a plain-English preview. */
+/** A five-field cron expression in a field that opens presets and a schedule builder. */
 var CronInput = forwardRef(function CronInput(props, ref) {
 	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
@@ -601,13 +893,13 @@ var CronInput = forwardRef(function CronInput(props, ref) {
 	});
 	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
 		...ownField,
-		children: /* @__PURE__ */ jsx(CronGroup, {
+		children: /* @__PURE__ */ jsx(CronInputFrame, {
 			cronProps: props,
 			forwardedRef: ref,
 			isRoot: false
 		})
 	});
-	return /* @__PURE__ */ jsx(CronGroup, {
+	return /* @__PURE__ */ jsx(CronInputFrame, {
 		cronProps: props,
 		forwardedRef: ref,
 		isRoot: true