@zendeskgarden/react-theming 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/utils/mediaQuery.js

@@ -0,0 +1,56 @@
+/**
+* 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 DEFAULT_THEME from '../elements/theme/index.js';
+import { getValueAndUnit } from 'polished';
+
+const maxWidth = (breakpoints, breakpoint) => {
+  const keys = Object.keys(breakpoints);
+  const index = keys.indexOf(breakpoint) + 1;
+  if (keys[index]) {
+    const dimension = getValueAndUnit(breakpoints[keys[index]]);
+    const value = dimension[0] - 0.02;
+    const unit = dimension[1];
+    return `${value}${unit}`;
+  }
+  return undefined;
+};
+function mediaQuery(query, breakpoint, theme) {
+  let retVal;
+  let min;
+  let max;
+  const breakpoints = theme && theme.breakpoints ? theme.breakpoints : DEFAULT_THEME.breakpoints;
+  if (typeof breakpoint === 'string') {
+    if (query === 'up') {
+      min = breakpoints[breakpoint];
+    } else if (query === 'down') {
+      if (breakpoint === 'xl') {
+        min = DEFAULT_THEME.breakpoints.xs;
+      } else {
+        max = maxWidth(breakpoints, breakpoint);
+      }
+    } else if (query === 'only') {
+      min = breakpoints[breakpoint];
+      max = maxWidth(breakpoints, breakpoint);
+    }
+  } else if (query === 'between') {
+    min = breakpoints[breakpoint[0]];
+    max = maxWidth(breakpoints, breakpoint[1]);
+  }
+  if (min) {
+    retVal = `@media (min-width: ${min})`;
+    if (max) {
+      retVal = `${retVal} and (max-width: ${max})`;
+    }
+  } else if (max) {
+    retVal = `@media (max-width: ${max})`;
+  } else {
+    throw new Error(`Unexpected query and breakpoint combination: '${query}', '${breakpoint}'.`);
+  }
+  return retVal;
+}
+
+export { mediaQuery as default };

package/dist/esm/utils/menuStyles.js

@@ -0,0 +1,70 @@
+/**
+* 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 colorStyles = theme => {
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = getColor({
+    variable: 'shadow.medium',
+    theme
+  });
+  const boxShadowBlurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 5 : 6)}px`;
+  const boxShadowOffsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, theme.shadows.lg(boxShadowOffsetY, boxShadowBlurRadius, boxShadowColor), backgroundColor, foregroundColor);
+};
+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;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), 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 };