@zendeskgarden/react-theming 8.64.0 → 8.65.0

package/dist/index.cjs.js

@@ -513,21 +513,36 @@ 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));
 }
 
-const useText = (component, props, name, text) => {
-  const value = props[name];
+const useWindow = theme => {
+  const [controlledWindow, setControlledWindow] = React.useState();
+  React.useEffect(() => {
+    if (theme && theme.window) {
+      setControlledWindow(theme.window);
+    } else {
+      setControlledWindow(window);
+    }
+  }, [theme]);
+  return controlledWindow;
+};
+
+const useText = function (component, props, name, text) {
+  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  const value = condition ? props[name] : undefined;
   return React.useMemo(() => {
-    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 \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${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 \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
+    if (condition) {
+      if (name === 'children') {
+        throw new Error('Error: `children` is not a valid `useText` prop.');
+      } else if (value === null || value === '') {
+        throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${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 \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
+        }
+        return text;
       }
-      return text;
     }
     return value;
-  }, [component.displayName, value, name, text]);
+  }, [component.displayName, value, name, text, condition]);
 };
 
 const animationStyles = (position, options) => {
@@ -587,4 +602,5 @@ exports.retrieveComponentStyles = retrieveComponentStyles;
 exports.retrieveTheme = retrieveComponentStyles;
 exports.useDocument = useDocument;
 exports.useText = useText;
+exports.useWindow = useWindow;
 exports.withTheme = withTheme;

package/dist/index.esm.js

@@ -507,21 +507,36 @@ 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));
 }
 
-const useText = (component, props, name, text) => {
-  const value = props[name];
+const useWindow = theme => {
+  const [controlledWindow, setControlledWindow] = useState();
+  useEffect(() => {
+    if (theme && theme.window) {
+      setControlledWindow(theme.window);
+    } else {
+      setControlledWindow(window);
+    }
+  }, [theme]);
+  return controlledWindow;
+};
+
+const useText = function (component, props, name, text) {
+  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  const value = condition ? props[name] : undefined;
   return useMemo(() => {
-    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 \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${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 \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
+    if (condition) {
+      if (name === 'children') {
+        throw new Error('Error: `children` is not a valid `useText` prop.');
+      } else if (value === null || value === '') {
+        throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${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 \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
+        }
+        return text;
       }
-      return text;
     }
     return value;
-  }, [component.displayName, value, name, text]);
+  }, [component.displayName, value, name, text, condition]);
 };
 
 const animationStyles = (position, options) => {
@@ -565,4 +580,4 @@ function menuStyles(position) {
 const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 const 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, useText, 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, useWindow, 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 { useWindow } from './utils/useWindow';
 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';

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

@@ -13,6 +13,7 @@ type Hue = Record<number | string, string> | string;
 export interface IGardenTheme {
     rtl: boolean;
     document?: any;
+    window?: any;
     borders: {
         sm: string;
         md: string;

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

@@ -14,5 +14,6 @@ import { FC } from 'react';
  * @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
+ * @param condition An optional condition that can be used to prevent evaluation
  */
-export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string) => string;
+export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string, condition?: boolean) => string | undefined;

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

@@ -0,0 +1,8 @@
+/**
+ * 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';
+export declare const useWindow: (theme?: Partial<DefaultTheme>) => Window | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "8.64.0",
+  "version": "8.65.0",
   "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": "c0cfa3666c7a2e72ec8a9e0af8d530bb3312da86"
+  "gitHead": "b702124a0055fdb7540f0d27b34ccbc9d552fc7a"
 }