@grafana/components 0.0.43 → 0.0.44

package/README.md

@@ -1,6 +1,6 @@
 # Grafana Product Design Engineering Components
 
-## Usage
+## Installation
 
 Add `@grafana/components` to your project’s dependencies:
 
@@ -14,26 +14,45 @@ or
 $ yarn add @grafana/components
 ```
 
-For components that have elements based on Floating UI, you must ensure you wrap
-your application in a `<PortalProvider>` component at a sufficient root level,
-passing in the `defaultRoot` prop indicating the element floating elements
-should be portalled inside of:
+To ensure that the necessary providers are present, you should add the following
+to your `App.tsx` (or equivalent):
 
 ```tsx
-import { PortalProvider } from '@grafana/components';
+import { getAppEvents } from '@grafana/runtime';
+import { useTheme2 } from '@grafana/ui';
+import { PortalProvider, ColorMode } from '@grafana/components';
 
-const MyApp = () => {
+const App = () => {
   return (
-    <>
-      <PortalProvider defaultRoot={document.getElementById('grafana-portal-container')}>
-        ...
-      </PortalProvider>
-    </>
+    <PortalProvider defaultRoot="grafana-portal-container">
+      <ColorMode getAppEvents={getAppEvents} useTheme2={useTheme2}>
+        <YourApp />
+      </ColorMode>
+    </PortalProvider>
   );
 };
 ```
 
-### Icons
+The dependency on `useTheme2` is necessary (for now) to detect the active _color
+mode_ (light or dark); this dependency will go away in the longer term.
+
+Additionally, to ensure that the stylesheet imported by `ColorMode` is correctly
+included in the App bundle, you will need to update your project’s
+`webpack.config.ts` configuration for the `style-loader` loader module:
+
+```diff
+  {
+    test: /\.css$/,
+    use: ['style-loader', 'css-loader'],
++   sideEffects: true,
+  },
+```
+
+This is to ensure that including stylesheets with `@import
+'path/to/stylesheet.css';` works correctly and the stylesheets aren’t
+unintentionally ‘tree-shaken’ out.
+
+### Custom Icons
 
 The icons included with `@grafana/components` are based on [Lucide][lucide],
 which provides over 1,800 consistent icons. In addition, there are a smaller

package/dist/cjs/index.cjs

@@ -4690,7 +4690,7 @@ Dot.fill = "none";
 const DownloadCloud = ({ title = "Download cloud", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
   title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 13v8l-4-4m4 4 4-4" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" })
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.94 16.497a4 4 0 0 0-2.706-7.424 6.499 6.499 0 0 0-12.72-1.41 4.997 4.997 0 0 0-.124 8.599" })
 ] });
 DownloadCloud.fill = "none";
 
@@ -13150,8 +13150,8 @@ Unplug.fill = "none";
 
 const UploadCloud = ({ title = "Upload cloud", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
   title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 13v8m-8-6.101A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 17 4-4 4 4" })
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 13v8m-4-4 4-4 4 4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 16.463a4 4 0 0 0-2.766-7.39 6.499 6.499 0 0 0-12.72-1.41A4.997 4.997 0 0 0 4 15.997" })
 ] });
 UploadCloud.fill = "none";