@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-es/formatted-input/internal/InputWithMask.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+const baseName = "saltFormattedInput";
+function getClippedMask(mask, value, textAlign) {
+  if (mask) {
+    if (textAlign === "right") {
+      return mask.substring(
+        0,
+        value ? mask.length - value.length : mask.length
+      );
+    }
+    return mask.substring(value ? value.length : 0);
+  }
+  return "";
+}
+const InputWithMask = forwardRef(
+  function InputWithMask2({
+    "aria-labelledby": ariaLabelledBy,
+    className,
+    mask = "",
+    value,
+    id: idProp,
+    style,
+    textAlign,
+    ...other
+  }, ref) {
+    const id = useId(idProp);
+    const spacerAndMask = [
+      /* @__PURE__ */ jsx("i", { children: value }, value),
+      getClippedMask(mask, value, textAlign)
+    ];
+    return /* @__PURE__ */ jsxs("div", { className: `${baseName}-inputWrapper`, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className,
+          ...other,
+          "aria-label": mask,
+          "aria-labelledby": [ariaLabelledBy, id].filter((label) => label != null).join(" "),
+          id,
+          ref,
+          style,
+          value
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: clsx(`${baseName}-mask`, className),
+          style,
+          children: textAlign !== "right" ? spacerAndMask : spacerAndMask.reverse()
+        }
+      )
+    ] });
+  }
+);
+
+export { InputWithMask, baseName };
+//# sourceMappingURL=InputWithMask.js.map

package/dist-es/formatted-input/internal/InputWithMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type InputHTMLAttributes, forwardRef } from \"react\";\nimport type { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n  mask: FormattedInputProps[\"mask\"],\n  value: FormattedInputProps[\"value\"],\n  textAlign: FormattedInputProps[\"textAlign\"],\n) {\n  if (mask) {\n    if (textAlign === \"right\") {\n      return mask.substring(\n        0,\n        value ? mask.length - value.length : mask.length,\n      );\n    }\n\n    return mask.substring(value ? value.length : 0);\n  }\n  return \"\";\n}\n\nexport interface InputWithMaskProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  mask?: FormattedInputProps[\"mask\"];\n  textAlign?: FormattedInputProps[\"textAlign\"];\n  value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n  function InputWithMask(\n    {\n      \"aria-labelledby\": ariaLabelledBy,\n      className,\n      mask = \"\",\n      value,\n      id: idProp,\n      style,\n      textAlign,\n      ...other\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n\n    const spacerAndMask = [\n      <i key={value}>{value}</i>,\n      getClippedMask(mask, value, textAlign),\n    ];\n\n    return (\n      <div className={`${baseName}-inputWrapper`}>\n        <input\n          className={className}\n          {...other}\n          aria-label={mask}\n          aria-labelledby={[ariaLabelledBy, id]\n            .filter((label) => label != null)\n            .join(\" \")}\n          id={id}\n          ref={ref}\n          style={style}\n          value={value}\n        />\n        <span\n          aria-hidden=\"true\"\n          className={clsx(`${baseName}-mask`, className)}\n          style={style}\n        >\n          {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n        </span>\n      </div>\n    );\n  },\n);\n"],"names":["InputWithMask"],"mappings":";;;;;AAKO,MAAM,QAAW,GAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA;AAAA,OAC5C;AAAA;AAGF,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA;AAEhD,EAAO,OAAA,EAAA;AACT;AASO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACpB,GAAA,CAAC,GAAe,EAAA,EAAA,QAAA,EAAA,KAAA,EAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS;AAAA,KACvC;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,QAAQ,CACzB,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,sBACA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAA,IAAA,CAAK,CAAG,EAAA,QAAQ,SAAS,SAAS,CAAA;AAAA,UAC7C,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ;AAAA;AAAA;AACjE,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/index.js

