import { styleProps } from "./Input"; export default { name: "ListBox", acceptsChildren: true, category: "Input", optionalLayers: [ { id: "ListContent", name: "List Content", acceptsChildren: true, props: [], defaultStyles: { "": { "flex-grow": "0", "flex-shrink": "1", "flex-basis": "auto", display: "flex", "flex-direction": "column", "justify-content": "flex-start", "align-items": "stretch", gap: "0px", width: "auto", height: "auto", "min-width": "auto", "min-height": "auto", "max-width": "100%", "max-height": "100%", "padding-right": "0px", "padding-left": "0px", "padding-top": "0px", "padding-bottom": "0px", "border-color": "var(--theme-border-default)", "border-radius": "0px", "border-width": "0px", "border-style": "solid", "background-color": "transparent", "box-shadow": "var(--theme-shadows-none)", }, }, sources: [ { id: "data", name: "{{= it.component.name }}'s current data", description: "The current data of the list", template: "${{= it.component.id }}_data", instanceTemplate: `{{= it.component.name }}'s current data`, outputType: { kind: "dynamic", template: "type", isList: false }, source: "Parent", }, { id: "index", name: "{{= it.component.name }}'s current index", description: "The current index of the list", template: "${{= it.component.id }}_index", instanceTemplate: `{{= it.component.name }}'s current index`, outputType: { kind: "number" }, source: "Parent", }, ], optionalLayers: [ { id: "ListItem", name: "List Item", acceptsChildren: true, props: [], defaultStyles: { "": { position: "relative", "user-select": "none", display: "flex", "align-items": "center", gap: "8px", cursor: "option", "justify-content": "space-between", "border-radius": "var(--theme-radii-md)", }, ":disabled": { opacity: 0.5, cursor: "not-allowed", }, "[data-highlighted]": { "background-color": "color-mix(in oklch, var(--theme-bg-emphasized) 60%, transparent)", }, }, additionalStates: [ { label: "is hightlighted", value: "[data-highlighted]", }, ], optionalLayers: [ { id: "ListItemText", name: "List Item Text", acceptsChildren: false, props: [], defaultStyles: { "": { "flex-grow": "1", "flex-shrink": "1", "flex-basis": "0%", }, }, }, { id: "ListItemIndicator", name: "List Item Indicator", acceptsChildren: true, props: [], defaultStyles: { "": { display: "flex", "align-items": "center", "justify-content": "center", gap: "4px", }, svg: { width: "16px", height: "16px", }, }, }, ], }, ], }, { id: "ListInput", name: "List Input", acceptsChildren: false, styleProps: styleProps, props: [ { label: "Is disabled", name: "disabled", type: { kind: "boolean", isDynamic: true }, default: false, placeholder: "", help: "Whether the input is disabled", }, ], defaultStyles: { ":focus-visible": { "outline-width": "1px", "outline-style": "solid", "outline-color": "var(--palette-ring)", }, ":user-invalid": { "border-color": "var(--theme-border-error)", }, ":disabled": { opacity: 0.5, cursor: "not-allowed", }, "": { width: "100%", "min-width": "0", outline: "var(--theme-sizes-zero)", position: "relative", "text-align": "left", "border-radius": "var(--theme-radii-md)", "font-family": "var(--theme-fonts-body)", display: "inline-flex", }, }, }, ], props: [ { label: "Type", name: "type", type: { kind: "appType", isList: true }, default: { kind: "null", isList: true }, required: true, placeholder: "", help: "The type for the items in the list", }, { label: "Items", name: "items", type: { kind: "dynamic", template: "type", isList: true }, required: true, default: null, placeholder: "", help: "The data for the items in the list", }, { label: "Label", name: "itemToString", type: { kind: "text", isDynamic: true, isCallback: "list" }, required: true, default: null, placeholder: "", help: "The values for the items in the select", additionalSources: [ { id: "$$i", name: "options's current index", description: "The current index of the list", template: "$$i", instanceTemplate: `option's current index`, outputType: { kind: "number" }, }, { id: "$$d", name: "options's current data", description: "The current data of the list", template: "$$d", instanceTemplate: `option's current data`, outputType: { kind: "dynamic", template: "type", isList: false, }, source: "List", sourceProp: "options", }, ], }, { label: "Initial Value", name: "initialValue", isDefault: true, type: { kind: "dynamic", template: "type", isList: true, isDynamic: true, }, default: null, placeholder: "Enter a default value", help: "The listbox's default value", }, { label: "Allow Multiple", name: "multiple", type: { kind: "boolean", isDynamic: true }, required: false, isDefault: true, default: true, placeholder: "", help: "Whether the listbox allows multiple selections", }, { label: "Loop focus", name: "loopFocus", type: { kind: "boolean", isDynamic: false }, required: false, isDefault: false, default: false, placeholder: "", help: "Whether the focus should loop around when navigating through items", }, { label: "Typeahead", name: "typeahead", type: { kind: "boolean", isDynamic: false }, required: false, isDefault: false, default: true, placeholder: "", help: "Whether the listbox supports typeahead navigation", }, { label: "Preview items", name: "__length", type: { kind: "number", isDynamic: false }, required: false, isDefault: true, default: 5, placeholder: "", help: "The number of items to show in preview", }, ], defaultStyles: { "": { diplay: "flex", "flex-direction": "column", "flex-grow": "0", "flex-shrink": "1", "flex-basis": "auto", "justify-content": "flex-start", "align-items": "stretch", gap: "6px", width: "auto", height: "auto", "min-width": "auto", "min-height": "auto", "max-width": "100%", "max-height": "100%", "padding-right": "0px", "padding-left": "0px", "padding-top": "0px", "padding-bottom": "0px", "border-color": "var(--theme-border-default)", "border-radius": "0px", "border-width": "0px", "border-style": "solid", "background-color": "transparent", "box-shadow": "var(--theme-shadows-none)", }, }, events: [ { label: "When changed", name: "onValueChange", help: "Select an action to run when listbox's value has changed", isDefault: true, additionalSources: [ { id: "QcMxXrgXQdKQHEG7Bji6k", name: "New Value", instanceTemplate: "New Value", description: "The new value of the select", template: "$$payload", outputType: { kind: "dynamic", template: ".type", isList: true }, }, ], }, ], sources: [ { id: "selected items", name: "{{= it.component.name }}'s current value", provider: "StateProvider", description: "The current value of the select", template: "$get('{{= it.component.id}}', { value: [] }).value", instanceTemplate: `{{= it.component.name }}'s current value`, outputType: { kind: "dynamic", template: "type", isList: true, }, }, ], defaultChildren: [ { kind: "ListBox$Brevity.ListContent", props: {}, styleProps: {}, children: [ { kind: "ListBox$Brevity.ListContent.ListItem", props: {}, styleProps: {}, children: [ { kind: "ListBox$Brevity.ListContent.ListItem.ListItemText", props: {}, styleProps: {}, children: [], }, { kind: "ListBox$Brevity.ListContent.ListItem.ListItemIndicator", props: {}, styleProps: {}, children: [ { kind: "Icon$Brevity", props: { children: { fill: false, icon: "check", pack: "materialsymbolsoutlined", __type: "icon", weight: 400, }, }, styleProps: {}, children: [], }, ], }, ], }, ], }, ], } as const;