@datarobot/design-system 30.8.0 → 30.9.0

package/cjs/index.d.ts

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/cjs/index.js

@@ -828,6 +828,17 @@ Object.keys(_scheduler).forEach(function (key) {
     }
   });
 });
+var _scopedTheme = require("./scoped-theme");
+Object.keys(_scopedTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _scopedTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _scopedTheme[key];
+    }
+  });
+});
 var _search = require("./search");
 Object.keys(_search).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/scoped-theme/index.d.ts

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme, } from './scoped-theme';

package/cjs/scoped-theme/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScopedTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.ScopedTheme;
+  }
+});
+Object.defineProperty(exports, "syncDesignSystemTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.syncDesignSystemTheme;
+  }
+});
+Object.defineProperty(exports, "useSyncDesignSystemTheme", {
+  enumerable: true,
+  get: function () {
+    return _scopedTheme.useSyncDesignSystemTheme;
+  }
+});
+var _scopedTheme = require("./scoped-theme");

package/cjs/scoped-theme/scoped-theme.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultThemeMapping: {
+    'midnight-gray': string;
+    'alpine-light': string;
+    dark: string;
+    light: string;
+};
+export declare const syncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare const useSyncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare function ScopedTheme(props: {
+    children: React.ReactNode;
+    theme: keyof typeof defaultThemeMapping;
+    className?: string;
+    themeMapping?: Record<string, string>;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/cjs/scoped-theme/scoped-theme.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScopedTheme = ScopedTheme;
+exports.useSyncDesignSystemTheme = exports.syncDesignSystemTheme = exports.defaultThemeMapping = void 0;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultThemeMapping = exports.defaultThemeMapping = {
+  'midnight-gray': 'midnight-gray',
+  'alpine-light': 'alpine-light',
+  dark: 'midnight-gray',
+  light: 'alpine-light'
+};
+const syncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  if (theme && theme in themeMapping) {
+    for (const container of document.querySelectorAll('[data-ds]')) {
+      container.setAttribute('data-theme', themeMapping[theme]);
+    }
+  }
+};
+exports.syncDesignSystemTheme = syncDesignSystemTheme;
+const useSyncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  (0, _react.useLayoutEffect)(() => {
+    syncDesignSystemTheme(theme, themeMapping);
+  }, [theme, themeMapping]);
+};
+exports.useSyncDesignSystemTheme = useSyncDesignSystemTheme;
+function ScopedTheme(props) {
+  const {
+    children,
+    theme,
+    className = '',
+    themeMapping = defaultThemeMapping,
+    ...rest
+  } = props;
+  const scopedTheme = themeMapping[theme] || theme;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-ds": true,
+    "data-theme": scopedTheme,
+    className: className,
+    ...rest,
+    children: children
+  });
+}

package/esm/index.d.ts

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/esm/index.js

@@ -73,6 +73,7 @@ export * from './range-slider';
 export * from './react-popper';
 export * from './refresh-button';
 export * from './scheduler';
+export * from './scoped-theme';
 export * from './search';
 export * from './searchable-list';
 export * from './selectable-tiles';

package/esm/scoped-theme/index.d.ts

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme, } from './scoped-theme';

package/esm/scoped-theme/index.js

@@ -0,0 +1 @@
+export { ScopedTheme, useSyncDesignSystemTheme, syncDesignSystemTheme } from './scoped-theme';

package/esm/scoped-theme/scoped-theme.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultThemeMapping: {
+    'midnight-gray': string;
+    'alpine-light': string;
+    dark: string;
+    light: string;
+};
+export declare const syncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare const useSyncDesignSystemTheme: (theme: string, themeMapping?: Record<string, string>) => void;
+export declare function ScopedTheme(props: {
+    children: React.ReactNode;
+    theme: keyof typeof defaultThemeMapping;
+    className?: string;
+    themeMapping?: Record<string, string>;
+} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/esm/scoped-theme/scoped-theme.js

@@ -0,0 +1,37 @@
+import { useLayoutEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const defaultThemeMapping = {
+  'midnight-gray': 'midnight-gray',
+  'alpine-light': 'alpine-light',
+  dark: 'midnight-gray',
+  light: 'alpine-light'
+};
+export const syncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  if (theme && theme in themeMapping) {
+    for (const container of document.querySelectorAll('[data-ds]')) {
+      container.setAttribute('data-theme', themeMapping[theme]);
+    }
+  }
+};
+export const useSyncDesignSystemTheme = (theme, themeMapping = defaultThemeMapping) => {
+  useLayoutEffect(() => {
+    syncDesignSystemTheme(theme, themeMapping);
+  }, [theme, themeMapping]);
+};
+export function ScopedTheme(props) {
+  const {
+    children,
+    theme,
+    className = '',
+    themeMapping = defaultThemeMapping,
+    ...rest
+  } = props;
+  const scopedTheme = themeMapping[theme] || theme;
+  return /*#__PURE__*/_jsx("div", {
+    "data-ds": true,
+    "data-theme": scopedTheme,
+    className: className,
+    ...rest,
+    children: children
+  });
+}