@qssolutions/ssas-registration-form 2.0.0 → 2.0.2

package/dist/index.js

@@ -23314,24 +23314,72 @@ const createFormTheme = (primaryColor = DEFAULT_PRIMARY_COLOR, fonts) => {
  * `primaryColor`/`fonts` props. The library is embedded in pages we don't control, so the provider
  * lives here rather than relying on a host one. `display: contents` keeps it out of the layout.
  */
-const FormThemeProvider = ({ primaryColor, fonts, children }) => {
+const FormThemeProvider = ({ primaryColor, fonts, dir = "ltr", children }) => {
     const fontFamily = fonts?.family;
     const theme = React.useMemo(() => createFormTheme(primaryColor, { family: fontFamily }), [primaryColor, fontFamily]);
-    return (React.createElement(reactComponents.FluentProvider, { theme: theme, style: { display: "contents" } }, children));
+    return (React.createElement(reactComponents.FluentProvider, { theme: theme, dir: dir, style: { display: "contents" } }, children));
 };
 
+/**
+ * Deep merge utility
+ */
+/**
+ * Check if current language is RTL
+ */
+function isRTLContent(languageCode) {
+    const rtlLanguages = ['ar', 'he'];
+    if (languageCode) {
+        return rtlLanguages.includes(languageCode.toLowerCase());
+    }
+    // Try to detect from document or i18n
+    return false;
+}
+
+const INVALID = "[aria-invalid='true']";
 /**
  * v9 replacements for the v8 `textFieldStyles` / `dropdownStyles` / `comboboxStyles` objects
  * (`defaultStyles.ts`). The font family now comes from the `FluentProvider` theme
  * (`createFormTheme`), so only the box styling lives here.
  */
 const useFieldStyles = reactComponents.makeStyles({
-    // v8 `fieldGroup`: grey fill, 1px #DDD border, 5px radius, 50px high.
+    // Mirrors SharedPortal's `inputRoot` (`form-screen.styles.ts`): a near-white fill with a #8A8A8A edge
+    // (over 3:1, WCAG's minimum for a control's boundary), 5px radius, 50px high. The old #F5F5F5 fill
+    // and #DDDDDD edge read as disabled, so that look is kept for real disabled fields only.
     input: {
-        backgroundColor: "#F5F5F5",
-        ...reactComponents.shorthands.border("1px", "solid", "#DDDDDD"),
+        backgroundColor: "#FCFCFF",
+        ...reactComponents.shorthands.border("1px", "solid", "#8A8A8A"),
         ...reactComponents.shorthands.borderRadius("5px"),
         height: "50px",
+        transitionProperty: "border-color, background-color",
+        transitionDuration: "0.15s",
+        // Text and placeholder at 16px. The `<input>` and the Dropdown's button carry v9's own 14px
+        // class, which a font size on the root does not reach.
+        "& input, & .fui-Dropdown__button": {
+            fontSize: "16px",
+        },
+        // The field being typed in turns white, so it stands out from the rest.
+        ":focus-within": {
+            backgroundColor: "#fff",
+        },
+        // Hover and focus are skipped on an invalid field, so its red edge always shows. `aria-invalid`
+        // is what Field puts on the control when its `validationState` is "error": on the input, or
+        // on the button for Dropdown. Hover also skips the focused field: Griffel emits `:hover` rules
+        // after `:focus-within` ones, so the brand edge would otherwise turn grey under the pointer.
+        [`:hover:not(:focus-within):not(${INVALID}):not(:has(${INVALID})):not(:has(:disabled))`]: {
+            ...reactComponents.shorthands.borderColor("#424242"),
+        },
+        [`:focus-within:not(${INVALID}):not(:has(${INVALID}))`]: {
+            ...reactComponents.shorthands.borderColor(reactComponents.tokens.colorBrandStroke1),
+        },
+        // v9 only draws its red edge while the field is not focused, and its own `:focus-within` grey
+        // outranks a plain rule here; `!important` (as in SharedPortal) keeps the red on focus too.
+        [`&${INVALID}, &:has(${INVALID})`]: {
+            ...reactComponents.shorthands.borderColor(`${reactComponents.tokens.colorPaletteRedBorder2} !important`),
+        },
+        "&:has(:disabled)": {
+            backgroundColor: "#F5F5F5",
+            ...reactComponents.shorthands.borderColor("#DDDDDD"),
+        },
     },
     // v9 Dropdown/Combobox roots are inline-block with a 250-400px width window; v8's filled its column.
     fill: {
@@ -23486,7 +23534,7 @@ const FormComponentList = (translation, performByPartner, model) => {
 const SSASTextInput = React.forwardRef(({ label, errorMessage, hint, fonts, required, className, ...props }, ref) => {
     const styles = useFieldStyles();
     return (React.createElement(reactComponents.Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, hint: hint, required: !!required, validationState: errorMessage ? "error" : "none", validationMessage: errorMessage },
-        React.createElement(reactComponents.Input, { ref: ref, className: reactComponents.mergeClasses(styles.input, className), ...props })));
+        React.createElement(reactComponents.Input, { ref: ref, className: reactComponents.mergeClasses(styles.input, styles.fill, className), ...props })));
 });
 SSASTextInput.displayName = "SSASTextInput";
 
@@ -23598,21 +23646,43 @@ const ControlledDropdown = ({ name, control, rules, defaultValue, options, ...pr
 };
 
 /**
- * Ported from SharedPortal's `ControlledComboBox` (`Field` + `Combobox freeform`). v8's `allowFreeInput`
- * had no per-call-site toggle, so `freeform` stays unconditional. The form value is `option.key` when it
- * is a string, else `option.text`, as before; the country list has string keys.
+ * Ported from SharedPortal's `ControlledComboBox` (`Field` + `Combobox freeform`). Typed text is kept
+ * apart from the field (`typedText`) and resolved on blur: an exact (case-insensitive) option match
+ * selects that option, anything else clears both, so only a listed option can ever reach the form and
+ * the `required` rule still fails on unmatched text. The form value is `option.key` when it is a string,
+ * else `option.text`; the country list has string keys.
  */
-const ControlledCombobox = ({ name, control, rules, defaultValue, options, label, placeholder, required, disabled, autoComplete, style, className, fonts, }) => {
+const ComboboxField = ({ value, onChange, onBlur, errorMessage, options, label, placeholder, required, disabled, autoComplete, style, className, fonts, }) => {
     const styles = useFieldStyles();
-    return (React.createElement(reactHookForm.Controller, { name: name, control: control, rules: rules, defaultValue: defaultValue || "", render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => {
-            const matchedOption = options.find((o) => String(o.key) === String(value));
-            return (React.createElement(reactComponents.Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, required: required, validationState: error ? "error" : "none", validationMessage: error?.message },
-                React.createElement(reactComponents.Combobox, { freeform: true, value: matchedOption ? matchedOption.text : value ?? "", selectedOptions: matchedOption ? [String(matchedOption.key)] : [], placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, style: style, className: reactComponents.mergeClasses(styles.input, styles.fill, className), onOptionSelect: (_, data) => {
-                        const option = options.find((o) => String(o.key) === data.optionValue);
-                        if (option)
-                            onChange(typeof option.key === "string" ? option.key : option.text);
-                    }, onChange: (e) => onChange(e.target.value), onBlur: onBlur }, options.map((option) => (React.createElement(reactComponents.Option, { key: option.key, value: String(option.key), text: option.text }, option.text))))));
-        } }));
+    const matchedOption = options.find((o) => String(o.key) === String(value));
+    // `null` while not typing, so the input shows the selected option's text. A ref, because Tab both
+    // selects the highlighted option and blurs in one go — the blur handler must see that selection.
+    const typedTextRef = React.useRef(null);
+    const [typedText, setTypedText] = React.useState(null);
+    const updateTypedText = (text) => {
+        typedTextRef.current = text;
+        setTypedText(text);
+    };
+    const commit = (option) => {
+        onChange(option ? (typeof option.key === "string" ? option.key : option.text) : "");
+        updateTypedText(null);
+    };
+    return (React.createElement(reactComponents.Field, { label: label ? { children: label, style: fieldLabelStyle(fonts) } : undefined, required: required, validationState: errorMessage ? "error" : "none", validationMessage: errorMessage },
+        React.createElement(reactComponents.Combobox, { freeform: true, value: typedText ?? matchedOption?.text ?? "", selectedOptions: matchedOption ? [String(matchedOption.key)] : [], placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, style: style, className: reactComponents.mergeClasses(styles.input, styles.fill, className), onOptionSelect: (_, data) => {
+                const option = options.find((o) => String(o.key) === data.optionValue);
+                if (option)
+                    commit(option);
+            }, onChange: (e) => updateTypedText(e.target.value), onBlur: () => {
+                const text = typedTextRef.current;
+                if (text !== null) {
+                    const search = text.trim().toLowerCase();
+                    commit(search ? options.find((o) => o.text.toLowerCase() === search) : undefined);
+                }
+                onBlur();
+            } }, options.map((option) => (React.createElement(reactComponents.Option, { key: option.key, value: String(option.key), text: option.text }, option.text))))));
+};
+const ControlledCombobox = ({ name, control, rules, defaultValue, ...props }) => {
+    return (React.createElement(reactHookForm.Controller, { name: name, control: control, rules: rules, defaultValue: defaultValue || "", render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => (React.createElement(ComboboxField, { ...props, value: value, onChange: onChange, onBlur: onBlur, errorMessage: error?.message })) }));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -23756,21 +23826,6 @@ const FormComponentRenderer = ({ formModels, isRegistering, control, setValue, s
     return (React.createElement(React.Fragment, null, renderList.map((component) => renderByType(component, component.name))));
 };
 
-/**
- * Deep merge utility
- */
-/**
- * Check if current language is RTL
- */
-function isRTLContent(languageCode) {
-    const rtlLanguages = ['ar', 'he'];
-    if (languageCode) {
-        return rtlLanguages.includes(languageCode.toLowerCase());
-    }
-    // Try to detect from document or i18n
-    return false;
-}
-
 // v8 ChoiceGroup root: 30px under the group.
 const useRadioStyles = reactComponents.makeStyles({
     root: {
@@ -23780,7 +23835,6 @@ const useRadioStyles = reactComponents.makeStyles({
 const UpperFormSection = ({ isRegistering, performByPartner, setPerformByPartner, setValue, setError, clearErrors, control, errors, trigger, watch, translation, config, apiService, styles, countryOptions, orgSizingOptions, orgIndustryOptions, hearAboutOptions, partnerData, primaryColor: primaryColorProp, }) => {
     const primaryColor = primaryColorProp || "#00BAE4";
     const radioStyles = useRadioStyles();
-    const isRTL = isRTLContent(partnerData?.languageCode);
     const choiceGroupOptions = [
         { key: "ByCustomer", text: translation.ByCustomer },
         { key: "ByPartner", text: translation.ByPartner },
@@ -23806,9 +23860,7 @@ const UpperFormSection = ({ isRegistering, performByPartner, setPerformByPartner
         isHearAbout ? exports.FormModel.HearAbout : false,
     ];
     return (React.createElement(React.Fragment, null,
-        React.createElement(reactComponents.RadioGroup, { defaultValue: "ByCustomer", className: radioStyles.root, 
-            // v8's `flexDirection: row-reverse` pushed the options to the right edge for RTL
-            style: isRTL ? { alignItems: "flex-end" } : undefined, onChange: (_e, data) => {
+        React.createElement(reactComponents.RadioGroup, { defaultValue: "ByCustomer", className: radioStyles.root, onChange: (_e, data) => {
                 // Reset the partner fields
                 setValue(exports.FormModel.CustomerPartnerMail, "");
                 setValue(exports.FormModel.CustomerPartnerName, "");
@@ -23851,6 +23903,15 @@ const useStyles = reactComponents.makeStyles({
         ":active:where(:not(:disabled, [aria-disabled='true']))": {
             backgroundColor: `color-mix(in srgb, var(${BRAND_VAR}), #000 15%) !important`,
         },
+        // v9 draws its keyboard focus ring with `border` and `box-shadow`, and the inline `border: none`
+        // and drop shadow here overwrite both, so a focused button showed no ring at all. Redrawn as an
+        // outline (which nothing inline sets) plus an inner white ring, readable on light and dark
+        // backgrounds alike.
+        ":focus-visible": {
+            outline: "2px solid #000 !important",
+            outlineOffset: "2px",
+            boxShadow: "inset 0 0 0 2px #fff !important",
+        },
     },
 });
 const baseStyle = (noShadow, disabled) => ({
@@ -23883,20 +23944,26 @@ const iconFor = (name, disabled) => {
 };
 const SSASPrimaryButton = (props) => {
     const classes = useStyles();
+    // From `FormThemeProvider`, which sets it from the form's language.
+    const { dir } = reactComponents.useFluent();
     const { styles, primaryColor, noShadow, iconProps, noIcon, iconName, loadingIcon, onRenderMenuIcon, text, className, style, disabled, type, onClick, children, } = props;
     const color = primaryColor || DEFAULT_PRIMARY_COLOR;
     const isDisabled = disabled || loadingIcon;
+    // While loading the button is blocked but stays focusable (`aria-disabled`, not `disabled`): a truly
+    // disabled button drops keyboard focus to the page body, so a visitor who pressed Enter on it
+    // would be thrown back to the top of the tab order.
+    const isBlockedWhileLoading = !!loadingIcon && !disabled;
     const brandStyle = {
         [BRAND_VAR]: color,
         ...(isDisabled ? {} : { backgroundColor: `var(${BRAND_VAR})`, color: "#fff" }),
     };
     const mergedStyle = { ...brandStyle, ...baseStyle(noShadow, isDisabled), ...styles?.root, ...style };
     // v8 rendered a trailing chevron by default, direction-aware, unless noIcon was set.
-    const defaultIconName = isRTLContent() ? "ChevronLeft" : "ChevronRight";
+    const defaultIconName = dir === "rtl" ? "ChevronLeft" : "ChevronRight";
     const defaultIcon = iconFor(iconName ?? defaultIconName, isDisabled);
     // `onRenderMenuIcon` is checked first: the caller implements its own loading-spinner-vs-default
     // logic and calls `defaultRender()` on the non-loading branch.
-    const icon = onRenderMenuIcon ? (onRenderMenuIcon(props, () => defaultIcon ?? null) ?? undefined) : loadingIcon ? (React__namespace.createElement(reactComponents.Spinner, { size: "tiny" })) : noIcon ? undefined : (defaultIcon);
+    const icon = onRenderMenuIcon ? (onRenderMenuIcon(props, () => defaultIcon ?? null) ?? undefined) : loadingIcon ? (React__namespace.createElement(reactComponents.Spinner, { "aria-label": "Loading", size: "tiny" })) : noIcon ? undefined : (defaultIcon);
     const iconPosition = iconProps ? "before" : "after";
     // A trailing icon makes the content lopsided; extra start padding rebalances it, and
     // `mergedStyle` goes last so a call site's own padding still wins.
@@ -23904,7 +23971,7 @@ const SSASPrimaryButton = (props) => {
         ...(icon && iconPosition === "after" ? { paddingInlineStart: 20 } : {}),
         ...mergedStyle,
     };
-    return (React__namespace.createElement(reactComponents.Button, { appearance: "primary", className: reactComponents.mergeClasses(classes.interactive, className), style: balancedStyle, icon: icon, iconPosition: iconPosition, disabled: isDisabled, type: type, onClick: onClick }, text ?? children));
+    return (React__namespace.createElement(reactComponents.Button, { appearance: "primary", className: reactComponents.mergeClasses(classes.interactive, className), style: balancedStyle, icon: icon, iconPosition: iconPosition, disabled: disabled, disabledFocusable: isBlockedWhileLoading, type: type, onClick: onClick }, text ?? children));
 };
 
 const LowerFormSection = ({ setValue, isRegistering, errors, translation, submissionError, primaryColor: primaryColorProp, partnerData, }) => {
@@ -23949,7 +24016,7 @@ const LowerFormSection = ({ setValue, isRegistering, errors, translation, submis
     const renderLoadingIcon = (_props, defaultRender) => {
         // v8 `SpinnerSize.medium` (20px) maps to v9 "tiny"
         if (isRegistering)
-            return React.createElement(reactComponents.Spinner, { size: "tiny" });
+            return React.createElement(reactComponents.Spinner, { "aria-label": "Submitting", size: "tiny" });
         else
             return defaultRender ? defaultRender() : null;
     };
@@ -23975,7 +24042,9 @@ const LowerFormSection = ({ setValue, isRegistering, errors, translation, submis
             React.createElement("span", { style: { fontSize: 16, fontWeight: 600 } }, "\u26A0"),
             React.createElement("span", null, submissionError))),
         React.createElement(SSASPrimaryButton, { text: translation.SubmitRequest, primaryColor: primaryColor, styles: {
-                root: { display: "block", width: "100%" },
+                // `flex`, not `block`: v9 Button centres its icon and label as flex items, and
+                // `block` dropped the icon onto the text baseline, a few px above the label.
+                root: { display: "flex", width: "100%" },
             }, type: "submit", disabled: Object.keys(errors).length > 0 ||
                 isRegistering ||
                 !termAcceptance ||
@@ -24046,6 +24115,8 @@ const SSASRegistrationForm = ({ config, }) => {
         return (languageOptions.find((x) => x.data.code === currentLang)?.text ||
             "English");
     }, [mergedConfig.languageCode, partnerData?.languageCode, languageOptions]);
+    // Same language the translations are loaded in (`getFormScreenLocalization` below).
+    const formDir = isRTLContent(mergedConfig.languageCode || partnerData?.languageCode) ? "rtl" : "ltr";
     const { handleSubmit, setValue, setError, control, watch, clearErrors, trigger, formState: { errors }, } = reactHookForm.useForm({
         defaultValues: {
             orgSizingId: 1,
@@ -24284,7 +24355,7 @@ const SSASRegistrationForm = ({ config, }) => {
     // Show success screen if registration completed
     if (finalStep) {
         // Default success screen
-        return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts },
+        return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts, dir: formDir },
             React.createElement("div", { className: styles.mainContainer, style: mainContainerStyle },
                 React.createElement("div", { className: styles.thankyouTopWrapper },
                     React.createElement("div", { className: styles.finalStepContainer },
@@ -24293,6 +24364,7 @@ const SSASRegistrationForm = ({ config, }) => {
                                     fontSize: mergedConfig.theme?.fonts?.sizes
                                         ?.heading,
                                     fontWeight: 700,
+                                    lineHeight: 1.2,
                                 } }, translation.ThankYou),
                             React.createElement("div", { style: {
                                     fontSize: mergedConfig.theme?.fonts?.sizes
@@ -24309,7 +24381,7 @@ const SSASRegistrationForm = ({ config, }) => {
                                     textUnderlinePosition: "under",
                                 } }, finalStep)))))));
     }
-    return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts },
+    return (React.createElement(FormThemeProvider, { primaryColor: mergedConfig.theme?.primaryColor || colorWidget?.column1, fonts: mergedConfig.theme?.fonts, dir: formDir },
         React.createElement("div", { className: styles.mainContainer, style: mainContainerStyle },
             React.createElement("div", { className: styles.topWrapper, style: mergedConfig.customStyles?.topWrapper }, isLoadingData ? (React.createElement(reactComponents.Spinner, { size: "tiny", labelPosition: "below", label: "Loading form data...", style: { marginBottom: "20px" } })) : partnerLoadFailed ? (React.createElement("div", { style: {
                     textAlign: "center",
@@ -24320,6 +24392,7 @@ const SSASRegistrationForm = ({ config, }) => {
                         fontSize: mergedConfig.theme?.fonts?.sizes?.heading ||
                             24,
                         fontWeight: 700,
+                        lineHeight: 1.2,
                         marginBottom: 16,
                     } }, "Access Not Available"),
                 React.createElement("div", { style: {
@@ -24335,6 +24408,7 @@ const SSASRegistrationForm = ({ config, }) => {
                         fontSize: mergedConfig.theme?.fonts?.sizes?.heading ||
                             24,
                         fontWeight: 700,
+                        lineHeight: 1.2,
                         marginBottom: 16,
                     } }, "Domain Not Whitelisted"),
                 React.createElement("div", { style: {
@@ -24347,6 +24421,7 @@ const SSASRegistrationForm = ({ config, }) => {
                             fontSize: mergedConfig.theme?.fonts?.sizes
                                 ?.heading,
                             fontWeight: 700,
+                            lineHeight: 1.2,
                         } }, translation.AppForm),
                     React.createElement("div", { style: {
                             fontSize: mergedConfig.theme?.fonts?.sizes