[pull] latest from ag-grid:latest

documentation/ag-grid-docs/src/components/docs/utils/pageData.ts

@@ -12,6 +12,7 @@ interface Example {
     internalFramework: InternalFramework;
     pageName: string;
     exampleName: string;
+    supportedFrameworks?: InternalFramework[];
 }
 
 type DocExamplePages = Awaited<ReturnType<typeof getDocsExamplePages>>;
@@ -23,6 +24,7 @@ type DocExamplePage = DocExamplePages[number]['params'] & {
     hasSimpleHtml?: boolean;
     scriptNonce?: string;
     sourceFileList?: string[];
+    supportedFrameworks?: InternalFramework[];
 };
 type DocFrameworkExamples = Record<InternalFramework, DocExamplePage>;
 
@@ -84,19 +86,17 @@ async function getDocsExampleNameParts({ pages }: { pages: DocsPage[] }): Promis
         : internalFrameworkExamples;
 
     return filteredInternalFrameworkExamples
-        .flatMap((example) => {
-            const frameworkSupported =
-                example.supportedFrameworks === undefined || example.supportedFrameworks.has(example.internalFramework);
-
-            if (!frameworkSupported) {
-                return undefined;
-            }
-
-            return {
-                ...example,
-            };
+        .filter((example) => {
+            return (
+                example.supportedFrameworks === undefined || example.supportedFrameworks.has(example.internalFramework)
+            );
         })
-        .filter((e) => e !== undefined) as Example[];
+        .map(({ internalFramework, pageName, exampleName, supportedFrameworks }) => ({
+            internalFramework,
+            pageName,
+            exampleName,
+            supportedFrameworks: supportedFrameworks ? Array.from(supportedFrameworks) : undefined,
+        }));
 }
 
 export async function getDocsExamplePages({ pages }: { pages: DocsPage[] }) {
@@ -122,7 +122,7 @@ function allPropertiesAreTruthy(entries: [string, DocExamplePage][], property: k
 function flattenDocsExampleContents(data: Record<string, DocFrameworkExamples>) {
     return Object.values(data).map((frameworkExamples) => {
         const frameworkEntries = Object.entries(frameworkExamples);
-        const [_, { pageName, exampleName, sourceFileList, scriptNonce }] = frameworkEntries[0];
+        const [_, { pageName, exampleName, sourceFileList, scriptNonce, supportedFrameworks }] = frameworkEntries[0];
         const isEnterprise = allPropertiesAreTruthy(frameworkEntries, 'isEnterprise');
         const isIntegratedCharts = allPropertiesAreTruthy(frameworkEntries, 'isIntegratedCharts');
         const isLocale = allPropertiesAreTruthy(frameworkEntries, 'isLocale');
@@ -140,19 +140,18 @@ function flattenDocsExampleContents(data: Record<string, DocFrameworkExamples>)
             hasExampleConsoleLog,
             hasSimpleHtml,
             scriptNonce,
+            supportedFrameworks,
             frameworkExamples,
         };
     });
 }
 
 export async function getDocsExampleContents({ pages }: { pages: DocsPage[] }) {
-    const examples = await getDocsExamplePages({
-        pages,
-    });
+    const examples = await getDocsExampleNameParts({ pages });
 
     const exampleContents: Record<string, DocFrameworkExamples> = {};
     const examplePromises = examples.map(async (example) => {
-        const { internalFramework, pageName, exampleName } = example.params;
+        const { internalFramework, pageName, exampleName, supportedFrameworks } = example;
         const key = `${pageName}-${exampleName}`;
         if (!exampleContents[key]) {
             exampleContents[key] = {} as DocFrameworkExamples;
@@ -173,7 +172,10 @@ export async function getDocsExampleContents({ pages }: { pages: DocsPage[] }) {
             hasSimpleHtml: contents?.hasSimpleHtml,
             sourceFileList: contents?.sourceFileList,
             scriptNonce: contents?.scriptNonce,
-            ...example.params,
+            internalFramework,
+            pageName,
+            exampleName,
+            supportedFrameworks,
         };
     });
     await Promise.all(examplePromises);

documentation/ag-grid-docs/src/components/framework-selector-inside-doc/FrameworkSelectorInsideDocs.module.scss

@@ -11,3 +11,7 @@
     gap: 8px;
     align-items: center;
 }
+
+.select {
+    width: 160px;
+}

documentation/ag-grid-docs/src/components/framework-selector-inside-doc/FrameworkSelectorInsideDocs.tsx

@@ -70,6 +70,7 @@ export const FrameworkSelectorInsideDocs = ({ path, currentFramework, menuItems
                     isPopper
                     options={frameworkOptions}
                     value={frameworkOption}
+                    className={styles.select}
                     onChange={(newValue) => handleFrameworkChange(newValue.value as Framework)}
                     renderItem={(o) => {
                         return (

documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.module.scss

@@ -92,9 +92,7 @@
         bottom: 0;
         width: 1px;
         background-color: var(--color-util-brand-200);
-        transition:
-            width $transition-default-timing,
-            background-color $transition-default-timing;
+        transition: background-color $transition-default-timing;
     }
 
     // Dark mode: use primary border colour for inactive line
@@ -108,7 +106,7 @@
 
     // Active items: show full 2px line using pseudo-element
     &:has(:global(.active))::before {
-        width: 2px;
+        width: 1px;
         background-color: var(--active-border);
     }
 }
@@ -118,7 +116,7 @@
     background-color: var(--active-background);
 
     &::before {
-        width: 2px;
+        width: 1px;
         background-color: var(--active-border);
     }
 

documentation/ag-grid-docs/src/components/pages-navigation/components/SideNavigation.tsx

@@ -1,9 +1,9 @@
+import { Icon } from '@ag-website-shared/components/icon/Icon';
 import { navigate, scrollIntoViewById } from '@ag-website-shared/utils/navigation';
 import { useScrollSpy } from '@components/pages-navigation/hooks/useScrollSpy';
 import { addNonBreakingSpaceBetweenLastWords } from '@utils/addNonBreakingSpaceBetweenLastWords';
 import type { MarkdownHeading } from 'astro';
 
-import BackToTopIcon from '../../../images/back-to-top-icon.svg?react';
 import styles from './SideNavigation.module.scss';
 
 interface Props {
@@ -52,7 +52,7 @@ export function SideNavigation({ headings, delayedScrollSpy }: Props) {
                             navigate({ search: window.location.search, hash: 'top' });
                         }}
                     >
-                        <BackToTopIcon className={styles.backToTopIcon} />
+                        <Icon name="backToTop" svgClasses={styles.backToTopIcon} />
                         Back to top
                     </a>
                 </div>

documentation/ag-grid-docs/src/pages/debug/docs-examples.astro

@@ -3,26 +3,26 @@ import { getCollection } from 'astro:content';
 import DebugLayout from '@layouts/DebugLayout.astro';
 import { getDocsExampleContents } from '@components/docs/utils/pageData';
 
-import { DocsExamples } from '@ag-website-shared/components/docs-examples/components/DocsExamples';
+import {
+    DocsExamples,
+    type ExampleProperty,
+} from '@ag-website-shared/components/docs-examples/components/DocsExamples';
 
 const pages = await getCollection('docs');
 const exampleContents = await getDocsExampleContents({ pages });
+const properties: ExampleProperty[] = [
+    'sourceFileList',
+    'isEnterprise',
+    'isIntegratedCharts',
+    'isLocale',
+    'hasExampleConsoleLog',
+    'hasSimpleHtml',
+    'scriptNonce',
+    'supportedFrameworks',
+];
 ---
 
 <DebugLayout title={`Debug: Docs Example Pages`}>
     <h1>Docs Example Pages</h1>
-    <DocsExamples
-        library="grid"
-        client:load
-        exampleContents={exampleContents}
-        properties={[
-            'sourceFileList',
-            'isEnterprise',
-            'isIntegratedCharts',
-            'isLocale',
-            'hasExampleConsoleLog',
-            'hasSimpleHtml',
-            'scriptNonce',
-        ]}
-    />
+    <DocsExamples library="grid" client:load exampleContents={exampleContents} properties={properties} />
 </DebugLayout>

documentation/ag-grid-docs/src/types/ag-grid.d.ts

@@ -5,7 +5,7 @@ export type Framework = 'javascript' | 'react' | 'angular' | 'vue';
 
 export type InternalFramework = 'vanilla' | 'typescript' | 'reactFunctional' | 'reactFunctionalTs' | 'angular' | 'vue3';
 
-export type Library = 'charts' | 'grid' | 'dash';
+export type Library = 'charts' | 'grid' | 'studio';
 
 export interface MenuSection {
     title?: string;

external/ag-shared/.claude-settings.template.json

@@ -142,6 +142,8 @@
   "enabledPlugins": {
     "ag-core@ag-dev": true,
     "ag-prodeng@ag-dev": true,
+    "ag-eng@ag-dev": true,
+    "ag-product@ag-dev": true,
     "${PRODUCT}@ag-dev": true,
     "codex@openai-codex": true,
     "skill-creator@claude-plugins-official": true

external/ag-shared/.gitrepo

@@ -6,7 +6,7 @@
 [subrepo]
 	remote = https://github.com/ag-grid/ag-shared.git
 	branch = latest
-	commit = d6f93e4d145bf572ede20199bcaf1094aef3cf2c
-	parent = 4d1c1c36341f1ce9d9b1494b38bc5c89bff0ef94
+	commit = 4b9d55be168c53e75143e99ec39208099f76f939
+	parent = 184ce2a211eb430bf97890502d19d421042bf551
 	method = rebase
 	cmdver = 0.4.9

external/ag-website-shared/src/components/docs-examples/components/DocsExamples.tsx

@@ -35,7 +35,8 @@ export type ExampleProperty =
     | 'hasExampleConsoleLog'
     | 'hasExampleControls'
     | 'hasSimpleHtml'
-    | 'scriptNonce';
+    | 'scriptNonce'
+    | 'supportedFrameworks';
 
 export interface Props {
     library: Library;
@@ -67,6 +68,14 @@ const URL_MAPPING: Record<
         production: ({ pageName, exampleName }) =>
             `https://www.ag-grid.com/charts/javascript/${pageName}/#example-${exampleName}`,
     },
+    studio: {
+        local: ({ pageName, exampleName }) =>
+            `https://localhost:4620/studio/javascript/${pageName}/#example-${exampleName}`,
+        staging: ({ pageName, exampleName }) =>
+            `https://studio-staging.ag-grid.com/javascript/${pageName}/#example-${exampleName}`,
+        production: ({ pageName, exampleName }) =>
+            `https://www.ag-grid.com/studio/javascript/${pageName}/#example-${exampleName}`,
+    },
 };
 
 const ALL_PROPERTIES: (ColDef & {
@@ -134,6 +143,23 @@ const ALL_PROPERTIES: (ColDef & {
         enableRowGroup: true,
         minWidth: 115,
     },
+    {
+        field: 'supportedFrameworks',
+        headerName: 'Supported Frameworks',
+        enableRowGroup: true,
+        filter: 'agSetColumnFilter',
+        minWidth: 200,
+        valueFormatter: ({ value, node }) => {
+            if (node?.group) {
+                return '';
+            }
+            if (!value) {
+                return 'all';
+            }
+
+            return Array.isArray(value) ? value.join(', ') : value;
+        },
+    },
 ];
 
 export const DocsExamples: FunctionComponent<Props> = ({ library, properties = [], exampleContents }) => {

external/ag-website-shared/src/components/docs-examples/components/cell-renderers/LinkCellRenderer.tsx

@@ -10,7 +10,10 @@ export function LinkCellRenderer({ colDef, data }) {
         return;
     }
     const internalFramework = colDef.colId;
-    const { pageName, exampleName } = data;
+    const { pageName, exampleName, supportedFrameworks } = data;
+    if (supportedFrameworks && !supportedFrameworks.includes(internalFramework)) {
+        return null;
+    }
     const titlePrefix = `${pageName} > ${exampleName} > ${internalFramework}`;
 
     return (

external/ag-website-shared/src/components/icon/Icon.tsx

@@ -1,3 +1,4 @@
+import BackToTopIcon from '@ag-website-shared/images/inline-svgs/back-to-top-icon.svg?react';
 import BoldChevronDown from '@ag-website-shared/images/inline-svgs/bold-chevron-down.svg?react';
 import BoldChevronLeft from '@ag-website-shared/images/inline-svgs/bold-chevron-left.svg?react';
 import BoldChevronRight from '@ag-website-shared/images/inline-svgs/bold-chevron-right.svg?react';
@@ -95,6 +96,7 @@ const CHARTS_ICON_MAP = {
 };
 
 export const ICON_MAP = {
+    backToTop: BackToTopIcon,
     info: CarbonIcon.Information,
     warning: CarbonIcon.WarningAlt,
     creditCard: CarbonIcon.Purchase,

external/ag-website-shared/src/components/select/Select.tsx

@@ -20,6 +20,7 @@ type SelectProps<O> = {
     isPopper?: boolean;
     isLarge?: boolean;
     constrainHeight?: boolean;
+    className?: string;
 };
 
 export function Select<O>({
@@ -35,6 +36,7 @@ export function Select<O>({
     isPopper,
     isLarge,
     constrainHeight,
+    className,
 }: SelectProps<O>) {
     const getOptionContent = useCallback((option: O) => {
         const key = getKey(option) ?? '';
@@ -81,7 +83,7 @@ export function Select<O>({
             <RadixSelect.Trigger
                 tabIndex={0}
                 aria-label={triggerAriaLabel}
-                className={classnames(styles.trigger, { [styles.large]: isLarge })}
+                className={classnames(styles.trigger, { [styles.large]: isLarge }, className)}
             >
                 <RadixSelect.Value placeholder={placeholder}>{getOptionContent(value).optionContent}</RadixSelect.Value>
                 <RadixSelect.Icon>

external/ag-website-shared/src/components/trial-licence-form/TrialLicenceFormAllFields.tsx

@@ -222,7 +222,10 @@ export const TrialLicenceFormAllFields: FunctionComponent = ({ submitUrl }: Prop
     return (
         <form id={ZI_FORM_ID} noValidate className={styles.trialForm} onSubmit={handleFormSubmit}>
             <div className={styles.inputs}>
-                <input placeholder="Company" type="hidden" id="company" name="company" />
+                <div className={classnames('input-field')}>
+                    <label htmlFor="company">Company (optional)</label>
+                    <input placeholder="Company" type="text" id="company" name="company" />
+                </div>
 
                 <div className={classnames('input-field', styles.emailField, { 'input-error': emailError })}>
                     <label htmlFor="email">Email</label>