@kanaries/graphic-walker 0.2.13 → 0.2.15

package/src/dataSource/index.tsx

@@ -1,20 +1,21 @@
-import React, { useRef } from 'react';
-import { observer } from 'mobx-react-lite';
-import { CheckCircleIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
-import { useTranslation } from 'react-i18next';
-import { Container } from '../components/container';
-import Modal from '../components/modal';
-import { useGlobalStore } from '../store';
-import { download } from '../utils/save';
-import GwFile from './dataSelection/gwFile';
-import DataSelection from './dataSelection';
-import DefaultButton from '../components/button/default';
+import React, { useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { CheckCircleIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import Modal from "../components/modal";
+import { useGlobalStore } from "../store";
+import { download } from "../utils/save";
+import GwFile from "./dataSelection/gwFile";
+import DataSelection from "./dataSelection";
+import DefaultButton from "../components/button/default";
+import DropdownSelect from "../components/dropdownSelect";
+import PrimaryButton from "../components/button/primary";
 
 interface DSSegmentProps {
     preWorkDone: boolean;
 }
 
-const DataSourceSegment: React.FC<DSSegmentProps> = props => {
+const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
     const { preWorkDone } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const gwFileRef = useRef<HTMLInputElement>(null);
@@ -22,55 +23,73 @@ const DataSourceSegment: React.FC<DSSegmentProps> = props => {
 
     const { currentDataset, datasets, showDSPanel } = commonStore;
 
-    return <Container className="flex flex-row items-stretch">
-        <GwFile fileRef={gwFileRef} />
-        {!preWorkDone && <div className="animate-spin inline-block mr-2 ml-2 w-4 h-4 rounded-full border-t-2 border-l-2 border-blue-500"></div>}
-        <label className="text-xs mr-1 whitespace-nowrap self-center h-4">
-            {t('DataSource.labels.cur_dataset')}
-        </label>
-        <select
-            className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2"
-            value={currentDataset.id}
-            onChange={(e) => { commonStore.useDS(e.target.value); }}
-        >
-            {datasets.map((ds) => (
-                <option value={ds.id} key={ds.id}>
-                    {ds.name}
-                </option>
-            ))}
-        </select>
+    return (
+        <div className="flex items-center m-4 p-4 border border-gray-200 dark:border-gray-700">
+            <GwFile fileRef={gwFileRef} />
+            {!preWorkDone && (
+                <div className="animate-spin inline-block mr-2 ml-2 w-4 h-4 rounded-full border-t-2 border-l-2 border-blue-500"></div>
+            )}
+            {/* <label className="text-xs mr-1 whitespace-nowrap self-center h-4">
+                {t("DataSource.labels.cur_dataset")}
+            </label> */}
+            <div className="mr-2">
+                <DropdownSelect
+                    options={datasets.map((d) => ({ label: d.name, value: d.id }))}
+                    selectedKey={currentDataset.id}
+                    onSelect={(dsKey) => {
+                        commonStore.useDS(dsKey);
+                    }}
+                    placeholder={t("DataSource.labels.cur_dataset")}
+                />
+            </div>
 
-        <DefaultButton
-            text={t('DataSource.buttons.create_dataset')}
-            onClick={() => { commonStore.startDSBuildingTask() }}
-        />
-        <DefaultButton
-            text={t('DataSource.buttons.export_as_file')}
-            onClick={() => {
-                const res = vizStore.exportAsRaw();
-                download(res, 'graphic-walker-notebook.json', 'text/plain')
-            }}
-        />
-        <DefaultButton
-            text={t('DataSource.buttons.import_file')}
-            onClick={() => {
-                if (gwFileRef.current) {
-                    gwFileRef.current.click();
-                }
-            }}
-        />
-        {showDSPanel && (
+            <PrimaryButton
+                className="mr-2"
+                text={t("DataSource.buttons.create_dataset")}
+                onClick={() => {
+                    commonStore.startDSBuildingTask();
+                }}
+            />
+            <DefaultButton
+                className="mr-2"
+                text={t("DataSource.buttons.export_as_file")}
+                onClick={() => {
+                    const res = vizStore.exportAsRaw();
+                    download(res, "graphic-walker-notebook.json", "text/plain");
+                }}
+            />
+            <DefaultButton
+                className="mr-2"
+                text={t("DataSource.buttons.import_file")}
+                onClick={() => {
+                    if (gwFileRef.current) {
+                        gwFileRef.current.click();
+                    }
+                }}
+            />
             <Modal
-                title={t('DataSource.dialog.create_data_source')}
-                onClose={() => { commonStore.setShowDSPanel(false) }}
-            >
-                <DataSelection />
-                {/* <DataSourcePanel /> */}
-            </Modal>
-        )}
-        { preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" /> }
-        { !preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
-    </Container>
-}
+                    title={t("DataSource.dialog.create_data_source")}
+                    onClose={() => {
+                        commonStore.setShowDSPanel(false);
+                    }}
+                    show={showDSPanel}
+                >
+                    <DataSelection />
+                </Modal>
+            {/* {showDSPanel && (
+                <Modal
+                    title={t("DataSource.dialog.create_data_source")}
+                    onClose={() => {
+                        commonStore.setShowDSPanel(false);
+                    }}
+                >
+                    <DataSelection />
+                </Modal>
+            )} */}
+            {preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" />}
+            {!preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
+        </div>
+    );
+};
 
-export default observer(DataSourceSegment);
+export default observer(DataSourceSegment);

package/src/fields/aestheticFields.tsx

@@ -3,6 +3,7 @@ import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
 import OBFieldContainer from './obComponents/obFContainer';
+import SingleEncodeEditor from './encodeFields/singleEncodeEditor';
 
 const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
 
@@ -12,7 +13,8 @@ const AestheticFields: React.FC = props => {
             aestheticFields.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
                 <Droppable droppableId={dkey.id} direction="horizontal">
                     {(provided, snapshot) => (
-                        <OBFieldContainer dkey={dkey} provided={provided} />
+                        // <OBFieldContainer dkey={dkey} provided={provided} />
+                        <SingleEncodeEditor dkey={dkey} provided={provided} snapshot={snapshot} />
                     )}
                 </Droppable>
             </AestheticFieldContainer>)

package/src/fields/components.tsx

@@ -3,31 +3,13 @@ import styled from "styled-components";
 import { useTranslation } from 'react-i18next';
 import { COLORS } from "../config";
 
-export const AestheticSegment = styled.div`
-  border: 1px solid #e5e7eb;
-  font-size: 12px;
-  margin: 0.2em;
-
-  .aes-header{
-    border-bottom: 1px solid #e5e7eb;
-    padding: 0.6em;
-    h4 {
-      font-weight: 400;
-    }
-  }
-  .aes-container{
-    overflow-x: auto;
-  }
-
-`
-
 export const FieldListContainer: React.FC<{ name: string }> = (props) => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FieldListSegment>
-      <div className="fl-header">
-        <h4>{t(props.name)}</h4>
+    <FieldListSegment className="m-0.5 border border-gray-200 dark:border-gray-700">
+      <div className="fl-header border-r border-gray-200 dark:border-gray-800 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
       <div className="fl-container">{props.children}</div>
     </FieldListSegment>
@@ -38,12 +20,12 @@ export const AestheticFieldContainer: React.FC<{ name: string }> = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <AestheticSegment>
-      <div className="aes-header cursor-default select-none">
-        <h4>{t(props.name)}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
-      <div className="aes-container">{props.children}</div>
-    </AestheticSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -51,12 +33,12 @@ export const FilterFieldContainer: React.FC = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FilterFieldSegment>
-      <div className="flt-header cursor-default select-none">
-        <h4>{t('filters')}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t('filters')}</h4>
       </div>
-      <div className="flt-container">{props.children}</div>
-    </FilterFieldSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -84,13 +66,11 @@ export const FilterFieldsContainer = styled.div({
 
 export const FieldListSegment = styled.div`
   display: flex;
-  border: 1px solid #e5e7eb;
   margin: 0.2em;
   font-size: 12px;
   div.fl-header {
     /* flex-basis: 100px; */
     width: 100px;
-    border-right: 1px solid #e5e7eb;
     flex-shrink: 0;
     h4 {
       margin: 0.6em;
@@ -99,20 +79,22 @@ export const FieldListSegment = styled.div`
   }
   div.fl-container {
     flex-grow: 10;
-    /* display: flex;
-    flex-wrap: wrap; */
-    /* overflow-x: auto;
-    overflow-y: hidden; */
   }
 `;
 
 export const FilterFieldSegment = styled.div`
   border: 1px solid #e5e7eb;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid #2d3748;
+  }
   font-size: 12px;
   margin: 0.2em;
 
   .flt-header {
     border-bottom: 1px solid #e5e7eb;
+    @media (prefers-color-scheme: dark) {
+      border-bottom: 1px solid #2d3748;
+    }
     padding: 0.6em;
 
     > h4 {
@@ -144,7 +126,7 @@ export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
   font-size: 12px;
   height: 20px;
   min-width: 150px;
-  overflow-y: hidden;
+  /* overflow-y: hidden; */
   padding: 0 10px;
   user-select: none;
   text-overflow: ellipsis;

package/src/fields/datasetFields/dimFields.tsx

@@ -1,46 +1,54 @@
-import React from 'react';
-import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import { useGlobalStore } from '../../store';
-import DataTypeIcon from '../../components/dataTypeIcon';
-import { FieldPill } from './fieldPill';
+import React from "react";
+import { Draggable, DroppableProvided } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DataTypeIcon from "../../components/dataTypeIcon";
+import { FieldPill } from "./fieldPill";
 
 interface Props {
     provided: DroppableProvided;
 }
-const DimFields: React.FC<Props> = props => {
+const DimFields: React.FC<Props> = (props) => {
     const { provided } = props;
     const { vizStore } = useGlobalStore();
     const dimensions = vizStore.draggableFieldState.dimensions;
-    return <div {...provided.droppableProps} ref={provided.innerRef}>
-        {dimensions.map((f, index) => (
-            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
-                {(provided, snapshot) => {
-          
-                    return (
-                        <>
-                            <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
-                                ref={provided.innerRef}
-                                isDragging={snapshot.isDragging}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
-                            </FieldPill>
-                            {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
-                                isDragging={snapshot.isDragging}
+    return (
+        <div {...provided.droppableProps} ref={provided.innerRef}>
+            {dimensions.map((f, index) => (
+                <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                    {(provided, snapshot) => {
+                        return (
+                            <>
+                                <FieldPill
+                                    className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 dark:hover:bg-blue-800 rounded-full truncate border border-transparent ${
+                                        snapshot.isDragging ? "bg-blue-100 dark:bg-blue-800" : ""
+                                    }`}
+                                    ref={provided.innerRef}
+                                    isDragging={snapshot.isDragging}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
                                 >
-                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}
+                                    &nbsp;
                                 </FieldPill>
-                            }
-                        </>
-                    );
-                }}
-            </Draggable>
-        ))}
-    </div>
-}
+                                {
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 dark:hover:bg-blue-800 rounded-full border-blue-400 border truncate ${
+                                            snapshot.isDragging ? "bg-blue-100 dark:bg-blue-800" : "hidden"
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
+                                }
+                            </>
+                        );
+                    }}
+                </Draggable>
+            ))}
+        </div>
+    );
+};
 
 export default observer(DimFields);

package/src/fields/datasetFields/index.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 import styled from 'styled-components';
-import { NestContainer } from "../../components/container";
 import DimFields from "./dimFields";
 import MeaFields from "./meaFields";
 
-const DSContainer = styled(NestContainer)`
+const DSContainer = styled.div`
     @media (min-width: 768px) {
         height: 680px;
     }
@@ -16,14 +15,14 @@ const DatasetFields: React.FC = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
 
     return (
-        <DSContainer className="border-gray-200 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
+        <DSContainer className="p-1 m-0.5 border border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
             <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
             <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px", minHeight: '100px' }}>
                 <Droppable droppableId="dimensions" direction="vertical">
                     {(provided, snapshot) => <DimFields provided={provided} />}
                 </Droppable>
             </div>
-            <div className="border-t flex-grow pd-1 overflow-y-auto">
+            <div className="border-t dark:border-gray-700 flex-grow pd-1 overflow-y-auto">
                 <Droppable droppableId="measures" direction="vertical">
                     {(provided, snapshot) => <MeaFields provided={provided} />}
                 </Droppable>

package/src/fields/datasetFields/meaFields.tsx

@@ -1,58 +1,84 @@
-import React from 'react';
-import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import { useGlobalStore } from '../../store';
-import DataTypeIcon from '../../components/dataTypeIcon';
-import { FieldPill } from './fieldPill';
+import React, { useCallback, useMemo } from "react";
+import { Draggable, DroppableProvided } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DataTypeIcon from "../../components/dataTypeIcon";
+import { FieldPill } from "./fieldPill";
+import DropdownContext, { IDropdownContextOption } from "../../components/dropdownContext";
 
 interface Props {
     provided: DroppableProvided;
 }
-const MeaFields: React.FC<Props> = props => {
+const MeaFields: React.FC<Props> = (props) => {
     const { provided } = props;
     const { vizStore } = useGlobalStore();
     const measures = vizStore.draggableFieldState.measures;
-    return <div {...provided.droppableProps} ref={provided.innerRef}>
-        {measures.map((f, index) => (
-            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
-                {(provided, snapshot) => {
-                    return (
-                        <>
-                            <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
-                                isDragging={snapshot.isDragging}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+
+    const MEA_ACTION_OPTIONS = useMemo<IDropdownContextOption[]>(() => {
+        return [
+            {
+                value: "bin",
+                label: "Bin",
+            },
+            {
+                value: "log10",
+                label: "Log10",
+            },
+        ];
+    }, []);
+
+    const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
+        if (selectedValue === "bin") {
+            vizStore.createBinField("measures", meaIndex);
+        } else if (selectedValue === "log10") {
+            vizStore.createLogField("measures", meaIndex);
+        }
+    }, []);
+    return (
+        <div {...provided.droppableProps} ref={provided.innerRef}>
+            {measures.map((f, index) => (
+                <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                    {(provided, snapshot) => {
+                        return (
+                            <div className="block">
+                                <DropdownContext
+                                    disable={snapshot.isDragging}
+                                    options={MEA_ACTION_OPTIONS}
+                                    onSelect={(v, opIndex) => {
+                                        fieldActionHandler(v, opIndex, index);
+                                    }}
+                                >
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-purple-100 dark:hover:bg-purple-800 rounded-full truncate border border-transparent ${
+                                            snapshot.isDragging ? "bg-purple-100 dark:bg-purple-800" : ""
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
+                                </DropdownContext>
                                 {
-                                    f.fid && !snapshot.isDragging && <select className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500" value="" onChange={e => {
-                                        if (e.target.value === 'bin') {
-                                            vizStore.createBinField('measures', index)
-                                        } else if (e.target.value === 'log10') {
-                                            vizStore.createLogField('measures', index)
-                                        }
-                                    }}>
-                                        <option value=""></option>
-                                        <option value="bin">bin</option>
-                                        <option value="log10">log10</option>
-                                    </select>
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-purple-100 dark:hover:bg-purple-800 rounded-full border-purple-400 border truncate ${
+                                            snapshot.isDragging ? "bg-purple-100 dark:bg-purple-800" : "hidden"
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
                                 }
-                            </FieldPill>
-                            {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
-                                    isDragging={snapshot.isDragging}
-                                >
-                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
-                                </FieldPill>
-                            }
-                        </>
-                    );
-                }}
-            </Draggable>
-        ))}
-    </div>
-}
+                            </div>
+                        );
+                    }}
+                </Draggable>
+            ))}
+        </div>
+    );
+};
 
 export default observer(MeaFields);

package/src/fields/encodeFields/singleEncodeDropDown.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownSelectProps {
+    options?: IDropdownSelectOption[];
+    disable?: boolean;
+    selectedKey: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    buttonClassName?: string;
+}
+const DropdownSelect: React.FC<IDropdownSelectProps> = (props) => {
+    const { options = [], disable, selectedKey, onSelect, placeholder = "Select an option", className, buttonClassName } = props;
+
+    const selectedItem = options.find((op) => op.value === selectedKey);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+    let rootClassName = "flex truncate";
+    let btnComputedClassName = "grow shrink relative cursor-default text-xs rounded-lg bg-white dark:bg-zinc-900  px-2.5 py-1.5 pr-10 text-left border border-gray-200 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 truncate"
+    if (buttonClassName) {
+        btnComputedClassName = btnComputedClassName + " " + buttonClassName;
+    }
+    if (className) {
+        rootClassName = rootClassName + " " + className;
+    }
+    return (
+        <Listbox
+            value={selectedKey}
+            onChange={(newKey) => {
+                onSelect && onSelect(newKey);
+            }}
+        >
+            <div className={rootClassName}>
+                <Listbox.Button className={btnComputedClassName}>
+                    <span className="block truncate">{selectedItem?.label || ""}</span>
+                    { selectedItem === undefined && <span className="block truncate text-gray-400">{placeholder}</span>}
+                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </Listbox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Listbox.Options className="absolute z-50 mt-8 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((op, opIndex) => (
+                            <Listbox.Option
+                                key={op.value}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                                        active ? "bg-amber-100 text-amber-900 dark:bg-amber-800 dark:text-amber-50" : "text-gray-900 dark:text-amber-50"
+                                    }`
+                                }
+                                value={op.value}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                                            {op.label}
+                                        </span>
+                                        {selected && (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        )}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default DropdownSelect;