@dynatrace/strato-components 3.5.0 → 3.6.0

package/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -74,10 +74,8 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
     },
     [onFocusInput]
   );
-  const lastClearedSnapshotRef = (0, import_react.useRef)([]);
-  const lastClearedExpressionsRef = (0, import_react.useRef)([]);
   const onKeyDown = (0, import_react.useCallback)(
-    async (event) => {
+    (event) => {
       const hasModifierKey = event.metaKey === true || event.ctrlKey === true;
       const pickerRoot = event.currentTarget;
       if (event.key === "Shift" || event.key === "Control" || event.key === "Meta" || event.key === "Alt" || event.key === "Command") {
@@ -85,14 +83,7 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
         return;
       }
       function applyBulkClear(plan, selection) {
-        const {
-          snapshot,
-          affectedExpressionRefs,
-          expressionFallbacks,
-          clearedExpressions
-        } = plan;
-        lastClearedSnapshotRef.current = snapshot;
-        lastClearedExpressionsRef.current = clearedExpressions;
+        const { snapshot, affectedExpressionRefs, expressionFallbacks } = plan;
         for (const { inputRef, key } of snapshot) {
           inputRef.current?.spinButtonHandlers.get(key)?.clearValue(true);
         }
@@ -131,8 +122,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
             inputRefs,
             (0, import_selection_helpers.consumePreRestoreEndpoints)(pickerRoot)
           );
-          lastClearedSnapshotRef.current = plan2.snapshot;
-          lastClearedExpressionsRef.current = plan2.clearedExpressions;
           const firstSpinButtonHandler = (0, import_selection_helpers.getFirstSnapshotHandler)(plan2.snapshot);
           const expressionFocusTarget2 = (0, import_selection_helpers.findFirstExpressionFocusTarget)(
             inputRefs,
@@ -172,7 +161,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
         );
       }
       function onBeforeExpressionDelete(expressionElements, inputRefs) {
-        lastClearedSnapshotRef.current = [];
         const expressionSnapshots = [];
         for (const exprEl of expressionElements) {
           let matchingRef;
@@ -189,7 +177,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
             });
           }
         }
-        lastClearedExpressionsRef.current = expressionSnapshots;
       }
       if (hasModifierKey && event.key === "a") {
         event.preventDefault();
@@ -205,29 +192,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
         }
         return;
       }
-      if (hasModifierKey && event.key === "z") {
-        const snapshot = lastClearedSnapshotRef.current;
-        const expressionEntries = lastClearedExpressionsRef.current;
-        if (snapshot.length === 0 && expressionEntries.length === 0) {
-          return;
-        }
-        event.preventDefault();
-        (0, import_selection_helpers.restoreSpinButtonSnapshot)(snapshot);
-        lastClearedSnapshotRef.current = [];
-        for (const { inputRef, previousText } of expressionEntries) {
-          inputRef.current?.setExpressionValue(previousText);
-          inputRef.current?.validate();
-        }
-        lastClearedExpressionsRef.current = [];
-        if (snapshot.length > 0) {
-          (0, import_selection_helpers.getFirstSnapshotHandler)(snapshot)?.element.current?.focus();
-        } else {
-          requestAnimationFrame(() => {
-            expressionEntries[0]?.inputRef.current?.expressionInputRef?.focus();
-          });
-        }
-        return;
-      }
       const isCut = hasModifierKey && event.key === "x";
       const isDelete = event.key === "Backspace" || event.key === "Delete";
       const direction = isCut || event.key === "Backspace" ? "backward" : "forward";
@@ -239,10 +203,8 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
           bulkClear(selection, direction);
           if (isCut) {
             if (clipboardText !== null) {
-              try {
-                await navigator.clipboard.writeText(clipboardText);
-              } catch {
-              }
+              navigator.clipboard.writeText(clipboardText).catch(() => {
+              });
             }
           }
           return;
@@ -280,8 +242,6 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
             );
             return;
           }
