Select List

.env.local

@@ -8,7 +8,7 @@ PLAYGROUND_MOCK_DIR=#./mock
 PLAYGROUND_FRAME_ANCESTORS=#"'self'"
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.17.0
+NEXT_PUBLIC_PICTOR_VERSION=0.17.1
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 NEXT_PUBLIC_SUBSCRIPTION_URL=https://codezero.build/subscription
 

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.17.0",
+    "@code0-tech/pictor": "^0.17.1",
     "@code0-tech/triangulum": "^0.33.0",
     "@code0-tech/tucana": "^0.0.82",
     "@codemirror/lang-javascript": "^6.2.5",

src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx

@@ -10,6 +10,9 @@ import {
 } from "@code0-tech/sagittarius-graphql-types";
 import {DataTypeBooleanInputComponent} from "@edition/datatype/components/inputs/boolean/DataTypeBooleanInputComponent";
 import {DataTypeSelectInputComponent} from "@edition/datatype/components/inputs/select/DataTypeSelectInputComponent";
+import {
+    DataTypeListSelectInputComponent
+} from "@edition/datatype/components/inputs/list-select/DataTypeListSelectInputComponent";
 import {InputWrapperProps} from "@code0-tech/pictor/dist/components/form/InputWrapper";
 import {DataTypeNumberInputComponent} from "@edition/datatype/components/inputs/number/DataTypeNumberInputComponent";
 import {DataTypeDateInputComponent} from "@edition/datatype/components/inputs/date/DataTypeDateInputComponent";
@@ -54,6 +57,11 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
                         schema={schema}
                         suggestions={suggestions}
                         {...rest}/>
+                case "list-select":
+                    return <DataTypeListSelectInputComponent
+                        schema={schema}
+                        suggestions={suggestions}
+                        {...rest}/>
                 case "number":
                     return <DataTypeNumberInputComponent
                         schema={schema}

src/packages/ce/src/datatype/components/inputs/list-select/DataTypeListSelectInputComponent.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
+import {
+    InputDescription,
+    InputLabel,
+    TagInput,
+    TagInputMenu,
+    TagInputMenuItem,
+    TagInputTrigger,
+    TagInputValue,
+    TagValue,
+    Text
+} from "@code0-tech/pictor";
+import {useDebouncedCallback} from "use-debounce";
+import {
+    LiteralValue,
+    NodeFunction,
+    NodeParameterValue,
+    ReferenceValue,
+    SubFlowValue
+} from "@code0-tech/sagittarius-graphql-types";
+import {NodeSchema, Schema} from "@code0-tech/triangulum";
+import {DataTypeInputControlsComponent} from "@edition/datatype/components/inputs/DataTypeInputControlsComponent";
+import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
+
+export type DataTypeListSelectInputComponentProps = DataTypeInputComponentProps
+
+export const DataTypeListSelectInputComponent: React.FC<DataTypeListSelectInputComponentProps> = (props) => {
+
+    const {schema, formValidation, title, initialValue, description, suggestions, onChange} = props
+
+    const defaultValue: NodeParameterValue | NodeFunction | undefined = React.useMemo(() => initialValue ?? undefined, [initialValue])
+    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
+        onChange?.(value)
+    }, 400)
+
+    const optionSuggestions = React.useMemo(() => {
+        const inner = schema && "schema" in schema ? (schema as NodeSchema).schema : (schema as Schema | undefined)
+        const items = (inner as { items?: Schema[] })?.items ?? []
+        const literals = items.flatMap(item => item.suggestions ?? [])
+            .filter((suggest): suggest is LiteralValue => suggest.__typename === "LiteralValue")
+        const seen = new Set<string>()
+        return literals.filter(literal => {
+            const key = JSON.stringify(literal.value)
+            if (seen.has(key)) return false
+            seen.add(key)
+            return true
+        })
+    }, [schema])
+    const referenceSuggestions = React.useMemo(
+        () => (suggestions ?? []).filter(suggest => suggest.__typename !== "LiteralValue"),
+        [suggestions]
+    )
+
+    const initialArray = (initialValue as LiteralValue)?.__typename === "LiteralValue" && Array.isArray((initialValue as LiteralValue).value)
+        ? (initialValue as LiteralValue).value as unknown[]
+        : []
+    const initialKey = JSON.stringify(initialArray)
+    const initialTags: TagValue[] = React.useMemo(
+        () => initialArray.map(entry => ({value: entry})),
+        [initialKey]
+    )
+
+    const lastValueKey = React.useRef(initialKey)
+
+    return React.useMemo(() => <>
+        <InputLabel>{title}</InputLabel>
+        <InputDescription>{description}</InputDescription>
+        <DataTypeInputValueComponent initialValue={initialValue} onChange={value => {
+            formValidation?.setValue?.(value)
+            onChangeDebounced(value)
+        }} suggestions={referenceSuggestions}
+                                     formValidation={formValidation}>
+            <TagInput allowCustomValues={false}
+                      placeholder={typeof title === "string" ? title : undefined}
+                      initialValue={initialTags}
+                      maw={"100%"}
+                      formValidation={{...formValidation, setValue: undefined}}
+                      onChange={tags => {
+                          const value = tags.map(tag => tag.value)
+                          const key = JSON.stringify(value)
+                          if (key === lastValueKey.current) return
+                          lastValueKey.current = key
+                          const literal: LiteralValue = {__typename: "LiteralValue", value}
+                          formValidation?.setValue?.(literal)
+                          onChangeDebounced(literal)
+                      }}
+                      right={
+                          <DataTypeInputControlsComponent suggestions={referenceSuggestions} onSelect={value => {
+                              formValidation?.setValue?.(value)
+                              onChangeDebounced(value)
+                          }}/>
+                      }
+                      rightType={"action"}>
+                <TagInputMenu openOn={"focus"}>
+                    {optionSuggestions.map((suggest, index) => (
+                        <TagInputMenuItem key={index} value={suggest.value} data={suggest}>
+                            <Text>{String(suggest.value)}</Text>
+                        </TagInputMenuItem>
+                    ))}
+                </TagInputMenu>
+                <TagInputValue/>
+                <TagInputTrigger/>
+            </TagInput>
+        </DataTypeInputValueComponent>
+    </>, [formValidation, defaultValue, optionSuggestions])
+}