@simplybusiness/mobius 10.4.3 → 10.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 10.5.0
+
+### Minor Changes
+
+- 8fac379: Add `StickyOnMobile` layout atom: a thin wrapper that pins its single child to the bottom of the viewport on mobile (`max-width: 768px`) using `position: fixed` and renders in document flow on desktop. Ships with a white background, soft top shadow, and `z-index: 999999` so the bar sits above floating widgets such as the Zendesk launcher. Honours `env(safe-area-inset-bottom)` for the iOS home indicator. Consumers can override any of these via `className`.
+
+  Applies it to the post-quote Combined Payments Checkout button. `CancelAnytime` (when `us2602QcpCancelAnytime` is in treatment) is colocated inside the same wrapper so it sits directly above the CTA on both desktop and mobile.
+
+## 10.4.4
+
+### Patch Changes
+
+- a0a980d: Optimise questions for iPhone performance
+- 9231df9: Adopt the TypeScript 7 beta compiler (`@typescript/native-preview`, `tsgo`) for type-checking and declaration emission across the monorepo. `typescript` library bumped to 6.0.3 and `typescript-eslint` to 8.59.0 (both still used by type-aware lint until typescript-eslint supports TS 7). No public API changes.
+- Updated dependencies [9231df9]
+  - @simplybusiness/icons@5.1.1
+  - @simplybusiness/mobius-hooks@0.2.1
+
 ## 10.4.3
 
 ### Patch Changes

package/dist/cjs/components/AddressLookup/AddressLookup.js