@@ -0,0 +1,153 @@
+import './list-deprecated/List.js';
+import './list-deprecated/ListBase.js';
+export { ListItemBase as ListItemBaseDeprecated } from './list-deprecated/ListItemBase.js';
+import './list-deprecated/ListItem.js';
+import './list-deprecated/ListItemContext.js';
+import './list-deprecated/ListStateContext.js';
+import '@salt-ds/core';
+import 'react';
+export { useListItem as useListItemDeprecated } from './list-deprecated/useListItem.js';
+export { escapeRegExp } from './utils/escapeRegExp.js';
+export { isEmail } from './utils/isEmail.js';
+export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
+export { isPlainObject } from './utils/isPlainObject.js';
+export { partition } from './utils/partition.js';
+export { useClickOutside } from './utils/useClickOutside.js';
+export { useEventCallback } from './utils/useEventCallback.js';
+export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
+export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
+export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
+export { useOverflowDetection } from './utils/useOverflowDetection.js';
+export { useSlideSelection } from './utils/useSlideSelection.js';
+export { AppHeader } from './app-header/AppHeader.js';
+export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
+export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
+export { ButtonBar, DefaultButtonsOrderByVariant } from './button-bar/ButtonBar.js';
+export { OrderedButton } from './button-bar/OrderedButton.js';
+export { Calendar } from './calendar/Calendar.js';
+export { CalendarNavigation } from './calendar/CalendarNavigation.js';
+export { CalendarWeekHeader } from './calendar/CalendarWeekHeader.js';
+export { CalendarGrid } from './calendar/CalendarGrid.js';
+export { useCalendarDay } from './calendar/useCalendarDay.js';
+export { useCalendar } from './calendar/useCalendar.js';
+export { isDateRangeSelection, isMultipleDateSelection, isSingleSelectionValueType, useCalendarSelection, useCalendarSelectionDay } from './calendar/useCalendarSelection.js';
+export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
+export { ColorChooser } from './color-chooser/ColorChooser.js';
+export { Color } from './color-chooser/Color.js';
+export { ColorPicker } from './color-chooser/ColorPicker.js';
+export { getColorPalettes, makePalette } from './color-chooser/GetColorPalettes.js';
+export { convertColorMapValueToHex, getColorNameByHexValue, getHexValue, hexValueWithoutAlpha, isValidHex } from './color-chooser/ColorHelpers.js';
+export { SwatchesPicker } from './color-chooser/SwatchesPicker.js';
+export { Swatch } from './color-chooser/Swatch.js';
+export { saltColorMap, saltlight } from './color-chooser/colorMap.js';
+export { ComboBox } from './combo-box/ComboBox.js';
+export { ComboBoxDeprecated } from './combo-box-deprecated/ComboBoxDeprecated.js';
+export { getDefaultFilter, getDefaultFilterRegex } from './combo-box-deprecated/filterHelpers.js';
+export { ContactAction } from './contact-details/ContactAction.js';
+export { ContactActions } from './contact-details/ContactActions.js';
+export { ContactAvatar } from './contact-details/ContactAvatar.js';
+export { ContactDetails } from './contact-details/ContactDetails.js';
+export { ContactMetadata } from './contact-details/ContactMetadata.js';
+export { ContactMetadataItem } from './contact-details/ContactMetadataItem.js';
+export { ContactPrimaryInfo } from './contact-details/ContactPrimaryInfo.js';
+export { ContactSecondaryInfo } from './contact-details/ContactSecondaryInfo.js';
+export { ContactTertiaryInfo } from './contact-details/ContactTertiaryInfo.js';
+export { ContactFavoriteToggle } from './contact-details/ContactFavoriteToggle.js';
+export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
+export { ContentStatus } from './content-status/ContentStatus.js';
+export { DateInputSingle } from './date-input/DateInputSingle.js';
+export { DateInputRange, DateParserField } from './date-input/DateInputRange.js';
+export { DatePicker, DatePickerMain } from './date-picker/DatePicker.js';
+export { DatePickerActions } from './date-picker/DatePickerActions.js';
+export { DateRangeSelectionContext, SingleDateSelectionContext, useDatePickerContext } from './date-picker/DatePickerContext.js';
+export { DatePickerHelperText } from './date-picker/DatePickerHelperText.js';
+export { DatePickerOverlay } from './date-picker/DatePickerOverlay.js';
+export { DatePickerOverlayProvider, useDatePickerOverlay } from './date-picker/DatePickerOverlayProvider.js';
+export { DatePickerRangeInput, defaultRangeValidator } from './date-picker/DatePickerRangeInput.js';
+export { DatePickerRangeGridPanel } from './date-picker/DatePickerRangeGridPanel.js';
+export { DatePickerRangePanel } from './date-picker/DatePickerRangePanel.js';
+export { DatePickerSingleInput } from './date-picker/DatePickerSingleInput.js';
+export { DatePickerSingleGridPanel } from './date-picker/DatePickerSingleGridPanel.js';
+export { DatePickerTrigger } from './date-picker/DatePickerTrigger.js';
+export { DatePickerSinglePanel } from './date-picker/DatePickerSinglePanel.js';
+export { DeckItem } from './deck-item/DeckItem.js';
+export { DeckLayout } from './deck-layout/DeckLayout.js';
+export { DropdownBase } from './dropdown/DropdownBase.js';
+export { DropdownButton } from './dropdown/DropdownButton.js';
+export { Dropdown } from './dropdown/Dropdown.js';
+export { useDropdownBase } from './dropdown/useDropdownBase.js';
+export { EditableLabel } from './editable-label/EditableLabel.js';
+export { FormFieldLegacyContext } from './form-field-context-legacy/FormFieldLegacyContext.js';
+export { useFormFieldLegacyProps } from './form-field-context-legacy/useFormFieldLegacyProps.js';
+export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
+export { FormLabel } from './form-field-legacy/FormLabel.js';
+export { FormGroup } from './form-group/FormGroup.js';
+export { FormattedInput } from './formatted-input/FormattedInput.js';
+export { InputLegacy as Input } from './input-legacy/InputLegacy.js';
+export { StaticInputAdornment } from './input-legacy/StaticInputAdornment.js';
+export { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
+export { Highlighter } from './list/Highlighter.js';
+export { ListItem, ListItemProxy } from './list/ListItem.js';
+export { List } from './list/List.js';
+export { ListItemHeader } from './list/ListItemHeader.js';
+export { ListItemGroup } from './list/ListItemGroup.js';
+export { useList } from './list/useList.js';
+export { VirtualizedList } from './list/VirtualizedList.js';
+export { ListNext } from './list-next/ListNext.js';
+export { ListItemNext } from './list-next/ListItemNext.js';
+export { LocalizationProvider, LocalizationProviderContext, useLocalization } from './localization-provider/LocalizationProvider.js';
+export { Logo } from './logo/Logo.js';
+export { LogoImage } from './logo/LogoImage.js';
+export { LogoSeparator } from './logo/LogoSeparator.js';
+export { MenuButton } from './menu-button/MenuButton.js';
+export { Metric } from './metric/Metric.js';
+export { MetricHeader } from './metric/MetricHeader.js';
+export { MetricContent } from './metric/MetricContent.js';
+export { useNumberInput } from './number-input/useNumberInput.js';
+export { NumberInput } from './number-input/NumberInput.js';
+export { Portal } from './portal/Portal.js';
+export { QueryInput } from './query-input/QueryInput.js';
+export { useQueryInput } from './query-input/useQueryInput.js';
+export { useInstantCollapse } from './responsive/useInstantCollapse.js';
+export { useDynamicCollapse } from './responsive/useDynamicCollapse.js';
+export { addAllVisible, useReclaimSpace } from './responsive/useReclaimSpace.js';
+export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver } from './responsive/useResizeObserver.js';
+export { useOverflow } from './responsive/useOverflow.js';
+export { useOverflowCollectionItems } from './responsive/useOverflowCollectionItems.js';
+export { useOverflowLayout } from './responsive/useOverflowLayout.js';
+export { useWidth } from './responsive/useWidth.js';
+export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority } from './responsive/overflowUtils.js';
+export { isResponsiveAttribute, liftResponsivePropsToFormField } from './responsive/utils.js';
+export { SearchInput } from './search-input/SearchInput.js';
+export { StaticList } from './static-list/StaticList.js';
+export { StaticListItem } from './static-list/StaticListItem.js';
+export { StaticListItemContent } from './static-list/StaticListItemContent.js';
+export { SystemStatus } from './system-status/SystemStatus.js';
+export { SystemStatusContent } from './system-status/SystemStatusContent.js';
+export { SystemStatusActions } from './system-status/SystemStatusActions.js';
+export { TabActivationIndicator } from './tabs/TabActivationIndicator.js';
+export { Tabstrip } from './tabs/Tabstrip.js';
+export { Tab } from './tabs/Tab.js';
+export { TabPanel } from './tabs/TabPanel.js';
+export { Tabs } from './tabs/Tabs.js';
+export { TabNext } from './tabs-next/TabNext.js';
+export { TabListNext } from './tabs-next/TabListNext.js';
+export { TabsNext } from './tabs-next/TabsNext.js';
+export { TabNextPanel } from './tabs-next/TabNextPanel.js';
+export { TabBar } from './tabs-next/TabBar.js';
+export { TabNextTrigger } from './tabs-next/TabNextTrigger.js';
+export { TabNextAction } from './tabs-next/TabNextAction.js';
+export { ToastGroup } from './toast-group/ToastGroup.js';
+export { TokenizedInput } from './tokenized-input/TokenizedInput.js';
+export { TokenizedInputBase } from './tokenized-input/TokenizedInputBase.js';
+export { useTokenizedInput } from './tokenized-input/useTokenizedInput.js';
+export { TokenizedInputNext } from './tokenized-input-next/TokenizedInputNext.js';
+export { useTokenizedInputNext } from './tokenized-input-next/useTokenizedInputNext.js';
+export { Toolbar } from './toolbar/Toolbar.js';
+export { Tooltray } from './toolbar/Tooltray.js';
+export { ToolbarButton } from './toolbar/ToolbarButton.js';
+export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
+export { Tree } from './tree/Tree.js';
+export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
+export { ElectronWindow } from './window/ElectronWindow.js';
+//# sourceMappingURL=index.js.map

