chore: update preview

Author: gjulivan

packages/pluggableWidgets/selection-controls-web/src/SelectionControls.editorConfig.ts

@@ -4,9 +4,15 @@ import {
     StructurePreviewProps,
     structurePreviewPalette,
     dropzone,
-    container
+    container,
+    rowLayout,
+    text,
+    svgImage
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { SelectionControlsPreviewProps } from "../typings/SelectionControlsProps";
+import { getCustomCaption } from "./helpers/utils";
+import IconRadioButtonSVG from "./assets/radiobutton.svg";
+import IconCheckboxSVG from "./assets/checkbox.svg";
 
 const DATABASE_SOURCE_CONFIG: Array<keyof SelectionControlsPreviewProps> = [
     "optionsSourceDatabaseCaptionAttribute",
@@ -127,43 +133,40 @@ export function getProperties(
     return defaultProperties;
 }
 
-function getIconPreview(_isDarkMode: boolean): ContainerProps {
-    return {
-        type: "Container",
-        children: [
-            container({ padding: 1 })(),
-            {
-                type: "Text",
-                content: "☑",
-                fontSize: 16
-            }
-        ]
-    };
+function getIconPreview(isMultiSelect: boolean): ContainerProps {
+    return container({ grow: 0 })(
+        container({ padding: 3 })(),
+        svgImage({ width: 16, height: 16, grow: 0 })(
+            decodeURIComponent(
+                (isMultiSelect ? IconCheckboxSVG : IconRadioButtonSVG).replace("data:image/svg+xml,", "")
+            )
+        )
+    );
 }
 
-export function getPreview(_values: SelectionControlsPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+export function getPreview(values: SelectionControlsPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const structurePreviewChildren: StructurePreviewProps[] = [];
-    let readOnly = _values.readOnly;
+    let readOnly = values.readOnly;
 
     // Handle custom content dropzones when enabled
-    if (_values.optionsSourceCustomContentType !== "no") {
-        if (_values.source === "context" && _values.optionsSourceType === "association") {
+    if (values.optionsSourceCustomContentType !== "no") {
+        if (values.source === "context" && values.optionsSourceType === "association") {
             structurePreviewChildren.push(
                 dropzone(
                     dropzone.placeholder("Configure the selection controls: Place widgets here"),
                     dropzone.hideDataSourceHeaderIf(false)
-                )(_values.optionsSourceAssociationCustomContent)
+                )(values.optionsSourceAssociationCustomContent)
             );
-        } else if (_values.source === "database") {
+        } else if (values.source === "database") {
             structurePreviewChildren.push(
                 dropzone(
                     dropzone.placeholder("Configure the selection controls: Place widgets here"),
                     dropzone.hideDataSourceHeaderIf(false)
-                )(_values.optionsSourceDatabaseCustomContent)
+                )(values.optionsSourceDatabaseCustomContent)
             );
-        } else if (_values.source === "static") {
-            _values.optionsSourceStaticDataSource.forEach(value => {
+        } else if (values.source === "static") {
+            values.optionsSourceStaticDataSource.forEach(value => {
                 structurePreviewChildren.push(
                     container({
                         borders: true,
@@ -183,76 +186,31 @@ export function getPreview(_values: SelectionControlsPreviewProps, isDarkMode: b
     }
 
     // Handle database-specific read-only logic
-    if (_values.source === "database" && _values.databaseAttributeString.length === 0) {
-        readOnly = _values.customEditability === "never";
+    if (values.source === "database" && values.databaseAttributeString.length === 0) {
+        readOnly = values.customEditability === "never";
     }
 
     // If no custom content dropzones, show default preview
     if (structurePreviewChildren.length === 0) {
-        return {
-            type: "RowLayout",
-            columnSize: "fixed",
-            backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.containerFill,
-            children: [
-                {
-                    type: "RowLayout",
-                    columnSize: "grow",
-                    children: [
-                        getIconPreview(isDarkMode),
-                        {
-                            type: "Container",
-                            padding: 4,
-                            children: [
-                                {
-                                    type: "Text",
-                                    content: "Selection Controls",
-                                    fontColor: palette.text.primary,
-                                    fontSize: 10
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
+        const isMultiSelect = values.optionsSourceDatabaseItemSelection === "Multi";
+        return container()(
+            rowLayout({
+                columnSize: "grow",
+                backgroundColor: palette.background.container
+            })(
+                getIconPreview(isMultiSelect),
+                container()(container({ padding: 3 })(), text()(getCustomCaption(values)))
+            )
+        );
     }
 
     // Return container with dropzones
-    return {
-        type: "Container",
-        children: [
-            {
-                type: "RowLayout",
-                columnSize: "grow",
-                borders: true,
-                borderWidth: 1,
-                borderRadius: 2,
-                backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container,
-                children: [
-                    {
-                        type: "Container",
-                        grow: 1,
-                        padding: 4,
-                        children: structurePreviewChildren
-                    },
-                    readOnly && _values.readOnlyStyle === "text"
-                        ? container({ grow: 0, padding: 4 })()
-                        : {
-                              ...getIconPreview(isDarkMode),
-                              ...{ grow: 0, padding: 4 }
-                          }
-                ]
-            }
-        ]
-    };
-}
-
-export function getCustomCaption(values: SelectionControlsPreviewProps): string {
-    if (values.source === "static" && values.optionsSourceStaticDataSource.length > 0) {
-        return "Selection Controls (Static)";
-    }
-    if (values.source === "database") {
-        return "Selection Controls (Database)";
-    }
-    return "Selection Controls";
+    return container()(
+        rowLayout({
+            columnSize: "grow",
+            borders: true,
+            borderWidth: 1,
+            borderRadius: 2
+        })(container({ grow: 1, padding: 4 })(...structurePreviewChildren))
+    );
 }

packages/pluggableWidgets/selection-controls-web/src/SelectionControls.editorPreview.tsx

@@ -3,11 +3,15 @@ import { ReactElement, createElement, useMemo } from "react";
 import { SelectionControlsPreviewProps } from "../typings/SelectionControlsProps";
 import { RadioSelection } from "./components/RadioSelection/RadioSelection";
 import { dynamic } from "@mendix/widget-plugin-test-utils";
-import { SingleSelector, SelectionBaseProps } from "./helpers/types";
+import { SingleSelector, SelectionBaseProps, MultiSelector } from "./helpers/types";
 import { StaticPreviewSelector } from "./helpers/Static/Preview/StaticPreviewSelector";
-import { DatabasePreviewSelector } from "./helpers/Database/Preview/DatabasePreviewSelector";
+import {
+    DatabaseMultiPreviewSelector,
+    DatabasePreviewSelector
+} from "./helpers/Database/Preview/DatabasePreviewSelector";
 import { AssociationPreviewSelector } from "./helpers/Association/Preview/AssociationPreviewSelector";
 import "./ui/SelectionControls.scss";
+import { CheckboxSelection } from "./components/CheckboxSelection/CheckboxSelection";
 
 export const preview = (props: SelectionControlsPreviewProps): ReactElement => {
     const id = generateUUID().toString();
@@ -16,30 +20,31 @@ export const preview = (props: SelectionControlsPreviewProps): ReactElement => {
         inputId: id,
         labelId: `${id}-label`,
         readOnlyStyle: props.readOnlyStyle,
-        ariaRequired: dynamic(false),
-        a11yConfig: {
-            a11yStatusMessage: {
-                a11ySelectedValue: props.a11ySelectedValue,
-                a11yOptionsAvailable: props.a11yOptionsAvailable,
-                a11yInstructions: props.a11yInstructions
-            }
-        }
+        ariaRequired: dynamic(false)
     };
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const selector: SingleSelector = useMemo(() => {
+    const selector: SingleSelector | MultiSelector = useMemo(() => {
         if (props.source === "static") {
             return new StaticPreviewSelector(props);
         }
         if (props.source === "database") {
-            return new DatabasePreviewSelector(props);
+            if (props.optionsSourceDatabaseItemSelection === "Multi") {
+                return new DatabaseMultiPreviewSelector(props);
+            } else {
+                return new DatabasePreviewSelector(props);
+            }
         }
         return new AssociationPreviewSelector(props);
     }, [props]);
 
     return (
         <div className="widget-selection-controls widget-selection-controls-editor-preview">
-            <RadioSelection selector={selector} {...commonProps} />
+            {selector.type === "single" ? (
+                <RadioSelection selector={selector} {...commonProps} />
+            ) : (
+                <CheckboxSelection selector={selector} {...commonProps} />
+            )}
         </div>
     );
 };

packages/pluggableWidgets/selection-controls-web/src/SelectionControls.tsx

@@ -17,14 +17,7 @@ export default function SelectionControls(props: SelectionControlsContainerProps
         inputId: props.id,
         labelId: `${props.id}-label`,
         readOnlyStyle: props.readOnlyStyle,
-        ariaRequired: props.ariaRequired,
-        a11yConfig: {
-            a11yStatusMessage: {
-                a11ySelectedValue: props.a11ySelectedValue?.value ?? "",
-                a11yOptionsAvailable: props.a11yOptionsAvailable?.value ?? "",
-                a11yInstructions: props.a11yInstructions?.value ?? ""
-            }
-        }
+        ariaRequired: props.ariaRequired
     };
 
     return (

packages/pluggableWidgets/selection-controls-web/src/SelectionControls.xml

@@ -256,32 +256,6 @@
                     <returnType type="Boolean" />
                 </property>
             </propertyGroup>
-            <propertyGroup caption="Accessibility status message ">
-                <property key="a11ySelectedValue" type="textTemplate" required="false">
-                    <caption>Selected value</caption>
-                    <description>Output example: "Selected value: Avocado, Apple, Banana."</description>
-                    <translations>
-                        <translation lang="en_US">Selected value:</translation>
-                        <translation lang="nl_NL">Geselecteerde waarde:</translation>
-                    </translations>
-                </property>
-                <property key="a11yOptionsAvailable" type="textTemplate" required="false">
-                    <caption>Options available</caption>
-                    <description>Output example: "Number of options available: 1"</description>
-                    <translations>
-                        <translation lang="en_US">Number of options available:</translation>
-                        <translation lang="nl_NL">Aantal beschikbare opties:</translation>
-                    </translations>
-                </property>
-                <property key="a11yInstructions" type="textTemplate" required="false">
-                    <caption>Instructions</caption>
-                    <description>Instructions to be read after announcing the status.</description>
-                    <translations>
-                        <translation lang="en_US">Use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.</translation>
-                        <translation lang="nl_NL">Gebruik de pijltjestoetsen (omhoog en omlaag) om te navigeren. Druk op Enter of de spatiebalk om de waarde te selecteren.</translation>
-                    </translations>
-                </property>
-            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>

packages/pluggableWidgets/selection-controls-web/src/assets/checkbox.svg

@@ -21,14 +21,6 @@ export function CheckboxSelection({
         }
     };
 
-    if (selector.status === "unavailable") {
-        return (
-            <div className="widget-selection-controls-checkbox">
-                <div className="widget-selection-controls-checkbox-loading">Loading...</div>
-            </div>
-        );
-    }
-
     return (
         <div
             className={classNames("widget-selection-controls-checkbox", {
@@ -45,6 +37,7 @@ export function CheckboxSelection({
                 {options.map((optionId, index) => {
                     const isSelected = currentIds.includes(optionId);
                     const checkboxId = `${inputId}-checkbox-${index}`;
+                    const name = selector.caption.get(optionId);
 
                     return (
                         <div
@@ -56,12 +49,12 @@ export function CheckboxSelection({
                             <input
                                 type="checkbox"
                                 id={checkboxId}
+                                name={name && name.length > 0 ? name : inputId}
                                 value={optionId}
                                 checked={isSelected}
                                 disabled={isReadOnly}
                                 tabIndex={tabIndex}
                                 onChange={e => handleChange(optionId, e.target.checked)}
-                                aria-describedby={`${inputId}-description`}
                             />
                             <CaptionContent htmlFor={checkboxId}>{selector.caption.render(optionId)}</CaptionContent>
                         </div>

packages/pluggableWidgets/selection-controls-web/src/assets/radiobutton.svg

@@ -7,7 +7,3 @@ export function Placeholder(): ReactElement {
         </div>
     );
 }
-
-export function NoOptionsPlaceholder(): ReactElement {
-    return <div className="widget-selection-controls-no-options">No options available</div>;
-}

packages/pluggableWidgets/selection-controls-web/src/components/CheckboxSelection/CheckboxSelection.tsx

@@ -20,14 +20,6 @@ export function RadioSelection({
         }
     };
 
-    if (selector.status === "unavailable") {
-        return (
-            <div className="widget-selection-controls-radio">
-                <div className="widget-selection-controls-radio-loading">Loading...</div>
-            </div>
-        );
-    }
-
     return (
         <div
             className={classNames("widget-selection-controls-radio", {
@@ -44,6 +36,7 @@ export function RadioSelection({
                 {options.map((optionId, index) => {
                     const isSelected = currentId === optionId;
                     const radioId = `${inputId}-radio-${index}`;
+                    const name = selector.caption.get(optionId);
 
                     return (
                         <div
@@ -55,13 +48,12 @@ export function RadioSelection({
                             <input
                                 type="radio"
                                 id={radioId}
-                                name={inputId}
+                                name={name && name.length > 0 ? name : inputId}
                                 value={optionId}
                                 checked={isSelected}
                                 disabled={isReadOnly}
                                 tabIndex={tabIndex}
                                 onChange={() => handleChange(optionId)}
-                                aria-describedby={`${inputId}-description`}
                             />
                             <CaptionContent htmlFor={radioId}>{selector.caption.render(optionId)}</CaptionContent>
                         </div>

packages/pluggableWidgets/selection-controls-web/src/components/Placeholder.tsx

@@ -6,6 +6,7 @@ import {
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { PreviewCaptionsProvider } from "../../Preview/PreviewCaptionsProvider";
 import { PreviewOptionsProvider } from "../../Preview/PreviewOptionsProvider";
+import { getCustomCaption } from "../../utils";
 
 export class AssociationPreviewSelector implements SingleSelector {
     type = "single" as const;
@@ -26,7 +27,7 @@ export class AssociationPreviewSelector implements SingleSelector {
         this.currentId = `single-${generateUUID()}`;
         this.customContentType = props.optionsSourceCustomContentType;
         this.readOnly = props.readOnly;
-        this.caption = new PreviewCaptionsProvider(new Map());
+        this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
         this.options = new PreviewOptionsProvider(this.caption, new Map());
         (this.caption as PreviewCaptionsProvider).updatePreviewProps({
             customContentRenderer: props.optionsSourceAssociationCustomContent?.renderer,