@zendeskgarden/react-dropdowns.legacy 9.1.0 → 9.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/elements/Autocomplete/Autocomplete.js +1 -1
- package/dist/esm/elements/Menu/Items/HeaderIcon.js +1 -6
- package/dist/esm/elements/Multiselect/Multiselect.js +1 -1
- package/dist/esm/elements/Select/Select.js +1 -1
- package/dist/esm/elements/Trigger/Trigger.js +1 -1
- package/dist/esm/styled/items/StyledAddItem.js +1 -1
- package/dist/esm/styled/items/StyledItem.js +1 -1
- package/dist/esm/styled/items/StyledItemIcon.js +1 -1
- package/dist/esm/styled/items/StyledItemMeta.js +1 -1
- package/dist/esm/styled/items/StyledNextIcon.js +1 -1
- package/dist/esm/styled/items/StyledNextItem.js +1 -1
- package/dist/esm/styled/items/StyledPreviousIcon.js +1 -1
- package/dist/esm/styled/items/StyledPreviousItem.js +1 -1
- package/dist/esm/styled/items/header/StyledHeaderIcon.js +1 -1
- package/dist/esm/styled/items/header/StyledHeaderItem.js +1 -1
- package/dist/esm/styled/items/media/StyledMediaBody.js +1 -1
- package/dist/esm/styled/items/media/StyledMediaFigure.js +1 -1
- package/dist/esm/styled/items/media/StyledMediaItem.js +1 -1
- package/dist/esm/styled/menu/StyledMenu.js +1 -1
- package/dist/esm/styled/menu/StyledMenuWrapper.js +1 -1
- package/dist/esm/styled/menu/StyledSeparator.js +1 -1
- package/dist/esm/styled/multiselect/StyledMultiselectInput.js +12 -7
- package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js +1 -1
- package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js +1 -1
- package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js +2 -2
- package/dist/esm/styled/select/StyledFauxInput.js +1 -1
- package/dist/esm/styled/select/StyledInput.js +2 -2
- package/dist/esm/styled/select/StyledSelect.js +1 -1
- package/dist/index.cjs.js +41 -40
- package/dist/typings/styled/items/header/StyledHeaderIcon.d.ts +1 -5
- package/dist/typings/styled/multiselect/StyledMultiselectInput.d.ts +1 -1
- package/dist/typings/styled/select/StyledInput.d.ts +1 -1
- package/package.json +5 -5
|
@@ -109,7 +109,7 @@ const Autocomplete = forwardRef((_ref, ref) => {
|
|
|
109
109
|
isFocused: isContainerFocused,
|
|
110
110
|
isDisabled: props.disabled
|
|
111
111
|
}, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
|
|
112
|
-
isHidden: !isOpen,
|
|
112
|
+
$isHidden: !isOpen,
|
|
113
113
|
disabled: props.disabled,
|
|
114
114
|
onFocus: () => {
|
|
115
115
|
setIsFocused(true);
|
|
@@ -28,15 +28,10 @@ import '../../../styled/multiselect/StyledMultiselectInput.js';
|
|
|
28
28
|
import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
|
|
29
29
|
import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
|
|
30
30
|
import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
|
|
31
|
-
import useMenuContext from '../../../utils/useMenuContext.js';
|
|
32
31
|
|
|
33
32
|
const HeaderIcon = React__default.forwardRef((props, ref) => {
|
|
34
|
-
const {
|
|
35
|
-
isCompact
|
|
36
|
-
} = useMenuContext();
|
|
37
33
|
return React__default.createElement(StyledHeaderIcon, Object.assign({
|
|
38
|
-
ref: ref
|
|
39
|
-
isCompact: isCompact
|
|
34
|
+
ref: ref
|
|
40
35
|
}, props));
|
|
41
36
|
});
|
|
42
37
|
HeaderIcon.displayName = 'HeaderIcon';
|
|
@@ -286,7 +286,7 @@ const Multiselect = React__default.forwardRef((_ref, ref) => {
|
|
|
286
286
|
}
|
|
287
287
|
}
|
|
288
288
|
},
|
|
289
|
-
isVisible: isFocused || inputValue || selectedItems.length === 0,
|
|
289
|
+
$isVisible: isFocused || inputValue || selectedItems.length === 0,
|
|
290
290
|
isCompact: props.isCompact,
|
|
291
291
|
role: 'combobox',
|
|
292
292
|
ref: mergeRefs([inputRef, externalInputRef]),
|
|
@@ -164,7 +164,7 @@ const Select = React__default.forwardRef((_ref, ref) => {
|
|
|
164
164
|
isDisabled: props.disabled
|
|
165
165
|
}, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
|
|
166
166
|
readOnly: true,
|
|
167
|
-
isHidden: true,
|
|
167
|
+
$isHidden: true,
|
|
168
168
|
tabIndex: -1,
|
|
169
169
|
ref: hiddenInputRef,
|
|
170
170
|
value: '',
|
|
@@ -161,7 +161,7 @@ const Trigger = _ref => {
|
|
|
161
161
|
} = _ref2;
|
|
162
162
|
return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
|
|
163
163
|
readOnly: true,
|
|
164
|
-
isHidden: true,
|
|
164
|
+
$isHidden: true,
|
|
165
165
|
tabIndex: -1,
|
|
166
166
|
ref: hiddenInputRef,
|
|
167
167
|
value: '',
|
|
@@ -11,7 +11,7 @@ import { StyledItem } from './StyledItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.add_item';
|
|
12
12
|
const StyledAddItem = styled(StyledItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledAddItem",
|
|
17
17
|
componentId: "sc-mlto71-0"
|
|
@@ -41,7 +41,7 @@ const getColorStyles = props => {
|
|
|
41
41
|
};
|
|
42
42
|
const StyledItem = styled.li.attrs(props => ({
|
|
43
43
|
'data-garden-id': COMPONENT_ID,
|
|
44
|
-
'data-garden-version': '9.1.
|
|
44
|
+
'data-garden-version': '9.1.2',
|
|
45
45
|
'aria-disabled': props.disabled
|
|
46
46
|
})).withConfig({
|
|
47
47
|
displayName: "StyledItem",
|
|
@@ -15,7 +15,7 @@ const getSizeStyles = props => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledItemIcon = styled.div.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.1.
|
|
18
|
+
'data-garden-version': '9.1.2'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledItemIcon",
|
|
21
21
|
componentId: "sc-pspm80-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.item_meta';
|
|
11
11
|
const StyledItemMeta = styled.span.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledItemMeta",
|
|
16
16
|
componentId: "sc-1m3x8m1-0"
|
|
@@ -12,7 +12,7 @@ import { StyledItemIcon } from './StyledItemIcon.js';
|
|
|
12
12
|
const COMPONENT_ID = 'dropdowns.next_item';
|
|
13
13
|
const StyledNextItem = styled(StyledItem).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.1.
|
|
15
|
+
'data-garden-version': '9.1.2'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledNextItem",
|
|
18
18
|
componentId: "sc-1wrjlge-0"
|
|
@@ -11,7 +11,7 @@ import { StyledItem } from './StyledItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.previous_item';
|
|
12
12
|
const StyledPreviousItem = styled(StyledItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledPreviousItem",
|
|
17
17
|
componentId: "sc-1qv9jwe-0"
|
|
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.header_icon';
|
|
11
11
|
const StyledHeaderIcon = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledHeaderIcon",
|
|
16
16
|
componentId: "sc-ow8s45-0"
|
|
@@ -17,7 +17,7 @@ const getHorizontalPadding = props => {
|
|
|
17
17
|
};
|
|
18
18
|
const StyledHeaderItem = styled(StyledItem).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.1.
|
|
20
|
+
'data-garden-version': '9.1.2'
|
|
21
21
|
}).withConfig({
|
|
22
22
|
displayName: "StyledHeaderItem",
|
|
23
23
|
componentId: "sc-1xosinr-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.media_body';
|
|
11
11
|
const StyledMediaBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMediaBody",
|
|
16
16
|
componentId: "sc-133sssc-0"
|
|
@@ -20,7 +20,7 @@ _ref => {
|
|
|
20
20
|
return React__default.cloneElement(Children.only(children), props);
|
|
21
21
|
}).attrs({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.1.
|
|
23
|
+
'data-garden-version': '9.1.2'
|
|
24
24
|
}).withConfig({
|
|
25
25
|
displayName: "StyledMediaFigure",
|
|
26
26
|
componentId: "sc-16vz3xj-0"
|
|
@@ -11,7 +11,7 @@ import { StyledItem } from '../StyledItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.media_item';
|
|
12
12
|
const StyledMediaItem = styled(StyledItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledMediaItem",
|
|
17
17
|
componentId: "sc-af4509-0"
|
|
@@ -11,7 +11,7 @@ import { getArrowPosition } from '../../utils/garden-placements.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu';
|
|
12
12
|
const StyledMenu = styled.ul.attrs(props => ({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2',
|
|
15
15
|
className: props.$isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenu",
|
|
@@ -11,7 +11,7 @@ import { getMenuPosition } from '../../utils/garden-placements.js';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.menu_wrapper';
|
|
12
12
|
const StyledMenuWrapper = styled.div.attrs(props => ({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2',
|
|
15
15
|
className: props.$isAnimated && 'is-animated'
|
|
16
16
|
})).withConfig({
|
|
17
17
|
displayName: "StyledMenuWrapper",
|
|
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.separator';
|
|
11
11
|
const StyledSeparator = styled.li.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2',
|
|
14
14
|
role: 'separator'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledSeparator",
|
|
@@ -9,18 +9,23 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
9
9
|
import { StyledInput } from '../select/StyledInput.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.multiselect_input';
|
|
12
|
-
const visibleStyling =
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
const visibleStyling = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
$isVisible,
|
|
15
|
+
isCompact,
|
|
16
|
+
theme
|
|
17
|
+
} = _ref;
|
|
18
|
+
const margin = $isVisible ? `${theme.space.base / 2}px` : 0;
|
|
19
|
+
const minWidth = $isVisible ? `${theme.space.base * 15}px` : 0;
|
|
15
20
|
let height = '0';
|
|
16
|
-
if (
|
|
17
|
-
height = `${
|
|
21
|
+
if ($isVisible) {
|
|
22
|
+
height = `${theme.space.base * (isCompact ? 5 : 8)}px`;
|
|
18
23
|
}
|
|
19
|
-
return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"],
|
|
24
|
+
return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !$isVisible && 0, margin, !$isVisible && 0, minWidth, height);
|
|
20
25
|
};
|
|
21
26
|
const StyledMultiselectInput = styled(StyledInput).attrs({
|
|
22
27
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.1.
|
|
28
|
+
'data-garden-version': '9.1.2',
|
|
24
29
|
isBare: true
|
|
25
30
|
}).withConfig({
|
|
26
31
|
displayName: "StyledMultiselectInput",
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.multiselect_item_wrapper';
|
|
11
11
|
const StyledMultiselectItemWrapper = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMultiselectItemWrapper",
|
|
16
16
|
componentId: "sc-vgr7nd-0"
|
|
@@ -22,7 +22,7 @@ const sizeStyles = props => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledMultiselectItemsContainer = styled.div.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.1.
|
|
25
|
+
'data-garden-version': '9.1.2'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledMultiselectItemsContainer",
|
|
28
28
|
componentId: "sc-1dxwjyz-0"
|
|
@@ -10,11 +10,11 @@ import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
11
11
|
const StyledMultiselectMoreAnchor = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMultiselectMoreAnchor",
|
|
16
16
|
componentId: "sc-pkakky-0"
|
|
17
|
-
})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", "
|
|
17
|
+
})(["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 => getColor({
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
|
|
20
20
|
}), props => !props.$isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
@@ -11,7 +11,7 @@ import { FauxInput } from '@zendeskgarden/react-forms';
|
|
|
11
11
|
const COMPONENT_ID = 'dropdowns.faux_input';
|
|
12
12
|
const StyledFauxInput = styled(FauxInput).attrs(props => ({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.1.
|
|
14
|
+
'data-garden-version': '9.1.2',
|
|
15
15
|
mediaLayout: true,
|
|
16
16
|
theme: props.theme
|
|
17
17
|
})).withConfig({
|
|
@@ -12,11 +12,11 @@ const COMPONENT_ID = 'dropdowns.input';
|
|
|
12
12
|
const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
13
13
|
const StyledInput = styled(Input).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.1.
|
|
15
|
+
'data-garden-version': '9.1.2',
|
|
16
16
|
isBare: true
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledInput",
|
|
19
19
|
componentId: "sc-kykaw8-0"
|
|
20
|
-
})(["", ";", ";"], props => props
|
|
20
|
+
})(["", ";", ";"], props => props.$isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
21
|
|
|
22
22
|
export { StyledInput };
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const COMPONENT_ID = 'dropdowns.select';
|
|
11
11
|
const StyledSelect = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.1.
|
|
13
|
+
'data-garden-version': '9.1.2'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSelect",
|
|
16
16
|
componentId: "sc-xf4qjv-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -289,7 +289,7 @@ function getMenuPosition(popperPlacement) {
|
|
|
289
289
|
const COMPONENT_ID$m = 'dropdowns.menu';
|
|
290
290
|
const StyledMenu = styled__default.default.ul.attrs(props => ({
|
|
291
291
|
'data-garden-id': COMPONENT_ID$m,
|
|
292
|
-
'data-garden-version': '9.1.
|
|
292
|
+
'data-garden-version': '9.1.2',
|
|
293
293
|
className: props.$isAnimated && 'is-animated'
|
|
294
294
|
})).withConfig({
|
|
295
295
|
displayName: "StyledMenu",
|
|
@@ -303,7 +303,7 @@ const StyledMenu = styled__default.default.ul.attrs(props => ({
|
|
|
303
303
|
const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
|
|
304
304
|
const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
|
|
305
305
|
'data-garden-id': COMPONENT_ID$l,
|
|
306
|
-
'data-garden-version': '9.1.
|
|
306
|
+
'data-garden-version': '9.1.2',
|
|
307
307
|
className: props.$isAnimated && 'is-animated'
|
|
308
308
|
})).withConfig({
|
|
309
309
|
displayName: "StyledMenuWrapper",
|
|
@@ -319,7 +319,7 @@ const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
|
|
|
319
319
|
const COMPONENT_ID$k = 'dropdowns.separator';
|
|
320
320
|
const StyledSeparator = styled__default.default.li.attrs({
|
|
321
321
|
'data-garden-id': COMPONENT_ID$k,
|
|
322
|
-
'data-garden-version': '9.1.
|
|
322
|
+
'data-garden-version': '9.1.2',
|
|
323
323
|
role: 'separator'
|
|
324
324
|
}).withConfig({
|
|
325
325
|
displayName: "StyledSeparator",
|
|
@@ -363,7 +363,7 @@ const getColorStyles = props => {
|
|
|
363
363
|
};
|
|
364
364
|
const StyledItem = styled__default.default.li.attrs(props => ({
|
|
365
365
|
'data-garden-id': COMPONENT_ID$j,
|
|
366
|
-
'data-garden-version': '9.1.
|
|
366
|
+
'data-garden-version': '9.1.2',
|
|
367
367
|
'aria-disabled': props.disabled
|
|
368
368
|
})).withConfig({
|
|
369
369
|
displayName: "StyledItem",
|
|
@@ -373,7 +373,7 @@ const StyledItem = styled__default.default.li.attrs(props => ({
|
|
|
373
373
|
const COMPONENT_ID$i = 'dropdowns.add_item';
|
|
374
374
|
const StyledAddItem = styled__default.default(StyledItem).attrs({
|
|
375
375
|
'data-garden-id': COMPONENT_ID$i,
|
|
376
|
-
'data-garden-version': '9.1.
|
|
376
|
+
'data-garden-version': '9.1.2'
|
|
377
377
|
}).withConfig({
|
|
378
378
|
displayName: "StyledAddItem",
|
|
379
379
|
componentId: "sc-mlto71-0"
|
|
@@ -385,7 +385,7 @@ const StyledAddItem = styled__default.default(StyledItem).attrs({
|
|
|
385
385
|
const COMPONENT_ID$h = 'dropdowns.item_meta';
|
|
386
386
|
const StyledItemMeta = styled__default.default.span.attrs({
|
|
387
387
|
'data-garden-id': COMPONENT_ID$h,
|
|
388
|
-
'data-garden-version': '9.1.
|
|
388
|
+
'data-garden-version': '9.1.2'
|
|
389
389
|
}).withConfig({
|
|
390
390
|
displayName: "StyledItemMeta",
|
|
391
391
|
componentId: "sc-1m3x8m1-0"
|
|
@@ -400,7 +400,7 @@ const getSizeStyles = props => {
|
|
|
400
400
|
};
|
|
401
401
|
const StyledItemIcon = styled__default.default.div.attrs({
|
|
402
402
|
'data-garden-id': COMPONENT_ID$g,
|
|
403
|
-
'data-garden-version': '9.1.
|
|
403
|
+
'data-garden-version': '9.1.2'
|
|
404
404
|
}).withConfig({
|
|
405
405
|
displayName: "StyledItemIcon",
|
|
406
406
|
componentId: "sc-pspm80-0"
|
|
@@ -412,7 +412,7 @@ const StyledItemIcon = styled__default.default.div.attrs({
|
|
|
412
412
|
const COMPONENT_ID$f = 'dropdowns.next_item';
|
|
413
413
|
const StyledNextItem = styled__default.default(StyledItem).attrs({
|
|
414
414
|
'data-garden-id': COMPONENT_ID$f,
|
|
415
|
-
'data-garden-version': '9.1.
|
|
415
|
+
'data-garden-version': '9.1.2'
|
|
416
416
|
}).withConfig({
|
|
417
417
|
displayName: "StyledNextItem",
|
|
418
418
|
componentId: "sc-1wrjlge-0"
|
|
@@ -441,7 +441,7 @@ const NextIconComponent = _ref => {
|
|
|
441
441
|
} = _ref;
|
|
442
442
|
return React__namespace.default.createElement(SvgChevronRightStroke, {
|
|
443
443
|
"data-garden-id": COMPONENT_ID$e,
|
|
444
|
-
"data-garden-version": '9.1.
|
|
444
|
+
"data-garden-version": '9.1.2',
|
|
445
445
|
className: className
|
|
446
446
|
});
|
|
447
447
|
};
|
|
@@ -456,7 +456,7 @@ const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
|
|
|
456
456
|
const COMPONENT_ID$d = 'dropdowns.previous_item';
|
|
457
457
|
const StyledPreviousItem = styled__default.default(StyledItem).attrs({
|
|
458
458
|
'data-garden-id': COMPONENT_ID$d,
|
|
459
|
-
'data-garden-version': '9.1.
|
|
459
|
+
'data-garden-version': '9.1.2'
|
|
460
460
|
}).withConfig({
|
|
461
461
|
displayName: "StyledPreviousItem",
|
|
462
462
|
componentId: "sc-1qv9jwe-0"
|
|
@@ -485,7 +485,7 @@ const PreviousIconComponent = _ref => {
|
|
|
485
485
|
} = _ref;
|
|
486
486
|
return React__namespace.default.createElement(SvgChevronLeftStroke, {
|
|
487
487
|
"data-garden-id": COMPONENT_ID$c,
|
|
488
|
-
"data-garden-version": '9.1.
|
|
488
|
+
"data-garden-version": '9.1.2',
|
|
489
489
|
className: className
|
|
490
490
|
});
|
|
491
491
|
};
|
|
@@ -500,7 +500,7 @@ const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withCo
|
|
|
500
500
|
const COMPONENT_ID$b = 'dropdowns.header_icon';
|
|
501
501
|
const StyledHeaderIcon = styled__default.default.div.attrs({
|
|
502
502
|
'data-garden-id': COMPONENT_ID$b,
|
|
503
|
-
'data-garden-version': '9.1.
|
|
503
|
+
'data-garden-version': '9.1.2'
|
|
504
504
|
}).withConfig({
|
|
505
505
|
displayName: "StyledHeaderIcon",
|
|
506
506
|
componentId: "sc-ow8s45-0"
|
|
@@ -518,7 +518,7 @@ const getHorizontalPadding = props => {
|
|
|
518
518
|
};
|
|
519
519
|
const StyledHeaderItem = styled__default.default(StyledItem).attrs({
|
|
520
520
|
'data-garden-id': COMPONENT_ID$a,
|
|
521
|
-
'data-garden-version': '9.1.
|
|
521
|
+
'data-garden-version': '9.1.2'
|
|
522
522
|
}).withConfig({
|
|
523
523
|
displayName: "StyledHeaderItem",
|
|
524
524
|
componentId: "sc-1xosinr-0"
|
|
@@ -527,7 +527,7 @@ const StyledHeaderItem = styled__default.default(StyledItem).attrs({
|
|
|
527
527
|
const COMPONENT_ID$9 = 'dropdowns.media_body';
|
|
528
528
|
const StyledMediaBody = styled__default.default.div.attrs({
|
|
529
529
|
'data-garden-id': COMPONENT_ID$9,
|
|
530
|
-
'data-garden-version': '9.1.
|
|
530
|
+
'data-garden-version': '9.1.2'
|
|
531
531
|
}).withConfig({
|
|
532
532
|
displayName: "StyledMediaBody",
|
|
533
533
|
componentId: "sc-133sssc-0"
|
|
@@ -545,7 +545,7 @@ _ref => {
|
|
|
545
545
|
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
546
546
|
}).attrs({
|
|
547
547
|
'data-garden-id': COMPONENT_ID$8,
|
|
548
|
-
'data-garden-version': '9.1.
|
|
548
|
+
'data-garden-version': '9.1.2'
|
|
549
549
|
}).withConfig({
|
|
550
550
|
displayName: "StyledMediaFigure",
|
|
551
551
|
componentId: "sc-16vz3xj-0"
|
|
@@ -554,7 +554,7 @@ _ref => {
|
|
|
554
554
|
const COMPONENT_ID$7 = 'dropdowns.media_item';
|
|
555
555
|
const StyledMediaItem = styled__default.default(StyledItem).attrs({
|
|
556
556
|
'data-garden-id': COMPONENT_ID$7,
|
|
557
|
-
'data-garden-version': '9.1.
|
|
557
|
+
'data-garden-version': '9.1.2'
|
|
558
558
|
}).withConfig({
|
|
559
559
|
displayName: "StyledMediaItem",
|
|
560
560
|
componentId: "sc-af4509-0"
|
|
@@ -563,7 +563,7 @@ const StyledMediaItem = styled__default.default(StyledItem).attrs({
|
|
|
563
563
|
const COMPONENT_ID$6 = 'dropdowns.faux_input';
|
|
564
564
|
const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
|
|
565
565
|
'data-garden-id': COMPONENT_ID$6,
|
|
566
|
-
'data-garden-version': '9.1.
|
|
566
|
+
'data-garden-version': '9.1.2',
|
|
567
567
|
mediaLayout: true,
|
|
568
568
|
theme: props.theme
|
|
569
569
|
})).withConfig({
|
|
@@ -575,35 +575,40 @@ const COMPONENT_ID$5 = 'dropdowns.input';
|
|
|
575
575
|
const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
576
576
|
const StyledInput = styled__default.default(reactForms.Input).attrs({
|
|
577
577
|
'data-garden-id': COMPONENT_ID$5,
|
|
578
|
-
'data-garden-version': '9.1.
|
|
578
|
+
'data-garden-version': '9.1.2',
|
|
579
579
|
isBare: true
|
|
580
580
|
}).withConfig({
|
|
581
581
|
displayName: "StyledInput",
|
|
582
582
|
componentId: "sc-kykaw8-0"
|
|
583
|
-
})(["", ";", ";"], props => props
|
|
583
|
+
})(["", ";", ";"], props => props.$isHidden && hiddenStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
584
584
|
|
|
585
585
|
const COMPONENT_ID$4 = 'dropdowns.select';
|
|
586
586
|
const StyledSelect = styled__default.default.div.attrs({
|
|
587
587
|
'data-garden-id': COMPONENT_ID$4,
|
|
588
|
-
'data-garden-version': '9.1.
|
|
588
|
+
'data-garden-version': '9.1.2'
|
|
589
589
|
}).withConfig({
|
|
590
590
|
displayName: "StyledSelect",
|
|
591
591
|
componentId: "sc-xf4qjv-0"
|
|
592
592
|
})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
593
593
|
|
|
594
594
|
const COMPONENT_ID$3 = 'dropdowns.multiselect_input';
|
|
595
|
-
const visibleStyling =
|
|
596
|
-
|
|
597
|
-
|
|
595
|
+
const visibleStyling = _ref => {
|
|
596
|
+
let {
|
|
597
|
+
$isVisible,
|
|
598
|
+
isCompact,
|
|
599
|
+
theme
|
|
600
|
+
} = _ref;
|
|
601
|
+
const margin = $isVisible ? `${theme.space.base / 2}px` : 0;
|
|
602
|
+
const minWidth = $isVisible ? `${theme.space.base * 15}px` : 0;
|
|
598
603
|
let height = '0';
|
|
599
|
-
if (
|
|
600
|
-
height = `${
|
|
604
|
+
if ($isVisible) {
|
|
605
|
+
height = `${theme.space.base * (isCompact ? 5 : 8)}px`;
|
|
601
606
|
}
|
|
602
|
-
return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"],
|
|
607
|
+
return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !$isVisible && 0, margin, !$isVisible && 0, minWidth, height);
|
|
603
608
|
};
|
|
604
609
|
const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
|
|
605
610
|
'data-garden-id': COMPONENT_ID$3,
|
|
606
|
-
'data-garden-version': '9.1.
|
|
611
|
+
'data-garden-version': '9.1.2',
|
|
607
612
|
isBare: true
|
|
608
613
|
}).withConfig({
|
|
609
614
|
displayName: "StyledMultiselectInput",
|
|
@@ -625,7 +630,7 @@ const sizeStyles = props => {
|
|
|
625
630
|
};
|
|
626
631
|
const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
|
|
627
632
|
'data-garden-id': COMPONENT_ID$2,
|
|
628
|
-
'data-garden-version': '9.1.
|
|
633
|
+
'data-garden-version': '9.1.2'
|
|
629
634
|
}).withConfig({
|
|
630
635
|
displayName: "StyledMultiselectItemsContainer",
|
|
631
636
|
componentId: "sc-1dxwjyz-0"
|
|
@@ -634,7 +639,7 @@ const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
|
|
|
634
639
|
const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
|
|
635
640
|
const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
|
|
636
641
|
'data-garden-id': COMPONENT_ID$1,
|
|
637
|
-
'data-garden-version': '9.1.
|
|
642
|
+
'data-garden-version': '9.1.2'
|
|
638
643
|
}).withConfig({
|
|
639
644
|
displayName: "StyledMultiselectItemWrapper",
|
|
640
645
|
componentId: "sc-vgr7nd-0"
|
|
@@ -643,11 +648,11 @@ const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
|
|
|
643
648
|
const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
644
649
|
const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
|
|
645
650
|
'data-garden-id': COMPONENT_ID,
|
|
646
|
-
'data-garden-version': '9.1.
|
|
651
|
+
'data-garden-version': '9.1.2'
|
|
647
652
|
}).withConfig({
|
|
648
653
|
displayName: "StyledMultiselectMoreAnchor",
|
|
649
654
|
componentId: "sc-pkakky-0"
|
|
650
|
-
})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", "
|
|
655
|
+
})(["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' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
|
|
651
656
|
theme: props.theme,
|
|
652
657
|
variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
|
|
653
658
|
}), props => !props.$isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
@@ -780,7 +785,7 @@ const Trigger = _ref => {
|
|
|
780
785
|
} = _ref2;
|
|
781
786
|
return React__namespace.default.createElement(React__namespace.default.Fragment, null, renderChildren(popperReference), React__namespace.default.createElement(StyledInput, getInputProps({
|
|
782
787
|
readOnly: true,
|
|
783
|
-
isHidden: true,
|
|
788
|
+
$isHidden: true,
|
|
784
789
|
tabIndex: -1,
|
|
785
790
|
ref: hiddenInputRef,
|
|
786
791
|
value: '',
|
|
@@ -898,7 +903,7 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
|
|
|
898
903
|
isFocused: isContainerFocused,
|
|
899
904
|
isDisabled: props.disabled
|
|
900
905
|
}, start), !isOpen && React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
|
|
901
|
-
isHidden: !isOpen,
|
|
906
|
+
$isHidden: !isOpen,
|
|
902
907
|
disabled: props.disabled,
|
|
903
908
|
onFocus: () => {
|
|
904
909
|
setIsFocused(true);
|
|
@@ -1267,7 +1272,7 @@ const Multiselect = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
1267
1272
|
}
|
|
1268
1273
|
}
|
|
1269
1274
|
},
|
|
1270
|
-
isVisible: isFocused || inputValue || selectedItems.length === 0,
|
|
1275
|
+
$isVisible: isFocused || inputValue || selectedItems.length === 0,
|
|
1271
1276
|
isCompact: props.isCompact,
|
|
1272
1277
|
role: 'combobox',
|
|
1273
1278
|
ref: reactMergeRefs.mergeRefs([inputRef, externalInputRef]),
|
|
@@ -1421,7 +1426,7 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
1421
1426
|
isDisabled: props.disabled
|
|
1422
1427
|
}, start), React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
|
|
1423
1428
|
readOnly: true,
|
|
1424
|
-
isHidden: true,
|
|
1429
|
+
$isHidden: true,
|
|
1425
1430
|
tabIndex: -1,
|
|
1426
1431
|
ref: hiddenInputRef,
|
|
1427
1432
|
value: '',
|
|
@@ -1831,12 +1836,8 @@ AddItem.propTypes = {
|
|
|
1831
1836
|
};
|
|
1832
1837
|
|
|
1833
1838
|
const HeaderIcon = React__namespace.default.forwardRef((props, ref) => {
|
|
1834
|
-
const {
|
|
1835
|
-
isCompact
|
|
1836
|
-
} = useMenuContext();
|
|
1837
1839
|
return React__namespace.default.createElement(StyledHeaderIcon, Object.assign({
|
|
1838
|
-
ref: ref
|
|
1839
|
-
isCompact: isCompact
|
|
1840
|
+
ref: ref
|
|
1840
1841
|
}, props));
|
|
1841
1842
|
});
|
|
1842
1843
|
HeaderIcon.displayName = 'HeaderIcon';
|
|
@@ -4,11 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
interface IStyledHeaderIcon {
|
|
8
|
-
isCompact?: boolean;
|
|
9
|
-
}
|
|
10
7
|
export declare const StyledHeaderIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
11
8
|
'data-garden-id': string;
|
|
12
9
|
'data-garden-version': string;
|
|
13
|
-
}
|
|
14
|
-
export {};
|
|
10
|
+
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
8
|
interface IStyledMultiselectInputProps {
|
|
9
9
|
isCompact: boolean;
|
|
10
|
-
isVisible: boolean;
|
|
10
|
+
$isVisible: boolean;
|
|
11
11
|
}
|
|
12
12
|
export declare const StyledMultiselectInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("packages/forms/dist/typings").IInputProps & import("react").RefAttributes<HTMLInputElement>>, DefaultTheme, {
|
|
13
13
|
'data-garden-id': string;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
export interface IStyledInputProps {
|
|
8
|
-
isHidden?: boolean;
|
|
8
|
+
$isHidden?: boolean;
|
|
9
9
|
}
|
|
10
10
|
export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").IInputProps & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {
|
|
11
11
|
'data-garden-id': string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-dropdowns.legacy",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.2",
|
|
4
4
|
"description": "Components relating to dropdowns in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-selection": "^2.0.0",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^1.0.14",
|
|
26
|
-
"@zendeskgarden/react-forms": "^9.1.
|
|
26
|
+
"@zendeskgarden/react-forms": "^9.1.2",
|
|
27
27
|
"downshift": "^7.0.0",
|
|
28
28
|
"polished": "^4.3.1",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
@@ -31,14 +31,14 @@
|
|
|
31
31
|
"react-popper": "^1.3.4"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"@zendeskgarden/react-theming": ">=9.0.0
|
|
34
|
+
"@zendeskgarden/react-theming": ">=9.0.0",
|
|
35
35
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
36
36
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
37
37
|
"styled-components": "^5.3.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/lodash.debounce": "4.0.9",
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.1.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.1.2",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.1.1",
|
|
43
43
|
"lodash.debounce": "4.0.8"
|
|
44
44
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"zendeskgarden:src": "src/index.ts",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
|
|
56
56
|
}
|