@panneau/fields 5.0.0-alpha.21 → 5.0.0-alpha.22

package/dist/relation/RelationField.css

@@ -1,9 +1,115 @@
+.panneau-relation-field-single,
 .panneau-relation-field-multiple {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-2);
 }
 
+/* The picker of the single field, with "Cancel" while it changes the item. */
+.panneau-relation-field-picker {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-relation-field-picker > :first-child {
+    flex: 1;
+    min-width: 0;
+}
+
+/* The chosen items, as cards (decision 0067). */
+.panneau-relation-field-cards {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-relation-field-card {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-3);
+    min-width: 0;
+    padding: var(--panneau-space-2);
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-md);
+}
+
+/* The item's image, or its resource's icon. */
+.panneau-relation-field-thumbnail {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--panneau-color-text-muted);
+    background-color: var(--panneau-color-surface-sunken);
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-relation-field-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.panneau-relation-field-option-thumbnail {
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
+.panneau-relation-field-card-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-relation-field-card-label {
+    overflow: hidden;
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-relation-field-link {
+    align-self: flex-start;
+    max-width: 100%;
+    text-decoration: none;
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-relation-field-link:hover {
+    text-decoration: underline;
+}
+
+.panneau-relation-field-link[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-relation-field-card-description {
+    overflow: hidden;
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-relation-field-card-actions {
+    display: inline-flex;
+    flex: none;
+    gap: var(--panneau-space-1);
+}
+
+/* The items of a compact field, as chips. */
 .panneau-relation-field-selected {
     display: flex;
     flex-wrap: wrap;

package/dist/relation/RelationField.d.ts

@@ -22,6 +22,11 @@ export interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value'
     onCreate?: ((text: string) => Promise<RelationReference | null>) | null;
     placeholder?: string;
     controlClassName?: string;
+    /**
+     * Shows the items as chips, and the single item as the text of its picker, rather than as cards
+     * (decision 0067): for small places, such as the filters of a list.
+     */
+    compact?: boolean;
 }
 export interface SingleRelationFieldProps extends RelationFieldBaseProps {
     multiple?: false;
@@ -38,9 +43,11 @@ export type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFiel
 /**
  * A reference to an item of another resource, or several with `multiple`, picked by searching a
  * `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get
- * their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),
- * the picker offers to create an item from the typed text. Without a source, the field shows its
- * references and can't change them.
+ * their labels from the source's `resolve()`. The chosen items show as cards (decision 0067), with
+ * their image and their description when the source gives them, a link to each one
+ * (`getItemHref()`), and buttons to change or remove them. When the source can `create()` (or with
+ * `onCreate`), the picker offers to create an item from the typed text. Without a source, the field
+ * shows its items and can't change them.
  */
 export declare function RelationField(props: RelationFieldProps): import("react").JSX.Element;
 /** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */

package/dist/relation/RelationField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationField.d.ts","sourceRoot":"","sources":["../../src/relation/RelationField.tsx"],"names":[],"mappings":"AASA,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAGtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMnE,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,OAAc,EAAE,KAAW,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC5E;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmCpD;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzF,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;IACtE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA+BvF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAyNtD;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAUxD"}
+{"version":3,"file":"RelationField.d.ts","sourceRoot":"","sources":["../../src/relation/RelationField.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EAGtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMnE,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,OAAc,EAAE,KAAW,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC5E;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmCpD;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzF,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;IACtE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA+IvF;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAyVtD;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAUxD"}