@datalayer/core/lib/components/context/SpaceSelect.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useCallback, useEffect } from 'react';
import { FormControl, Select } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCache, useUser } from './../../hooks';
import { useLayoutStore } from '../../state';
export const SpaceSelect = () => {
    const user = useUser();
    const { organization, space, updateLayoutSpace } = useLayoutStore();
    const { useRefreshUserSpaces, useUserSpaces, useRefreshOrganizationSpaces, useOrganizationSpaces, } = useCache();
    const { mutate: refreshUserSpacesMutate } = useRefreshUserSpaces();
    const { mutate: refreshOrganizationSpacesMutate } = useRefreshOrganizationSpaces();
    const { data: organizationSpaces = [] } = useOrganizationSpaces(organization?.id ?? '');
    const { data: userSpaces = [] } = useUserSpaces();
    const spaces = organization ? organizationSpaces : userSpaces;
    useEffect(() => {
        if (organization?.id) {
            refreshOrganizationSpacesMutate(organization.id);
        }
        else if (user) {
            refreshUserSpacesMutate();
        }
    }, [
        organization?.id,
        refreshOrganizationSpacesMutate,
        refreshUserSpacesMutate,
        user,
    ]);
    const onSelectionChange = useCallback((event) => {
        const selectedSpaceIndex = Number.parseInt(event.target.value, 10);
        const selectedSpace = Number.isNaN(selectedSpaceIndex) || selectedSpaceIndex < 0
            ? undefined
            : spaces[selectedSpaceIndex];
        updateLayoutSpace(selectedSpace);
    }, [spaces, updateLayoutSpace]);
    return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }, sp.id))) })] }) }) }));
};
export default SpaceSelect;