@cratis/scene.components 1.0.0 → 2.0.0

package/editors/for_SceneObjectNavigationalBar/when_navigating_back_up_the_trail.tsx

@@ -2,13 +2,25 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { fireEvent, render, screen } from '@testing-library/react';
+import { PrimeReactProvider } from '@primereact/core';
 import { externalComponent } from '../../given';
 import { SceneObjectNavigationalBar } from '../SceneObjectNavigationalBar';
 
 describe('when navigating back up the trail', () => {
+    /**
+     * The `PrimeReactProvider` became mandatory with PrimeReact 11: every v11 component bottoms out in
+     * `usePrimeReact()`, which throws when the context is absent rather than falling back to a default
+     * configuration. The bar reaches one through the tooltip on its crumbs, so without this the spec fails
+     * at `render` with a provider error instead of exercising the trail at all. No preset is supplied -
+     * what is specified here is the navigation behavior, not how a crumb looks.
+     */
     beforeEach(() => {
         const element = externalComponent('Cratis.Components:objectNavigationalBar', { navigationPath: ['shipping', 'address', 'street'] });
-        render(<SceneObjectNavigationalBar element={element} slots={{}} />);
+        render(
+            <PrimeReactProvider>
+                <SceneObjectNavigationalBar element={element} slots={{}} />
+            </PrimeReactProvider>
+        );
         fireEvent.click(screen.getByText('address'));
     });
 

package/for_cratisComponentsPackage/when_resolving_its_dependencies.ts

@@ -21,17 +21,27 @@ const tailwind: ScenePackage = {
     themes: [],
 };
 
-/** The base component library `Cratis.Components` wraps, at the version this repository pins. */
+/**
+ * The base component library `Cratis.Components` wraps, at the version this repository pins.
+ *
+ * The theme names are drawn from the catalog PrimeReact 11 actually has. Version 11 ships no theme
+ * stylesheets at all - a look is a `@primeuix/themes` preset applied at runtime - and the catalog was
+ * rebuilt on those presets, so names read `<family>-<light|dark>-<accent>` across the Aura, Lara and Nora
+ * families. Several version 10 names (`saga-*`, `vela-*`, `soho-*`, `nano`, `mira` and the rest) have no
+ * preset behind them any more and are simply gone; the Lara pair below survived the rebuild, and an Aura
+ * pair is listed alongside them so the stub is visibly the version 11 catalog rather than a version 10
+ * remnant that happens to still be valid.
+ */
 const primeReact: ScenePackage = {
     name: 'PrimeReact',
-    version: '10.9.8',
+    version: '11.1.0',
     kind: PackageKind.ComponentLibrary,
     dependencies: [{ name: 'Tailwind' }],
     components: ['button', 'table', 'dialog'],
     layouts: [],
     screenTemplates: [],
     dialogTemplates: [],
-    themes: ['lara-light-blue', 'lara-dark-blue'],
+    themes: ['aura-light-blue', 'aura-dark-blue', 'lara-light-blue', 'lara-dark-blue'],
 };
 
 describe('when resolving its dependencies', () => {
@@ -57,12 +67,12 @@ describe('when resolving its dependencies', () => {
             ]));
     });
 
-    describe('and PrimeReact is older than the range the token layer needs', () => {
-        const older = resolvePackageDependencies(['Cratis.Components'], [tailwind, { ...primeReact, version: '10.8.0' }, cratisComponentsPackageManifest]);
+    describe('and PrimeReact is older than the major version the library is built against', () => {
+        const older = resolvePackageDependencies(['Cratis.Components'], [tailwind, { ...primeReact, version: '10.9.8' }, cratisComponentsPackageManifest]);
 
         it('should report the version conflict', () =>
             older.versionConflicts.should.deep.equal([
-                { package: 'Cratis.Components', dependsOn: 'PrimeReact', requiredRange: '>=10.9.0', actualVersion: '10.8.0' },
+                { package: 'Cratis.Components', dependsOn: 'PrimeReact', requiredRange: '>=11.0.0', actualVersion: '10.9.8' },
             ]));
     });
 });

package/forms/fields/SceneChipsField.tsx

@@ -14,6 +14,12 @@ const ChipsField = lazy(async () => ({ default: (await import('@cratis/component
  * A free-form list of strings - tags, labels, recipients - where the values are typed rather than picked.
  * `multiSelectField` is the right choice whenever the values come from a known set; this one exists for
  * when they do not.
+ *
+ * There is no `separator` property. PrimeReact 11's `InputTags` commits exactly one tag per `Enter` and
+ * no longer splits pasted text, so `@cratis/components` keeps the prop only so existing call sites
+ * compile and never reads it. A screen that wrote `separator: ','` and watched a pasted comma-separated
+ * list arrive as a single tag would have no way to tell that from a bug, which is precisely why the
+ * property is withdrawn rather than passed through.
  */
 export function SceneChipsField({ element }: RegisteredComponentProps) {
     return (
@@ -23,7 +29,6 @@ export function SceneChipsField({ element }: RegisteredComponentProps) {
                     {...binding}
                     placeholder={stringProperty(element.properties, 'placeholder')}
                     max={numberProperty(element.properties, 'max')}
-                    separator={stringProperty(element.properties, 'separator')}
                     addOnBlur={booleanProperty(element.properties, 'addOnBlur')}
                     allowDuplicate={booleanProperty(element.properties, 'allowDuplicate')}
                     className={stringProperty(element.properties, 'className')}

package/forms/fields/SceneMultiSelectField.tsx

@@ -3,20 +3,24 @@
 
 import { lazy } from 'react';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { booleanProperty, numberProperty, objectArrayProperty, stringProperty, unionProperty } from '../../properties';
+import { booleanProperty, objectArrayProperty, stringProperty } from '../../properties';
 import { CommandFormField } from './CommandFormField';
 
 const MultiSelectField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).MultiSelectField }));
 
-/** How the current selection is summarized in the closed control. */
-const displayModes = ['comma', 'chip'] as const;
-
 /**
  * The `Cratis.Components:multiSelectField` component - `MultiSelectField` from
  * `@cratis/components/CommandForm`.
  *
  * The many-valued counterpart to `dropdownField`, binding to a collection property on the command rather
  * than a scalar one.
+ *
+ * The `display` and `maxSelectedLabels` properties this adapter used to expose are gone. In
+ * `@cratis/components` 3.0.0 the field is re-expressed over the library's own `Dropdown` in multiple
+ * mode, because PrimeReact 11's `Select` has no `multiple` prop of the version 10 shape and renders the
+ * selection through its own value slot - so there is no comma mode, no chip mode, and no label-collapse
+ * threshold left to choose between. Both props are still declared upstream so call sites compile, and
+ * neither is read. Passing them on would have let a screen state a preference the control cannot honor.
  */
 export function SceneMultiSelectField({ element }: RegisteredComponentProps) {
     return (
@@ -28,8 +32,6 @@ export function SceneMultiSelectField({ element }: RegisteredComponentProps) {
                     optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}
                     optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}
                     placeholder={stringProperty(element.properties, 'placeholder')}
-                    display={unionProperty(element.properties, 'display', displayModes)}
-                    maxSelectedLabels={numberProperty(element.properties, 'maxSelectedLabels')}
                     filter={booleanProperty(element.properties, 'filter')}
                     showClear={booleanProperty(element.properties, 'showClear')}
                     className={stringProperty(element.properties, 'className')}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.components",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "description": "The Cratis Components package: exposes @cratis/components' Arc-bound data, form and dialog composites as Scene components. Built on PrimeReact and Tailwind, and declares both as dependencies.",
     "author": "Cratis",
     "license": "MIT",
@@ -42,27 +42,33 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "1.0.0",
-        "@cratis/scene.model": "1.0.0",
-        "@cratis/scene.react": "1.0.0"
+        "@cratis/scene.engine": "2.0.0",
+        "@cratis/scene.model": "2.0.0",
+        "@cratis/scene.react": "2.0.0"
     },
     "devDependencies": {
-        "@cratis/components": "^2.8.1",
-        "@cratis/scene.engine": "1.0.0",
-        "@cratis/scene.model": "1.0.0",
-        "@cratis/scene.react": "1.0.0",
+        "@cratis/components": "^3.0.0",
+        "@cratis/scene.engine": "2.0.0",
+        "@cratis/scene.model": "2.0.0",
+        "@cratis/scene.react": "2.0.0",
+        "@primereact/core": "11.1.0",
+        "@primereact/headless": "11.1.0",
         "@storybook/addon-links": "^10.4.1",
         "@storybook/react": "^10.4.1",
         "@storybook/react-vite": "^10.4.1",
-        "primereact": "10.9.8",
+        "primeicons": "8.0.0",
+        "primereact": "11.1.0",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "storybook": "^10.4.1"
     },
     "peerDependencies": {
-        "@cratis/components": ">=2.8.1 <3",
-        "primereact": "^10.9.0",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "@cratis/components": "^3.0.0",
+        "@primereact/core": "^11.0.0",
+        "@primereact/headless": "^11.0.0",
+        "primeicons": "^8.0.0",
+        "primereact": "^11.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     }
 }

package/pages/SceneDataPage.tsx

@@ -4,20 +4,24 @@
 import { lazy } from 'react';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
-import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+import { stringArrayProperty, stringProperty } from '../properties';
 
 const DataPage = lazy(async () => ({ default: (await import('@cratis/components/DataPage')).DataPage }));
 
 /**
  * The `Cratis.Components:dataPage` component - `DataPage` from `@cratis/components/DataPage`.
  *
- * The library's whole list-screen composite in one name: title bar, menubar, filterable table and
+ * The library's whole list-screen composite in one name: title bar, action toolbar, filterable table and
  * optional details pane, all driven from a single query. It is the single highest-leverage thing this
  * package exposes, because reproducing it out of `table` and `toolbar` in a screen would be pages of
  * modeling for a worse result.
  *
  * The `query` property names an Arc query proxy; the columns and menu items come from the `content`
  * slot as `DataPage.Columns` / `DataPage.MenuItems` children.
+ *
+ * No `clientFiltering` property, for the same reason `dataTable` no longer exposes one: 3.0.0 keeps the
+ * prop so call sites compile but never reads it, and a screen setting that cannot take effect is a worse
+ * thing to offer than nothing.
  */
 export function SceneDataPage({ element, slots }: RegisteredComponentProps) {
     const { name, target } = resolveElementBinding(element, BindingKind.Query);
@@ -31,7 +35,6 @@ export function SceneDataPage({ element, slots }: RegisteredComponentProps) {
                 emptyMessage={stringProperty(element.properties, 'emptyMessage') ?? ''}
                 dataKey={stringProperty(element.properties, 'dataKey')}
                 globalFilterFields={stringArrayProperty(element.properties, 'globalFilterFields')}
-                clientFiltering={booleanProperty(element.properties, 'clientFiltering')}
             >
                 {slots.content}
             </DataPage>