@zohodesk/components 1.0.0-alpha-266 → 1.0.0-alpha-267

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/README.md CHANGED
@@ -32,6 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.0.0-alpha-267
36
+
37
+ - **DropBox** - Fixed Position issue fix.
38
+
39
+ - **Select** - Fixed Position prop support.
35
40
 
36
41
  # 1.0.0-alpha-266
37
42
 
@@ -59,13 +59,13 @@ export default function DropBox(props) {
59
59
  }));
60
60
  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
61
61
  portalId: portalId
62
- }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
62
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
63
63
  className: `${style.freezeLayer} ${style.freeze}`,
64
64
  style: zIndexStyle,
65
65
  onClick: cancelBubblingEffect
66
66
  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
67
67
  portalId: portalId
68
- }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
68
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
69
69
  className: style.freezeLayer,
70
70
  style: zIndexStyle,
71
71
  onClick: cancelBubblingEffect
@@ -28,6 +28,7 @@ export default function DropBoxElement(props) {
28
28
  subContainerRef,
29
29
  customStyle
30
30
  } = props;
31
+ let isAbsolute = isAbsolutePositioningNeeded;
31
32
  const FireOnAnimationEnd = () => {
32
33
  let element = subContainerRef && subContainerRef.current.classList;
33
34
  (isAnimate ? style.fadeIn : style.bounce).split(' ').map(rmStyle => {
@@ -47,7 +48,7 @@ export default function DropBoxElement(props) {
47
48
  }
48
49
  };
49
50
  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
50
- isAbsolutePositioningNeeded = true;
51
+ isAbsolute = true;
51
52
  }
52
53
  const {
53
54
  role,
@@ -56,7 +57,7 @@ export default function DropBoxElement(props) {
56
57
  } = a11y;
57
58
  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
58
59
  const boxDirection = positionMapping[boxPosition].direction;
59
- if (isAbsolutePositioningNeeded) {
60
+ if (isAbsolute) {
60
61
  arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
61
62
  boxPosition = positionMapping[boxPosition].positionStyle;
62
63
  } else {
@@ -79,7 +80,8 @@ export default function DropBoxElement(props) {
79
80
  boxPosition,
80
81
  boxDirection,
81
82
  boxstyle,
82
- needBoxStyle
83
+ needBoxStyle,
84
+ isAbsolute
83
85
  }
84
86
  });
85
87
  return /*#__PURE__*/React.createElement("div", {
@@ -12,7 +12,8 @@ export default function cssJSLogic(_ref) {
12
12
  boxPosition,
13
13
  boxDirection,
14
14
  boxstyle,
15
- needBoxStyle
15
+ needBoxStyle,
16
+ isAbsolute
16
17
  } = customState;
17
18
  const {
18
19
  isReducedMotion
@@ -25,7 +26,6 @@ export default function cssJSLogic(_ref) {
25
26
  animationStyle,
26
27
  isActive,
27
28
  isModel,
28
- isAbsolutePositioningNeeded,
29
29
  isBoxPaddingNeed,
30
30
  isPadding,
31
31
  customClass,
@@ -49,12 +49,12 @@ export default function cssJSLogic(_ref) {
49
49
  [style.responsive]: !!isModel,
50
50
  [customMobileDropBoxWrap]: !!isModel,
51
51
  [customDropBoxWrap]: !isModel,
52
- [style.container]: isAbsolutePositioningNeeded && !isModel,
53
- [style[boxPosition]]: isAbsolutePositioningNeeded && !isModel,
54
- [style.fixedContainer]: !isAbsolutePositioningNeeded && !isModel,
52
+ [style.container]: isAbsolute && !isModel,
53
+ [style[boxPosition]]: isAbsolute && !isModel,
54
+ [style.fixedContainer]: !isAbsolute && !isModel,
55
55
  [style[size]]: size && !isModel,
56
56
  [style[boxDirection]]: !isModel && isActive && isArrow,
57
- [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolutePositioningNeeded,
57
+ [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
58
58
  [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
59
59
  });
60
60
  let subContainerClass = compileClassNames({
@@ -69,11 +69,11 @@ export default function cssJSLogic(_ref) {
69
69
  [style.fadeIn]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default',
70
70
  [style.bounce]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'
71
71
  });
72
- let inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
72
+ let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
73
73
  if (zIndexStyle) {
74
74
  inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
75
75
  }
76
- if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
76
+ if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
77
77
  inlineStyle = Object.assign({}, inlineStyle, {
78
78
  width: targetOffset.width
79
79
  });
@@ -678,7 +678,12 @@ export class SelectComponent extends Component {
678
678
  autoComplete,
679
679
  ariaLabelledby,
680
680
  isLoading,
681
- dataSelectorId
681
+ dataSelectorId,
682
+ isAbsolutePositioningNeeded,
683
+ positionsOffset,
684
+ targetOffset,
685
+ isRestrictScroll,
686
+ dropBoxPortalId
682
687
  } = this.props;
683
688
  let {
684
689
  TextBoxIcon_i18n,
@@ -819,7 +824,12 @@ export class SelectComponent extends Component {
819
824
  size: boxSize,
820
825
  isPadding: false,
821
826
  isResponsivePadding: getFooter ? false : true,
822
- alignBox: "row"
827
+ alignBox: "row",
828
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
829
+ positionsOffset: positionsOffset,
830
+ targetOffset: targetOffset,
831
+ isRestrictScroll: isRestrictScroll,
832
+ portalId: dropBoxPortalId
823
833
  }, isLoading ? /*#__PURE__*/React.createElement(Container, {
824
834
  align: "both",
825
835
  className: style.loader
@@ -32,7 +32,8 @@ export const Select_defaultProps = {
32
32
  i18nKeys: {},
33
33
  iconOnHover: false,
34
34
  customProps: {},
35
- isLoading: false
35
+ isLoading: false,
36
+ isAbsolutePositioningNeeded: true
36
37
  };
37
38
  export const GroupSelect_defaultProps = {
38
39
  animationStyle: 'bounce',
@@ -85,7 +85,8 @@ export const Select_propTypes = {
85
85
  SuggestionsProps: PropTypes.object
86
86
  }),
87
87
  isLoading: PropTypes.bool,
88
- dataSelectorId: PropTypes.string
88
+ dataSelectorId: PropTypes.string,
89
+ isAbsolutePositioningNeeded: PropTypes.bool
89
90
  };
90
91
  export const GroupSelect_propTypes = {
91
92
  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -65,13 +65,13 @@ function DropBox(props) {
65
65
  }));
66
66
  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
67
67
  portalId: portalId
68
- }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
68
+ }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
69
69
  className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
70
70
  style: zIndexStyle,
71
71
  onClick: _Common.cancelBubblingEffect
72
72
  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
73
73
  portalId: portalId
74
- }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
74
+ }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
75
75
  className: _DropBoxModule["default"].freezeLayer,
76
76
  style: zIndexStyle,
77
77
  onClick: _Common.cancelBubblingEffect
@@ -33,6 +33,7 @@ function DropBoxElement(props) {
33
33
  palette = props.palette,
34
34
  subContainerRef = props.subContainerRef,
35
35
  customStyle = props.customStyle;
36
+ var isAbsolute = isAbsolutePositioningNeeded;
36
37
  var FireOnAnimationEnd = function FireOnAnimationEnd() {
37
38
  var element = subContainerRef && subContainerRef.current.classList;
38
39
  (isAnimate ? _DropBoxElementModule["default"].fadeIn : _DropBoxElementModule["default"].bounce).split(' ').map(function (rmStyle) {
@@ -50,14 +51,14 @@ function DropBoxElement(props) {
50
51
  }
51
52
  };
52
53
  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
53
- isAbsolutePositioningNeeded = true;
54
+ isAbsolute = true;
54
55
  }
55
56
  var role = a11y.role,
56
57
  ariaMultiselectable = a11y.ariaMultiselectable,
57
58
  ariaLabelledby = a11y.ariaLabelledby;
58
59
  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
59
60
  var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
60
- if (isAbsolutePositioningNeeded) {
61
+ if (isAbsolute) {
61
62
  arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
62
63
  boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
63
64
  } else {
@@ -75,7 +76,8 @@ function DropBoxElement(props) {
75
76
  boxPosition: boxPosition,
76
77
  boxDirection: boxDirection,
77
78
  boxstyle: boxstyle,
78
- needBoxStyle: needBoxStyle
79
+ needBoxStyle: needBoxStyle,
80
+ isAbsolute: isAbsolute
79
81
  }
80
82
  }),
81
83
  boxClassName = _cssJSLogic.boxClassName,
@@ -21,7 +21,8 @@ function cssJSLogic(_ref) {
21
21
  var boxPosition = customState.boxPosition,
22
22
  boxDirection = customState.boxDirection,
23
23
  boxstyle = customState.boxstyle,
24
- needBoxStyle = customState.needBoxStyle;
24
+ needBoxStyle = customState.needBoxStyle,
25
+ isAbsolute = customState.isAbsolute;
25
26
  var _ref2 = DropBoxElementContext || {},
26
27
  isReducedMotion = _ref2.isReducedMotion;
27
28
  var isAnimate = props.isAnimate,
@@ -31,7 +32,6 @@ function cssJSLogic(_ref) {
31
32
  animationStyle = props.animationStyle,
32
33
  isActive = props.isActive,
33
34
  isModel = props.isModel,
34
- isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
35
35
  isBoxPaddingNeed = props.isBoxPaddingNeed,
36
36
  isPadding = props.isPadding,
37
37
  customClass = props.customClass,
@@ -50,13 +50,13 @@ function cssJSLogic(_ref) {
50
50
 
51
51
  // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
52
52
 
53
- var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolutePositioningNeeded && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolutePositioningNeeded), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
53
+ var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
54
54
  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style.fadeIn, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default'), _defineProperty(_compileClassNames2, style.bounce, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'), _compileClassNames2));
55
- var inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
55
+ var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
56
56
  if (zIndexStyle) {
57
57
  inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
58
58
  }
59
- if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
59
+ if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
60
60
  inlineStyle = Object.assign({}, inlineStyle, {
61
61
  width: targetOffset.width
62
62
  });
@@ -687,7 +687,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
687
687
  autoComplete = _this$props11.autoComplete,
688
688
  ariaLabelledby = _this$props11.ariaLabelledby,
689
689
  isLoading = _this$props11.isLoading,
690
- dataSelectorId = _this$props11.dataSelectorId;
690
+ dataSelectorId = _this$props11.dataSelectorId,
691
+ isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
692
+ positionsOffset = _this$props11.positionsOffset,
693
+ targetOffset = _this$props11.targetOffset,
694
+ isRestrictScroll = _this$props11.isRestrictScroll,
695
+ dropBoxPortalId = _this$props11.dropBoxPortalId;
691
696
  var _i18nKeys = i18nKeys,
692
697
  TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
693
698
  _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -825,7 +830,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
825
830
  size: boxSize,
826
831
  isPadding: false,
827
832
  isResponsivePadding: getFooter ? false : true,
828
- alignBox: "row"
833
+ alignBox: "row",
834
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
835
+ positionsOffset: positionsOffset,
836
+ targetOffset: targetOffset,
837
+ isRestrictScroll: isRestrictScroll,
838
+ portalId: dropBoxPortalId
829
839
  }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
830
840
  align: "both",
831
841
  className: _SelectModule["default"].loader
@@ -43,7 +43,8 @@ var Select_defaultProps = {
43
43
  i18nKeys: {},
44
44
  iconOnHover: false,
45
45
  customProps: {},
46
- isLoading: false
46
+ isLoading: false,
47
+ isAbsolutePositioningNeeded: true
47
48
  };
48
49
  exports.Select_defaultProps = Select_defaultProps;
49
50
  var GroupSelect_defaultProps = {
@@ -92,7 +92,8 @@ var Select_propTypes = {
92
92
  SuggestionsProps: _propTypes["default"].object
93
93
  }),
94
94
  isLoading: _propTypes["default"].bool,
95
- dataSelectorId: _propTypes["default"].string
95
+ dataSelectorId: _propTypes["default"].string,
96
+ isAbsolutePositioningNeeded: _propTypes["default"].bool
96
97
  };
97
98
  exports.Select_propTypes = Select_propTypes;
98
99
  var GroupSelect_propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-alpha-266",
3
+ "version": "1.0.0-alpha-267",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -22,7 +22,7 @@
22
22
  "lintAll": "react-cli lint ./src",
23
23
  "lintAllFix": "npm run lintAll --eslint:fix=true",
24
24
  "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
25
- "dubCheck": "node dubFinder node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
25
+ "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
26
26
  "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
27
27
  "build:variables": "node ./preprocess/index",
28
28
  "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
@@ -43,17 +43,22 @@
43
43
  "sstest": "npm run init && react-cli sstest",
44
44
  "build:external": "npm run clean && npm run init && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
45
45
  "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
46
- "expublish": "npm publish --tag experimental-version"
46
+ "expublish": "npm publish --tag experimental-version",
47
+ "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
48
+ "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
49
+ "variable:check": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
47
50
  },
48
51
  "devDependencies": {
52
+ "@zohodesk-private/css-variable-migrator": "1.0.1",
53
+ "@zohodesk-private/node-plugins": "^1.0.0",
54
+ "@zohodesk/a11y": "1.3.7",
49
55
  "@zohodesk/docstool": "1.0.0-alpha-2",
50
- "@zohodesk/variables": "1.0.0-beta.31",
51
56
  "@zohodesk/icons": "1.0.0-beta.125",
57
+ "@zohodesk/svg": "1.0.0-beta.56",
58
+ "@zohodesk/variables": "1.0.0-beta.31",
52
59
  "@zohodesk/virtualizer": "1.0.3",
53
- "velocity-react": "1.4.3",
54
60
  "react-sortable-hoc": "^0.8.3",
55
- "@zohodesk/svg": "1.0.0-beta.56",
56
- "@zohodesk/a11y": "1.3.7"
61
+ "velocity-react": "1.4.3"
57
62
  },
58
63
  "dependencies": {
59
64
  "hoist-non-react-statics": "3.0.1",
@@ -74,16 +79,24 @@
74
79
  "preprocess": {
75
80
  "runner": "./preprocess/index.js"
76
81
  },
82
+ "app": {
83
+ "plugins": {
84
+ "cssVariableReplacement": true
85
+ },
86
+ "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
87
+ },
77
88
  "css": {
78
89
  "plugins": {
79
- "hasRTL": true
90
+ "hasRTL": true,
91
+ "cssVariableReplacement": true
80
92
  },
81
93
  "exclude": {
82
94
  "rtl": [
83
95
  "@zohodesk/icons",
84
96
  "@zohodesk/variables"
85
97
  ]
86
- }
98
+ },
99
+ "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
87
100
  },
88
101
  "docs": {
89
102
  "plugins": {
@@ -100,4 +113,4 @@
100
113
  "cssUniqueness": "false"
101
114
  }
102
115
  }
103
- }
116
+ }