@descope-ui/descope-multi-line-mappings 3.11.8 → 3.12.0

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@descope-ui/descope-multi-line-mappings",
-  "version": "3.11.8",
+  "version": "3.12.0",
+  "files": [
+    "src",
+    "stories"
+  ],
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,15 +18,15 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.11.8",
-    "test-drivers": "3.11.8"
+    "e2e-utils": "3.12.0",
+    "test-drivers": "3.12.0"
   },
   "dependencies": {
-    "@descope-ui/common": "3.11.8",
-    "@descope-ui/descope-button": "3.11.8",
-    "@descope-ui/descope-multi-select-combo-box": "3.11.8",
-    "@descope-ui/theme-globals": "3.11.8",
-    "@descope-ui/theme-input-wrapper": "3.11.8"
+    "@descope-ui/common": "3.12.0",
+    "@descope-ui/descope-button": "3.12.0",
+    "@descope-ui/theme-input-wrapper": "3.12.0",
+    "@descope-ui/theme-globals": "3.12.0",
+    "@descope-ui/descope-multi-select-combo-box": "3.12.0"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/.eslintrc.json

@@ -1,32 +0,0 @@
-{
-  "extends": ["../../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.spec.ts", "*.spec.tsx"],
-      "env": {
-        "browser": true
-      },
-      "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": [
-          "error",
-          {
-            "ignoredFiles": [
-              "{projectRoot}/eslint.config.{js,cjs,mjs}",
-              "{projectRoot}/rollup.config.{js,ts,mjs,mts}"
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}

package/CHANGELOG.md

@@ -1,48 +0,0 @@
-# Changelog
-
-This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
-
-## [3.11.8](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.7...web-components-ui-3.11.8) (2026-05-25)
-
-## [3.11.7](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.6...web-components-ui-3.11.7) (2026-05-25)
-
-## [3.11.6](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.5...web-components-ui-3.11.6) (2026-05-24)
-
-## [3.11.5](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.4...web-components-ui-3.11.5) (2026-05-21)
-
-## [3.11.4](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.3...web-components-ui-3.11.4) (2026-05-20)
-
-## [3.11.3](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.2...web-components-ui-3.11.3) (2026-05-19)
-
-## [3.11.2](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.1...web-components-ui-3.11.2) (2026-05-19)
-
-
-### Bug Fixes
-
-* **tooltip-wrapped:** sync stretch attr and hidden class for tooltip-wrapped components ([#1032](https://github.com/descope/web-components-ui/issues/1032)) ([669468f](https://github.com/descope/web-components-ui/commit/669468fd1cb8ff9a50b58e380a442c9c1e6e2b96))
-
-## [3.11.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.0...web-components-ui-3.11.1) (2026-05-19)
-
-
-### Bug Fixes
-
-* **multi-line-mappings:** stabilize e2e screenshot tests by waiting for combo visibility ([#1034](https://github.com/descope/web-components-ui/issues/1034)) ([1201d82](https://github.com/descope/web-components-ui/commit/1201d82107d990f143ac2c9d4a75964111317fe9))
-
-## [3.11.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.10.2...web-components-ui-3.11.0) (2026-05-19)
-
-## [3.10.2](https://github.com/descope/web-components-ui/compare/web-components-ui-3.10.1...web-components-ui-3.10.2) (2026-05-19)
-
-## [3.10.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.10.0...web-components-ui-3.10.1) (2026-05-18)
-
-## [3.10.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.9.2...web-components-ui-3.10.0) (2026-05-17)
-
-## [3.9.2](https://github.com/descope/web-components-ui/compare/web-components-ui-3.9.1...web-components-ui-3.9.2) (2026-05-17)
-
-## [3.9.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.9.0...web-components-ui-3.9.1) (2026-05-17)
-
-## [3.9.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.8.0...web-components-ui-3.9.0) (2026-05-17)
-
-
-### Features
-
-* added multi line mappings component ([#978](https://github.com/descope/web-components-ui/issues/978)) ([544552f](https://github.com/descope/web-components-ui/commit/544552f474430f7a9317e268979fb94694f6249a))

package/e2e/descope-multi-line-mappings.spec.ts

@@ -1,465 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { createMultiLineMappingsTestDriver } from 'test-drivers';
-import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
-
-const storyName = 'descope-multi-line-mappings';
-const componentName = 'descope-multi-line-mappings';
-
-test.describe('theme', () => {
-  test('default', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}));
-    await page.waitForSelector(componentName);
-    await page.waitForTimeout(500);
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    expect(
-      await component.screenshot({
-        animations: 'disabled',
-        timeout: 3000,
-        caret: 'hide',
-      }),
-    ).toMatchSnapshot();
-  });
-
-  loopConfig(
-    {
-      size: ['xs', 'sm', 'lg'],
-      'full-width': ['true'],
-      direction: ['rtl'],
-      disabled: ['true'],
-      readonly: ['true'],
-    },
-    (attr, value) => {
-      test(`${attr}: ${value}`, async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, { [attr]: value }));
-        await page.waitForSelector(componentName);
-        await page.waitForTimeout(500);
-        const component = createMultiLineMappingsTestDriver(
-          page.locator(componentName),
-        );
-        expect(
-          await component.screenshot({
-            animations: 'disabled',
-            timeout: 3000,
-            caret: 'hide',
-          }),
-        ).toMatchSnapshot();
-      });
-    },
-  );
-
-  loopPresets(
-    { 'with labels': { 'first-label': 'Source', 'second-label': 'Target' } },
-    (preset, name) => {
-      test(name, async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, preset));
-        await page.waitForSelector(componentName);
-        await page.waitForTimeout(500);
-        const component = createMultiLineMappingsTestDriver(
-          page.locator(componentName),
-        );
-        expect(
-          await component.screenshot({
-            animations: 'disabled',
-            timeout: 3000,
-            caret: 'hide',
-          }),
-        ).toMatchSnapshot();
-      });
-    },
-  );
-
-  test('with placeholders', async ({ page }) => {
-    await page.goto(
-      getStoryUrl(storyName, {
-        'first-placeholder': 'Select tenant',
-        'second-placeholder': 'Select role',
-      }),
-    );
-    await page.waitForSelector(componentName);
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([]);
-    await page.waitForTimeout(500);
-    expect(
-      await component.screenshot({
-        animations: 'disabled',
-        timeout: 3000,
-        caret: 'hide',
-      }),
-    ).toMatchSnapshot();
-  });
-
-  test('multiple rows', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}));
-    await page.waitForSelector(componentName);
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-      { firstValues: 'tenant-b', secondValues: ['editor'] },
-    ]);
-    await page.waitForTimeout(500);
-    expect(
-      await component.screenshot({
-        animations: 'disabled',
-        timeout: 3000,
-        caret: 'hide',
-      }),
-    ).toMatchSnapshot();
-  });
-});
-
-test.describe('logic', () => {
-  test('setting value updates combo selections', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    await page.waitForTimeout(500);
-
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    const value = await component.getValue();
-    expect(value).toStrictEqual([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-    ]);
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test.fixme('add row button adds a new empty row', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.addButton.click();
-
-    expect(await component.rows.count()).toBe(2);
-    await component.getRow(1).firstCombo.locator.waitFor({ state: 'visible' });
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('remove button removes the correct row', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-      { firstValues: 'tenant-b', secondValues: ['editor'] },
-    ]);
-    await page.waitForTimeout(200);
-
-    await component.getRow(0).removeButton.click();
-
-    expect(await component.rows.count()).toBe(1);
-    const value = await component.getValue();
-    expect(value[0].firstValues).toBe('tenant-b');
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('remove button is hidden when there is only one row', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    expect(await component.getRow(0).removeButton.isHidden()).toBe(true);
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('add button is disabled when max rows is reached', async ({ browserName, page }) => {
-    test.skip(browserName === 'webkit');
-
-    await page.goto(getStoryUrl(storyName, { 'max-rows': '2' }), {
-      waitUntil: 'networkidle',
-    });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.addButton.click();
-
-    expect(await component.rows.count()).toBe(2);
-    expect(await component.addButton.getAttribute('disabled')).toBe('true');
-    await component.getRow(1).firstCombo.locator.waitFor({ state: 'visible' });
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('second combo options is intersection of all when no first value selected', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-    await page.waitForTimeout(200);
-
-    const { secondCombo } = component.getRow();
-    await secondCombo.openDropdown();
-    expect(await secondCombo.getItems()).toStrictEqual(['viewer']); // intersection of all tenants
-  });
-
-  test('selecting a first value filters second combo options', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-    await page.waitForTimeout(200);
-
-    const { firstCombo, secondCombo } = component.getRow();
-
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-a');
-    await firstCombo.closeDropdown();
-
-    await secondCombo.openDropdown();
-    expect(await secondCombo.getItems()).toStrictEqual([
-      'viewer',
-      'editor',
-      'admin',
-    ]);
-
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('selecting multiple first values shows intersection in second combo options', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-    await page.waitForTimeout(200);
-
-    const { firstCombo, secondCombo } = component.getRow();
-
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-a'); // viewer, editor, admin
-    await firstCombo.selectItem('tenant-b'); // viewer, editor
-    await firstCombo.closeDropdown();
-
-    await secondCombo.openDropdown();
-    expect(await secondCombo.getItems()).toStrictEqual(['viewer', 'editor']); // intersection
-  });
-
-  test('selecting a role unique to a tenant, adding another tenant removes it, removing the tenant restores it', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-    await page.waitForTimeout(200);
-
-    const { firstCombo, secondCombo } = component.getRow();
-
-    // Select tenant-c which has the unique role: auditor
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-c');
-    await firstCombo.closeDropdown();
-
-    // Select auditor
-    await secondCombo.openDropdown();
-    await secondCombo.selectItem('auditor');
-    await secondCombo.closeDropdown();
-    expect(await component.getValue()).toStrictEqual([
-      { firstValues: 'tenant-c', secondValues: ['auditor'] },
-    ]);
-
-    // Add tenant-b — auditor is not in its options, so it is dropped from second selection
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-b');
-    await firstCombo.closeDropdown();
-    await page.waitForTimeout(100);
-
-    expect(await component.getValue()).toStrictEqual([
-      { firstValues: 'tenant-c', secondValues: [] },
-      { firstValues: 'tenant-b', secondValues: [] },
-    ]);
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-
-    // Remove tenant-b — auditor should be available again
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-b'); // deselect
-    await firstCombo.closeDropdown();
-    await page.waitForTimeout(100);
-
-    await secondCombo.openDropdown();
-    expect(await secondCombo.getItems()).toContain('auditor');
-
-    await secondCombo.selectItem('auditor');
-    await secondCombo.closeDropdown();
-    expect(await component.getValue()).toStrictEqual([
-      { firstValues: 'tenant-c', secondValues: ['auditor'] },
-    ]);
-    expect(
-      await component.screenshot({ animations: 'disabled', caret: 'hide' }),
-    ).toMatchSnapshot();
-  });
-
-  test('custom value keys are used in component value', async ({ page }) => {
-    await page.goto(
-      getStoryUrl(storyName, {
-        'first-value-key': 'tenants',
-        'second-value-key': 'roles',
-      }),
-      { waitUntil: 'networkidle' },
-    );
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ tenants: '', roles: [] }]);
-    await page.waitForTimeout(200);
-
-    const { firstCombo, secondCombo } = component.getRow();
-
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-a');
-    await firstCombo.closeDropdown();
-    await secondCombo.openDropdown();
-    await secondCombo.selectItem('viewer');
-
-    expect(await component.getValue()).toStrictEqual([
-      { tenants: 'tenant-a', roles: ['viewer'] },
-    ]);
-  });
-
-  test('dispatches input event when value changes', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-
-    await page.evaluate((name) => {
-      (window as any).__inputFired = false;
-      document.querySelector(name)!.addEventListener('input', () => {
-        (window as any).__inputFired = true;
-      });
-    }, componentName);
-
-    const { firstCombo } = component.getRow();
-    await firstCombo.openDropdown();
-    await firstCombo.selectItem('tenant-a');
-
-    expect(await page.evaluate(() => (window as any).__inputFired)).toBe(true);
-  });
-
-  test('empty rows are omitted from value', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-
-    expect(await component.getValue()).toStrictEqual([]);
-  });
-
-  test('only non-empty rows are included in value', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.setValue([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-      { firstValues: '', secondValues: [] },
-    ]);
-    await page.waitForTimeout(200);
-
-    expect(await component.getValue()).toStrictEqual([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-    ]);
-  });
-
-  test('adding a row does not fire an input event', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await page.evaluate((name) => {
-      (window as any).__inputFired = false;
-      document.querySelector(name)!.addEventListener('input', () => {
-        (window as any).__inputFired = true;
-      });
-    }, componentName);
-
-    await component.addButton.click();
-
-    expect(await page.evaluate(() => (window as any).__inputFired)).toBe(false);
-  });
-
-  test('removing an empty row does not fire an input event', async ({
-    page,
-  }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.setValue([{ firstValues: '', secondValues: [] }]);
-    await component.addButton.click();
-
-    await page.evaluate((name) => {
-      (window as any).__inputFired = false;
-      document.querySelector(name)!.addEventListener('input', () => {
-        (window as any).__inputFired = true;
-      });
-    }, componentName);
-
-    await component.getRow(0).removeButton.click();
-
-    expect(await page.evaluate(() => (window as any).__inputFired)).toBe(false);
-  });
-
-  test('removing a non-empty row fires an input event', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}), { waitUntil: 'networkidle' });
-    const component = createMultiLineMappingsTestDriver(
-      page.locator(componentName),
-    );
-
-    await component.setValue([
-      { firstValues: 'tenant-a', secondValues: ['viewer'] },
-      { firstValues: 'tenant-b', secondValues: ['editor'] },
-    ]);
-    await page.waitForTimeout(200);
-
-    await page.evaluate((name) => {
-      (window as any).__inputFired = false;
-      document.querySelector(name)!.addEventListener('input', () => {
-        (window as any).__inputFired = true;
-      });
-    }, componentName);
-
-    await component.getRow(0).removeButton.click();
-
-    expect(await page.evaluate(() => (window as any).__inputFired)).toBe(true);
-  });
-});

package/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "@descope-ui/descope-multi-line-mappings",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/web-components/components/descope-multi-line-mappings/src",
-  "projectType": "library",
-  "targets": {},
-  "tags": []
-}