@zendeskgarden/react-theming 9.3.0 → 9.4.0

package/dist/esm/index.js

@@ -8,6 +8,7 @@ export { ThemeProvider } from './elements/ThemeProvider.js';
 export { default as DEFAULT_THEME } from './elements/theme/index.js';
 export { default as PALETTE } from './elements/palette/index.js';
 export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles.js';
+export { componentStyles } from './utils/componentStyles.js';
 export { getArrowPosition } from './utils/getArrowPosition.js';
 export { getCheckeredBackground } from './utils/getCheckeredBackground.js';
 export { getColor } from './utils/getColor.js';

package/dist/esm/utils/componentStyles.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const componentStyles = props => {
+  let retVal;
+  const components = props.theme.components;
+  const componentId = props.componentId || props['data-garden-id'];
+  if (components && componentId) {
+    retVal = components[componentId];
+    if (typeof retVal === 'function') {
+      const fn = retVal;
+      retVal = fn(props);
+    }
+  }
+  return retVal;
+};
+
+export { componentStyles };

package/dist/esm/utils/retrieveComponentStyles.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 function retrieveComponentStyles(componentId, props) {
-  const components = props.theme && props.theme.components;
+  const components = props.theme?.components;
   if (!components) {
     return undefined;
   }

package/dist/index.cjs.js

@@ -512,7 +512,7 @@ const ThemeProvider = _ref => {
 };
 
 function retrieveComponentStyles(componentId, props) {
-  const components = props.theme && props.theme.components;
+  const components = props.theme?.components;
   if (!components) {
     return undefined;
   }
@@ -523,6 +523,20 @@ function retrieveComponentStyles(componentId, props) {
   return componentStyles;
 }
 
+const componentStyles = props => {
+  let retVal;
+  const components = props.theme.components;
+  const componentId = props.componentId || props['data-garden-id'];
+  if (components && componentId) {
+    retVal = components[componentId];
+    if (typeof retVal === 'function') {
+      const fn = retVal;
+      retVal = fn(props);
+    }
+  }
+  return retVal;
+};
+
 const POSITION_MAP = {
   top: 'bottom',
   'top-start': 'bottom-left',
@@ -1480,6 +1494,7 @@ exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
 exports.StyledBaseIcon = StyledBaseIcon;
 exports.ThemeProvider = ThemeProvider;
 exports.arrowStyles = arrowStyles;
+exports.componentStyles = componentStyles;
 exports.focusStyles = focusStyles;
 exports.getArrowPosition = getArrowPosition;
 exports.getCheckeredBackground = getCheckeredBackground;

package/dist/typings/index.d.ts

@@ -8,6 +8,7 @@ export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
 export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
+export { componentStyles } from './utils/componentStyles';
 export { getArrowPosition } from './utils/getArrowPosition';
 export { getCheckeredBackground } from './utils/getCheckeredBackground';
 export { getColor } from './utils/getColor';

package/dist/typings/utils/componentStyles.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { DefaultTheme } from 'styled-components';
+/**
+ * CSS for component customizations based on `theme.components[componentId]`.
+ *
+ * @param {Object} props.theme Provides `components` object use to resolve the given component ID
+ * @param {String} [props.componentId] Specifies the lookup id for * `theme.components` styles.
+ *  The ID will be inferred from the `'data-garden-id'` attribute if not provided.
+ *
+ * @returns component CSS styles
+ */
+export declare const componentStyles: (props: {
+    theme: DefaultTheme;
+    componentId?: string;
+}) => string | undefined;

package/dist/typings/utils/retrieveComponentStyles.d.ts

@@ -4,6 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { ThemeProps, DefaultTheme } from 'styled-components';
-/** @component */
-export default function retrieveComponentStyles(componentId: string, props: Partial<ThemeProps<Partial<DefaultTheme>>>): any;
+import { DefaultTheme } from 'styled-components';
+/** @deprecated Use `componentStyles` instead. */
+export default function retrieveComponentStyles(componentId: string, props: {
+    theme?: Partial<DefaultTheme>;
+}): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
+  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
 }