@zendeskgarden/react-theming 8.75.1 → 8.76.1

package/dist/esm/utils/menuStyles.js

@@ -0,0 +1,49 @@
+/**
+* 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 { css, keyframes } from 'styled-components';
+import { getColorV8 } from './getColorV8.js';
+import DEFAULT_THEME from '../elements/theme/index.js';
+
+const animationStyles = (position, options) => {
+  const theme = options.theme || DEFAULT_THEME;
+  let translateValue = `${theme.space.base * 5}px`;
+  let transformFunction;
+  if (position === 'top') {
+    transformFunction = 'translateY';
+  } else if (position === 'right') {
+    transformFunction = 'translateX';
+    translateValue = `-${translateValue}`;
+  } else if (position === 'bottom') {
+    transformFunction = 'translateY';
+    translateValue = `-${translateValue}`;
+  } else {
+    transformFunction = 'translateX';
+  }
+  const animationName = keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
+  return css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
+};
+const hiddenStyles = options => {
+  const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
+  return css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
+};
+function menuStyles(position) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const theme = options.theme || DEFAULT_THEME;
+  let marginProperty;
+  if (position === 'top') {
+    marginProperty = 'margin-bottom';
+  } else if (position === 'right') {
+    marginProperty = 'margin-left';
+  } else if (position === 'bottom') {
+    marginProperty = 'margin-top';
+  } else {
+    marginProperty = 'margin-right';
+  }
+  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+}
+
+export { menuStyles as default };

package/dist/esm/utils/retrieveComponentStyles.js

@@ -0,0 +1,19 @@
+/**
+* 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.
+*/
+function retrieveComponentStyles(componentId, props) {
+  const components = props.theme && props.theme.components;
+  if (!components) {
+    return undefined;
+  }
+  const componentStyles = components[componentId];
+  if (typeof componentStyles === 'function') {
+    return componentStyles(props);
+  }
+  return componentStyles;
+}
+
+export { retrieveComponentStyles as default };

package/dist/esm/utils/useDocument.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.
+*/
+import { useState, useEffect } from 'react';
+
+const useDocument = theme => {
+  const [controlledDocument, setControlledDocument] = useState();
+  useEffect(() => {
+    if (theme && theme.document) {
+      setControlledDocument(theme.document);
+    } else {
+      setControlledDocument(document);
+    }
+  }, [theme]);
+  return controlledDocument;
+};
+
+export { useDocument };

package/dist/esm/utils/useText.js

@@ -0,0 +1,29 @@
+/**
+* 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 { useMemo } from 'react';
+
+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 (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 value;
+  }, [component.displayName, value, name, text, condition]);
+};
+
+export { useText };

package/dist/esm/utils/useWindow.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.
+*/
+import { useState, useEffect } from 'react';
+
+const useWindow = theme => {
+  const [controlledWindow, setControlledWindow] = useState();
+  useEffect(() => {
+    if (theme && theme.window) {
+      setControlledWindow(theme.window);
+    } else {
+      setControlledWindow(window);
+    }
+  }, [theme]);
+  return controlledWindow;
+};
+
+export { useWindow };

package/dist/esm/utils/withTheme.js

@@ -0,0 +1,13 @@
+/**
+* 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 { withTheme as withTheme$1 } from 'styled-components';
+
+function withTheme(WrappedComponent) {
+  return withTheme$1(WrappedComponent);
+}
+
+export { withTheme as default };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -19,21 +18,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var memoize__default = /*#__PURE__*/_interopDefault(memoize);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const PALETTE = {
   black: '#000',
   white: '#fff',
@@ -320,7 +304,7 @@ const ThemeProvider = _ref => {
     scope: controlledScopeRef,
     relativeDocument
   });
-  return React__default.default.createElement(styledComponents.ThemeProvider, _extends({
+  return React__default.default.createElement(styledComponents.ThemeProvider, Object.assign({
     theme: theme
   }, other), focusVisibleRef === undefined ? React__default.default.createElement("div", {
     ref: scopeRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "8.75.1",
+  "version": "8.76.1",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "8e2bb36bcfef722db47a135fc987f72597be5000"
+  "gitHead": "8351e305688a65273cb18741c0800be8027cf878"
 }