@ably/ui 16.2.3-dev.408109d7 → 16.2.4-dev.0322c74e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/core/CodeSnippet/ApiKeySelector.js +1 -1
  2. package/core/CodeSnippet/ApiKeySelector.js.map +1 -1
  3. package/core/CodeSnippet/CopyButton.js +1 -1
  4. package/core/CodeSnippet/CopyButton.js.map +1 -1
  5. package/core/CodeSnippet/LanguageSelector.js.map +1 -1
  6. package/core/CodeSnippet/ShellCommandView.js +1 -1
  7. package/core/CodeSnippet/ShellCommandView.js.map +1 -1
  8. package/core/CodeSnippet.js +1 -1
  9. package/core/CodeSnippet.js.map +1 -1
  10. package/core/ProductTile/data.js +1 -1
  11. package/core/ProductTile/data.js.map +1 -1
  12. package/core/remote-session-data.js.map +1 -1
  13. package/core/styles/colors/computed-colors.json +1 -0
  14. package/index.d.ts +2 -5
  15. package/package.json +1 -1
  16. package/core/.DS_Store +0 -0
  17. package/core/Accordion/.DS_Store +0 -0
  18. package/core/Code/.DS_Store +0 -0
  19. package/core/ContactFooter/.DS_Store +0 -0
  20. package/core/CookieMessage/.DS_Store +0 -0
  21. package/core/CustomerLogos/.DS_Store +0 -0
  22. package/core/DropdownMenu/.DS_Store +0 -0
  23. package/core/FeaturedLink/.DS_Store +0 -0
  24. package/core/Flash/.DS_Store +0 -0
  25. package/core/Footer/.DS_Store +0 -0
  26. package/core/Icon/.DS_Store +0 -0
  27. package/core/Loader/.DS_Store +0 -0
  28. package/core/Logo/.DS_Store +0 -0
  29. package/core/Meganav/.DS_Store +0 -0
  30. package/core/Notice/.DS_Store +0 -0
  31. package/core/Slider/.DS_Store +0 -0
  32. package/core/Table/.DS_Store +0 -0
  33. package/core/Tooltip/.DS_Store +0 -0
  34. package/core/icons/.DS_Store +0 -0
  35. package/core/icons/gui/.DS_Store +0 -0
  36. package/core/images/.DS_Store +0 -0
  37. package/core/images/logo/.DS_Store +0 -0
