@zendeskgarden/react-theming 9.2.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/StyledBaseIcon.js

@@ -5,15 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import React, { Children } from 'react';
+import { cloneElement, Children } from 'react';
 
-const StyledBaseIcon = styled(_ref => {
+const StyledBaseIcon = styled(
+_ref => {
   let {
     children,
     theme,
     ...props
   } = _ref;
-  return React.cloneElement(Children.only(children), props);
+  return cloneElement(Children.only(children), props);
 }).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"

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',
@@ -1454,13 +1468,14 @@ const focusStyles = _ref => {
   return styled.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
 };
 
-const StyledBaseIcon = styled__default.default(_ref => {
+const StyledBaseIcon = styled__default.default(
+_ref => {
   let {
     children,
     theme,
     ...props
   } = _ref;
-  return React__default.default.cloneElement(React.Children.only(children), props);
+  return React.cloneElement(React.Children.only(children), props);
 }).withConfig({
   displayName: "StyledBaseIcon",
   componentId: "sc-1moykgb-0"
@@ -1479,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';
@@ -24,4 +25,4 @@ export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
 export { StyledBaseIcon } from './utils/StyledBaseIcon';
-export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IStyledBaseIconProps, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';

package/dist/typings/types/index.d.ts

@@ -4,7 +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 { CSSObject, ThemeProviderProps } from 'styled-components';
+import { PropsWithChildren, SVGAttributes } from 'react';
+import { CSSObject, DefaultTheme, ThemeProviderProps } from 'styled-components';
 export declare const ARROW_POSITION: readonly ["top", "top-left", "top-right", "right", "right-top", "right-bottom", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom"];
 export type ArrowPosition = (typeof ARROW_POSITION)[number];
 export declare const MENU_POSITION: readonly ["top", "right", "bottom", "left"];
@@ -172,3 +173,6 @@ export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenT
      */
     theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
 }
+export interface IStyledBaseIconProps extends PropsWithChildren<SVGAttributes<SVGElement>> {
+    theme?: DefaultTheme;
+}

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

@@ -4,5 +4,6 @@
  * 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 React from 'react';
-export declare const StyledBaseIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {}, never>;
+import { ReactElement } from 'react';
+import { IStyledBaseIconProps } from '../types';
+export declare const StyledBaseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IStyledBaseIconProps, never>> & string & Omit<({ children, theme, ...props }: IStyledBaseIconProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>, keyof import("react").Component<any, {}, any>>;

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

@@ -45,5 +45,5 @@ type ArrowOptions = {
  *
  * @component
  */
-export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").FlattenSimpleInterpolation;
+export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").RuleSet<object>;
 export {};

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/focusStyles.d.ts

@@ -36,4 +36,4 @@ export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
  * }
  * ```
  */
-export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
+export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").RuleSet<object>;

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

@@ -33,5 +33,5 @@ type MenuOptions = {
  * @param {string} [options.animationModifier] A CSS class or attribute selector
  *  which, when applied, animates the menu's appearance.
  */
-export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<DefaultTheme>>;
+export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").RuleSet<object>;
 export {};

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.2.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>",
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^4.2.0 || ^5.3.1"
+    "styled-components": "^4.2.0 || ^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@types/lodash.get": "4.4.9",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
+  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
 }