-          lastClearedSnapshotRef.current = plan.snapshot;
-          lastClearedExpressionsRef.current = plan.clearedExpressions;
           for (const { inputRef, key } of plan.snapshot) {
             inputRef.current?.spinButtonHandlers.get(key)?.clearValue(true);
           }

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-5-0 {
+._1dphm0f0-3-6-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-5-0 {
+._1dphm0f1-3-6-0 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-5-0";
-var legend = "_1dphm0f1-3-5-0";
+var fieldset = "_1dphm0f0-3-6-0";
+var legend = "_1dphm0f1-3-6-0";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-5-0";
+var formField = "_mvcxum0-3-6-0";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-5-0 {
+._16z6rg10-3-6-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-5-0 {
+._16z6rg11-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-5-0 {
+._16z6rg12-3-6-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-5-0 {
+._16z6rg13-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-5-0 {
+._16z6rg14-3-6-0 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-5-0", variantClassNames: { variant: { hint: "_16z6rg11-3-5-0", error: "_16z6rg12-3-5-0" }, disabled: { true: "_16z6rg13-3-5-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-5-0";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-6-0", variantClassNames: { variant: { hint: "_16z6rg11-3-6-0", error: "_16z6rg12-3-6-0" }, disabled: { true: "_16z6rg13-3-6-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-6-0";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-5-0";
+var formFieldMessages = "_1l9bja60-3-6-0";

package/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-5-0 {
+._1gxatyo0-3-6-0 {
   display: inline-block;
 }
-._1gxatyo1-3-5-0 {
+._1gxatyo1-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-5-0:after {
+._1gxatyo2-3-6-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-5-0 {
+._1gxatyo3-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-5-0 {
+._1gxatyo4-3-6-0 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-5-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-5-0" }, required: { true: "_1gxatyo2-3-5-0" }, readOnly: { true: "_1gxatyo3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-5-0";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-6-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-6-0" }, required: { true: "_1gxatyo2-3-6-0" }, readOnly: { true: "_1gxatyo3-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-6-0";

package/forms/forms-core/time/helpers.js

@@ -118,7 +118,7 @@ function getSafeRegionalFormat() {
   } catch (error) {
     const logger = (0, import_sdk_logger.getStratoLogger)("Date-Component");
     if (!hasLoggedSafeRegionalFormatError) {
-      logger.error(`Invalid regional format "${region}" encountered.`, error, {
+      logger.warn(`Invalid regional format "${region}" encountered.`, error, {
         region,
         modifiedRegion
       });

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-5-0 {
+@keyframes _yfwka31-3-6-0 {
 
 }
-@keyframes _yfwka32-3-5-0 {
+@keyframes _yfwka32-3-6-0 {
 
 }
-._yfwka33-3-5-0:-webkit-autofill:is(._yfwka33-3-5-0,:hover,:focus) {
+._yfwka33-3-6-0:-webkit-autofill:is(._yfwka33-3-6-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-5-0) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-6-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-5-0:-webkit-autofill {
-  animation-name: _yfwka31-3-5-0;
+._yfwka33-3-6-0:-webkit-autofill {
+  animation-name: _yfwka31-3-6-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-5-0:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-5-0;
+._yfwka33-3-6-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-6-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -24,7 +24,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-5-0)";
-var autofillCSS = "_yfwka33-3-5-0";
-var end = "_yfwka32-3-5-0";
-var start = "_yfwka31-3-5-0";
+var autofillBackground = "var(--_yfwka30-3-6-0)";
+var autofillCSS = "_yfwka33-3-6-0";
+var end = "_yfwka32-3-6-0";
+var start = "_yfwka31-3-6-0";

package/forms/index.d.ts

@@ -42,6 +42,7 @@ export { RadioGroup } from './radio/RadioGroup.js';
 export type { RadioGroupProps } from './radio/RadioGroup.js';
 export { SearchInput } from './search-input/SearchInput.js';
 export type { SearchInputProps } from './search-input/SearchInput.js';
+export type { SearchInputStepperProps } from './search-input/Stepper.js';
 export { Select } from './select/Select.js';
 export type { SelectOnChangeValue, SelectFormsProps, SelectBaseProps, } from './select/Select.js';
 export { SelectContent } from './select/SelectContent.js';

package/forms/number-input/NumberInputBase.js

@@ -36,7 +36,6 @@ var import_numberfield2 = require("@react-stately/numberfield");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
-var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
@@ -48,6 +47,7 @@ var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js
 var styles = __toESM(require("../_base-input/BaseInput.sty.js"));
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
+var import_helpers = require("../forms-core/time/helpers.js");
 var import_useAutofillEvent_css = require("../hooks/useAutofillEvent.sty.js");
 var import_useAutofillEvent = require("../hooks/useAutofillEvent.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
@@ -88,7 +88,7 @@ const NumberInputBase = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const componentName = restProps["data-dt-component"];
   const { "aria-labelledby": ariaLabelledBy, ...remainingAriaProps } = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
-  const locale = (0, import_react.useMemo)(() => (0, import_user_preferences.getRegionalFormat)(), []);
+  const locale = (0, import_react.useMemo)(() => (0, import_helpers.getSafeRegionalFormat)(), []);
   const minValue = !isNaN(Number(minValueNumberLike)) ? Number(minValueNumberLike) : void 0;
   const maxValue = !isNaN(Number(maxValueNumberLike)) ? Number(maxValueNumberLike) : void 0;
   const numberInputValue = value === null || value === void 0 ? NaN : value;

package/forms/number-input-v2/NumberInput.js

@@ -23,7 +23,6 @@ module.exports = __toCommonJS(NumberInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
-var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_calculations = require("./utils/calculations.js");
 var import_format = require("./utils/format.js");
 var import_validation = require("./utils/validation.js");
@@ -36,6 +35,7 @@ var import_BaseInputButton = require("../_base-input/BaseInputButton.js");
 var import_BaseInputContent = require("../_base-input/BaseInputContent.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_helpers = require("../forms-core/time/helpers.js");
 const COMPONENT_NAME = "NumberInput";
 const VALID_PATTERN = "^[+\\-]?\\d+(?:[\\.,]\\d+)?(?:[eE][+\\-]?\\d+)?$";
 const VALID_REGEXP = new RegExp(VALID_PATTERN);
@@ -84,7 +84,7 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
         if (newValue === null) {
           stringValue = "";
         } else if (typeof newValue === "number") {
-          stringValue = new Intl.NumberFormat((0, import_user_preferences.getRegionalFormat)(), {
+          stringValue = new Intl.NumberFormat((0, import_helpers.getSafeRegionalFormat)(), {
             useGrouping: false,
             maximumFractionDigits: 17
           }).format(newValue);
@@ -120,7 +120,7 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     if (!propValue && propValue !== 0) {
       return "";
     }
-    const formattedPropValue = new Intl.NumberFormat((0, import_user_preferences.getRegionalFormat)(), {
+    const formattedPropValue = new Intl.NumberFormat((0, import_helpers.getSafeRegionalFormat)(), {
       useGrouping: false,
       maximumFractionDigits: 17
       // Max precision for a JS number

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-5-0 {
+._h96idu0-3-6-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-5-0 {
+._h96idu1-3-6-0 {
   cursor: default;
 }
-._h96idu5-3-5-0 {
+._h96idu5-3-6-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-5-0._h96idu3-3-5-0 {
+._h96idu5-3-6-0._h96idu3-3-6-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-5-0 ._h96idu5-3-5-0 {
+._h96idu1-3-6-0 ._h96idu5-3-6-0 {
   cursor: default;
 }
-._h96idu6-3-5-0 {
+._h96idu6-3-6-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-5-0);
+  background-color: var(--_bx32h3-3-6-0);
 }
-._h96idu7-3-5-0 {
+._h96idu7-3-6-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-5-0 {
+._h96idue-3-6-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-5-0 {
+._h96idug-3-6-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-5-0 {
+._h96iduh-3-6-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-5-0 {
+._h96idui-3-6-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-5-0 {
+._h96iduj-3-6-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-5-0 {
+._h96iduk-3-6-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-5-0);
+  fill: var(--_bx32h1-3-6-0);
 }
-._h96idu5-3-5-0:not(._h96idu4-3-5-0) ._h96iduk-3-5-0 {
+._h96idu5-3-6-0:not(._h96idu4-3-6-0) ._h96iduk-3-6-0 {
   display: none;
 }
-._h96idu1-3-5-0 ._h96iduk-3-5-0 {
+._h96idu1-3-6-0 ._h96iduk-3-6-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-5-0._h96idu1-3-5-0 ._h96iduk-3-5-0 {
+._h96idu2-3-6-0._h96idu1-3-6-0 ._h96iduk-3-6-0 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/radio/styles.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu4-3-5-0";
-var disabled = "_h96idu3-3-5-0";
-var group = "_h96idu0-3-5-0";
-var hasError = "_h96idu2-3-5-0";
-var innerKnob = "_h96iduk-3-5-0";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-5-0", variantClassNames: { disabled: { true: "_h96idu7-3-5-0" }, checked: { true: "_h96idu8-3-5-0", false: "_h96idu9-3-5-0" }, hasError: { true: "_h96idua-3-5-0", false: "_h96idub-3-5-0" }, isFocusVisible: { true: "_h96iduc-3-5-0", false: "_h96idud-3-5-0" }, readOnly: { true: "_h96idue-3-5-0", false: "_h96iduf-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-5-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-5-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-5-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-5-0"]] });
-var label = "_h96idu5-3-5-0";
-var readOnly = "_h96idu1-3-5-0";
+var checked = "_h96idu4-3-6-0";
+var disabled = "_h96idu3-3-6-0";
+var group = "_h96idu0-3-6-0";
+var hasError = "_h96idu2-3-6-0";
+var innerKnob = "_h96iduk-3-6-0";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-6-0", variantClassNames: { disabled: { true: "_h96idu7-3-6-0" }, checked: { true: "_h96idu8-3-6-0", false: "_h96idu9-3-6-0" }, hasError: { true: "_h96idua-3-6-0", false: "_h96idub-3-6-0" }, isFocusVisible: { true: "_h96iduc-3-6-0", false: "_h96idud-3-6-0" }, readOnly: { true: "_h96idue-3-6-0", false: "_h96iduf-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-6-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-6-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-6-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-6-0"]] });
+var label = "_h96idu5-3-6-0";
+var readOnly = "_h96idu1-3-6-0";

package/forms/search-input/SearchInput.css

@@ -1,3 +1,6 @@
-._1mumub80-3-5-0 {
+._1mumub80-3-6-0 {
   min-width: 192px;
+}
+._1mumub81-3-6-0 {
+  min-width: 272px;
 }

package/forms/search-input/SearchInput.d.ts

@@ -20,4 +20,5 @@ export type SearchInputProps = Pick<BaseInputProps, 'variant' | 'onBlur' | 'auto
 export declare const SearchInput: ((props: SearchInputProps & import("react").RefAttributes<FormControlRef<HTMLDivElement>>) => import("react").ReactElement | null) & {
     Suffix: (props: import("../index.js").BaseInputContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     Button: (props: import("../index.js").BaseInputButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
+    Stepper: ({ current, onCurrentChange, total, }: import("./Stepper.js").SearchInputStepperProps) => import("react/jsx-runtime").JSX.Element;
 };

package/forms/search-input/SearchInput.js

@@ -35,12 +35,15 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var styles = __toESM(require("./SearchInput.sty.js"));
+var import_Stepper = require("./Stepper.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
+var import_useSlots = require("../../core/hooks/useSlots.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_BaseInput = require("../_base-input/BaseInput.js");
 var import_BaseInputButton = require("../_base-input/BaseInputButton.js");
 var import_BaseInputContent = require("../_base-input/BaseInputContent.js");
+var import_ClearButton = require("../_base-input/ClearButton.js");
 const COMPONENT_NAME = "SearchInput";
 const SearchInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -66,16 +69,41 @@ const SearchInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   });
   const handleOnChange = (e) => {
     setInternalValue(e.target.value);
+    if (slots.stepper && e.target.value === "") {
+      const { onCurrentChange } = slots.stepper.props;
+      onCurrentChange(0);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!slots.stepper) {
+      return;
+    }
+    if (e.key !== "Enter") {
+      return;
+    }
+    e.preventDefault();
+    const { current, total, onCurrentChange } = slots.stepper.props;
+    if (e.shiftKey) {
+      onCurrentChange(current > 0 ? current - 1 : total - 1);
+    } else {
+      onCurrentChange(current < total - 1 ? current + 1 : 0);
+    }
   };
   function onClear() {
     setInternalValue("");
   }
+  const [slots] = (0, import_useSlots.useSlots)(children, {
+    stepper: import_Stepper.Stepper
+  });
+  const isEmpty = internalValue === "" || internalValue === void 0;
+  const hasStepper = !!slots.stepper;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_BaseInput.BaseInput,
     {
       ref: forwardedRef,
       ...(0, import_merge_props.mergeProps)(restProps, behavioralTrackingProps),
-      className: (0, import_clsx.default)(styles.searchInput, consumerClassName),
+      ...hasStepper ? { onKeyDown: handleKeyDown } : {},
+      className: (0, import_clsx.default)(styles.searchInput({ hasStepper }), consumerClassName),
       type: "search",
       value: internalValue,
       required,
@@ -85,12 +113,15 @@ const SearchInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       "aria-disabled": ariaDisabledProp,
-      onClear,
       placeholder,
       "data-dt-component": COMPONENT_NAME,
       size: 1,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseInput.BaseInput.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.MagnifyingGlassIcon, {}) }),
+        !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_BaseInput.BaseInput.ReservedSuffix, { children: [
+          slots.stepper,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClearButton.ClearButton, { onClear })
+        ] }),
         children
       ]
     }
@@ -98,6 +129,7 @@ const SearchInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
 });
 const SearchInput = Object.assign(SearchInputRoot, {
   Suffix: import_BaseInputContent.BaseInputSuffix,
-  Button: import_BaseInputButton.BaseInputButton
+  Button: import_BaseInputButton.BaseInputButton,
+  Stepper: import_Stepper.Stepper
 });
 SearchInput.displayName = COMPONENT_NAME;

package/forms/search-input/SearchInput.sty.d.ts

@@ -1 +1,7 @@
-export declare const searchInput: string;
+export declare const searchInput: import("@vanilla-extract/recipes").RuntimeFn<{
+    hasStepper: {
+        true: {
+            minWidth: "272px";
+        };
+    };
+}>;

package/forms/search-input/SearchInput.sty.js

@@ -21,4 +21,5 @@ __export(SearchInput_css_exports, {
 });
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
-var searchInput = "_1mumub80-3-5-0";
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-6-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

@@ -0,0 +1,21 @@
+._s3yy5s0-3-6-0 {
+  display: flex;
+  gap: var(--dt-spacings-size-4, 4px);
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  align-items: center;
+}
+._s3yy5s1-3-6-0 {
+  display: flex;
+  gap: var(--dt-spacings-size-0, 0);
+}
+._s3yy5s2-3-6-0 {
+  margin: 0;
+}
+._s3yy5s1-3-6-0 > ._s3yy5s2-3-6-0:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+._s3yy5s1-3-6-0 > ._s3yy5s2-3-6-0:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/forms/search-input/Stepper.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The properties of the SearchInput Stepper.
+ * @public
+ */
+export type SearchInputStepperProps = {
+    /** The zero-based index of the current match. */
+    current: number;
+    /** Called when the current match index should change. */
+    onCurrentChange: (value: number) => void;
+    /** The total number of matches. */
+    total: number;
+};
+export declare const Stepper: ({ current, onCurrentChange, total, }: SearchInputStepperProps) => import("react/jsx-runtime").JSX.Element;