package/dist-es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/input-legacy/InputLegacy.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n  --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n  align-items: center;\n  background: var(--saltInputLegacy-background, none);\n  border: var(--saltInputLegacy-border, none);\n  border-radius: var(--saltInputLegacy-borderRadius, 0);\n  color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n  cursor: var(--saltInputLegacy-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputLegacy-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputLegacy-minWidth, 8em);\n  padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputLegacy-position, relative);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n  outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInputLegacy-input::selection {\n  background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n  background: var(--saltInputLegacy-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n  padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n  padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n  margin: var(--inputLegacy-button-inset);\n  padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n  min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n  width: 100%;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=InputLegacy.css.js.map

package/dist-es/input-legacy/InputLegacy.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLegacy.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/input-legacy/InputLegacy.js

@@ -0,0 +1,180 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useState, useRef } from 'react';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
+import { useCursorOnFocus } from './useCursorOnFocus.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './InputLegacy.css.js';
+
+const withBaseName = makePrefixer("saltInputLegacy");
+function mergeA11yProps(a11yProps, inputProps, misplacedAriaProps) {
+  const ariaLabelledBy = clsx(
+    a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
+    inputProps == null ? void 0 : inputProps["aria-labelledby"]
+  );
+  return {
+    ...misplacedAriaProps,
+    ...a11yProps,
+    ...inputProps,
+    // The weird filtering is due to TokenizedInputBase
+    "aria-labelledby": ariaLabelledBy ? Array.from(new Set(ariaLabelledBy.split(" "))).join(" ") : null
+  };
+}
+const InputLegacy = forwardRef(
+  function Input({
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns,
+    className: classNameProp,
+    cursorPositionOnFocus,
+    disabled,
+    emptyReadOnlyMarker = "\u2014",
+    endAdornment,
+    highlightOnFocus,
+    id,
+    inputComponent: InputComponent = "input",
+    inputProps: inputPropsProp,
+    role,
+    style,
+    value: valueProp,
+    // If we leave both value and defaultValue undefined, we will get a React warning on first edit
+    // (uncontrolled to controlled warning) from the React input
+    defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseUp,
+    onMouseMove,
+    onMouseDown,
+    readOnly: readOnlyProp,
+    renderSuffix,
+    startAdornment,
+    textAlign = "left",
+    type = "text",
+    ...other
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-input-legacy",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      a11yProps: {
+        readOnly: a11yReadOnly,
+        disabled: a11yDisabled,
+        ...restA11y
+      } = {},
+      setFocused: setFormFieldFocused,
+      inFormField
+    } = useFormFieldLegacyProps();
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+    const handleRef = useForkRef(inputRef, ref);
+    const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {
+      cursorPositionOnFocus,
+      highlightOnFocus
+    });
+    const isDisabled = disabled || a11yDisabled;
+    const isReadOnly = readOnlyProp || a11yReadOnly;
+    const misplacedAriaProps = {
+      "aria-activedescendant": ariaActiveDescendant,
+      "aria-expanded": ariaExpanded,
+      "aria-owns": ariaOwns,
+      role
+    };
+    const inputProps = mergeA11yProps(
+      restA11y,
+      inputPropsProp,
+      misplacedAriaProps
+    );
+    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
+    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "Input",
+      state: "value"
+    });
+    const handleChange = (event) => {
+      const value2 = event.target.value;
+      setValue(value2);
+      onChange == null ? void 0 : onChange(event, value2);
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
+      setFocused(true);
+    };
+    const handleBlur = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
+      setFocused(false);
+    };
+    const handleMouseMove = (event) => {
+      cursorOnFocusHelpers.handleMouseMove(event);
+      onMouseMove == null ? void 0 : onMouseMove(event);
+    };
+    const handleMouseUp = (event) => {
+      cursorOnFocusHelpers.handleMouseUp();
+      onMouseUp == null ? void 0 : onMouseUp(event);
+    };
+    const handleMouseDown = (event) => {
+      cursorOnFocusHelpers.handleMouseDown();
+      onMouseDown == null ? void 0 : onMouseDown(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName(`${textAlign}TextAlign`)]: textAlign,
+            [withBaseName("formField")]: inFormField,
+            [withBaseName("focused")]: focused && !inFormField,
+            [withBaseName("disabled")]: isDisabled,
+            [withBaseName("inputAdornedStart")]: startAdornment,
+            [withBaseName("inputAdornedEnd")]: endAdornment
+          },
+          classNameProp
+        ),
+        style,
+        ...other,
+        children: [
+          startAdornment && /* @__PURE__ */ jsx("div", { className: withBaseName("prefixContainer"), children: startAdornment }),
+          /* @__PURE__ */ jsx(
+            InputComponent,
+            {
+              type,
+              id,
+              ...inputProps,
+              className: clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
+              disabled: isDisabled,
+              ref: handleRef,
+              value,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              onKeyDown,
+              onKeyUp,
+              onFocus: handleFocus,
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+              onMouseMove: handleMouseMove,
+              readOnly: isReadOnly
+            }
+          ),
+          endAdornment && /* @__PURE__ */ jsx("div", { className: withBaseName("suffixContainer"), children: endAdornment }),
+          renderSuffix == null ? void 0 : renderSuffix({ disabled, focused })
+        ]
+      }
+    );
+  }
+);
+
+export { InputLegacy };
+//# sourceMappingURL=InputLegacy.js.map

