@zendeskgarden/react-draggable 9.0.0-next.19

package/dist/esm/styled/draggable/StyledContent.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'draggable.content';
+const StyledContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledContent",
+  componentId: "sc-15arore-0"
+})(["flex:1;word-wrap:break-word;overflow-wrap:anywhere;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledContent };

package/dist/esm/styled/draggable/StyledDraggable.js

@@ -0,0 +1,115 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledGrip } from './StyledGrip.js';
+
+const COMPONENT_ID = 'draggable';
+function getDragShadow(theme) {
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor({
+    variable: 'shadow.large',
+    theme
+  });
+  return shadows.lg(offsetY, blurRadius, color);
+}
+const colorStyles = props => {
+  const {
+    isBare,
+    isGrabbed,
+    isDisabled,
+    isPlaceholder,
+    focusInset,
+    theme
+  } = props;
+  const dragShadow = getDragShadow(theme);
+  const baseBgColor = getColor({
+    variable: 'background.default',
+    theme
+  });
+  const placeholderBgColor = getColor({
+    variable: 'background.disabled',
+    theme
+  });
+  const disabledBgColor = getColor({
+    variable: 'background.disabled',
+    theme
+  });
+  const disabledColor = getColor({
+    variable: 'foreground.disabled',
+    theme
+  });
+  let color;
+  let hoverBackgroundColor;
+  let boxShadow;
+  let borderColor = 'transparent';
+  let backgroundColor = baseBgColor;
+  if (isDisabled) {
+    backgroundColor = disabledBgColor;
+    color = disabledColor;
+  } else if (isPlaceholder) {
+    backgroundColor = placeholderBgColor;
+  } else {
+    color = getColor({
+      variable: 'foreground.default',
+      theme
+    });
+    borderColor = isBare ? 'transparent' : getColor({
+      variable: 'border.default',
+      theme
+    });
+    hoverBackgroundColor = getColor({
+      variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
+      ...(!isGrabbed && {
+        transparency: theme.opacity[100],
+        dark: {
+          offset: -100
+        }
+      }),
+      theme
+    });
+    boxShadow = dragShadow;
+  }
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover{background-color:", ";}", " > ", "{color:", ";}"], borderColor, isGrabbed && boxShadow, backgroundColor, color, hoverBackgroundColor, focusStyles({
+    theme,
+    inset: focusInset,
+    boxShadow: isGrabbed ? dragShadow : undefined
+  }), StyledGrip, isDisabled && disabledColor);
+};
+const sizeStyles = props => {
+  const {
+    isCompact,
+    theme
+  } = props;
+  const paddingDefault = theme.space.base * 2.25;
+  const paddingCompact = theme.space.base * 1.25;
+  return css(["margin:0;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";font-weight:", ";"], theme.borders.sm, theme.borderRadii.md, isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`, getLineHeight(theme.space.base * 5, theme.fontSizes.md), theme.fontSizes.md, theme.fontWeights.regular);
+};
+const getCursor = props => {
+  let cursor = props.isGrabbed ? 'grabbing' : 'grab';
+  if (props.isDisabled || props.isPlaceholder) {
+    cursor = 'default';
+  }
+  return cursor;
+};
+const StyledDraggable = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledDraggable",
+  componentId: "sc-3lxpf1-0"
+})(["display:flex;flex:1;align-items:center;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;cursor:", ";font-family:", ";direction:", ";box-sizing:border-box;", " ", " > *{visibility:", ";}", ";"], getCursor, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, p => p.isPlaceholder && !p.isDisabled && 'hidden', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDraggable.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDraggable, getDragShadow };

package/dist/esm/styled/draggable/StyledGrip.js

@@ -0,0 +1,32 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'draggable.grip';
+function sizeStyles(_ref) {
+  let {
+    theme
+  } = _ref;
+  const property = theme.rtl ? 'margin-left' : 'margin-right';
+  return css(["", ":", ";"], property, theme.space.xs);
+}
+const StyledGrip = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledGrip",
+  componentId: "sc-13uv9iv-0"
+})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => getColor({
+  variable: 'foreground.subtle',
+  theme: p.theme
+}), sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGrip.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGrip };

package/dist/esm/styled/draggable-list/StyledDraggableList.js

@@ -0,0 +1,38 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledItem } from './StyledItem.js';
+
+const COMPONENT_ID = 'draggable_list';
+const sizeStyles = props => {
+  const {
+    isHorizontal,
+    theme: {
+      space
+    }
+  } = props;
+  let marginStart = 'margin-top';
+  let marginEnd = 'margin-bottom';
+  if (isHorizontal) {
+    marginStart = 'margin-right';
+    marginEnd = 'margin-left';
+  }
+  return css(["", ":-", ";", ":-", ";"], marginStart, space.xxs, marginEnd, space.xxs);
+};
+const StyledDraggableList = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledDraggableList",
+  componentId: "sc-17agksa-0"
+})(["display:flex;flex-direction:", ";margin:0;padding:0;list-style:none;box-sizing:border-box;direction:", ";> ", "{flex:1;}", ";", ";"], p => p.isHorizontal ? 'row' : 'column', props => props.theme.rtl && 'rtl', StyledItem, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDraggableList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDraggableList };

package/dist/esm/styled/draggable-list/StyledDropIndicator.js

