@zendeskgarden/react-draggable 9.12.3 → 9.12.5
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/draggable/Draggable.js +10 -11
- package/dist/esm/elements/draggable-list/DraggableList.js +4 -5
- package/dist/esm/elements/dropzone/Dropzone.js +10 -11
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/grip.svg.js +2 -2
- package/dist/esm/styled/draggable/StyledContent.js +3 -3
- package/dist/esm/styled/draggable/StyledDraggable.js +7 -7
- package/dist/esm/styled/draggable/StyledGrip.js +7 -8
- package/dist/esm/styled/draggable-list/StyledDraggableList.js +5 -5
- package/dist/esm/styled/draggable-list/StyledDropIndicator.js +6 -6
- package/dist/esm/styled/draggable-list/StyledItem.js +5 -5
- package/dist/esm/styled/dropzone/StyledDropzone.js +5 -5
- package/dist/esm/styled/dropzone/StyledIcon.js +5 -6
- package/dist/esm/styled/dropzone/StyledMessage.js +3 -3
- package/dist/index.cjs.js +40 -45
- package/package.json +5 -5
|
@@ -17,17 +17,16 @@ import '../../styled/dropzone/StyledDropzone.js';
|
|
|
17
17
|
import '../../styled/dropzone/StyledMessage.js';
|
|
18
18
|
import '../../styled/dropzone/StyledIcon.js';
|
|
19
19
|
|
|
20
|
-
const DraggableComponent = forwardRef((
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
} = _ref;
|
|
20
|
+
const DraggableComponent = forwardRef(({
|
|
21
|
+
focusInset,
|
|
22
|
+
isBare,
|
|
23
|
+
isCompact,
|
|
24
|
+
isDisabled,
|
|
25
|
+
isGrabbed,
|
|
26
|
+
isPlaceholder,
|
|
27
|
+
tag,
|
|
28
|
+
...other
|
|
29
|
+
}, ref) => {
|
|
31
30
|
return React__default.createElement(StyledDraggable, Object.assign({
|
|
32
31
|
$focusInset: focusInset,
|
|
33
32
|
$isBare: isBare,
|
|
@@ -18,11 +18,10 @@ import '../../styled/dropzone/StyledMessage.js';
|
|
|
18
18
|
import '../../styled/dropzone/StyledIcon.js';
|
|
19
19
|
import { DraggableListContext } from '../../utils/useDraggableListContext.js';
|
|
20
20
|
|
|
21
|
-
const DraggableListComponent = forwardRef((
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
21
|
+
const DraggableListComponent = forwardRef(({
|
|
22
|
+
isHorizontal,
|
|
23
|
+
...other
|
|
24
|
+
}, ref) => {
|
|
26
25
|
const value = useMemo(() => ({
|
|
27
26
|
isHorizontal
|
|
28
27
|
}), [isHorizontal]);
|
|
@@ -19,17 +19,16 @@ import '../../styled/dropzone/StyledMessage.js';
|
|
|
19
19
|
import { StyledIcon } from '../../styled/dropzone/StyledIcon.js';
|
|
20
20
|
import { DropzoneContext } from '../../utils/useDropzoneContext.js';
|
|
21
21
|
|
|
22
|
-
const DropzoneComponent = forwardRef((
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = _ref;
|
|
22
|
+
const DropzoneComponent = forwardRef(({
|
|
23
|
+
children,
|
|
24
|
+
isActive,
|
|
25
|
+
isDanger,
|
|
26
|
+
isDisabled,
|
|
27
|
+
isHighlighted,
|
|
28
|
+
isVertical,
|
|
29
|
+
tag,
|
|
30
|
+
...other
|
|
31
|
+
}, ref) => {
|
|
33
32
|
const [hasMessage, setHasMessage] = useState(false);
|
|
34
33
|
const [hasIcon, setHasIcon] = useState(false);
|
|
35
34
|
const value = useMemo(() => ({
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
9
|
var _g;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
10
|
+
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
11
11
|
var SvgGrip = function SvgGrip(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 12,
|
|
15
15
|
height: 12,
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'draggable.content';
|
|
10
|
+
const COMPONENT_ID$6 = 'draggable.content';
|
|
11
11
|
const StyledContent = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$6,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledContent",
|
|
16
16
|
componentId: "sc-15arore-0"
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { componentStyles, getColor, focusStyles
|
|
8
|
+
import { componentStyles, getLineHeight, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledGrip } from './StyledGrip.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'draggable';
|
|
11
|
+
const COMPONENT_ID$7 = 'draggable';
|
|
12
12
|
function getDragShadow(theme) {
|
|
13
13
|
const {
|
|
14
14
|
space,
|
|
@@ -22,7 +22,7 @@ function getDragShadow(theme) {
|
|
|
22
22
|
});
|
|
23
23
|
return shadows.lg(offsetY, blurRadius, color);
|
|
24
24
|
}
|
|
25
|
-
const colorStyles = props => {
|
|
25
|
+
const colorStyles$2 = props => {
|
|
26
26
|
const {
|
|
27
27
|
$isBare,
|
|
28
28
|
$isGrabbed,
|
|
@@ -85,7 +85,7 @@ const colorStyles = props => {
|
|
|
85
85
|
boxShadow: $isGrabbed ? dragShadow : undefined
|
|
86
86
|
}), StyledGrip, $isDisabled && disabledColor);
|
|
87
87
|
};
|
|
88
|
-
const sizeStyles = props => {
|
|
88
|
+
const sizeStyles$5 = props => {
|
|
89
89
|
const {
|
|
90
90
|
$isCompact,
|
|
91
91
|
theme
|
|
@@ -102,11 +102,11 @@ const getCursor = props => {
|
|
|
102
102
|
return cursor;
|
|
103
103
|
};
|
|
104
104
|
const StyledDraggable = styled.div.attrs({
|
|
105
|
-
'data-garden-id': COMPONENT_ID,
|
|
106
|
-
'data-garden-version': '9.12.
|
|
105
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
106
|
+
'data-garden-version': '9.12.5'
|
|
107
107
|
}).withConfig({
|
|
108
108
|
displayName: "StyledDraggable",
|
|
109
109
|
componentId: "sc-3lxpf1-0"
|
|
110
|
-
})(["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', componentStyles);
|
|
110
|
+
})(["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$5, colorStyles$2, p => p.$isPlaceholder && !p.$isDisabled && 'hidden', componentStyles);
|
|
111
111
|
|
|
112
112
|
export { StyledDraggable, getDragShadow };
|
|
@@ -7,23 +7,22 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'draggable.grip';
|
|
11
|
-
function sizeStyles(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$8 = 'draggable.grip';
|
|
11
|
+
function sizeStyles$6({
|
|
12
|
+
theme
|
|
13
|
+
}) {
|
|
15
14
|
const property = theme.rtl ? 'margin-left' : 'margin-right';
|
|
16
15
|
return css(["", ":", ";"], property, theme.space.xs);
|
|
17
16
|
}
|
|
18
17
|
const StyledGrip = styled.div.attrs({
|
|
19
|
-
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.12.
|
|
18
|
+
'data-garden-id': COMPONENT_ID$8,
|
|
19
|
+
'data-garden-version': '9.12.5'
|
|
21
20
|
}).withConfig({
|
|
22
21
|
displayName: "StyledGrip",
|
|
23
22
|
componentId: "sc-13uv9iv-0"
|
|
24
23
|
})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => getColor({
|
|
25
24
|
variable: 'foreground.subtle',
|
|
26
25
|
theme: p.theme
|
|
27
|
-
}), sizeStyles, componentStyles);
|
|
26
|
+
}), sizeStyles$6, componentStyles);
|
|
28
27
|
|
|
29
28
|
export { StyledGrip };
|
|
@@ -8,8 +8,8 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledItem } from './StyledItem.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'draggable_list';
|
|
12
|
-
const sizeStyles = props => {
|
|
11
|
+
const COMPONENT_ID$4 = 'draggable_list';
|
|
12
|
+
const sizeStyles$3 = props => {
|
|
13
13
|
const {
|
|
14
14
|
$isHorizontal,
|
|
15
15
|
theme: {
|
|
@@ -25,11 +25,11 @@ const sizeStyles = props => {
|
|
|
25
25
|
return css(["", ":-", ";", ":-", ";"], marginStart, space.xxs, marginEnd, space.xxs);
|
|
26
26
|
};
|
|
27
27
|
const StyledDraggableList = styled.ul.attrs({
|
|
28
|
-
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.12.
|
|
28
|
+
'data-garden-id': COMPONENT_ID$4,
|
|
29
|
+
'data-garden-version': '9.12.5'
|
|
30
30
|
}).withConfig({
|
|
31
31
|
displayName: "StyledDraggableList",
|
|
32
32
|
componentId: "sc-17agksa-0"
|
|
33
|
-
})(["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, componentStyles);
|
|
33
|
+
})(["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$3, componentStyles);
|
|
34
34
|
|
|
35
35
|
export { StyledDraggableList };
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'draggable_list.drop_indicator';
|
|
11
|
-
const colorStyles = props => {
|
|
10
|
+
const COMPONENT_ID$3 = 'draggable_list.drop_indicator';
|
|
11
|
+
const colorStyles$1 = props => {
|
|
12
12
|
const {
|
|
13
13
|
theme
|
|
14
14
|
} = props;
|
|
@@ -18,7 +18,7 @@ const colorStyles = props => {
|
|
|
18
18
|
});
|
|
19
19
|
return css(["box-shadow:", ";&::before,&::after{background-color:", ";}&:focus{outline:none;}"], theme.shadows.xs(color), color);
|
|
20
20
|
};
|
|
21
|
-
const sizeStyles = props => {
|
|
21
|
+
const sizeStyles$2 = props => {
|
|
22
22
|
const {
|
|
23
23
|
$isHorizontal,
|
|
24
24
|
theme
|
|
@@ -29,11 +29,11 @@ const sizeStyles = props => {
|
|
|
29
29
|
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);
|
|
30
30
|
};
|
|
31
31
|
const StyledDropIndicator = styled.li.attrs({
|
|
32
|
-
'data-garden-id': COMPONENT_ID,
|
|
33
|
-
'data-garden-version': '9.12.
|
|
32
|
+
'data-garden-id': COMPONENT_ID$3,
|
|
33
|
+
'data-garden-version': '9.12.5'
|
|
34
34
|
}).withConfig({
|
|
35
35
|
displayName: "StyledDropIndicator",
|
|
36
36
|
componentId: "sc-1f1u2lh-0"
|
|
37
|
-
})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles, colorStyles, componentStyles);
|
|
37
|
+
})(["position:relative;", " ", " &::before,&::after{position:absolute;content:'';}", ";"], sizeStyles$2, colorStyles$1, componentStyles);
|
|
38
38
|
|
|
39
39
|
export { StyledDropIndicator };
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'draggable_list.item';
|
|
11
|
-
const sizeStyles = props => {
|
|
10
|
+
const COMPONENT_ID$5 = 'draggable_list.item';
|
|
11
|
+
const sizeStyles$4 = props => {
|
|
12
12
|
const {
|
|
13
13
|
$isHorizontal,
|
|
14
14
|
theme: {
|
|
@@ -18,11 +18,11 @@ const sizeStyles = props => {
|
|
|
18
18
|
return css(["padding:", ";"], $isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`);
|
|
19
19
|
};
|
|
20
20
|
const StyledItem = styled.li.attrs({
|
|
21
|
-
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.12.
|
|
21
|
+
'data-garden-id': COMPONENT_ID$5,
|
|
22
|
+
'data-garden-version': '9.12.5'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledItem",
|
|
25
25
|
componentId: "sc-1nps3s3-0"
|
|
26
|
-
})(["display:flex;", " ", ";"], sizeStyles, componentStyles);
|
|
26
|
+
})(["display:flex;", " ", ";"], sizeStyles$4, componentStyles);
|
|
27
27
|
|
|
28
28
|
export { StyledItem };
|
|
@@ -8,7 +8,7 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { math } from 'polished';
|
|
9
9
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'dropzone';
|
|
11
|
+
const COMPONENT_ID$2 = 'dropzone';
|
|
12
12
|
const colorStyles = props => {
|
|
13
13
|
const {
|
|
14
14
|
$isDanger,
|
|
@@ -74,7 +74,7 @@ const colorStyles = props => {
|
|
|
74
74
|
}
|
|
75
75
|
return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, color);
|
|
76
76
|
};
|
|
77
|
-
const sizeStyles = props => {
|
|
77
|
+
const sizeStyles$1 = props => {
|
|
78
78
|
const {
|
|
79
79
|
theme,
|
|
80
80
|
$isHighlighted
|
|
@@ -83,11 +83,11 @@ const sizeStyles = props => {
|
|
|
83
83
|
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);
|
|
84
84
|
};
|
|
85
85
|
const StyledDropzone = styled.div.attrs({
|
|
86
|
-
'data-garden-id': COMPONENT_ID,
|
|
87
|
-
'data-garden-version': '9.12.
|
|
86
|
+
'data-garden-id': COMPONENT_ID$2,
|
|
87
|
+
'data-garden-version': '9.12.5'
|
|
88
88
|
}).withConfig({
|
|
89
89
|
displayName: "StyledDropzone",
|
|
90
90
|
componentId: "sc-1b7zuip-0"
|
|
91
|
-
})(["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, componentStyles);
|
|
91
|
+
})(["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$1, colorStyles, componentStyles);
|
|
92
92
|
|
|
93
93
|
export { StyledDropzone };
|
|
@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'dropzone.icon';
|
|
11
|
-
function sizeStyles(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
11
|
+
function sizeStyles({
|
|
12
|
+
theme,
|
|
13
|
+
$isVertical
|
|
14
|
+
}) {
|
|
16
15
|
let property;
|
|
17
16
|
let value;
|
|
18
17
|
if ($isVertical) {
|
|
@@ -26,7 +25,7 @@ function sizeStyles(_ref) {
|
|
|
26
25
|
}
|
|
27
26
|
const StyledIcon = styled.div.attrs({
|
|
28
27
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.12.
|
|
28
|
+
'data-garden-version': '9.12.5'
|
|
30
29
|
}).withConfig({
|
|
31
30
|
displayName: "StyledIcon",
|
|
32
31
|
componentId: "sc-1o12gen-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'dropzone.message';
|
|
10
|
+
const COMPONENT_ID$1 = 'dropzone.message';
|
|
11
11
|
const StyledMessage = styled.p.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$1,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMessage",
|
|
16
16
|
componentId: "sc-5kb2l2-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -35,16 +35,15 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
35
35
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
36
36
|
|
|
37
37
|
const COMPONENT_ID$8 = 'draggable.grip';
|
|
38
|
-
function sizeStyles$6(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
} = _ref;
|
|
38
|
+
function sizeStyles$6({
|
|
39
|
+
theme
|
|
40
|
+
}) {
|
|
42
41
|
const property = theme.rtl ? 'margin-left' : 'margin-right';
|
|
43
42
|
return styled.css(["", ":", ";"], property, theme.space.xs);
|
|
44
43
|
}
|
|
45
44
|
const StyledGrip = styled__default.default.div.attrs({
|
|
46
45
|
'data-garden-id': COMPONENT_ID$8,
|
|
47
|
-
'data-garden-version': '9.12.
|
|
46
|
+
'data-garden-version': '9.12.5'
|
|
48
47
|
}).withConfig({
|
|
49
48
|
displayName: "StyledGrip",
|
|
50
49
|
componentId: "sc-13uv9iv-0"
|
|
@@ -148,7 +147,7 @@ const getCursor = props => {
|
|
|
148
147
|
};
|
|
149
148
|
const StyledDraggable = styled__default.default.div.attrs({
|
|
150
149
|
'data-garden-id': COMPONENT_ID$7,
|
|
151
|
-
'data-garden-version': '9.12.
|
|
150
|
+
'data-garden-version': '9.12.5'
|
|
152
151
|
}).withConfig({
|
|
153
152
|
displayName: "StyledDraggable",
|
|
154
153
|
componentId: "sc-3lxpf1-0"
|
|
@@ -157,7 +156,7 @@ const StyledDraggable = styled__default.default.div.attrs({
|
|
|
157
156
|
const COMPONENT_ID$6 = 'draggable.content';
|
|
158
157
|
const StyledContent = styled__default.default.div.attrs({
|
|
159
158
|
'data-garden-id': COMPONENT_ID$6,
|
|
160
|
-
'data-garden-version': '9.12.
|
|
159
|
+
'data-garden-version': '9.12.5'
|
|
161
160
|
}).withConfig({
|
|
162
161
|
displayName: "StyledContent",
|
|
163
162
|
componentId: "sc-15arore-0"
|
|
@@ -175,7 +174,7 @@ const sizeStyles$4 = props => {
|
|
|
175
174
|
};
|
|
176
175
|
const StyledItem = styled__default.default.li.attrs({
|
|
177
176
|
'data-garden-id': COMPONENT_ID$5,
|
|
178
|
-
'data-garden-version': '9.12.
|
|
177
|
+
'data-garden-version': '9.12.5'
|
|
179
178
|
}).withConfig({
|
|
180
179
|
displayName: "StyledItem",
|
|
181
180
|
componentId: "sc-1nps3s3-0"
|
|
@@ -199,7 +198,7 @@ const sizeStyles$3 = props => {
|
|
|
199
198
|
};
|
|
200
199
|
const StyledDraggableList = styled__default.default.ul.attrs({
|
|
201
200
|
'data-garden-id': COMPONENT_ID$4,
|
|
202
|
-
'data-garden-version': '9.12.
|
|
201
|
+
'data-garden-version': '9.12.5'
|
|
203
202
|
}).withConfig({
|
|
204
203
|
displayName: "StyledDraggableList",
|
|
205
204
|
componentId: "sc-17agksa-0"
|
|
@@ -228,7 +227,7 @@ const sizeStyles$2 = props => {
|
|
|
228
227
|
};
|
|
229
228
|
const StyledDropIndicator = styled__default.default.li.attrs({
|
|
230
229
|
'data-garden-id': COMPONENT_ID$3,
|
|
231
|
-
'data-garden-version': '9.12.
|
|
230
|
+
'data-garden-version': '9.12.5'
|
|
232
231
|
}).withConfig({
|
|
233
232
|
displayName: "StyledDropIndicator",
|
|
234
233
|
componentId: "sc-1f1u2lh-0"
|
|
@@ -310,7 +309,7 @@ const sizeStyles$1 = props => {
|
|
|
310
309
|
};
|
|
311
310
|
const StyledDropzone = styled__default.default.div.attrs({
|
|
312
311
|
'data-garden-id': COMPONENT_ID$2,
|
|
313
|
-
'data-garden-version': '9.12.
|
|
312
|
+
'data-garden-version': '9.12.5'
|
|
314
313
|
}).withConfig({
|
|
315
314
|
displayName: "StyledDropzone",
|
|
316
315
|
componentId: "sc-1b7zuip-0"
|
|
@@ -319,18 +318,17 @@ const StyledDropzone = styled__default.default.div.attrs({
|
|
|
319
318
|
const COMPONENT_ID$1 = 'dropzone.message';
|
|
320
319
|
const StyledMessage = styled__default.default.p.attrs({
|
|
321
320
|
'data-garden-id': COMPONENT_ID$1,
|
|
322
|
-
'data-garden-version': '9.12.
|
|
321
|
+
'data-garden-version': '9.12.5'
|
|
323
322
|
}).withConfig({
|
|
324
323
|
displayName: "StyledMessage",
|
|
325
324
|
componentId: "sc-5kb2l2-0"
|
|
326
325
|
})(["margin:0;line-height:", ";color:inherit;font-size:", ";font-weight:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 5, p.theme.fontSizes.md), p => p.theme.fontSizes.md, p => p.theme.fontWeights.regular, reactTheming.componentStyles);
|
|
327
326
|
|
|
328
327
|
const COMPONENT_ID = 'dropzone.icon';
|
|
329
|
-
function sizeStyles(
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
} = _ref;
|
|
328
|
+
function sizeStyles({
|
|
329
|
+
theme,
|
|
330
|
+
$isVertical
|
|
331
|
+
}) {
|
|
334
332
|
let property;
|
|
335
333
|
let value;
|
|
336
334
|
if ($isVertical) {
|
|
@@ -344,7 +342,7 @@ function sizeStyles(_ref) {
|
|
|
344
342
|
}
|
|
345
343
|
const StyledIcon = styled__default.default.div.attrs({
|
|
346
344
|
'data-garden-id': COMPONENT_ID,
|
|
347
|
-
'data-garden-version': '9.12.
|
|
345
|
+
'data-garden-version': '9.12.5'
|
|
348
346
|
}).withConfig({
|
|
349
347
|
displayName: "StyledIcon",
|
|
350
348
|
componentId: "sc-1o12gen-0"
|
|
@@ -417,17 +415,16 @@ const Grip = React.forwardRef((props, ref) => React__namespace.default.createEle
|
|
|
417
415
|
}), React__namespace.default.createElement(SvgGrip, null)));
|
|
418
416
|
Grip.displayName = 'Draggable.Grip';
|
|
419
417
|
|
|
420
|
-
const DraggableComponent = React.forwardRef((
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
} = _ref;
|
|
418
|
+
const DraggableComponent = React.forwardRef(({
|
|
419
|
+
focusInset,
|
|
420
|
+
isBare,
|
|
421
|
+
isCompact,
|
|
422
|
+
isDisabled,
|
|
423
|
+
isGrabbed,
|
|
424
|
+
isPlaceholder,
|
|
425
|
+
tag,
|
|
426
|
+
...other
|
|
427
|
+
}, ref) => {
|
|
431
428
|
return React__namespace.default.createElement(StyledDraggable, Object.assign({
|
|
432
429
|
$focusInset: focusInset,
|
|
433
430
|
$isBare: isBare,
|
|
@@ -479,11 +476,10 @@ const Item = React.forwardRef((props, ref) => {
|
|
|
479
476
|
});
|
|
480
477
|
Item.displayName = 'DraggableList.Item';
|
|
481
478
|
|
|
482
|
-
const DraggableListComponent = React.forwardRef((
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
} = _ref;
|
|
479
|
+
const DraggableListComponent = React.forwardRef(({
|
|
480
|
+
isHorizontal,
|
|
481
|
+
...other
|
|
482
|
+
}, ref) => {
|
|
487
483
|
const value = React.useMemo(() => ({
|
|
488
484
|
isHorizontal
|
|
489
485
|
}), [isHorizontal]);
|
|
@@ -574,17 +570,16 @@ const Icon = React.forwardRef((props, ref) => {
|
|
|
574
570
|
});
|
|
575
571
|
Icon.displayName = 'Dropzone.Icon';
|
|
576
572
|
|
|
577
|
-
const DropzoneComponent = React.forwardRef((
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
} = _ref;
|
|
573
|
+
const DropzoneComponent = React.forwardRef(({
|
|
574
|
+
children,
|
|
575
|
+
isActive,
|
|
576
|
+
isDanger,
|
|
577
|
+
isDisabled,
|
|
578
|
+
isHighlighted,
|
|
579
|
+
isVertical,
|
|
580
|
+
tag,
|
|
581
|
+
...other
|
|
582
|
+
}, ref) => {
|
|
588
583
|
const [hasMessage, setHasMessage] = React.useState(false);
|
|
589
584
|
const [hasIcon, setHasIcon] = React.useState(false);
|
|
590
585
|
const value = React.useMemo(() => ({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-draggable",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.5",
|
|
4
4
|
"description": "Components related to drag and drop in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"@dnd-kit/core": "6.3.1",
|
|
35
35
|
"@dnd-kit/sortable": "10.0.0",
|
|
36
36
|
"@dnd-kit/utilities": "3.2.2",
|
|
37
|
-
"@zendeskgarden/react-theming": "^9.12.
|
|
38
|
-
"@zendeskgarden/react-typography": "^9.12.
|
|
39
|
-
"@zendeskgarden/svg-icons": "7.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.12.5",
|
|
38
|
+
"@zendeskgarden/react-typography": "^9.12.5",
|
|
39
|
+
"@zendeskgarden/svg-icons": "7.6.0"
|
|
40
40
|
},
|
|
41
41
|
"keywords": [
|
|
42
42
|
"components",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"zendeskgarden:src": "src/index.ts",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "a4edcee778788b0e30fc17671b95a6e239e27912"
|
|
56
56
|
}
|