package/dist-es/input-legacy/InputLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ChangeEvent,\n  type ElementType,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport inputLegacyCss from \"./InputLegacy.css\";\n\nconst withBaseName = makePrefixer(\"saltInputLegacy\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputLegacyProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning<br>\n   * end = place cursor at the end<br>\n   * \\# = index to place the cursor<br>\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * Determines what gets highlighted on focus of the input.\n   *\n   * If `true` all text will be highlighted.\n   * If an array text between those indices will be highlighted\n   * e.g. [0,1] will highlight the first character.\n   */\n  highlightOnFocus?: boolean | number[];\n  /**\n   * The HTML element to render the Input, e.g. 'input', a custom React component.\n   */\n  inputComponent?: ElementType;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  onMouseUp?: MouseEventHandler<HTMLInputElement>;\n  onMouseMove?: MouseEventHandler<HTMLInputElement>;\n  onMouseDown?: MouseEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   *\n   * Determines the alignment of the input text.\n   */\n  textAlign?: \"left\" | \"right\" | \"center\";\n  type?: HTMLInputElement[\"type\"];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  renderSuffix?: (state: {\n    disabled?: boolean;\n    error?: boolean;\n    focused?: boolean;\n    margin?: \"dense\" | \"none\" | \"normal\";\n    required?: boolean;\n    startAdornment?: ReactNode;\n  }) => ReactNode;\n  endAdornment?: ReactNode;\n  startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]>,\n  inputProps: InputLegacyProps[\"inputProps\"],\n  misplacedAriaProps: AriaAttributes,\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps?.[\"aria-labelledby\"],\n    inputProps?.[\"aria-labelledby\"],\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // The weird filtering is due to TokenizedInputBase\n    \"aria-labelledby\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : null,\n  };\n}\n\nexport const InputLegacy = forwardRef<HTMLInputElement, InputLegacyProps>(\n  function Input(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      className: classNameProp,\n      cursorPositionOnFocus,\n      disabled,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      highlightOnFocus,\n      id,\n      inputComponent: InputComponent = \"input\",\n      inputProps: inputPropsProp,\n      role,\n      style,\n      value: valueProp,\n      // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n      // (uncontrolled to controlled warning) from the React input\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onMouseUp,\n      onMouseMove,\n      onMouseDown,\n      readOnly: readOnlyProp,\n      renderSuffix,\n      startAdornment,\n      textAlign = \"left\",\n      type = \"text\",\n      ...other\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-input-legacy\",\n      css: inputLegacyCss,\n      window: targetWindow,\n    });\n\n    const {\n      a11yProps: {\n        readOnly: a11yReadOnly,\n        disabled: a11yDisabled,\n        ...restA11y\n      } = {},\n      setFocused: setFormFieldFocused,\n      inFormField,\n    } = useFormFieldLegacyProps();\n\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef(null);\n    const handleRef = useForkRef(inputRef, ref);\n    const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n      cursorPositionOnFocus,\n      highlightOnFocus,\n    });\n\n    const isDisabled = disabled || a11yDisabled;\n    const isReadOnly = readOnlyProp || a11yReadOnly;\n    const misplacedAriaProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      role,\n    };\n    const inputProps = mergeA11yProps(\n      restA11y,\n      inputPropsProp,\n      misplacedAriaProps,\n    );\n    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n    const defaultValue = isEmptyReadOnly\n      ? emptyReadOnlyMarker\n      : defaultValueProp;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"Input\",\n      state: \"value\",\n    });\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event, value);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      onFocus?.(event);\n      setFormFieldFocused?.(true);\n      setFocused(true);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      onBlur?.(event);\n      setFormFieldFocused?.(false);\n      setFocused(false);\n    };\n\n    const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n      cursorOnFocusHelpers.handleMouseMove(event);\n\n      onMouseMove?.(event);\n    };\n\n    const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n      cursorOnFocusHelpers.handleMouseUp();\n\n      onMouseUp?.(event);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n      cursorOnFocusHelpers.handleMouseDown();\n\n      onMouseDown?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n            [withBaseName(\"formField\")]: inFormField,\n            [withBaseName(\"focused\")]: focused && !inFormField,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"inputAdornedStart\")]: startAdornment,\n            [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n          },\n          classNameProp,\n        )}\n        style={style}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"prefixContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <InputComponent\n          type={type}\n          id={id}\n          {...inputProps}\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          ref={handleRef}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          onKeyUp={onKeyUp}\n          onFocus={handleFocus}\n          onMouseDown={handleMouseDown}\n          onMouseUp={handleMouseUp}\n          onMouseMove={handleMouseMove}\n          readOnly={isReadOnly}\n        />\n        {endAdornment && (\n          <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n        )}\n        {/* TODO: Confirm implementation of suffix */}\n        {renderSuffix?.({ disabled, focused })}\n      </div>\n    );\n  },\n);\n"],"names":["inputLegacyCss","value"],"mappings":"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"}