@@ -0,0 +1,42 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'draggable_list.drop_indicator';
+const colorStyles = props => {
+  const {
+    theme
+  } = props;
+  const color = getColor({
+    variable: 'border.primaryEmphasis',
+    theme
+  });
+  return css(["box-shadow:", ";&::before,&::after{background-color:", ";}&:focus{outline:none;}"], theme.shadows.xs(color), color);
+};
+const sizeStyles = props => {
+  const {
+    isHorizontal,
+    theme
+  } = props;
+  const pseudoSize = theme.space.xs;
+  const translateX = isHorizontal ? theme.space.xxs : theme.space.xs;
+  const translateY = isHorizontal ? theme.space.xs : theme.space.xxs;
+  return css(["&::before,&::after{border-radius:50%;width:", ";height:", ";}&::before{top:0;left:0;transform:translate(-", ",-", ");}&::after{right:0;bottom:0;transform:translate(", ",", ");}"], pseudoSize, pseudoSize, translateX, translateY, translateX, translateY);
+};
+const StyledDropIndicator = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledDropIndicator",
+  componentId: "sc-1f1u2lh-0"
+})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDropIndicator.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDropIndicator };

package/dist/esm/styled/draggable-list/StyledItem.js

@@ -0,0 +1,31 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'draggable_list.item';
+const sizeStyles = props => {
+  const {
+    isHorizontal,
+    theme: {
+      space
+    }
+  } = props;
+  return css(["padding:", ";"], isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
+};
+const StyledItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledItem",
+  componentId: "sc-1nps3s3-0"
+})(["display:flex;", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledItem };

package/dist/esm/styled/dropzone/StyledDropzone.js

@@ -0,0 +1,96 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropzone';
+const colorStyles = props => {
+  const {
+    isDanger,
+    isDisabled,
+    isActive,
+    isHighlighted,
+    theme
+  } = props;
+  const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary';
+  const fgActive = getColor({
+    variable: fgVariable,
+    theme
+  });
+  const borderActive = getColor({
+    variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
+    theme
+  });
+  let backgroundColor = 'transparent';
+  let borderColor = getColor({
+    variable: `border.emphasis`,
+    theme
+  });
+  let color = getColor({
+    variable: `foreground.subtle`,
+    theme
+  });
+  if (isDisabled) {
+    backgroundColor = getColor({
+      variable: 'background.disabled',
+      theme
+    });
+    borderColor = getColor({
+      variable: `border.disabled`,
+      theme
+    });
+    color = getColor({
+      variable: 'foreground.disabled',
+      theme
+    });
+  } else if (isActive || isHighlighted) {
+    color = isHighlighted ? getColor({
+      variable: fgVariable,
+      light: {
+        offset: 200
+      },
+      dark: {
+        offset: -200
+      },
+      theme
+    }) : fgActive;
+    backgroundColor = getColor({
+      variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
+      transparency: theme.opacity[100],
+      dark: {
+        offset: -100
+      },
+      theme
+    });
+    borderColor = borderActive;
+  } else if (isDanger) {
+    borderColor = borderActive;
+    color = fgActive;
+  }
+  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, color);
+};
+const sizeStyles = props => {
+  const {
+    theme,
+    isHighlighted
+  } = props;
+  const borderWidth = isHighlighted ? math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;
+  return css(["border-width:", ";border-style:", ";border-radius:", ";padding:", "px;width:100%;font-family:", ";font-size:", ";"], borderWidth, isHighlighted ? theme.borderStyles.solid : 'dashed', theme.borderRadii.md, isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4, theme.fonts.system, theme.fontSizes.md);
+};
+const StyledDropzone = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledDropzone",
+  componentId: "sc-1b7zuip-0"
+})(["display:", ";flex-direction:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;text-align:", ";direction:", ";box-sizing:border-box;", " ", " ", ";"], p => (p.hasMessage || p.hasIcon) && 'flex', p => p.hasMessage && p.isVertical && 'column', p => (p.hasMessage || p.hasIcon) && 'center', p => (p.hasMessage || p.hasIcon) && 'center', p => p.hasMessage && 'center', props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDropzone.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDropzone };

package/dist/esm/styled/dropzone/StyledIcon.js

@@ -0,0 +1,38 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropzone.icon';
+function sizeStyles(_ref) {
+  let {
+    theme,
+    isVertical
+  } = _ref;
+  let property;
+  let value;
+  if (isVertical) {
+    property = 'margin-bottom';
+    value = theme.space.xs;
+  } else {
+    property = theme.rtl ? 'margin-left' : 'margin-right';
+    value = theme.space.xs;
+  }
+  return css(["", ":", ";"], property, value);
+}
+const StyledIcon = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-1o12gen-0"
+})(["display:flex;width:", ";height:", ";", " ", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, p => p.hasMessage && sizeStyles(p), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/dropzone/StyledMessage.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropzone.message';
+const StyledMessage = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
+  displayName: "StyledMessage",
+  componentId: "sc-5kb2l2-0"
+})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMessage };

package/dist/esm/utils/useDraggableListContext.js

@@ -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 { createContext, useContext } from 'react';
+
+const DraggableListContext = createContext(undefined);
+const useDraggableListContext = () => {
+  const context = useContext(DraggableListContext);
+  if (context === undefined) {
+    throw new Error('This component must be rendered within a DraggableList component');
+  }
+  return context;
+};
+
+export { DraggableListContext, useDraggableListContext };

package/dist/esm/utils/useDropzoneContext.js

@@ -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 { createContext, useContext } from 'react';
+
+const DropzoneContext = createContext(undefined);
+const useDropzoneContext = () => {
+  const context = useContext(DropzoneContext);
+  if (context === undefined) {
+    throw new Error('This component must be rendered within a Dropzone component');
+  }
+  return context;
+};
+
+export { DropzoneContext, useDropzoneContext };