@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

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

@@ -1,32 +1,34 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
-var useCursorOnFocus = require('./useCursorOnFocus.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var InputLegacy$1 = require('./InputLegacy.css.js');
+var useCursorOnFocus = require('./useCursorOnFocus.js');
 
 const withBaseName = core.makePrefixer("saltInputLegacy");
-function mergeA11yProps(a11yProps = {}, inputProps = {}, misplacedAriaProps) {
+function mergeA11yProps(a11yProps, inputProps, misplacedAriaProps) {
   const ariaLabelledBy = clsx.clsx(
-    a11yProps["aria-labelledby"],
-    inputProps["aria-labelledby"]
+    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 = React.forwardRef(
+function isEmptyReadOnlyValue(value) {
+  return value == null || value === "";
+}
+const InputLegacy = react.forwardRef(
   function Input({
     "aria-activedescendant": ariaActiveDescendant,
     "aria-expanded": ariaExpanded,
@@ -43,6 +45,8 @@ const InputLegacy = React.forwardRef(
     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,
@@ -74,8 +78,8 @@ const InputLegacy = React.forwardRef(
       setFocused: setFormFieldFocused,
       inFormField
     } = useFormFieldLegacyProps.useFormFieldLegacyProps();
-    const [focused, setFocused] = React.useState(false);
-    const inputRef = React.useRef(null);
+    const [focused, setFocused] = react.useState(false);
+    const inputRef = react.useRef(null);
     const handleRef = core.useForkRef(inputRef, ref);
     const cursorOnFocusHelpers = useCursorOnFocus.useCursorOnFocus(inputRef, {
       cursorPositionOnFocus,
@@ -94,10 +98,12 @@ const InputLegacy = React.forwardRef(
       inputPropsProp,
       misplacedAriaProps
     );
-    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
-    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);
+    const isDefaultValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(defaultValueProp);
+    const controlledValue = valueProp === void 0 ? void 0 : isValueEmptyReadOnly ? emptyReadOnlyMarker : valueProp;
+    const defaultValue = isDefaultValueEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
     const [value, setValue] = core.useControlled({
-      controlled: valueProp,
+      controlled: controlledValue,
       default: defaultValue,
       name: "Input",
       state: "value"
@@ -129,51 +135,51 @@ const InputLegacy = React.forwardRef(
       cursorOnFocusHelpers.handleMouseDown();
       onMouseDown == null ? void 0 : onMouseDown(event);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.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__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("prefixContainer"),
-          children: startAdornment
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(InputComponent, {
-          type,
-          id,
-          ...inputProps,
-          className: clsx.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__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("suffixContainer"),
-          children: endAdornment
-        }),
-        renderSuffix == null ? void 0 : renderSuffix({ disabled, focused })
-      ]
-    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.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__ */ jsxRuntime.jsx("div", { className: withBaseName("prefixContainer"), children: startAdornment }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputComponent,
+            {
+              type,
+              id,
+              ...inputProps,
+              className: clsx.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__ */ jsxRuntime.jsx("div", { className: withBaseName("suffixContainer"), children: endAdornment }),
+          renderSuffix == null ? void 0 : renderSuffix({ disabled, focused })
+        ]
+      }
+    );
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  ElementType,\n  FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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<\n    ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]\n  > = {},\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":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ChangeEvent,\n  type ElementType,\n  type FocusEvent,\n  type FocusEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport inputLegacyCss from \"./InputLegacy.css\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\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\nfunction isEmptyReadOnlyValue(\n  value: InputLegacyProps[\"value\"] | InputLegacyProps[\"defaultValue\"],\n) {\n  return value == null || value === \"\";\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 isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);\n    const isDefaultValueEmptyReadOnly =\n      isReadOnly && isEmptyReadOnlyValue(defaultValueProp);\n    const controlledValue =\n      valueProp === undefined\n        ? undefined\n        : isValueEmptyReadOnly\n          ? emptyReadOnlyMarker\n          : valueProp;\n    const defaultValue = isDefaultValueEmptyReadOnly\n      ? emptyReadOnlyMarker\n      : defaultValueProp;\n\n    const [value, setValue] = useControlled({\n      controlled: controlledValue,\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":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}

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

@@ -1,17 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
 var core = require('@salt-ds/core');
-var StaticInputAdornment$1 = require('./StaticInputAdornment.css.js');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var StaticInputAdornment$1 = require('./StaticInputAdornment.css.js');
 
 const withBaseName = core.makePrefixer("saltStaticInputAdornment");
-const StaticInputAdornment = React.forwardRef(function StaticInputAdornment2(props, ref) {
+const StaticInputAdornment = react.forwardRef(function StaticInputAdornment2(props, ref) {
   const { children, className, ...other } = props;
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -19,12 +17,7 @@ const StaticInputAdornment = React.forwardRef(function StaticInputAdornment2(pro
     css: StaticInputAdornment$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: clsx.clsx(withBaseName(), className),
-    ref,
-    ...other,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...other, children });
 });
 
 exports.StaticInputAdornment = StaticInputAdornment;

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

@@ -1 +1 @@
-{"version":3,"file":"StaticInputAdornment.js","sources":["../src/input-legacy/StaticInputAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport staticInputAdornmentCss from \"./StaticInputAdornment.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["makePrefixer","forwardRef","StaticInputAdornment","useWindow","useComponentCssInjection","staticInputAdornmentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAErD,MAAM,oBAAuB,GAAAC,gBAAA,CAGlC,SAASC,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE1C,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,sBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,KAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"StaticInputAdornment.js","sources":["../src/input-legacy/StaticInputAdornment.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\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":["makePrefixer","forwardRef","StaticInputAdornment","useWindow","useComponentCssInjection","staticInputAdornmentCss","jsx","clsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAA,GAAuBC,gBAAA,CAGlC,SAASC,qBAAAA,CAAqB,OAAO,GAAA,EAAK;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,OAAM,GAAI,KAAA;AAE1C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,8BAAA;AAAA,IACR,GAAA,EAAKC,sBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,KAAA,EAC5D,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,9 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 function getSelectionRange(input, { highlightOnFocus, cursorPositionOnFocus }) {
   if (highlightOnFocus === true) {
@@ -18,7 +16,7 @@ function getSelectionRange(input, { highlightOnFocus, cursorPositionOnFocus }) {
   if (cursorPositionOnFocus === "end") {
     return [input.value.length, input.value.length];
   }
-  if (cursorPositionOnFocus != null && !isNaN(cursorPositionOnFocus)) {
+  if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {
     return [cursorPositionOnFocus, cursorPositionOnFocus];
   }
   return [null, null];
@@ -30,13 +28,13 @@ function isFirefox() {
   return navigator.userAgent.toLowerCase().includes("firefox");
 }
 function useCursorOnFocus(inputRef, { cursorPositionOnFocus, highlightOnFocus }) {
-  const wasClick = React.useRef(false);
-  const timeoutRef = React.useRef(-1);
-  const originalCursorPosition = React.useRef(-1);
-  const selectionInProgress = React.useRef(false);
-  const mouseMovement = React.useRef(0);
-  const selection = React.useRef([null, null]);
-  const wasWindowFocus = React.useRef(false);
+  const wasClick = react.useRef(false);
+  const timeoutRef = react.useRef(-1);
+  const originalCursorPosition = react.useRef(-1);
+  const selectionInProgress = react.useRef(false);
+  const mouseMovement = react.useRef(0);
+  const selection = react.useRef([null, null]);
+  const wasWindowFocus = react.useRef(false);
   const handleMouseDown = () => {
     wasClick.current = true;
   };
@@ -48,7 +46,7 @@ function useCursorOnFocus(inputRef, { cursorPositionOnFocus, highlightOnFocus })
         event.preventDefault();
         return;
       }
-      if (typeof originalCursorPosition.current == "number") {
+      if (typeof originalCursorPosition.current === "number") {
         (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(
           originalCursorPosition.current,
           originalCursorPosition.current
@@ -72,7 +70,7 @@ function useCursorOnFocus(inputRef, { cursorPositionOnFocus, highlightOnFocus })
     selectionInProgress.current = false;
     mouseMovement.current = 0;
   };
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (cursorPositionOnFocus != null || highlightOnFocus != null) {
       const handleFocusBehaviour = () => {
         var _a;

package/dist-cjs/input-legacy/useCursorOnFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorOnFocus.js","sources":["../src/input-legacy/useCursorOnFocus.ts"],"sourcesContent":["import { ownerDocument } from \"@salt-ds/core\";\nimport { MouseEvent, MutableRefObject, useEffect, useRef } from \"react\";\n\nfunction getSelectionRange(\n  input: HTMLInputElement,\n  { highlightOnFocus, cursorPositionOnFocus }: useCursorOnFocusProps\n): [number | null, number | null] {\n  // highlightOnFocus highlight first so it takes priority over position on focus\n  if (highlightOnFocus === true) {\n    return [0, input.value.length];\n  }\n  if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {\n    return [highlightOnFocus[0], highlightOnFocus[1]];\n  }\n\n  if (cursorPositionOnFocus === \"start\") {\n    return [0, 0];\n  }\n\n  if (cursorPositionOnFocus === \"end\") {\n    return [input.value.length, input.value.length];\n  }\n\n  if (cursorPositionOnFocus != null && !isNaN(cursorPositionOnFocus)) {\n    return [cursorPositionOnFocus, cursorPositionOnFocus];\n  }\n  return [null, null];\n}\n\nfunction isSafari() {\n  return (\n    navigator.userAgent.toLowerCase().includes(\"safari\") &&\n    !navigator.userAgent.toLowerCase().includes(\"chrome\")\n  );\n}\n\nfunction isFirefox() {\n  return navigator.userAgent.toLowerCase().includes(\"firefox\");\n}\n\nexport interface useCursorOnFocusProps {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning\n   * end = place cursor at the end\n   * \\# = index to place the cursor\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\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\nexport function useCursorOnFocus(\n  inputRef: MutableRefObject<HTMLInputElement | null>,\n  { cursorPositionOnFocus, highlightOnFocus }: useCursorOnFocusProps\n) {\n  const wasClick = useRef(false);\n  const timeoutRef = useRef<number>(-1);\n  const originalCursorPosition = useRef<number | null | undefined>(-1);\n  const selectionInProgress = useRef(false);\n  const mouseMovement = useRef(0);\n\n  const selection = useRef<[number | null, number | null]>([null, null]);\n  const wasWindowFocus = useRef(false);\n\n  const handleMouseDown = () => {\n    wasClick.current = true;\n  };\n\n  const handleMouseMove = (event: MouseEvent) => {\n    if (selectionInProgress.current) {\n      mouseMovement.current +=\n        Math.abs(event.movementX) + Math.abs(event.movementY);\n\n      //Prevents the slightest mouse movement triggering the cursor to be repositioned.\n      if (mouseMovement.current < 3) {\n        event.preventDefault();\n\n        return;\n      }\n\n      if (typeof originalCursorPosition.current == \"number\") {\n        // Allows continued highlighted if the mouse down is part of a selection.\n        inputRef.current?.setSelectionRange(\n          originalCursorPosition.current,\n          originalCursorPosition.current\n        );\n      }\n\n      //Reset so originalCursorPosition is only set once.\n      selectionInProgress.current = false;\n    }\n  };\n\n  const handleMouseUp = () => {\n    const isValidBrowser = isFirefox() || isSafari();\n    if (\n      selectionInProgress.current &&\n      mouseMovement.current < 3 &&\n      isValidBrowser &&\n      Array.isArray(selection.current)\n    ) {\n      const [start, end] = selection.current;\n      setTimeout(() => {\n        if (\n          (inputRef.current?.selectionStart !== start ||\n            inputRef.current?.selectionEnd !== end) &&\n          typeof start === \"number\" &&\n          typeof end === \"number\"\n        ) {\n          inputRef.current?.setSelectionRange(start, end);\n        }\n      }, 0);\n    }\n\n    wasClick.current = false;\n    selectionInProgress.current = false;\n    mouseMovement.current = 0;\n  };\n\n  useEffect(() => {\n    if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n      const handleFocusBehaviour = () => {\n        if (!inputRef.current) {\n          return;\n        }\n\n        const [start, end] = getSelectionRange(inputRef.current, {\n          highlightOnFocus,\n          cursorPositionOnFocus,\n        });\n        if (start !== null && end !== null) {\n          window.clearTimeout(timeoutRef.current);\n          const needsTimeout = isSafari() || wasClick.current;\n\n          if (wasClick.current) {\n            selectionInProgress.current = true;\n            mouseMovement.current = 0;\n          }\n\n          selection.current = [start, end];\n          // Keyboard focus needs to be outside setTimeout otherwise a flash of selected text appears.\n          if (needsTimeout) {\n            // Make's sure setSelectionRange is run after browser has set cursor position.\n            timeoutRef.current = window.setTimeout(() => {\n              if (wasClick.current) {\n                originalCursorPosition.current =\n                  inputRef.current?.selectionStart;\n              }\n              inputRef.current?.setSelectionRange(start, end);\n            }, 0);\n          } else {\n            inputRef.current?.setSelectionRange(start, end);\n          }\n        }\n      };\n\n      const handleFocusIn = () => {\n        // Ignore focus of input on window focus\n        if (wasWindowFocus.current) {\n          wasWindowFocus.current = false;\n          return;\n        }\n\n        if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n          handleFocusBehaviour();\n        }\n      };\n\n      //Reset everything on window re-focus\n      const handleWindowFocus = () => {\n        const doc = ownerDocument(inputRef.current);\n        if (\n          doc.visibilityState === \"visible\" &&\n          doc.activeElement === inputRef.current\n        ) {\n          wasClick.current = false;\n          selectionInProgress.current = false;\n          mouseMovement.current = 0;\n          wasWindowFocus.current = true;\n        }\n      };\n\n      const eventName = isSafari() || isFirefox() ? \"focusIn\" : \"focus\";\n      const input = inputRef.current;\n      const doc = ownerDocument(inputRef.current);\n      input?.addEventListener(eventName, handleFocusIn);\n      doc.addEventListener(\"visibilitychange\", handleWindowFocus);\n\n      return () => {\n        input?.removeEventListener(eventName, handleFocusIn);\n        doc?.removeEventListener(\"visibilitychange\", handleWindowFocus);\n      };\n    }\n\n    return undefined;\n  }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);\n\n  return { handleMouseDown, handleMouseMove, handleMouseUp };\n}\n"],"names":["useRef","useEffect","_a","doc","ownerDocument"],"mappings":"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"}
+{"version":3,"file":"useCursorOnFocus.js","sources":["../src/input-legacy/useCursorOnFocus.ts"],"sourcesContent":["import { ownerDocument } from \"@salt-ds/core\";\nimport {\n  type MouseEvent,\n  type MutableRefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nfunction getSelectionRange(\n  input: HTMLInputElement,\n  { highlightOnFocus, cursorPositionOnFocus }: useCursorOnFocusProps,\n): [number | null, number | null] {\n  // highlightOnFocus highlight first so it takes priority over position on focus\n  if (highlightOnFocus === true) {\n    return [0, input.value.length];\n  }\n  if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {\n    return [highlightOnFocus[0], highlightOnFocus[1]];\n  }\n\n  if (cursorPositionOnFocus === \"start\") {\n    return [0, 0];\n  }\n\n  if (cursorPositionOnFocus === \"end\") {\n    return [input.value.length, input.value.length];\n  }\n\n  if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {\n    return [cursorPositionOnFocus, cursorPositionOnFocus];\n  }\n  return [null, null];\n}\n\nfunction isSafari() {\n  return (\n    navigator.userAgent.toLowerCase().includes(\"safari\") &&\n    !navigator.userAgent.toLowerCase().includes(\"chrome\")\n  );\n}\n\nfunction isFirefox() {\n  return navigator.userAgent.toLowerCase().includes(\"firefox\");\n}\n\nexport interface useCursorOnFocusProps {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning\n   * end = place cursor at the end\n   * \\# = index to place the cursor\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\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\nexport function useCursorOnFocus(\n  inputRef: MutableRefObject<HTMLInputElement | null>,\n  { cursorPositionOnFocus, highlightOnFocus }: useCursorOnFocusProps,\n) {\n  const wasClick = useRef(false);\n  const timeoutRef = useRef<number>(-1);\n  const originalCursorPosition = useRef<number | null | undefined>(-1);\n  const selectionInProgress = useRef(false);\n  const mouseMovement = useRef(0);\n\n  const selection = useRef<[number | null, number | null]>([null, null]);\n  const wasWindowFocus = useRef(false);\n\n  const handleMouseDown = () => {\n    wasClick.current = true;\n  };\n\n  const handleMouseMove = (event: MouseEvent) => {\n    if (selectionInProgress.current) {\n      mouseMovement.current +=\n        Math.abs(event.movementX) + Math.abs(event.movementY);\n\n      //Prevents the slightest mouse movement triggering the cursor to be repositioned.\n      if (mouseMovement.current < 3) {\n        event.preventDefault();\n\n        return;\n      }\n\n      if (typeof originalCursorPosition.current === \"number\") {\n        // Allows continued highlighted if the mouse down is part of a selection.\n        inputRef.current?.setSelectionRange(\n          originalCursorPosition.current,\n          originalCursorPosition.current,\n        );\n      }\n\n      //Reset so originalCursorPosition is only set once.\n      selectionInProgress.current = false;\n    }\n  };\n\n  const handleMouseUp = () => {\n    const isValidBrowser = isFirefox() || isSafari();\n    if (\n      selectionInProgress.current &&\n      mouseMovement.current < 3 &&\n      isValidBrowser &&\n      Array.isArray(selection.current)\n    ) {\n      const [start, end] = selection.current;\n      setTimeout(() => {\n        if (\n          (inputRef.current?.selectionStart !== start ||\n            inputRef.current?.selectionEnd !== end) &&\n          typeof start === \"number\" &&\n          typeof end === \"number\"\n        ) {\n          inputRef.current?.setSelectionRange(start, end);\n        }\n      }, 0);\n    }\n\n    wasClick.current = false;\n    selectionInProgress.current = false;\n    mouseMovement.current = 0;\n  };\n\n  useEffect(() => {\n    if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n      const handleFocusBehaviour = () => {\n        if (!inputRef.current) {\n          return;\n        }\n\n        const [start, end] = getSelectionRange(inputRef.current, {\n          highlightOnFocus,\n          cursorPositionOnFocus,\n        });\n        if (start !== null && end !== null) {\n          window.clearTimeout(timeoutRef.current);\n          const needsTimeout = isSafari() || wasClick.current;\n\n          if (wasClick.current) {\n            selectionInProgress.current = true;\n            mouseMovement.current = 0;\n          }\n\n          selection.current = [start, end];\n          // Keyboard focus needs to be outside setTimeout otherwise a flash of selected text appears.\n          if (needsTimeout) {\n            // Make's sure setSelectionRange is run after browser has set cursor position.\n            timeoutRef.current = window.setTimeout(() => {\n              if (wasClick.current) {\n                originalCursorPosition.current =\n                  inputRef.current?.selectionStart;\n              }\n              inputRef.current?.setSelectionRange(start, end);\n            }, 0);\n          } else {\n            inputRef.current?.setSelectionRange(start, end);\n          }\n        }\n      };\n\n      const handleFocusIn = () => {\n        // Ignore focus of input on window focus\n        if (wasWindowFocus.current) {\n          wasWindowFocus.current = false;\n          return;\n        }\n\n        if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n          handleFocusBehaviour();\n        }\n      };\n\n      //Reset everything on window re-focus\n      const handleWindowFocus = () => {\n        const doc = ownerDocument(inputRef.current);\n        if (\n          doc.visibilityState === \"visible\" &&\n          doc.activeElement === inputRef.current\n        ) {\n          wasClick.current = false;\n          selectionInProgress.current = false;\n          mouseMovement.current = 0;\n          wasWindowFocus.current = true;\n        }\n      };\n\n      const eventName = isSafari() || isFirefox() ? \"focusIn\" : \"focus\";\n      const input = inputRef.current;\n      const doc = ownerDocument(inputRef.current);\n      input?.addEventListener(eventName, handleFocusIn);\n      doc.addEventListener(\"visibilitychange\", handleWindowFocus);\n\n      return () => {\n        input?.removeEventListener(eventName, handleFocusIn);\n        doc?.removeEventListener(\"visibilitychange\", handleWindowFocus);\n      };\n    }\n\n    return undefined;\n  }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);\n\n  return { handleMouseDown, handleMouseMove, handleMouseUp };\n}\n"],"names":["useRef","useEffect","_a","doc","ownerDocument"],"mappings":"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"}

package/dist-cjs/layer-layout/LayerLayout.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  box-sizing: border-box;\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=LayerLayout.css.js.map

package/dist-cjs/layer-layout/LayerLayout.js

@@ -1,17 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var Scrim = require('../scrim/Scrim.js');
-require('../scrim/ScrimContext.js');
 var core = require('@salt-ds/core');
-require('../utils/useFloatingUI.js');
-var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
 var LayerLayout$1 = require('./LayerLayout.css.js');
 
 const LAYER_POSITIONS = [
@@ -23,7 +18,7 @@ const LAYER_POSITIONS = [
 ];
 const withBaseName = core.makePrefixer("saltLayerLayout");
 const ariaAttributes = { role: "dialog", "aria-modal": true };
-const LayerLayout = React.forwardRef(
+const LayerLayout = react.forwardRef(
   function LayerLayout2(props, ref) {
     const {
       children,
@@ -47,9 +42,9 @@ const LayerLayout = React.forwardRef(
       [disableAnimations],
       false
     );
-    const [showComponent, setShowComponent] = React.useState(false);
-    const [isAnimating, setIsAnimating] = React.useState(false);
-    React.useEffect(() => {
+    const [showComponent, setShowComponent] = react.useState(false);
+    const [isAnimating, setIsAnimating] = react.useState(false);
+    react.useEffect(() => {
       if (!isOpen && disableAnimations || !isOpen && !isAnimating) {
         setShowComponent(false);
       }
@@ -63,34 +58,40 @@ const LayerLayout = React.forwardRef(
     const anchored = position !== "center" && !fullScreen;
     const enterAnimation = !disableAnimations && isOpen && !previousDisableAnimationsProp;
     const exitAnimation = !disableAnimations && !isOpen;
-    const layerLayout = showComponent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ref,
-      className: clsx.clsx(withBaseName(), className, {
-        [withBaseName("anchor")]: anchored,
-        [withBaseName("fullScreen")]: fullScreen,
-        [withBaseName(position)]: !fullScreen,
-        [withBaseName("enter-animation")]: enterAnimation,
-        [withBaseName("exit-animation")]: exitAnimation
-      }),
-      onAnimationStart: () => setIsAnimating(true),
-      onAnimationEnd: () => {
-        if (!isOpen && showComponent) {
-          setShowComponent(false);
-        }
-      },
-      ...disableScrim && ariaAttributes,
-      ...rest,
-      children
-    }) : null;
-    return disableScrim ? layerLayout : /* @__PURE__ */ jsxRuntime.jsx(Scrim.Scrim, {
-      open: showComponent,
-      className: clsx.clsx({
-        [withBaseName("enter-animation")]: enterAnimation,
-        [withBaseName("exit-animation")]: exitAnimation
-      }),
-      ...scrimProps,
-      children: layerLayout
-    });
+    const layerLayout = showComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx.clsx(withBaseName(), className, {
+          [withBaseName("anchor")]: anchored,
+          [withBaseName("fullScreen")]: fullScreen,
+          [withBaseName(position)]: !fullScreen,
+          [withBaseName("enter-animation")]: enterAnimation,
+          [withBaseName("exit-animation")]: exitAnimation
+        }),
+        onAnimationStart: () => setIsAnimating(true),
+        onAnimationEnd: () => {
+          if (!isOpen && showComponent) {
+            setShowComponent(false);
+          }
+        },
+        ...disableScrim && ariaAttributes,
+        ...rest,
+        children
+      }
+    ) : null;
+    return disableScrim ? layerLayout : /* @__PURE__ */ jsxRuntime.jsx(
+      core.Scrim,
+      {
+        open: showComponent,
+        className: clsx.clsx({
+          [withBaseName("enter-animation")]: enterAnimation,
+          [withBaseName("exit-animation")]: exitAnimation
+        }),
+        ...scrimProps,
+        children: layerLayout
+      }
+    );
   }
 );
 

package/dist-cjs/layer-layout/LayerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = typeof LAYER_POSITIONS[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}
+{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import {\n  type Breakpoints,\n  makePrefixer,\n  Scrim,\n  type ScrimProps,\n  usePrevious,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false,\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint,\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}