@@ -34,12 +34,12 @@ __export(AddressLookup_exports, {
 });
 module.exports = __toCommonJS(AddressLookup_exports);
 var import_icons2 = require("@simplybusiness/icons");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Combobox/Combobox.tsx
 var import_mobius_hooks3 = require("@simplybusiness/mobius-hooks");
 var import_dedupe11 = __toESM(require("classnames/dedupe"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/useBreakpoint/useBreakpoint.tsx
 var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
@@ -231,6 +231,7 @@ var useValidationClasses = (props) => {
 
 // src/components/TextField/TextField.tsx
 var import_dedupe8 = __toESM(require("classnames/dedupe"));
+var import_react6 = require("react");
 
 // src/components/ErrorMessage/ErrorMessage.tsx
 var import_icons = require("@simplybusiness/icons");
@@ -448,9 +449,10 @@ var import_dedupe7 = __toESM(require("classnames/dedupe"));
 var import_react5 = require("react");
 var adornmentWithClassName = (component, validationClasses, className) => {
   if (!component) return null;
-  return (0, import_react5.cloneElement)(component, {
+  const typedComponent = component;
+  return (0, import_react5.cloneElement)(typedComponent, {
     className: (0, import_dedupe7.default)(
-      component.props.className,
+      typedComponent.props.className,
       validationClasses,
       className
     )
@@ -460,7 +462,7 @@ var adornmentWithClassName = (component, validationClasses, className) => {
 // src/components/TextField/TextField.tsx
 var import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextField = ({ ref, ...props }) => {
+var TextFieldInner = ({ ref, ...props }) => {
   const {
     isDisabled,
     type = "text",
@@ -554,6 +556,7 @@ var TextField = ({ ref, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 };
+var TextField = (0, import_react6.memo)(TextFieldInner);
 TextField.displayName = "TextField";
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -591,7 +594,7 @@ function VisuallyHidden(props) {
 var import_dedupe10 = __toESM(require("classnames/dedupe"));
 
 // src/components/Combobox/Option.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_dedupe9 = __toESM(require("classnames/dedupe"));
 
 // src/components/Combobox/utils.tsx
@@ -626,13 +629,13 @@ var Option = ({
   optionTestIdPrefix,
   id
 }) => {
-  const optionRef = (0, import_react6.useRef)(null);
+  const optionRef = (0, import_react7.useRef)(null);
   const optionValue = getOptionValue(option) || "";
   const testId = buildOptionTestId(
     optionTestIdPrefix || "combobox-option",
     optionValue
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
       optionRef.current.scrollIntoView({ block: "nearest" });
     }
@@ -736,12 +739,12 @@ var Listbox = ({
 };
 
 // src/components/Combobox/useComboboxHighlight.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useComboboxHighlight(options) {
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react7.useState)(
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react8.useState)(
     options && options.length ? 0 : -1
   );
-  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react7.useState)(0);
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react8.useState)(0);
   function highlightNextOption() {
     const isGroup = isOptionGroup(options);
     if (!options) {
@@ -820,7 +823,7 @@ function useComboboxHighlight(options) {
 
 // src/components/Combobox/useComboboxOptions.ts
 var import_mobius_hooks2 = require("@simplybusiness/mobius-hooks");
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useComboboxOptions({
   options,
   asyncOptions,
@@ -830,19 +833,19 @@ function useComboboxOptions({
   skipNextDebounceRef,
   onSearched
 }) {
-  const [filteredOptions, setFilteredOptions] = (0, import_react8.useState)(void 0);
+  const [filteredOptions, setFilteredOptions] = (0, import_react9.useState)(void 0);
   const debouncedInputValue = (0, import_mobius_hooks2.useDebouncedValue)(
     inputValue,
     // Don't debounce synchronous options
     options ? 0 : delay
   );
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
-  const [error2, setError] = (0, import_react8.useState)(null);
-  const asyncOptionsRef = (0, import_react8.useRef)(asyncOptions);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [error2, setError] = (0, import_react9.useState)(null);
+  const asyncOptionsRef = (0, import_react9.useRef)(asyncOptions);
   asyncOptionsRef.current = asyncOptions;
-  const onSearchedRef = (0, import_react8.useRef)(onSearched);
+  const onSearchedRef = (0, import_react9.useRef)(onSearched);
   onSearchedRef.current = onSearched;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const controller = new AbortController();
     const { signal } = controller;
     const fetchOptions = async () => {
@@ -929,11 +932,11 @@ var ComboboxInner = ({
     errorMessage,
     ...otherProps
   } = props;
-  const skipNextDebounceRef = (0, import_react9.useRef)(false);
-  const fallbackRef = (0, import_react9.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react9.useState)(defaultValue || "");
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [isChanging, setIsChanging] = (0, import_react9.useState)(false);
+  const skipNextDebounceRef = (0, import_react10.useRef)(false);
+  const fallbackRef = (0, import_react10.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react10.useState)(defaultValue || "");
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [isChanging, setIsChanging] = (0, import_react10.useState)(false);
   const { filteredOptions, updateFilteredOptions, isLoading, error: error2 } = useComboboxOptions({
     options,
     asyncOptions,
@@ -942,7 +945,7 @@ var ComboboxInner = ({
     minSearchLength,
     skipNextDebounceRef
   });
-  const [validationError, setValidationError] = (0, import_react9.useState)(
+  const [validationError, setValidationError] = (0, import_react10.useState)(
     error2?.message || errorMessage
   );
   const {
@@ -955,14 +958,14 @@ var ComboboxInner = ({
     clearHighlight
   } = useComboboxHighlight(filteredOptions);
   const inputRef = ref || fallbackRef;
-  const listboxId = (0, import_react9.useId)();
-  const statusId = (0, import_react9.useId)();
-  const blurTimeoutRef = (0, import_react9.useRef)(null);
-  const userInteractedRef = (0, import_react9.useRef)(false);
-  const justSelectedRef = (0, import_react9.useRef)(false);
+  const listboxId = (0, import_react10.useId)();
+  const statusId = (0, import_react10.useId)();
+  const blurTimeoutRef = (0, import_react10.useRef)(null);
+  const userInteractedRef = (0, import_react10.useRef)(false);
+  const justSelectedRef = (0, import_react10.useRef)(false);
   const { down } = useBreakpoint();
   const isMobile = down("md");
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setValidationError(error2?.message || errorMessage);
   }, [error2, errorMessage]);
   const getEmptyValue = () => {
@@ -991,7 +994,7 @@ var ComboboxInner = ({
       justSelectedRef.current = false;
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!inputRef || typeof inputRef === "function") return;
     const inputElement = inputRef.current;
     if (!inputElement) return;
@@ -1144,12 +1147,12 @@ var ComboboxInner = ({
       default:
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (value) {
       setInputValue(value);
     }
   }, [value]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (asyncOptions && isChanging) {
       setIsOpen(!!filteredOptions && filteredOptions.length > 0);
     }
@@ -1260,15 +1263,15 @@ var AddressLookup = ({
   errorMessage,
   ...otherProps
 }) => {
-  const [error2, _setError] = (0, import_react10.useState)(null);
-  const setError = (0, import_react10.useCallback)(
+  const [error2, _setError] = (0, import_react11.useState)(null);
+  const setError = (0, import_react11.useCallback)(
     (newError) => {
       if (newError != null) onError?.(newError);
       _setError(newError);
     },
     [onError]
   );
-  const asyncOptions = (0, import_react10.useCallback)(
+  const asyncOptions = (0, import_react11.useCallback)(
     async (searchTerm) => {
       try {
         const response = await addressLookupService.search(searchTerm);