[pull] latest from ag-grid:latest

.stylelintrc.js

@@ -2,7 +2,6 @@ module.exports = {
     extends: 'stylelint-config-standard',
     plugins: ['./plugins/stylelint-plugin-ag/index.mjs'],
     rules: {
-        'ag/no-low-performance-key-selector': true,
         'comment-empty-line-before': [
             'always',
             {
@@ -51,4 +50,12 @@ module.exports = {
             },
         ],
     },
+    overrides: [
+        {
+            files: ['packages/**/*.css'],
+            rules: {
+                'ag/no-low-performance-key-selector': true,
+            },
+        },
+    ],
 };

documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.module.css

@@ -296,3 +296,7 @@
 .variantsText {
     opacity: 0.7;
 }
+
+.wrapper {
+    margin-bottom: 10px;
+}

documentation/ag-grid-docs/src/components/theme-builder/components/general/GetTheme.tsx

@@ -1,165 +1,35 @@
-import Code from '@ag-website-shared/components/code/Code';
-import { Checkmark, Copy } from '@carbon/icons-react';
 import styled from '@emotion/styled';
-import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
-import { useMemo, useState } from 'react';
 
-import { type RenderedThemeInfo, useRenderedThemeInfo } from '../../model/rendered-theme';
+import { ThemeImportExportDialog } from './ThemeImportExportDialog';
 import { UIPopupButton } from './UIPopupButton';
 
+const hasImportHash = () => typeof window !== 'undefined' && window.location.hash === '#import';
+
 export const GetThemeButton = () => (
     <ButtonWrapper>
-        <UIPopupButton allowedPlacements={['right-end']} dropdownContent={<GetThemeDialog />} variant="primary">
-            {downloadIcon} Use Theme
+        <UIPopupButton
+            allowedPlacements={['right-end']}
+            dropdownContent={(close) => (
+                <ThemeImportExportDialog close={close} initialTab={hasImportHash() ? 'Import' : 'Export'} />
+            )}
+            variant="primary"
+            initialOpen={hasImportHash()}
+            onClose={() => {
+                if (hasImportHash()) {
+                    history.replaceState(null, '', window.location.pathname + window.location.search);
+                }
+            }}
+        >
+            {downloadIcon} Import / Export
         </UIPopupButton>
     </ButtonWrapper>
 );
 
-export const installDocsUrl = 'https://www.ag-grid.com/javascript-data-grid/applying-theme-builder-styling-grid/';
-
-const GetThemeDialog = () => {
-    const theme = useRenderedThemeInfo();
-    const codeSample = useMemo(() => renderThemeCodeSample(theme), [theme]);
-    const downloadLink = `data:text/css;charset=utf-8,${encodeURIComponent(codeSample)}`;
-
-    const [copyButtonClicked, setCopyButtonClicked] = useState(false);
-
-    return (
-        <DownloadThemeWrapper>
-            <Paragraph>
-                Copy the code below into your application to use this theme. See the{' '}
-                <a href={urlWithBaseUrl('/react-data-grid/theming/')} target="_blank">
-                    Theming API documentation
-                </a>{' '}
-                for more information.
-            </Paragraph>
-            <Links>
-                <DownloadLink className="button-tertiary" href={downloadLink} download="ag-grid-theme-builder.js">
-                    <LinkContent>{downloadIcon} Download</LinkContent>
-                </DownloadLink>
-                <CopyLink
-                    className="button-tertiary"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        if (!copyButtonClicked) {
-                            setTimeout(() => {
-                                setCopyButtonClicked(false);
-                            }, 4000);
-                        }
-                        setCopyButtonClicked(true);
-                        navigator.clipboard.writeText(codeSample);
-                    }}
-                >
-                    <LinkContent
-                        className={`copy-state-ready ${!copyButtonClicked ? 'copy-state-visible' : 'copy-state-hidden'}`}
-                    >
-                        {<Copy />} Copy
-                    </LinkContent>
-                    <LinkContent
-                        className={`copy-state-clicked ${copyButtonClicked ? 'copy-state-visible' : 'copy-state-hidden'}`}
-                    >
-                        {<Checkmark />} Copied
-                    </LinkContent>
-                </CopyLink>
-            </Links>
-            <CodeWrapper>
-                <Code code={codeSample} language="js" />
-            </CodeWrapper>
-        </DownloadThemeWrapper>
-    );
-};
-
-const renderThemeCodeSample = ({ overriddenParams, usedParts }: RenderedThemeInfo): string => {
-    const imports = ['themeQuartz'];
-    let code = '';
-    code += `// to use myTheme in an application, pass it to the theme grid option\n`;
-    const paramsJS = JSON.stringify(overriddenParams, null, 4)
-        // strip quotes from keys
-        .replaceAll(/^(\s+)"([^"]+)":/gm, '$1$2:')
-        // replace string pixel values with numbers
-        .replaceAll(/(:\s*)"(\d+)px"/gm, '$1$2');
-    code += `const myTheme = themeQuartz\n`;
-    for (const part of usedParts) {
-        const partImport = camelCase(part.id);
-        code += `\t.withPart(${partImport})\n`;
-        imports.push(partImport);
-    }
-    code += `\t.withParams(${paramsJS.replaceAll('\n', '\n    ')});\n`;
-    code = `import { ${imports.join(', ')} } from 'ag-grid-community';\n\n${code}`;
-
-    return code;
-};
-
-const camelCase = (str: string) => str.replace(/[\W_]+([a-z])/g, (_, letter) => letter.toUpperCase());
-
-const CodeWrapper = styled('div')`
-    user-select: text;
-    cursor: text;
-
-    .code {
-        max-height: 500px;
-        overflow: auto;
-        margin-top: 0;
-    }
-`;
-
-const Paragraph = styled('div')``;
-
-const Links = styled('div')`
-    display: flex;
-    gap: 16px;
-`;
-
-const DownloadThemeWrapper = styled('div')`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    max-height: 700px;
-    width: 1060px;
-    max-width: calc(100vw - 100px);
-
-    > * {
-        flex: 0;
-    }
-`;
-
 const ButtonWrapper = styled('div')`
     width: 100%;
     margin-right: 24px;
 `;
 
-const DownloadLink = styled('a')`
-    & span {
-        padding-right: 4px;
-    }
-`;
-
-const CopyLink = styled('button')`
-    position: relative;
-
-    .copy-state-ready {
-        position: absolute;
-        inset: 0;
-    }
-    .copy-state-clicked {
-        margin-right: 4px;
-    }
-    .copy-state-visible {
-        opacity: 1;
-    }
-    .copy-state-hidden {
-        opacity: 0;
-    }
-`;
-
-const LinkContent = styled('span')`
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.2s;
-`;
-
 const downloadIcon = (
     <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none">
         <path

documentation/ag-grid-docs/src/components/theme-builder/components/general/RootContainer.tsx

@@ -12,14 +12,13 @@ import { GetThemeButton } from './GetTheme';
 import { GridPreview } from './GridPreview';
 
 export const RootContainer = () => {
-    // makes variables available for use by editors
-    useRenderedTheme();
+    const renderedTheme = useRenderedTheme();
 
     useWarnOfUnknownCssVariables();
 
     return (
         <Container>
-            <Menu className="apply-current-theme-params">
+            <Menu className={renderedTheme._getParamsClassName()}>
                 <EditorScroller>
                     <EditorPanel />
                 </EditorScroller>