@zendeskgarden/react-dropdowns.legacy 9.0.0-next.10

package/dist/esm/styled/multiselect/StyledMultiselectInput.js

@@ -0,0 +1,33 @@
+/**
+* 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 { StyledInput } from '../select/StyledInput.js';
+
+const COMPONENT_ID = 'dropdowns.multiselect_input';
+const visibleStyling = props => {
+  const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
+  const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
+  let height = '0';
+  if (props.isVisible) {
+    height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
+  }
+  return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
+};
+const StyledMultiselectInput = styled(StyledInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10',
+  isBare: true
+}).withConfig({
+  displayName: "StyledMultiselectInput",
+  componentId: "sc-iiow29-0"
+})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMultiselectInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMultiselectInput };

package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.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 = 'dropdowns.multiselect_item_wrapper';
+const StyledMultiselectItemWrapper = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledMultiselectItemWrapper",
+  componentId: "sc-vgr7nd-0"
+})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMultiselectItemWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMultiselectItemWrapper };

package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js

@@ -0,0 +1,34 @@
+/**
+* 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 = 'dropdowns.multiselect_items_container';
+const sizeStyles = props => {
+  let margin;
+  let padding;
+  if (!props.isBare) {
+    const marginVertical = props.isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
+    margin = `${marginVertical} 0`;
+    const paddingVertical = props.isCompact ? '3px' : '1px';
+    const paddingEnd = `${props.theme.space.base}px`;
+    padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
+  }
+  return css(["margin:", ";padding:", ";"], margin, padding);
+};
+const StyledMultiselectItemsContainer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledMultiselectItemsContainer",
+  componentId: "sc-1dxwjyz-0"
+})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMultiselectItemsContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMultiselectItemsContainer };

package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.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, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
+const StyledMultiselectMoreAnchor = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledMultiselectMoreAnchor",
+  componentId: "sc-pkakky-0"
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isDisabled ? getColorV8('neutralHue', 400, props.theme) : getColorV8('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMultiselectMoreAnchor.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMultiselectMoreAnchor };

package/dist/esm/styled/select/StyledFauxInput.js

@@ -0,0 +1,25 @@
+/**
+* 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';
+import { FauxInput } from '@zendeskgarden/react-forms';
+
+const COMPONENT_ID = 'dropdowns.faux_input';
+const StyledFauxInput = styled(FauxInput).attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10',
+  mediaLayout: true,
+  theme: props.theme
+})).withConfig({
+  displayName: "StyledFauxInput",
+  componentId: "sc-bk8odf-0"
+})(["cursor:", ";min-width:", "px;", ";"], props => !props.disabled && 'pointer', props => props.theme.space.base * (props.isCompact ? 25 : 36), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFauxInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFauxInput };

package/dist/esm/styled/select/StyledInput.js

@@ -0,0 +1,25 @@
+/**
+* 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 { Input } from '@zendeskgarden/react-forms';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.input';
+const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
+const StyledInput = styled(Input).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10',
+  isBare: true
+}).withConfig({
+  displayName: "StyledInput",
+  componentId: "sc-kykaw8-0"
+})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInput };

package/dist/esm/styled/select/StyledSelect.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 = 'dropdowns.select';
+const StyledSelect = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledSelect",
+  componentId: "sc-xf4qjv-0"
+})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSelect.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSelect };

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* 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.
+*/
+const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+
+export { PLACEMENT };

package/dist/esm/utils/garden-placements.js

@@ -0,0 +1,77 @@
+/**
+* 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 getPopperPlacement(gardenPlacement) {
+  switch (gardenPlacement) {
+    case 'end':
+      return 'right';
+    case 'end-top':
+      return 'right-start';
+    case 'end-bottom':
+      return 'right-end';
+    case 'start':
+      return 'left';
+    case 'start-top':
+      return 'left-start';
+    case 'start-bottom':
+      return 'left-end';
+    default:
+      return gardenPlacement;
+  }
+}
+function getRtlPopperPlacement(gardenPlacement) {
+  const popperPlacement = getPopperPlacement(gardenPlacement);
+  switch (popperPlacement) {
+    case 'left':
+      return 'right';
+    case 'left-start':
+      return 'right-start';
+    case 'left-end':
+      return 'right-end';
+    case 'top-start':
+      return 'top-end';
+    case 'top-end':
+      return 'top-start';
+    case 'right':
+      return 'left';
+    case 'right-start':
+      return 'left-start';
+    case 'right-end':
+      return 'left-end';
+    case 'bottom-start':
+      return 'bottom-end';
+    case 'bottom-end':
+      return 'bottom-start';
+    default:
+      return popperPlacement;
+  }
+}
+function getArrowPosition(popperPlacement) {
+  const arrowPositionMappings = {
+    auto: 'top',
+    top: 'bottom',
+    'top-start': 'bottom-left',
+    'top-end': 'bottom-right',
+    right: 'left',
+    'right-start': 'left-top',
+    'right-end': 'left-bottom',
+    bottom: 'top',
+    'bottom-start': 'top-left',
+    'bottom-end': 'top-right',
+    left: 'right',
+    'left-start': 'right-top',
+    'left-end': 'right-bottom'
+  };
+  return popperPlacement ? arrowPositionMappings[popperPlacement] : 'top';
+}
+function getMenuPosition(popperPlacement) {
+  if (popperPlacement === 'auto') {
+    return 'bottom';
+  }
+  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
+}
+
+export { getArrowPosition, getMenuPosition, getPopperPlacement, getRtlPopperPlacement };

package/dist/esm/utils/useDropdownContext.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 React__default, { useContext } from 'react';
+
+const DropdownContext = React__default.createContext(undefined);
+const useDropdownContext = () => {
+  const dropdownContext = useContext(DropdownContext);
+  if (!dropdownContext) {
+    throw new Error('This component must be rendered within a `Dropdown` component.');
+  }
+  return dropdownContext;
+};
+
+export { DropdownContext, useDropdownContext as default };

package/dist/esm/utils/useFieldContext.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 React__default, { useContext } from 'react';
+
+const FieldContext = React__default.createContext(undefined);
+const useFieldContext = () => {
+  const fieldContext = useContext(FieldContext);
+  if (!fieldContext) {
+    throw new Error('This component must be rendered within a `Field` component.');
+  }
+  return fieldContext;
+};
+
+export { FieldContext, useFieldContext as default };

package/dist/esm/utils/useItemContext.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 React__default, { useContext } from 'react';
+
+const ItemContext = React__default.createContext(undefined);
+const useItemContext = () => {
+  const context = useContext(ItemContext);
+  if (!context) {
+    throw new Error('This component must be rendered within an `Item` component.');
+  }
+  return context;
+};
+
+export { ItemContext, useItemContext as default };

package/dist/esm/utils/useMenuContext.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 React__default, { useContext } from 'react';
+
+const MenuContext = React__default.createContext(undefined);
+const useMenuContext = () => {
+  const menuContext = useContext(MenuContext);
+  if (!menuContext) {
+    throw new Error('This component must be rendered within a `Menu` component.');
+  }
+  return menuContext;
+};
+
+export { MenuContext, useMenuContext as default };