@zendeskgarden/react-theming 8.51.0 → 8.53.1

package/dist/index.cjs.js

@@ -688,6 +688,26 @@ function arrowStyles(position) {
   return styledComponents.css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
+var useText = function useText(component, props, name, text) {
+  var _useState = React.useState(props[name]),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+  React.useEffect(function () {
+    if (name === 'children') {
+      throw new Error('Error: `children` is not a valid `getText` prop.');
+    } else if (value === null || value === '') {
+      throw new Error(component.displayName ? "Error: you must provide a valid `".concat(name, "` text value for <").concat(component.displayName, ">.") : "Error: you must provide a valid `".concat(name, "` text value."));
+    } else if (value === undefined) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(component.displayName ? "Warning: you did not provide a customized/translated `".concat(name, "` text value for <").concat(component.displayName, ">. Zendesk Garden is rendering <").concat(component.displayName, " ").concat(name, "=\"").concat(text, "\"> by default.") : "Warning: you did not provide a customized/translated `".concat(name, "` text value. Zendesk Garden is rendering ").concat(name, "=\"").concat(text, "\" by default."));
+      }
+      setValue(text);
+    }
+  }, [name, value, component.displayName, text]);
+  return value;
+};
+
 var animationStyles = function animationStyles(position, options) {
   var theme = options.theme || DEFAULT_THEME;
   var translateValue = "".concat(theme.space.base * 5, "px");
@@ -744,4 +764,5 @@ exports.menuStyles = menuStyles;
 exports.retrieveComponentStyles = retrieveComponentStyles;
 exports.retrieveTheme = retrieveComponentStyles;
 exports.useDocument = useDocument;
+exports.useText = useText;
 exports.withTheme = withTheme;

package/dist/index.esm.js

@@ -680,6 +680,26 @@ function arrowStyles(position) {
   return css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
+var useText = function useText(component, props, name, text) {
+  var _useState = useState(props[name]),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+  useEffect(function () {
+    if (name === 'children') {
+      throw new Error('Error: `children` is not a valid `getText` prop.');
+    } else if (value === null || value === '') {
+      throw new Error(component.displayName ? "Error: you must provide a valid `".concat(name, "` text value for <").concat(component.displayName, ">.") : "Error: you must provide a valid `".concat(name, "` text value."));
+    } else if (value === undefined) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(component.displayName ? "Warning: you did not provide a customized/translated `".concat(name, "` text value for <").concat(component.displayName, ">. Zendesk Garden is rendering <").concat(component.displayName, " ").concat(name, "=\"").concat(text, "\"> by default.") : "Warning: you did not provide a customized/translated `".concat(name, "` text value. Zendesk Garden is rendering ").concat(name, "=\"").concat(text, "\" by default."));
+      }
+      setValue(text);
+    }
+  }, [name, value, component.displayName, text]);
+  return value;
+};
+
 var animationStyles = function animationStyles(position, options) {
   var theme = options.theme || DEFAULT_THEME;
   var translateValue = "".concat(theme.space.base * 5, "px");
@@ -721,4 +741,4 @@ function menuStyles(position) {
 var ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 var MENU_POSITION = ['top', 'right', 'bottom', 'left'];
 
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, withTheme };
+export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, withTheme };

package/dist/typings/index.d.ts

@@ -18,6 +18,7 @@ export { default as getLineHeight } from './utils/getLineHeight';
 export { default as mediaQuery } from './utils/mediaQuery';
 export { default as arrowStyles } from './utils/arrowStyles';
 export { useDocument } from './utils/useDocument';
+export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION } from './types';
 export type { IGardenTheme, IThemeProviderProps, ArrowPosition as ARROW_POSITION, MenuPosition as MENU_POSITION } from './types';

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

@@ -0,0 +1,18 @@
+/**
+ * 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 { FC } from 'react';
+/**
+ * Provides default text for a11y (i.e. aria-label) or other critical attribute
+ * strings. If necessary, a development mode console warning prompts the
+ * consumer to provide customized, translated text.
+ *
+ * @param component The React component to which the `props` belong
+ * @param props The component props to check for `name`
+ * @param name The name of the component prop to set default text on
+ * @param text The default text to apply if the value of `props[name]` is undefined
+ */
+export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "8.51.0",
+  "version": "8.53.1",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
+  "gitHead": "79dee8e82b6f082e8d4a72ba95a5fb3982d63040"
 }