xmlui 0.10.19 → 0.10.21

package/dist/scripts/src/components/Form/Form.spec.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const abstractions_1 = require("../abstractions");
 const fixtures_1 = require("../../testing/fixtures");
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
 // Test data constants
 const errorDisplayInterceptor = {
     initialize: `
@@ -177,6 +178,21 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const driver = yield createFormDriver("form");
             yield (0, fixtures_1.expect)(driver.component).toBeVisible();
         }));
+        (0, fixtures_1.test)("handles theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
+            const spaceBase = 0.25; //rem
+            const labelSize = 10;
+            const widthInPx = labelSize * spaceBase * 16; //px
+            yield initTestBed(`
+        <Theme space-base="${spaceBase}rem">
+          <Form itemLabelWidth="$space-${labelSize}">
+            <FormItem label="Test Label" bindTo="test" testId="testField" />
+          </Form>
+        </Theme>
+      `);
+            const driver = yield createFormItemDriver("testField");
+            const labelWidth = yield (0, component_test_helpers_1.getElementStyle)(driver.label, "width");
+            (0, fixtures_1.expect)(labelWidth).toBe(`${widthInPx}px`);
+        }));
     });
     // =============================================================================
     // ITEM LABEL BREAK TESTS
@@ -272,7 +288,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("onSuccess event fires on successful submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormDriver, }) {
             const { testStateDriver } = yield initTestBed(`
-        <Form 
+        <Form
           testId="form"
           submitUrl="/test-success"
           onSuccess="testState = 'success'; console.log('Submitted successfully')"
@@ -296,7 +312,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("onReset event fires when form is reset", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
             const { testStateDriver } = yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           onReset="testState = 'reset'"
           data="{{ name: 'Test' }}">
@@ -314,7 +330,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
     fixtures_1.test.describe("APIs", () => {
         (0, fixtures_1.test)("update method updates form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
             yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           data="{{ name: 'Original', age: 25 }}">
           <FormItem label="Name" bindTo="name" testId="nameField" />
@@ -334,7 +350,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("reset method resets form to initial state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
             yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           data="{{ name: 'Initial' }}">
           <FormItem label="Name" bindTo="name" testId="nameField" />
@@ -603,7 +619,7 @@ fixtures_1.test.describe("Edge Cases", () => {
     }));
     (0, fixtures_1.test)("handles form with empty string properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
-      <Form 
+      <Form
         cancelLabel=""
         saveLabel=""
         data="{{ name: '' }}">
@@ -829,8 +845,8 @@ fixtures_1.test.describe("Edge Cases", () => {
       </property>
     </Form>`);
     const driver = yield createFormDriver("form");
-    (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
-    (0, fixtures_1.expect)(driver.cancelButton).not.toBeVisible();
+    yield (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
+    yield (0, fixtures_1.expect)(driver.cancelButton).not.toBeVisible();
 }));
 (0, fixtures_1.test)("setting buttonRowTemplate without buttons still runs submit on Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
     const { testStateDriver } = yield initTestBed(`
@@ -1105,7 +1121,7 @@ fixtures_1.test.describe("Edge Cases", () => {
     yield formDriver.submitForm();
     yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
 }));
-fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver }) {
+fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
     yield initTestBed(`
       <Form testId="form">
         <FormItem testId="testField" bindTo="test" label="test" required />
@@ -1196,7 +1212,7 @@ const smartCrudInterceptor = {
     const formDriver = yield createFormDriver("modalForm");
     const inputElement = (yield createFormItemDriver("nameInput")).input;
     const inputDriver = yield createTextBoxDriver(inputElement);
-    (yield createButtonDriver("openModalButton")).click();
+    yield (yield createButtonDriver("openModalButton")).click();
     yield (0, fixtures_1.expect)(inputDriver.field).toHaveValue("Smith");
     yield inputDriver.field.fill("EDITED-Smith");
     yield formDriver.submitForm("click");

package/dist/scripts/src/components/Form/FormNative.js

@@ -45,6 +45,7 @@ const FormContext_1 = require("./FormContext");
 const lodash_es_1 = require("lodash-es");
 const classnames_1 = __importDefault(require("classnames"));
 const react_slot_1 = require("@radix-ui/react-slot");
+const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
 const PART_CANCEL_BUTTON = "cancelButton";
 const PART_SUBMIT_BUTTON = "submitButton";
 const getByPath = (obj, path) => {
@@ -204,7 +205,6 @@ function cleanUpSubject(subject) {
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
     var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
     const formRef = (0, react_2.useRef)(null);
-    (0, react_2.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;
@@ -241,7 +241,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
     ]);
     const doCancel = (0, misc_1.useEvent)(() => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-        requestModalFormClose();
+        void requestModalFormClose();
     });
     const doSubmit = (0, misc_1.useEvent)((event) => __awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -277,7 +277,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             dispatch((0, formActions_1.formSubmitted)());
             yield (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result));
             if (!keepModalOpenOnSubmit) {
-                requestModalFormClose();
+                void requestModalFormClose();
             }
             // we only reset the form automatically if the initial value is empty ()
             if (initialValue === constants_1.EMPTY_OBJECT) {
@@ -353,7 +353,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             update: updateData,
         });
     }, [doReset, updateData, registerComponentApi]);
-    let safeButtonRow = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) });
+    let safeButtonRow = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.createElement)("form", Object.assign({}, rest, { style: style, className: (0, classnames_1.default)(Form_module_scss_1.default.wrapper, className), onSubmit: doSubmit, onReset: doReset, id: id, key: formState.resetVersion, ref: formRef }),
                 (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
                 (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }),
@@ -395,7 +395,9 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
     const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
+    const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
+    const { cssProps: itemLabelWidthCssProps } = (0, layout_resolver_1.resolveLayoutProps)({ width: itemLabelWidth });
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
                 defaultHandler: submitUrl
                     ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
                     : undefined,

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -33,7 +33,9 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     description: "`FormItem` wraps individual input controls within a `Form`, providing data " +
         "binding, validation, labeling, and layout functionality. It connects form " +
         "controls to the parent form's data model and handles validation feedback " +
-        "automatically.",
+        "automatically." +
+        "\n\n" +
+        "> **Note:** `FormItem` must be used inside a `Form` component.",
     props: {
         bindTo: {
             description: "This property binds a particular input field to one of the attributes of the \`Form\` data. " +

package/dist/scripts/src/components/FormItem/FormItem.spec.js

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // BASIC FUNCTIONALITY TESTS
@@ -855,18 +854,10 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield input.field.blur();
         yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
     }));
-    fixtures_1.test.fixme("handles FormItem with no Form parent gracefully", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("If not inside a Form, FormItem renders error component - test should also account for this"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <FormItem testId="formItem" label="Standalone FormItem" />
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        // Component should either render with fallback behavior or be gracefully hidden
-        const isVisible = yield driver.component.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }
-        else {
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
+    (0, fixtures_1.test)("handles FormItem with no Form parent gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<FormItem label="Standalone FormItem" type="text" />`);
+        const field = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(field).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("[data-error-boundary]")).toBeVisible();
     }));
 });

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -112,15 +112,15 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             return safeBindTo;
         }
     }, [bindTo, defaultId, itemIndex, parentFormItemId]);