package/core/CodeSnippet/ApiKeySelector.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO,[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const demoTooltipContent=useMemo(()=>React.createElement(React.Fragment,null,"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead."),[]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},demoTooltipContent)),[demoTooltipContent]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,apiKeyItems,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),renderApiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
1
+ import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO,[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead.")),[]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,apiKeyItems,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),renderApiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
2
2
  //# sourceMappingURL=ApiKeySelector.js.map
package/core/CodeSnippet/ApiKeySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n apiKeys?: string[];\n selectedApiKey: string;\n onApiKeyChange: (apiKey: string) => void;\n}\n\n// Define constants at the module level\nconst SPECIAL_API_KEYS = {\n DEMO: \"demo\",\n} as const;\n\nconst ApiKeySelector = memo(\n ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n // Check if we're in demo mode - only compute this once\n const isDemoMode = useMemo(\n () => apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO,\n [apiKeys],\n );\n\n // Memoize API key items to prevent recreating them on each render\n const apiKeyItems = useMemo(() => {\n if (!apiKeys?.length || isDemoMode) return null;\n\n return apiKeys.map((key) => (\n <Select.Item\n key={key}\n value={key}\n className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText>{key}</Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-8\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n ));\n }, [apiKeys, isDemoMode]);\n\n // Memoize the tooltip content since it's static\n const demoTooltipContent = useMemo(\n () => (\n <>\n This code example uses a temporary key that is rate limited and\n expires in 4 hrs. Sign in to Ably to use your API keys instead.\n </>\n ),\n [],\n );\n\n // Render the demo mode UI\n const renderDemoMode = useMemo(\n () => (\n <div className=\"flex items-center\">\n <Badge className=\"ml-4 bg-neutral-200 dark:bg-neutral-1100\">\n DEMO ONLY\n </Badge>\n <Tooltip\n className=\"ml-0\"\n triggerElement={\n <Icon\n name=\"icon-gui-information-circle-outline\"\n size=\"16px\"\n color=\"text-neutral-700 dark:text-neutral-600\"\n />\n }\n >\n {demoTooltipContent}\n </Tooltip>\n </div>\n ),\n [demoTooltipContent],\n );\n\n // Render the dropdown only if we have API keys\n const renderApiKeyDropdown = useMemo(() => {\n if (isDemoMode) {\n return renderDemoMode;\n }\n\n if (!apiKeys?.length) {\n return null;\n }\n\n return (\n <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n <Select.Trigger\n className=\"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base\"\n aria-label=\"API Key\"\n >\n <Select.Value />\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-4\">{apiKeyItems}</Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n );\n }, [\n apiKeys,\n isDemoMode,\n selectedApiKey,\n onApiKeyChange,\n apiKeyItems,\n renderDemoMode,\n ]);\n\n return (\n <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n API key:\n </span>\n {renderApiKeyDropdown}\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","demoTooltipContent","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,iBAAmB,CACvBC,KAAM,MACR,EAEA,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaX,QACjB,IAAMQ,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CACnE,CAACE,QAAQ,EAIX,MAAMK,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,mBAAqBvB,QACzB,IACE,wCAAE,mIAKJ,EAAE,EAIJ,MAAMwB,eAAiBxB,QACrB,IACE,oBAACyB,OAAIP,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVQ,eACE,oBAACvB,MACCkB,KAAK,sCACLC,KAAK,OACLK,MAAM,4CAITJ,qBAIP,CAACA,mBAAmB,EAItB,MAAMK,qBAAuB5B,QAAQ,KACnC,GAAIW,WAAY,CACd,OAAOa,cACT,CAEA,GAAI,CAAChB,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO4B,IAAI,EAACZ,MAAOR,eAAgBqB,cAAepB,gBACjD,oBAACT,OAAO8B,OAAO,EACbb,UAAU,kNACVc,aAAW,WAEX,oBAAC/B,OAAOgC,KAAK,OACb,oBAAChC,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAOiC,MAAM,MACZ,oBAACjC,OAAOkC,OAAO,EAACjB,UAAU,oIACxB,oBAACjB,OAAOmC,cAAc,EAAClB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLe,cAAc,gBAIlB,oBAACpC,OAAOqC,QAAQ,EAACpB,UAAU,OAAOL,aAElC,oBAACZ,OAAOsC,gBAAgB,EAACrB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDd,QACAG,WACAF,eACAC,eACAG,YACAW,eACD,EAED,OACE,oBAACC,OAAIP,UAAU,sFACb,oBAACsB,QAAKtB,UAAU,8DAA6D,YAG5EU,qBAGP,EAIFrB,CAAAA,eAAekC,WAAW,CAAG,gBAE7B,gBAAelC,cAAe"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n apiKeys?: string[];\n selectedApiKey: string;\n onApiKeyChange: (apiKey: string) => void;\n}\n\n// Define constants at the module level\nconst SPECIAL_API_KEYS = {\n DEMO: \"demo\",\n} as const;\n\nconst ApiKeySelector = memo(\n ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n // Check if we're in demo mode - only compute this once\n const isDemoMode = useMemo(\n () => apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO,\n [apiKeys],\n );\n\n // Memoize API key items to prevent recreating them on each render\n const apiKeyItems = useMemo(() => {\n if (!apiKeys?.length || isDemoMode) return null;\n\n return apiKeys.map((key) => (\n <Select.Item\n key={key}\n value={key}\n className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText>{key}</Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-8\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n ));\n }, [apiKeys, isDemoMode]);\n\n // Render the demo mode UI\n const renderDemoMode = useMemo(\n () => (\n <div className=\"flex items-center\">\n <Badge className=\"ml-4 bg-neutral-200 dark:bg-neutral-1100\">\n DEMO ONLY\n </Badge>\n <Tooltip\n className=\"ml-0\"\n triggerElement={\n <Icon\n name=\"icon-gui-information-circle-outline\"\n size=\"16px\"\n color=\"text-neutral-700 dark:text-neutral-600\"\n />\n }\n >\n This code example uses a temporary key that is rate limited and\n expires in 4 hrs. Sign in to Ably to use your API keys instead.\n </Tooltip>\n </div>\n ),\n [],\n );\n\n // Render the dropdown only if we have API keys\n const renderApiKeyDropdown = useMemo(() => {\n if (isDemoMode) {\n return renderDemoMode;\n }\n\n if (!apiKeys?.length) {\n return null;\n }\n\n return (\n <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n <Select.Trigger\n className=\"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base\"\n aria-label=\"API Key\"\n >\n <Select.Value />\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-4\">{apiKeyItems}</Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n );\n }, [\n apiKeys,\n isDemoMode,\n selectedApiKey,\n onApiKeyChange,\n apiKeyItems,\n renderDemoMode,\n ]);\n\n return (\n <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n API key:\n </span>\n {renderApiKeyDropdown}\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,iBAAmB,CACvBC,KAAM,MACR,EAEA,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaX,QACjB,IAAMQ,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CACnE,CAACE,QAAQ,EAIX,MAAMK,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,eAAiBvB,QACrB,IACE,oBAACwB,OAAIN,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVO,eACE,oBAACtB,MACCkB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuB3B,QAAQ,KACnC,GAAIW,WAAY,CACd,OAAOY,cACT,CAEA,GAAI,CAACf,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO2B,IAAI,EAACX,MAAOR,eAAgBoB,cAAenB,gBACjD,oBAACT,OAAO6B,OAAO,EACbZ,UAAU,kNACVa,aAAW,WAEX,oBAAC9B,OAAO+B,KAAK,OACb,oBAAC/B,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAOgC,MAAM,MACZ,oBAAChC,OAAOiC,OAAO,EAAChB,UAAU,oIACxB,oBAACjB,OAAOkC,cAAc,EAACjB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLc,cAAc,gBAIlB,oBAACnC,OAAOoC,QAAQ,EAACnB,UAAU,OAAOL,aAElC,oBAACZ,OAAOqC,gBAAgB,EAACpB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDd,QACAG,WACAF,eACAC,eACAG,YACAU,eACD,EAED,OACE,oBAACC,OAAIN,UAAU,sFACb,oBAACqB,QAAKrB,UAAU,8DAA6D,YAG5ES,qBAGP,EAIFpB,CAAAA,eAAeiC,WAAW,CAAG,gBAE7B,gBAAejC,cAAe"}
package/core/CodeSnippet/CopyButton.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{memo}from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=memo(({onCopy,isCopied,tooltip="Copy"})=>{const CopiedIndicator=isCopied?React.createElement("div",{className:"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap"},"Copied!"):null;return React.createElement("div",{className:"absolute top-8 right-8 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),CopiedIndicator)});CopyButton.displayName="CopyButton";export default CopyButton;
1
+ import React,{memo}from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=memo(({onCopy,isCopied,tooltip="Copy"})=>{return React.createElement("div",{className:"absolute top-8 right-8 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),isCopied?React.createElement("div",{className:"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap"},"Copied!"):null)});CopyButton.displayName="CopyButton";export default CopyButton;
2
2
  //# sourceMappingURL=CopyButton.js.map
package/core/CodeSnippet/CopyButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface CopyButtonProps {\n onCopy: () => void;\n isCopied: boolean;\n tooltip?: string;\n}\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton = memo(\n ({ onCopy, isCopied, tooltip = \"Copy\" }: CopyButtonProps) => {\n // Memoized copied indicator\n const CopiedIndicator = isCopied ? (\n <div className=\"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap\">\n Copied!\n </div>\n ) : null;\n\n return (\n <div className=\"absolute top-8 right-8 z-10\">\n <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n <Icon\n name=\"icon-gui-document-duplicate-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </TooltipButton>\n\n {CopiedIndicator}\n </div>\n );\n },\n);\n\n// Add displayName for better debugging\nCopyButton.displayName = \"CopyButton\";\n\nexport default CopyButton;\n"],"names":["React","memo","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","CopiedIndicator","div","className","onClick","variant","name","size","color","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,KAAQ,OAAQ,AACpC,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAaH,KACjB,CAAC,CAAEI,MAAM,CAAEC,QAAQ,CAAEC,QAAU,MAAM,CAAmB,IAEtD,MAAMC,gBAAkBF,SACtB,oBAACG,OAAIC,UAAU,+JAA8J,WAG3K,KAEJ,OACE,oBAACD,OAAIC,UAAU,+BACb,oBAACP,eAAcI,QAASA,QAASI,QAASN,OAAQO,QAAQ,eACxD,oBAACV,MACCW,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITP,gBAGP,EAIFJ,CAAAA,WAAWY,WAAW,CAAG,YAEzB,gBAAeZ,UAAW"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface CopyButtonProps {\n onCopy: () => void;\n isCopied: boolean;\n tooltip?: string;\n}\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton = memo(\n ({ onCopy, isCopied, tooltip = \"Copy\" }: CopyButtonProps) => {\n return (\n <div className=\"absolute top-8 right-8 z-10\">\n <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n <Icon\n name=\"icon-gui-document-duplicate-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </TooltipButton>\n\n {isCopied ? (\n <div className=\"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap\">\n Copied!\n </div>\n ) : null}\n </div>\n );\n },\n);\n\n// Add displayName for better debugging\nCopyButton.displayName = \"CopyButton\";\n\nexport default CopyButton;\n"],"names":["React","memo","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","div","className","onClick","variant","name","size","color","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,KAAQ,OAAQ,AACpC,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAaH,KACjB,CAAC,CAAEI,MAAM,CAAEC,QAAQ,CAAEC,QAAU,MAAM,CAAmB,IACtD,OACE,oBAACC,OAAIC,UAAU,+BACb,oBAACN,eAAcI,QAASA,QAASG,QAASL,OAAQM,QAAQ,eACxD,oBAACT,MACCU,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITR,SACC,oBAACE,OAAIC,UAAU,+JAA8J,WAG3K,KAGV,EAIFL,CAAAA,WAAWW,WAAW,CAAG,YAEzB,gBAAeX,UAAW"}
package/core/CodeSnippet/LanguageSelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface LanguageInfo {\n label: string;\n icon: IconName;\n}\n\ninterface LanguageSelectorProps {\n languages: string[];\n activeLanguage: string | null;\n onLanguageChange: (language: string) => void;\n getLanguageDisplayName: (lang: string) => string;\n getLanguageIcon: (lang: string) => IconName;\n activeLanguageInfo: LanguageInfo | null;\n}\n\nconst LanguageSelector = memo(\n ({\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n activeLanguageInfo,\n }: LanguageSelectorProps) => {\n // Memoize the desktop language elements to avoid recreating on each render\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageDisplayName(lang);\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageIcon(lang)}\n variant=\"segmented\"\n size=\"sm\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n ],\n );\n\n // Memoize the mobile language elements\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-8\">\n <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n <span>{getLanguageDisplayName(lang)}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-8\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages, getLanguageDisplayName, getLanguageIcon],\n );\n\n // Memoize the mobile Select.Value content as it's recreated on every render\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage && activeLanguageInfo ? (\n <div className=\"flex items-center gap-8\">\n <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n <span>{activeLanguageInfo.label}</span>\n </div>\n ) : null,\n [activeLanguage, activeLanguageInfo],\n );\n\n return (\n <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n {/* Desktop language selector - SegmentedControls */}\n <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n {/* Mobile language selector - Select dropdown */}\n <div className=\"sm:hidden w-full\">\n <Select.Root\n value={activeLanguage || undefined}\n onValueChange={onLanguageChange}\n >\n <Select.Trigger\n className=\"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base\"\n aria-label=\"Select language\"\n >\n <Select.Value asChild>{mobileSelectValue}</Select.Value>\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content\n className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n position=\"popper\"\n >\n <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-4\">\n {mobileLanguageElements}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n </div>\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAgB5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,+QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\nimport { LanguageInfo } from \"./languages\";\n\ninterface LanguageSelectorProps {\n languages: string[];\n activeLanguage: string | null;\n onLanguageChange: (language: string) => void;\n getLanguageDisplayName: (lang: string) => string;\n getLanguageIcon: (lang: string) => IconName;\n activeLanguageInfo: LanguageInfo | null;\n}\n\nconst LanguageSelector = memo(\n ({\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n activeLanguageInfo,\n }: LanguageSelectorProps) => {\n // Memoize the desktop language elements to avoid recreating on each render\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageDisplayName(lang);\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageIcon(lang)}\n variant=\"segmented\"\n size=\"sm\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n ],\n );\n\n // Memoize the mobile language elements\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-8\">\n <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n <span>{getLanguageDisplayName(lang)}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-8\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages, getLanguageDisplayName, getLanguageIcon],\n );\n\n // Memoize the mobile Select.Value content as it's recreated on every render\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage && activeLanguageInfo ? (\n <div className=\"flex items-center gap-8\">\n <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n <span>{activeLanguageInfo.label}</span>\n </div>\n ) : null,\n [activeLanguage, activeLanguageInfo],\n );\n\n return (\n <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n {/* Desktop language selector - SegmentedControls */}\n <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n {/* Mobile language selector - Select dropdown */}\n <div className=\"sm:hidden w-full\">\n <Select.Root\n value={activeLanguage || undefined}\n onValueChange={onLanguageChange}\n >\n <Select.Trigger\n className=\"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base\"\n aria-label=\"Select language\"\n >\n <Select.Value asChild>{mobileSelectValue}</Select.Value>\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content\n className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n position=\"popper\"\n >\n <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-4\">\n {mobileLanguageElements}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n </div>\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAY5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,+QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}
package/core/CodeSnippet/ShellCommandView.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);const handleHoverChange=useCallback(hovering=>{setIsHovering(hovering)},[]);const ShellIcon=()=>React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})));return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]",className),onMouseEnter:()=>handleHoverChange(true),onMouseLeave:()=>handleHoverChange(false),onFocus:()=>handleHoverChange(true),onBlur:()=>handleHoverChange(false),tabIndex:0,ref:codeRef},React.createElement(ShellIcon,null),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};export default memo(ShellCommandView);
1
+ import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};ShellCommandView.displayName="ShellCommandView";export default memo(ShellCommandView);
2
2
  //# sourceMappingURL=ShellCommandView.js.map
package/core/CodeSnippet/ShellCommandView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n content: string;\n className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n content,\n className,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the shell command content\n const handleCopy = useCallback(() => {\n copy(content);\n }, [copy, content]);\n\n // Handler for mouse events to control hover state\n const handleHoverChange = useCallback((hovering: boolean) => {\n setIsHovering(hovering);\n }, []);\n\n // Shell Icon rendered as a memoized component\n const ShellIcon = () => (\n <div className=\"absolute top-8 left-8 z-10\">\n <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name=\"icon-gui-command-line-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n );\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]\",\n className,\n )}\n onMouseEnter={() => handleHoverChange(true)}\n onMouseLeave={() => handleHoverChange(false)}\n onFocus={() => handleHoverChange(true)}\n onBlur={() => handleHoverChange(false)}\n tabIndex={0}\n ref={codeRef}\n >\n <ShellIcon />\n\n {/* Code Content */}\n <div className=\"pl-56\">\n <Code\n language=\"shell\"\n snippet={content}\n additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n showLines={false}\n />\n </div>\n\n {/* Copy Button - only shown on hover */}\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nexport default memo(ShellCommandView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","handleHoverChange","hovering","ShellIcon","div","name","size","color","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","language","snippet","additionalCSS","showLines","onCopy"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUd,OAAuB,MACvC,KAAM,CAACe,WAAYC,cAAc,CAAGf,SAAS,OAG7C,MAAMgB,WAAaf,YAAY,KAC7BW,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAGlB,MAAMQ,kBAAoBhB,YAAY,AAACiB,WACrCH,cAAcG,SAChB,EAAG,EAAE,EAGL,MAAMC,UAAY,IAChB,oBAACC,OAAIV,UAAU,8BACb,oBAACU,OAAIV,UAAU,6FACb,oBAACP,MACCkB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMd,OACE,oBAACH,OACCV,UAAWL,GACT,0IACAK,WAEFc,aAAc,IAAMP,kBAAkB,MACtCQ,aAAc,IAAMR,kBAAkB,OACtCS,QAAS,IAAMT,kBAAkB,MACjCU,OAAQ,IAAMV,kBAAkB,OAChCW,SAAU,EACVC,IAAKhB,SAEL,oBAACM,gBAGD,oBAACC,OAAIV,UAAU,SACb,oBAACN,MACC0B,SAAS,QACTC,QAAStB,QACTuB,cAAc,8FACdC,UAAW,SAKdnB,YAAc,oBAACP,YAAW2B,OAAQlB,WAAYL,SAAUA,WAG/D,CAEA,gBAAeT,KAAKM,iBAAkB"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n content: string;\n className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n content,\n className,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the shell command content\n const handleCopy = useCallback(() => {\n copy(content);\n }, [copy, content]);\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n ref={codeRef}\n >\n {/* Shell Icon */}\n <div className=\"absolute top-8 left-8 z-10\">\n <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name=\"icon-gui-command-line-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n\n {/* Code Content */}\n <div className=\"pl-56\">\n <Code\n language=\"shell\"\n snippet={content}\n additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n showLines={false}\n />\n </div>\n\n {/* Copy Button - only shown on hover */}\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nShellCommandView.displayName = \"ShellCommandView\";\n\nexport default memo(ShellCommandView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","language","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUd,OAAuB,MACvC,KAAM,CAACe,WAAYC,cAAc,CAAGf,SAAS,OAG7C,MAAMgB,WAAaf,YAAY,KAC7BW,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAElB,OACE,oBAACQ,OACCP,UAAWL,GACT,0IACAK,WAEFQ,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAGL,oBAACI,OAAIP,UAAU,8BACb,oBAACO,OAAIP,UAAU,6FACb,oBAACP,MACCqB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMZ,oBAACT,OAAIP,UAAU,SACb,oBAACN,MACCuB,SAAS,QACTC,QAASnB,QACToB,cAAc,8FACdC,UAAW,SAKdhB,YAAc,oBAACP,YAAWwB,OAAQf,WAAYL,SAAUA,WAG/D,CAEAH,CAAAA,iBAAiBwB,WAAW,CAAG,kBAE/B,gBAAe9B,KAAKM,iBAAkB"}
package/core/CodeSnippet.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?apiKeys[0]:"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||b;const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(selectedApiKey)){setSelectedApiKey(apiKeys[0])}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12 cursor-pointer",headerRow?"":"rounded-t-lg"),onClick:()=>handleLanguageChange(filteredLanguages[0])},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
1
+ import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?apiKeys[0]:"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||b;const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(selectedApiKey)){setSelectedApiKey(apiKeys[0])}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] inline-flex items-center px-12",{"rounded-t-lg":!headerRow},{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
2
2
  //# sourceMappingURL=CodeSnippet.js.map
package/core/CodeSnippet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n // Helper function to extract language from code element\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n // Parse children to extract languages and SDK types - only needs to run once\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return;\n\n // Look for SDK prefixes in the language name itself\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n originalLangMap.set(langName, baseLanguage);\n } else {\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n // Simplified state management with separate hooks\n const [activeSDKType, setActiveSDKType] = useState<SDKType>(() => {\n if (sdkTypes.size === 0) return null;\n if (sdk && sdkTypes.has(sdk)) return sdk;\n if (sdkTypes.has(\"realtime\")) return \"realtime\";\n if (sdkTypes.has(\"rest\")) return \"rest\";\n return null;\n });\n const [activeLanguage, setActiveLanguage] = useState<string | null>(null);\n const [selectedApiKey, setSelectedApiKey] = useState(() =>\n apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n );\n const [isHovering, setIsHovering] = useState(false);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n // Get languages filtered by active SDK type & apply ordering\n const filteredLanguages = useMemo(() => {\n // Filter by SDK type if needed\n const filtered =\n !activeSDKType || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${activeSDKType}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = originalLangMap.get(a) || a;\n const bBase = originalLangMap.get(b) || b;\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [\n activeSDKType,\n showSDKSelector,\n languages,\n languageOrdering,\n originalLangMap,\n ]);\n\n // Determine the initial active language\n const initialActiveLanguage = useMemo((): string | null => {\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try with SDK prefix if applicable\n if (activeSDKType) {\n const prefixedLang = `${activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try direct match\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setActiveLanguage(initialActiveLanguage);\n }, [initialActiveLanguage]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (apiKeys && apiKeys.length > 0 && !apiKeys.includes(selectedApiKey)) {\n setSelectedApiKey(apiKeys[0]);\n }\n }, [apiKeys, selectedApiKey]);\n\n // Clean language utilities\n const getCleanLanguage = useCallback(\n (lang: string | null) => (lang ? originalLangMap.get(lang) || lang : null),\n [originalLangMap],\n );\n\n // Get language info for display\n const getLanguageInfoForDisplay = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang) : null;\n },\n [getCleanLanguage],\n );\n\n // For language display name and icon (only depends on originalLangMap)\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang).label : lang;\n },\n [getCleanLanguage],\n );\n\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang\n ? getLanguageInfo(cleanLang).icon\n : \"icon-gui-document-mini\";\n },\n [getCleanLanguage],\n );\n\n // Memoize the active language info\n const activeLanguageInfo = useMemo(\n () => getLanguageInfoForDisplay(activeLanguage),\n [getLanguageInfoForDisplay, activeLanguage],\n );\n\n // Filter and process children for the active language\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n // Target language is either the active one or json in json-only mode\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return child;\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : getCleanLanguage(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // Handle primitive content types\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines={showCodeLines}\n />\n );\n }\n\n return child;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n getCleanLanguage,\n hasOnlyJsonSnippet,\n showCodeLines,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === activeLanguage;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n hasOnlyJsonSnippet,\n ]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (!activeLanguage || !hasSnippetForActiveLanguage || !codeRef.current)\n return null;\n\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n const langName = langClass.substring(9);\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Event handlers\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick first language matching the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n setActiveSDKType(type);\n setActiveLanguage(nextLang);\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setActiveLanguage(language);\n\n // Call onChange with clean language name\n if (onChange) {\n const cleanLang = getCleanLanguage(language) || language;\n onChange(cleanLang, activeSDKType);\n }\n },\n [onChange, getCleanLanguage, activeSDKType],\n );\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setSelectedApiKey(apiKey);\n }, []);\n\n // Optimize no-snippet message as a component\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n // Memoize renderContent\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n activeLanguageInfo,\n NoSnippetMessage,\n ]);\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12 cursor-pointer\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n onClick={() => handleLanguageChange(filteredLanguages[0])}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n >\n {renderContent}\n\n {/* Copy button - simplified conditional */}\n {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","extractLanguageFromCode","codeElement","props","classNames","split","langClass","find","cls","startsWith","substring","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","includes","forEach","child","preElement","langName","baseLanguage","add","set","push","activeSDKType","setActiveSDKType","size","has","activeLanguage","setActiveLanguage","selectedApiKey","setSelectedApiKey","isHovering","setIsHovering","showSDKSelector","hasOnlyJsonSnippet","filteredLanguages","filtered","filter","sort","a","b","aBase","get","bBase","aIndex","indexOf","bIndex","initialActiveLanguage","prefixedLang","label","getCleanLanguage","getLanguageInfoForDisplay","cleanLang","getLanguageDisplayName","getLanguageIcon","icon","activeLanguageInfo","processedChildren","targetLanguage","map","codeContent","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleApiKeyChange","apiKey","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n // Helper function to extract language from code element\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n // Parse children to extract languages and SDK types - only needs to run once\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return;\n\n // Look for SDK prefixes in the language name itself\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n originalLangMap.set(langName, baseLanguage);\n } else {\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n // Simplified state management with separate hooks\n const [activeSDKType, setActiveSDKType] = useState<SDKType>(() => {\n if (sdkTypes.size === 0) return null;\n if (sdk && sdkTypes.has(sdk)) return sdk;\n if (sdkTypes.has(\"realtime\")) return \"realtime\";\n if (sdkTypes.has(\"rest\")) return \"rest\";\n return null;\n });\n const [activeLanguage, setActiveLanguage] = useState<string | null>(null);\n const [selectedApiKey, setSelectedApiKey] = useState(() =>\n apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n );\n const [isHovering, setIsHovering] = useState(false);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n // Get languages filtered by active SDK type & apply ordering\n const filteredLanguages = useMemo(() => {\n // Filter by SDK type if needed\n const filtered =\n !activeSDKType || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${activeSDKType}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = originalLangMap.get(a) || a;\n const bBase = originalLangMap.get(b) || b;\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [\n activeSDKType,\n showSDKSelector,\n languages,\n languageOrdering,\n originalLangMap,\n ]);\n\n // Determine the initial active language\n const initialActiveLanguage = useMemo((): string | null => {\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try with SDK prefix if applicable\n if (activeSDKType) {\n const prefixedLang = `${activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try direct match\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setActiveLanguage(initialActiveLanguage);\n }, [initialActiveLanguage]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (apiKeys && apiKeys.length > 0 && !apiKeys.includes(selectedApiKey)) {\n setSelectedApiKey(apiKeys[0]);\n }\n }, [apiKeys, selectedApiKey]);\n\n // Clean language utilities\n const getCleanLanguage = useCallback(\n (lang: string | null) => (lang ? originalLangMap.get(lang) || lang : null),\n [originalLangMap],\n );\n\n // Get language info for display\n const getLanguageInfoForDisplay = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang) : null;\n },\n [getCleanLanguage],\n );\n\n // For language display name and icon (only depends on originalLangMap)\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang).label : lang;\n },\n [getCleanLanguage],\n );\n\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang\n ? getLanguageInfo(cleanLang).icon\n : \"icon-gui-document-mini\";\n },\n [getCleanLanguage],\n );\n\n // Memoize the active language info\n const activeLanguageInfo = useMemo(\n () => getLanguageInfoForDisplay(activeLanguage),\n [getLanguageInfoForDisplay, activeLanguage],\n );\n\n // Filter and process children for the active language\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n // Target language is either the active one or json in json-only mode\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return child;\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : getCleanLanguage(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // Handle primitive content types\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines={showCodeLines}\n />\n );\n }\n\n return child;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n getCleanLanguage,\n hasOnlyJsonSnippet,\n showCodeLines,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === activeLanguage;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n hasOnlyJsonSnippet,\n ]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (!activeLanguage || !hasSnippetForActiveLanguage || !codeRef.current)\n return null;\n\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n const langName = langClass.substring(9);\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Event handlers\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick first language matching the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n setActiveSDKType(type);\n setActiveLanguage(nextLang);\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setActiveLanguage(language);\n\n // Call onChange with clean language name\n if (onChange) {\n const cleanLang = getCleanLanguage(language) || language;\n onChange(cleanLang, activeSDKType);\n }\n },\n [onChange, getCleanLanguage, activeSDKType],\n );\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setSelectedApiKey(apiKey);\n }, []);\n\n // Optimize no-snippet message as a component\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n // Memoize renderContent\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n activeLanguageInfo,\n NoSnippetMessage,\n ]);\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] inline-flex items-center px-12\",\n { \"rounded-t-lg\": !headerRow },\n { \"cursor-pointer\": filteredLanguages.length > 0 },\n )}\n {...(filteredLanguages.length > 0 && {\n onClick: () => handleLanguageChange(filteredLanguages[0]),\n })}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n >\n {renderContent}\n\n {/* Copy button - simplified conditional */}\n {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","extractLanguageFromCode","codeElement","props","classNames","split","langClass","find","cls","startsWith","substring","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","includes","forEach","child","preElement","langName","baseLanguage","add","set","push","activeSDKType","setActiveSDKType","size","has","activeLanguage","setActiveLanguage","selectedApiKey","setSelectedApiKey","isHovering","setIsHovering","showSDKSelector","hasOnlyJsonSnippet","filteredLanguages","filtered","filter","sort","a","b","aBase","get","bBase","aIndex","indexOf","bIndex","initialActiveLanguage","prefixedLang","label","getCleanLanguage","getLanguageInfoForDisplay","cleanLang","getLanguageDisplayName","getLanguageIcon","icon","activeLanguageInfo","processedChildren","targetLanguage","map","codeContent","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleApiKeyChange","apiKey","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
package/core/ProductTile/data.js CHANGED
@@ -1,2 +1,2 @@
1
- export const productNames=["pubsub","chat","spaces","liveSync","assetTracking","liveObjects"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs for building realtime applications.",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/channels"},chat:{label:"Chat",description:"Build feature-rich live chat experiences.",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/chat"},spaces:{label:"Spaces",description:"Enhance your application with collaborative features.",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/spaces"},liveSync:{label:"LiveSync",description:"Fan-out database changes to client applications.",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/livesync"},assetTracking:{label:"Asset Tracking",description:"Track the geographic location of assets and fleets.",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across client devices.",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/liveobjects"}};
1
+ export const productNames=["pubsub","chat","spaces","liveSync","assetTracking","liveObjects"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs for building realtime applications.",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/channels"},chat:{label:"Chat",description:"Build feature-rich live chat experiences.",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/chat"},spaces:{label:"Spaces",description:"Enhance your application with collaborative features.",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/spaces"},liveSync:{label:"LiveSync",description:"Fan-out database changes to client applications.",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/livesync"},assetTracking:{label:"Asset Tracking",description:"Track the geographic location of assets and fleets.",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across client devices.",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/liveobjects"}};
2
2
  //# sourceMappingURL=data.js.map
package/core/ProductTile/data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n \"pubsub\",\n \"chat\",\n \"spaces\",\n \"liveSync\",\n \"assetTracking\",\n \"liveObjects\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n ProductName,\n {\n label: string;\n description: string;\n link?: string;\n icon?: IconName;\n hoverIcon?: IconName;\n unavailable?: boolean;\n }\n>;\n\nexport const products: Products = {\n pubsub: {\n label: \"Pub/Sub\",\n description: \"Low-level APIs for building realtime applications.\",\n icon: \"icon-product-pubsub-mono\",\n hoverIcon: \"icon-product-pubsub\",\n link: \"/docs/channels\",\n },\n chat: {\n label: \"Chat\",\n description: \"Build feature-rich live chat experiences.\",\n icon: \"icon-product-chat-mono\",\n hoverIcon: \"icon-product-chat\",\n link: \"/docs/chat\",\n },\n spaces: {\n label: \"Spaces\",\n description: \"Enhance your application with collaborative features.\",\n icon: \"icon-product-spaces-mono\",\n hoverIcon: \"icon-product-spaces\",\n link: \"/docs/spaces\",\n },\n liveSync: {\n label: \"LiveSync\",\n description: \"Fan-out database changes to client applications.\",\n icon: \"icon-product-livesync-mono\",\n hoverIcon: \"icon-product-livesync\",\n link: \"/docs/livesync\",\n },\n assetTracking: {\n label: \"Asset Tracking\",\n description: \"Track the geographic location of assets and fleets.\",\n icon: \"icon-product-asset-tracking-mono\",\n hoverIcon: \"icon-product-asset-tracking\",\n link: \"/docs/asset-tracking\",\n },\n liveObjects: {\n label: \"LiveObjects\",\n description: \"Sync application state across client devices.\",\n icon: \"icon-product-liveobjects-mono\",\n hoverIcon: \"icon-product-liveobjects\",\n link: \"/docs/liveobjects\",\n },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","spaces","liveSync","assetTracking","liveObjects"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,SACA,WACA,gBACA,cACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,qDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,gBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,4CACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,YACR,EACAE,OAAQ,CACNN,MAAO,SACPC,YAAa,wDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,cACR,EACAG,SAAU,CACRP,MAAO,WACPC,YAAa,mDACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,gBACR,EACAI,cAAe,CACbR,MAAO,iBACPC,YAAa,sDACbC,KAAM,mCACNC,UAAW,8BACXC,KAAM,sBACR,EACAK,YAAa,CACXT,MAAO,cACPC,YAAa,gDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,mBACR,CACF,CAAE"}
1
+ {"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n \"pubsub\",\n \"chat\",\n \"spaces\",\n \"liveSync\",\n \"assetTracking\",\n \"liveObjects\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n ProductName,\n {\n label: string;\n description: string;\n link?: string;\n icon?: IconName;\n hoverIcon?: IconName;\n unavailable?: boolean;\n }\n>;\n\nexport const products: Products = {\n pubsub: {\n label: \"Pub/Sub\",\n description: \"Low-level APIs for building realtime applications.\",\n icon: \"icon-product-pubsub-mono\",\n hoverIcon: \"icon-product-pubsub\",\n link: \"/docs/channels\",\n },\n chat: {\n label: \"Chat\",\n description: \"Build feature-rich live chat experiences.\",\n icon: \"icon-product-chat-mono\",\n hoverIcon: \"icon-product-chat\",\n link: \"/docs/chat\",\n },\n spaces: {\n label: \"Spaces\",\n description: \"Enhance your application with collaborative features.\",\n icon: \"icon-product-spaces-mono\",\n hoverIcon: \"icon-product-spaces\",\n link: \"/docs/spaces\",\n },\n liveSync: {\n label: \"LiveSync\",\n description: \"Fan-out database changes to client applications.\",\n icon: \"icon-product-livesync-mono\",\n hoverIcon: \"icon-product-livesync\",\n link: \"/docs/livesync\",\n },\n assetTracking: {\n label: \"Asset Tracking\",\n description: \"Track the geographic location of assets and fleets.\",\n icon: \"icon-product-asset-tracking-mono\",\n hoverIcon: \"icon-product-asset-tracking\",\n link: \"/docs/asset-tracking\",\n },\n liveObjects: {\n label: \"LiveObjects\",\n description: \"Sync application state across client devices.\",\n icon: \"icon-product-liveobjects-mono\",\n hoverIcon: \"icon-product-liveobjects\",\n link: \"/liveobjects\",\n },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","spaces","liveSync","assetTracking","liveObjects"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,SACA,WACA,gBACA,cACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,qDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,gBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,4CACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,YACR,EACAE,OAAQ,CACNN,MAAO,SACPC,YAAa,wDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,cACR,EACAG,SAAU,CACRP,MAAO,WACPC,YAAa,mDACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,gBACR,EACAI,cAAe,CACbR,MAAO,iBACPC,YAAa,sDACbC,KAAM,mCACNC,UAAW,8BACXC,KAAM,sBACR,EACAK,YAAa,CACXT,MAAO,cACPC,YAAa,gDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,cACR,CACF,CAAE"}
package/core/remote-session-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GA0BiB,MA1BsB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
1
+ {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
package/core/styles/colors/computed-colors.json ADDED
@@ -0,0 +1 @@
1
+ ["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]
package/index.d.ts CHANGED
@@ -336,10 +336,7 @@ export default CopyButton;
336
336
  declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
337
337
  import React from "react";
338
338
  import { IconName } from ".@ably/ui/core/Icon/types";
339
- interface LanguageInfo {
340
- label: string;
341
- icon: IconName;
342
- }
339
+ import { LanguageInfo } from "@ably/ui/core/languages";
343
340
  interface LanguageSelectorProps {
344
341
  languages: string[];
345
342
  activeLanguage: string | null;
@@ -402,7 +399,7 @@ export default languages;
402
399
 
403
400
  declare module '@ably/ui/core/CodeSnippet' {
404
401
  import React from "react";
405
- type SDKType = "realtime" | "rest" | null;
402
+ export type SDKType = "realtime" | "rest" | null;
406
403
  export interface CodeSnippetProps {
407
404
  /**
408
405
  * If true, hides the language selector row completely
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "16.2.3-dev.408109d7",
3
+ "version": "16.2.4-dev.0322c74e",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/core/.DS_Store DELETED
Binary file
package/core/Accordion/.DS_Store DELETED
Binary file
package/core/Code/.DS_Store DELETED
Binary file
package/core/ContactFooter/.DS_Store DELETED
Binary file
package/core/CookieMessage/.DS_Store DELETED
Binary file
package/core/CustomerLogos/.DS_Store DELETED
Binary file
package/core/DropdownMenu/.DS_Store DELETED
Binary file
package/core/FeaturedLink/.DS_Store DELETED
Binary file
package/core/Flash/.DS_Store DELETED
Binary file
package/core/Footer/.DS_Store DELETED
Binary file
package/core/Icon/.DS_Store DELETED
Binary file
package/core/Loader/.DS_Store DELETED
Binary file
package/core/Logo/.DS_Store DELETED
Binary file
package/core/Meganav/.DS_Store DELETED
Binary file
package/core/Notice/.DS_Store DELETED
Binary file
package/core/Slider/.DS_Store DELETED
Binary file
package/core/Table/.DS_Store DELETED
Binary file
package/core/Tooltip/.DS_Store DELETED
Binary file
package/core/icons/.DS_Store DELETED
Binary file
package/core/icons/gui/.DS_Store DELETED
Binary file
package/core/images/.DS_Store DELETED
Binary file
package/core/images/logo/.DS_Store DELETED
Binary file