@zendeskgarden/react-theming 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/utils/menuStyles.js

@@ -0,0 +1,63 @@
+/**
+* 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 DEFAULT_THEME from '../elements/theme/index.js';
+import { getColor } from './getColor.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;color:", ";font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor({
+    theme,
+    variable: 'border.default'
+  }), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor({
+    theme,
+    hue: 'chromeHue',
+    shade: 600,
+    transparency: 0.15
+  })), getColor({
+    theme,
+    variable: 'background.raised'
+  }), theme.rtl ? 'right' : 'left', getColor({
+    theme,
+    variable: 'foreground.default'
+  }), 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 };