-    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
-    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
-    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
-    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
+    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || (value === null || value === void 0 ? void 0 : value.itemLabelWidth));
+    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value === null || value === void 0 ? void 0 : value.itemLabelBreak);
+    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || (value === null || value === void 0 ? void 0 : value.itemLabelPosition) || DEFAULT_LABEL_POSITIONS[type]);
+    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? initialValueFromProps : initialValueFromSubject;
-    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
-    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
-    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
-    const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.subject, formItemId));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.validationResults[formItemId]);
+    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.dispatch);
+    const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -217,6 +217,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
     }
     const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    const isInsideForm = (0, FormContext_1.useIsInsideForm)();
+    if (!isInsideForm) {
+        throw new Error("FormItem must be used inside a Form");
+    }
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, className: className, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&
                 (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && !!singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && !!singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }));
 });

package/dist/scripts/src/components/FormItem/Validations.js

@@ -273,7 +273,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
         if (!ignore) {
             dispatch((0, formActions_1.fieldValidated)(bindTo, partialResult));
             if (partialResult.partial) {
-                (() => __awaiter(this, void 0, void 0, function* () {
+                void (() => __awaiter(this, void 0, void 0, function* () {
                     const result = yield throttledAsyncValidate(validations, onValidate, deferredValue);
                     if (!ignore) {
                         // console.log(`async validation result for ${bindTo}`, result);
@@ -288,7 +288,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
     }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
 }
 function useValidationDisplay(bindTo, value, validationResult, validationMode = FormContext_1.defaultValidationMode) {
-    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
+    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
     const forceShowValidationResult = interactionFlags.forceShowValidationResult;
     const focused = interactionFlags.focused;
     const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;

package/dist/scripts/src/components/IFrame/IFrameNative.js

@@ -22,8 +22,6 @@ const IFrame_module_scss_1 = __importDefault(require("./IFrame.module.scss"));
 exports.IFrame = (0, react_1.memo)((0, react_1.forwardRef)(function IFrame(_a, ref) {
     var { src, srcdoc, allow, name, referrerPolicy, sandbox, style, className, onLoad, registerComponentApi } = _a, rest = __rest(_a, ["src", "srcdoc", "allow", "name", "referrerPolicy", "sandbox", "style", "className", "onLoad", "registerComponentApi"]);
     const iframeRef = (0, react_1.useRef)(null);
-    // Expose the iframe element to parent via ref
-    (0, react_1.useImperativeHandle)(ref, () => iframeRef.current, []);
     // Register component APIs
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({

package/dist/scripts/src/components/IconRegistryContext.js

@@ -293,7 +293,7 @@ function useCustomSvgIconRenderer(resourceUrl) {
         if (!resourceUrl) {
             return;
         }
-        ensureCustomSvgIcon(resourceUrl);
+        void ensureCustomSvgIcon(resourceUrl);
     }, [ensureCustomSvgIcon, resourceUrl]);
     const customSvg = resourceUrl ? customSvgs[resourceUrl] : null;
     const iconRenderer = (0, react_1.useCallback)(({ style, className }) => {

package/dist/scripts/src/components/List/ListNative.js

@@ -293,7 +293,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
             !pageInfo.isFetchingPrevPage &&
             !isFetchingPrevPage.current) {
             isFetchingPrevPage.current = true;
-            (function doFetch() {
+            void (function doFetch() {
                 return __awaiter(this, void 0, void 0, function* () {
                     try {
                         yield requestFetchPrevPage();
@@ -314,7 +314,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
             !pageInfo.isFetchingNextPage &&
             !isFetchingNextPage.current) {
             isFetchingNextPage.current = true;
-            (function doFetch() {
+            void (function doFetch() {
                 return __awaiter(this, void 0, void 0, function* () {
                     try {
                         yield requestFetchNextPage();

package/dist/scripts/src/components/ModalDialog/ConfirmationModalContextProvider.js

@@ -32,15 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmationModalContextProvider = exports.useConfirm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -49,7 +40,7 @@ const ButtonNative_1 = require("../Button/ButtonNative");
 const StackNative_1 = require("../Stack/StackNative");
 const Dialog_1 = require("./Dialog");
 const ConfirmationModalContext = react_1.default.createContext({
-    confirm: (title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () { return false; }),
+    confirm: (title, message, actionLabel) => Promise.resolve(false),
 });
 const useConfirm = () => (0, react_1.useContext)(ConfirmationModalContext);
 exports.useConfirm = useConfirm;
@@ -73,7 +64,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
             }, 0);
         }
     }, [showConfirmationModal]);
-    const handleShow = (0, react_1.useCallback)((title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleShow = (0, react_1.useCallback)((title, message, actionLabel) => {
         if (typeof title === "string") {
             setTitle(title);
             setButtons([
@@ -93,7 +84,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
         return new Promise(function (resolve) {
             resolver.current = resolve;
         });
-    }), []);
+    }, []);
     const handleOk = (0, react_1.useCallback)((value) => {
         if (resolver.current) {
             resolver.current(value);

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -25,7 +25,7 @@ exports.ModalDialogMd = (0, metadata_helpers_1.createMetadata)({
         },
         title: {
             description: "The title area of the modal dialog.",
-        }
+        },
     },
     props: {
         fullScreen: {
@@ -81,5 +81,5 @@ exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams } }));
             } }));
     }
-    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), children: renderChild(node.children, { type: "Stack" }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), externalAnimation: extractValue.asOptionalBoolean(node.props.externalAnimation), children: renderChild(node.children, { type: "Stack" }) }));
 });

package/dist/scripts/src/components/ModalDialog/ModalDialogNative.js

@@ -130,7 +130,7 @@ function useModalOpenState(isInitiallyOpen = true, onOpen, onClose) {
     return modalStateContext || modalLocalOpenState;
 }
 exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
-    var { children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, className, onOpen, onClose } = _a, rest = __rest(_a, ["children", "style", "isInitiallyOpen", "fullScreen", "title", "closeButtonVisible", "className", "onOpen", "onClose"]);
+    var { children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, className, onOpen, onClose, externalAnimation = true } = _a, rest = __rest(_a, ["children", "style", "isInitiallyOpen", "fullScreen", "title", "closeButtonVisible", "className", "onOpen", "onClose", "externalAnimation"]);
     const { root } = (0, ThemeContext_1.useTheme)();
     // NOTE: at this point, we can't use useAppContext here,
     // since the ModalDialog context provider (via ConfirmationModalContextProvider) is mounted outside of the AppContext,
@@ -180,9 +180,12 @@ exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
     if (!root) {
         return null;
     }
-    const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, Object.assign({}, rest, { "data-part-id": PART_CONTENT, className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content, className), onPointerDownOutside: (event) => {
+    const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, Object.assign({}, rest, { "data-part-id": PART_CONTENT, className: (0, classnames_1.default)({
+            [ModalDialog_module_scss_1.default.contentAnimation]: !externalAnimation,
+        }, ModalDialog_module_scss_1.default.content, className), onPointerDownOutside: (event) => {
             if (event.target instanceof Element &&
-                (event.target.closest("._debug-inspect-button") !== null || event.target.localName === "com-1password-button")) {
+                (event.target.closest("._debug-inspect-button") !== null ||
+                    event.target.localName === "com-1password-button")) {
                 //we prevent the auto modal close on clicking the inspect button
                 event.preventDefault();
             }

package/dist/scripts/src/components/NestedApp/AppWithCodeViewNative.js

@@ -70,7 +70,7 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
                                                         [NestedApp_module_scss_1.default.show]: !showCode,
                                                         [NestedApp_module_scss_1.default.hide]: showCode,
                                                     }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, style: { width: controlsWidth }, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
-                                                    openPlayground();
+                                                    void openPlayground();
                                                 }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                                     setShowCode(false);
                                                     setRefreshVersion(refreshVersion + 1);

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -137,7 +137,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                 return null;
             }));
             // When your component mounts and the shadow root is available...
-            Promise.all(sheetPromises).then((sheets) => {
+            void Promise.all(sheetPromises).then((sheets) => {
                 // Filter out any sheets that failed to load
                 const validSheets = sheets.filter(Boolean);
                 // Apply the array of constructed stylesheets to the shadow root
@@ -217,7 +217,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                     [NestedApp_module_scss_1.default.initialized]: initialized,
                 }) })] }));
 }
-function NestedAppRoot({ children, themeStylesToReset }) {
+function NestedAppRoot({ children, themeStylesToReset, }) {
     // css variables are leaking into to shadow dom, so we reset them here
     const themeVarReset = (0, react_1.useMemo)(() => {
         const vars = {};
@@ -227,5 +227,5 @@ function NestedAppRoot({ children, themeStylesToReset }) {
         return vars;
     }, [themeStylesToReset]);
     const resetClassName = (0, StyleContext_1.useStyles)(themeVarReset, { prepend: true });
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(resetClassName, NestedApp_module_scss_1.default.shadowRoot), id: "nested-app-root", children: (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.content, children: children }) });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(resetClassName, NestedApp_module_scss_1.default.shadowRoot), id: "nested-app-root", children: (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.content, children: children }) }));
 }

package/dist/scripts/src/components/NumberBox/NumberBox.spec.js

@@ -201,9 +201,9 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield initTestBed(`<NumberBox zeroOrPositive="true" initialValue="1" />`);
         const driver = yield createNumberBoxDriver();
         yield driver.decrement();
-        (0, fixtures_1.expect)(driver.input).toHaveValue("0");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
         yield driver.decrement();
-        (0, fixtures_1.expect)(driver.input).toHaveValue("0");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
     }));
     // --- Range validation (min/max)
     (0, fixtures_1.test)("minValue prevents values below minimum spinner button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {

package/dist/scripts/src/components/Pagination/Pagination.spec.js

@@ -634,6 +634,11 @@ fixtures_1.test.describe("Accessibility", () => {
         yield page.keyboard.press("Tab");
         yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeFocused();
     }));
+    (0, fixtures_1.test)("page size selector is focused when label is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}"/>`);
+        yield page.getByText("Items per page").click();
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeFocused();
+    }));
 });
 // =============================================================================
 // INTERACTION TESTS

package/dist/scripts/src/components/Pagination/PaginationNative.js

@@ -140,9 +140,7 @@ exports.PaginationNative = (0, react_1.forwardRef)(function PaginationNative(_a,
                 visiblePages.map((pageNum) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: pageNum === currentPageNumber ? "solid" : "ghost", disabled: !enabled, size: "sm", onClick: () => handlePageChange(pageNum - 1), contextualLabel: `Page ${pageNum}`, "aria-current": pageNum === currentPageNumber || undefined, "aria-label": `Page ${pageNum}${pageNum === currentPageNumber ? " (current)" : ""}`, children: pageNum }) }, `page-${pageNum}`))), visiblePages.length <= 2 && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "sm", disabled: !enabled || isLastPage, onClick: () => handlePageChange(currentPage + 1), contextualLabel: "Next page", style: { minHeight: "36px", padding: "8px" }, "aria-label": "Next page", children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: `next:Pagination`, fallback: orientation === "vertical" ? "chevrondown" : "chevronright", size: "sm" }) }) })), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "sm", disabled: !enabled || isLastPage, onClick: () => handlePageChange(totalPages - 1), contextualLabel: "Last page", style: { minHeight: "36px", padding: "8px" }, "aria-label": "Last page", children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: `last:Pagination`, fallback: orientation === "vertical" ? "doublechevrondown" : "doublechevronright", size: "sm" }) }) })] }));
     const pageSizeSelector = showPageSizeSelector &&
         pageSizeOptions &&
-        pageSizeOptions.length > 1 && ((0, jsx_runtime_1.jsx)("div", { "data-component": `page-size-selector-container`, className: (0, classnames_1.default)(Pagination_module_scss_1.default.selectorContainer), children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: `${id}-page-size-selector`, label: "Items per page", enabled: enabled, style: style, className: className, labelPosition: orientation === "vertical" ? "top" : "start", 
-            // NOTE: This is a band-aid solution to handle the multiple IDs issue - remove after resolving focus bug
-            isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("select", { id: `${id}-page-size-selector`, value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), disabled: !enabled, className: Pagination_module_scss_1.default.pageSizeSelect, children: pageSizeOptions.map((size) => ((0, jsx_runtime_1.jsx)("option", { value: size, children: size }, size))) }) }) }));
+        pageSizeOptions.length > 1 && ((0, jsx_runtime_1.jsx)("div", { "data-component": `page-size-selector-container`, className: (0, classnames_1.default)(Pagination_module_scss_1.default.selectorContainer), children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: `${id}-page-size-selector`, label: "Items per page", enabled: enabled, style: style, className: className, labelPosition: orientation === "vertical" ? "top" : "start", children: (0, jsx_runtime_1.jsx)("select", { id: `${id}-page-size-selector`, value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), disabled: !enabled, className: Pagination_module_scss_1.default.pageSizeSelect, children: pageSizeOptions.map((size) => ((0, jsx_runtime_1.jsx)("option", { value: size, children: size }, size))) }) }) }));
     const pageInfo = showPageInfo && ((0, jsx_runtime_1.jsx)("div", { "data-component": `page-info`, className: (0, classnames_1.default)(Pagination_module_scss_1.default.pageInfo), children: (0, jsx_runtime_1.jsxs)(TextNative_1.Text, { variant: "secondary", children: ["Page ", currentPageNumber, " of ", totalPages, " (", itemCount, " items)"] }) }));
     // Used the following resource to provide a11y:
     // https://a11ymatters.com/pattern/pagination/