package/dist-es/input-legacy/StaticInputAdornment.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticInputAdornment {\n  --inputLegacy-staticAdornment-padding: var(--salt-size-unit);\n}\n\n.saltStaticInputAdornment {\n  display: flex;\n  align-items: center;\n}\n\n.saltInputLegacy-prefixContainer .saltStaticInputAdornment {\n  padding-left: var(--inputLegacy-staticAdornment-padding);\n}\n\n.saltInputLegacy-suffixContainer .saltStaticInputAdornment {\n  padding-right: var(--inputLegacy-staticAdornment-padding);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticInputAdornment.css.js.map

package/dist-es/input-legacy/StaticInputAdornment.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticInputAdornment.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/input-legacy/StaticInputAdornment.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './StaticInputAdornment.css.js';
+
+const withBaseName = makePrefixer("saltStaticInputAdornment");
+const StaticInputAdornment = forwardRef(function StaticInputAdornment2(props, ref) {
+  const { children, className, ...other } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-static-input-adornments",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...other, children });
+});
+
+export { StaticInputAdornment };
+//# sourceMappingURL=StaticInputAdornment.js.map

package/dist-es/input-legacy/StaticInputAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticInputAdornment.js","sources":["../src/input-legacy/StaticInputAdornment.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport staticInputAdornmentCss from \"./StaticInputAdornment.css\";\n\nexport type StaticInputAdornmentProps = HTMLAttributes<HTMLDivElement>;\n\nconst withBaseName = makePrefixer(\"saltStaticInputAdornment\");\n\nexport const StaticInputAdornment = forwardRef<\n  HTMLDivElement,\n  StaticInputAdornmentProps\n>(function StaticInputAdornment(props, ref) {\n  const { children, className, ...other } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-static-input-adornments\",\n    css: staticInputAdornmentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} ref={ref} {...other}>\n      {children}\n    </div>\n  );\n});\n"],"names":["StaticInputAdornment","staticInputAdornmentCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,OAAU,GAAA,KAAA;AAE1C,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,KAAA,EAC5D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/input-legacy/useCursorOnFocus.js

@@ -0,0 +1,137 @@
+import { ownerDocument } from '@salt-ds/core';
+import { useRef, useEffect } from 'react';
+
+function getSelectionRange(input, { highlightOnFocus, cursorPositionOnFocus }) {
+  if (highlightOnFocus === true) {
+    return [0, input.value.length];
+  }
+  if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {
+    return [highlightOnFocus[0], highlightOnFocus[1]];
+  }
+  if (cursorPositionOnFocus === "start") {
+    return [0, 0];
+  }
+  if (cursorPositionOnFocus === "end") {
+    return [input.value.length, input.value.length];
+  }
+  if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {
+    return [cursorPositionOnFocus, cursorPositionOnFocus];
+  }
+  return [null, null];
+}
+function isSafari() {
+  return navigator.userAgent.toLowerCase().includes("safari") && !navigator.userAgent.toLowerCase().includes("chrome");
+}
+function isFirefox() {
+  return navigator.userAgent.toLowerCase().includes("firefox");
+}
+function useCursorOnFocus(inputRef, { cursorPositionOnFocus, highlightOnFocus }) {
+  const wasClick = useRef(false);
+  const timeoutRef = useRef(-1);
+  const originalCursorPosition = useRef(-1);
+  const selectionInProgress = useRef(false);
+  const mouseMovement = useRef(0);
+  const selection = useRef([null, null]);
+  const wasWindowFocus = useRef(false);
+  const handleMouseDown = () => {
+    wasClick.current = true;
+  };
+  const handleMouseMove = (event) => {
+    var _a;
+    if (selectionInProgress.current) {
+      mouseMovement.current += Math.abs(event.movementX) + Math.abs(event.movementY);
+      if (mouseMovement.current < 3) {
+        event.preventDefault();
+        return;
+      }
+      if (typeof originalCursorPosition.current === "number") {
+        (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(
+          originalCursorPosition.current,
+          originalCursorPosition.current
+        );
+      }
+      selectionInProgress.current = false;
+    }
+  };
+  const handleMouseUp = () => {
+    const isValidBrowser = isFirefox() || isSafari();
+    if (selectionInProgress.current && mouseMovement.current < 3 && isValidBrowser && Array.isArray(selection.current)) {
+      const [start, end] = selection.current;
+      setTimeout(() => {
+        var _a, _b, _c;
+        if ((((_a = inputRef.current) == null ? void 0 : _a.selectionStart) !== start || ((_b = inputRef.current) == null ? void 0 : _b.selectionEnd) !== end) && typeof start === "number" && typeof end === "number") {
+          (_c = inputRef.current) == null ? void 0 : _c.setSelectionRange(start, end);
+        }
+      }, 0);
+    }
+    wasClick.current = false;
+    selectionInProgress.current = false;
+    mouseMovement.current = 0;
+  };
+  useEffect(() => {
+    if (cursorPositionOnFocus != null || highlightOnFocus != null) {
+      const handleFocusBehaviour = () => {
+        var _a;
+        if (!inputRef.current) {
+          return;
+        }
+        const [start, end] = getSelectionRange(inputRef.current, {
+          highlightOnFocus,
+          cursorPositionOnFocus
+        });
+        if (start !== null && end !== null) {
+          window.clearTimeout(timeoutRef.current);
+          const needsTimeout = isSafari() || wasClick.current;
+          if (wasClick.current) {
+            selectionInProgress.current = true;
+            mouseMovement.current = 0;
+          }
+          selection.current = [start, end];
+          if (needsTimeout) {
+            timeoutRef.current = window.setTimeout(() => {
+              var _a2, _b;
+              if (wasClick.current) {
+                originalCursorPosition.current = (_a2 = inputRef.current) == null ? void 0 : _a2.selectionStart;
+              }
+              (_b = inputRef.current) == null ? void 0 : _b.setSelectionRange(start, end);
+            }, 0);
+          } else {
+            (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(start, end);
+          }
+        }
+      };
+      const handleFocusIn = () => {
+        if (wasWindowFocus.current) {
+          wasWindowFocus.current = false;
+          return;
+        }
+        if (cursorPositionOnFocus != null || highlightOnFocus != null) {
+          handleFocusBehaviour();
+        }
+      };
+      const handleWindowFocus = () => {
+        const doc2 = ownerDocument(inputRef.current);
+        if (doc2.visibilityState === "visible" && doc2.activeElement === inputRef.current) {
+          wasClick.current = false;
+          selectionInProgress.current = false;
+          mouseMovement.current = 0;
+          wasWindowFocus.current = true;
+        }
+      };
+      const eventName = isSafari() || isFirefox() ? "focusIn" : "focus";
+      const input = inputRef.current;
+      const doc = ownerDocument(inputRef.current);
+      input == null ? void 0 : input.addEventListener(eventName, handleFocusIn);
+      doc.addEventListener("visibilitychange", handleWindowFocus);
+      return () => {
+        input == null ? void 0 : input.removeEventListener(eventName, handleFocusIn);
+        doc == null ? void 0 : doc.removeEventListener("visibilitychange", handleWindowFocus);
+      };
+    }
+    return void 0;
+  }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);
+  return { handleMouseDown, handleMouseMove, handleMouseUp };
+}
+
+export { useCursorOnFocus };
+//# sourceMappingURL=useCursorOnFocus.js.map