@zohodesk/components 1.0.0-temp-227 → 1.0.0-temp-228

package/lib/components-v2/Switch/Switch.js

@@ -0,0 +1,169 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = require("./props/propTypes");
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _utils = require("@zohodesk/utils");
+
+var _useSwitch2 = _interopRequireDefault(require("./useSwitch"));
+
+var _contants = require("./contants");
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Label = _interopRequireDefault(require("../../Label/Label"));
+
+var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
+
+var _Switch_v2Module = _interopRequireDefault(require("./css/Switch_v2.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Switch = function Switch(props) {
+  var name = props.name,
+      value = props.value,
+      id = props.id,
+      size = props.size,
+      isCheckedProp = props.isChecked,
+      isDefaultChecked = props.isDefaultChecked,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      onChange = props.onChange,
+      hasStateIndication = props.hasStateIndication,
+      label = props.label,
+      labelPlacement = props.labelPlacement,
+      labelSize = props.labelSize,
+      title = props.title,
+      customProps = props.customProps,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customId = props.customId,
+      testId = props.testId,
+      customStyle = props.customStyle;
+
+  var _useContext = (0, _react.useContext)(_LibraryContextInit["default"]),
+      shouldIndicateSwitchState = _useContext.shouldIndicateSwitchState;
+
+  var customProps_container = customProps.container,
+      customProps_label = customProps.label;
+  var tagAttributes_container = tagAttributes.container,
+      tagAttributes_switch = tagAttributes["switch"];
+  var a11yAttributes_container = a11yAttributes.container,
+      _a11yAttributes$switc = a11yAttributes["switch"],
+      a11yAttributes_switch = _a11yAttributes$switc === void 0 ? {} : _a11yAttributes$switc,
+      a11yAttributes_label = a11yAttributes.label;
+  var _a11yAttributes_switc = a11yAttributes_switch.role,
+      role = _a11yAttributes_switc === void 0 ? 'switch' : _a11yAttributes_switc,
+      _a11yAttributes_switc2 = a11yAttributes_switch.ariaDisabled,
+      ariaDisabled = _a11yAttributes_switc2 === void 0 ? isDisabled : _a11yAttributes_switc2,
+      restA11yAttributes_switch = a11yAttributes_switch.restA11yAttributes_switch;
+
+  var _useSwitch = (0, _useSwitch2["default"])({
+    isCheckedProp: isCheckedProp,
+    isDefaultChecked: isDefaultChecked,
+    onChange: onChange
+  }),
+      isChecked = _useSwitch.isChecked,
+      handleChange = _useSwitch.handleChange;
+
+  var style = (0, _utils.mergeStyle)(_Switch_v2Module["default"], customStyle);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: _objectSpread(_objectSpread({}, props), {}, {
+      isChecked: isChecked
+    }),
+    style: style
+  }),
+      containerClass = _cssJSLogic.containerClass,
+      labelClass = _cssJSLogic.labelClass,
+      trackClass = _cssJSLogic.trackClass,
+      trackWrapperClass = _cssJSLogic.trackWrapperClass,
+      thumbClass = _cssJSLogic.thumbClass,
+      labelIndicationClass = _cssJSLogic.labelIndicationClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    $ui_displayMode: "inline",
+    $ui_direction: labelPlacement === 'left' ? 'row' : 'rowReverse',
+    $ui_alignItems: "center",
+    $tagAttributes_container: _objectSpread({
+      'data-selector-id': customId
+    }, tagAttributes_container),
+    testId: testId,
+    customId: customId,
+    customStyle: {
+      inlineFlex: containerClass
+    },
+    $a11yAttributes_container: a11yAttributes_container
+  }, customProps_container), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: label,
+    palette: isDisabled || isReadOnly ? 'primary' : 'default',
+    size: labelSize,
+    htmlFor: id,
+    customClass: labelClass,
+    a11y: a11yAttributes_label
+  }, customProps_label)), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    $flag_shrink: false,
+    customStyle: {
+      noShrink: trackWrapperClass
+    }
+  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    checked: isChecked,
+    readOnly: isReadOnly,
+    onChange: !isDisabled && !isReadOnly ? handleChange : null,
+    className: trackClass,
+    "data-title": title,
+    role: role,
+    "aria-disabled": ariaDisabled
+  }, tagAttributes_switch, restA11yAttributes_switch)), /*#__PURE__*/_react["default"].createElement("svg", {
+    className: thumbClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: _contants.THUMB_RADIUS[size]
+  })), hasStateIndication || shouldIndicateSwitchState ? /*#__PURE__*/_react["default"].createElement("svg", {
+    className: labelIndicationClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "50%"
+  }) : /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: _contants.OFF_LABEL_RADIUS[size]
+  })) : null));
+};
+
+var _default = Switch;
+exports["default"] = _default;
+Switch.defaultProps = _defaultProps["default"];
+Switch.propTypes = _propTypes.propTypes;

package/lib/components-v2/Switch/contants/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.THUMB_RADIUS = exports.OFF_LABEL_RADIUS = void 0;
+var OFF_LABEL_RADIUS = {
+  small: '35.7%',
+  medium: '37.5%',
+  large: '38.9%',
+  xlarge: '40%'
+};
+exports.OFF_LABEL_RADIUS = OFF_LABEL_RADIUS;
+var THUMB_RADIUS = {
+  small: '40%',
+  medium: '42.85%',
+  large: '44.45%',
+  xlarge: '45.45%'
+};
+exports.THUMB_RADIUS = THUMB_RADIUS;

package/lib/components-v2/Switch/css/Switch_v2.module.css

@@ -0,0 +1,140 @@
+.container {
+    --switch-cursor: pointer;
+    --switch-offLabel-stroke: var(--zdt_v2_switch_offLabel);
+    gap: var(--zd_size6) ;
+}
+.small {
+    --switch-track-width: var(--zd_size22);
+    --switch-track-height: var(--zd_size12);
+    --switch-track-border-radius: 8px;
+    --switch-thumb-size: 10px;
+    --switch-onLabel-height: var(--zd_size6);
+    --switch-onLabel-left: var(--zd_size5);
+    --switch-offLabel-size: var(--zd_size7);
+    --switch-offLabel-right: var(--zd_size2);
+}
+.medium {
+    --switch-track-width: var(--zd_size28);
+    --switch-track-height: var(--zd_size16);
+    --switch-track-border-radius: 16px;
+    --switch-thumb-size: 14px;
+    --switch-onLabel-height: var(--zd_size8);
+    --switch-onLabel-left: var(--zd_size6);
+    --switch-offLabel-size: var(--zd_size8);
+    --switch-offLabel-right: var(--zd_size3);
+}
+.large {
+    --switch-track-width: var(--zd_size34);
+    --switch-track-height: var(--zd_size20);
+    --switch-track-border-radius: 10px;
+    --switch-thumb-size: 18px;
+    --switch-onLabel-height: var(--zd_size10);
+    --switch-onLabel-left: var(--zd_size7);
+    --switch-offLabel-size: var(--zd_size9);
+    --switch-offLabel-right: var(--zd_size4);
+}
+.xlarge {
+    --switch-track-width: var(--zd_size40);
+    --switch-track-height: var(--zd_size24);
+    --switch-track-border-radius: 12px;
+    --switch-thumb-size: 22px;
+    --switch-onLabel-height: var(--zd_size12);
+    --switch-onLabel-left: var(--zd_size8);
+    --switch-offLabel-size: var(--zd_size10);
+    --switch-offLabel-right: var(--zd_size5);
+}
+.checked {
+    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
+    --switch-thumb-translateX-value: calc(var(--switch-track-width) - var(--switch-thumb-size) - 2px)
+}
+.unChecked {
+    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
+    --switch-thumb-translateX-value: 0;
+}
+.disabled, .readonly {
+    --switch-cursor: not-allowed;
+}
+.checked.enabled:hover {
+    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
+}
+.unChecked.enabled:hover {
+    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
+}
+.enabled:hover {
+    --switch-offLabel-stroke: var(--zdt_v2_switch_offLabel_hover);
+}
+.trackWrapper {
+    position: relative;
+}
+.disabled .trackWrapper {
+    opacity: 0.4;
+}
+.track {
+    appearance: none;
+    display: block;
+    position: relative;
+    height: var(--switch-track-height);
+    width: var(--switch-track-width);
+    margin: 0 ;
+    border-radius: var(--switch-track-border-radius);
+    background-color: var(--switch-track-background-color);
+    cursor: var(--switch-cursor);
+}
+.commonSvg {
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    top: 50% ;
+}
+.thumb {
+    transition: transform var(--zd_transition2) cubic-bezier(0.4, 0, 0.2, 1);
+    fill: var(--zdt_v2_switch_thumb_bg);   
+    height: var(--switch-thumb-size);
+    width: var(--switch-thumb-size);
+    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
+}
+[dir=ltr] .thumb {
+    left: var(--zd_size1) ;
+}
+[dir=rtl] .thumb {
+    right: var(--zd_size1) ;
+}
+.label {
+    cursor: var(--switch-cursor);
+}
+.onLabel {
+    height: var(--switch-onLabel-height);
+    fill: var(--zdt_v2_switch_onLabel);
+    transform: translateY(-50%);
+}
+[dir=ltr] .onLabel {
+    left: var(--switch-onLabel-left);
+}
+[dir=rtl] .onLabel {
+    right: var(--switch-onLabel-left);
+}
+.offLabel {
+    height: var(--switch-offLabel-size);
+    width: var(--switch-offLabel-size);
+    fill: transparent;
+    stroke: var(--switch-offLabel-stroke);
+    transform: translateY(-50%);
+}
+[dir=ltr] .offLabel {
+    right: var(--switch-offLabel-right);
+}
+[dir=rtl] .offLabel {
+    left: var(--switch-offLabel-right);
+}
+.small .onLabel {
+    width: 1.2px;
+}
+.medium .onLabel {
+    width: 1.4px;
+}
+.large .onLabel {
+    width: 1.6px;
+}
+.xlarge .onLabel {
+    width: 1.8px;
+}

package/lib/components-v2/Switch/css/cssJSLogic.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _compileClassNames7 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(_ref) {
+  var _compileClassNames, _compileClassNames5, _compileClassNames6;
+
+  var props = _ref.props,
+      style = _ref.style;
+  var size = props.size,
+      isChecked = props.isChecked,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly;
+  var containerClass = (0, _compileClassNames7["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, style[size], true), _defineProperty(_compileClassNames, style.checked, isChecked), _defineProperty(_compileClassNames, style.unChecked, !isChecked), _defineProperty(_compileClassNames, style.disabled, isDisabled), _defineProperty(_compileClassNames, style.enabled, !isDisabled), _defineProperty(_compileClassNames, style.readonly, isReadOnly), _compileClassNames));
+  var trackClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.track, true));
+  var labelClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.label, true));
+  var trackWrapperClass = (0, _compileClassNames7["default"])(_defineProperty({}, style.trackWrapper, true));
+  var thumbClass = (0, _compileClassNames7["default"])((_compileClassNames5 = {}, _defineProperty(_compileClassNames5, style.thumb, true), _defineProperty(_compileClassNames5, style.commonSvg, true), _compileClassNames5));
+  var labelIndicationClass = (0, _compileClassNames7["default"])((_compileClassNames6 = {}, _defineProperty(_compileClassNames6, style.onLabel, isChecked), _defineProperty(_compileClassNames6, style.offLabel, !isChecked), _defineProperty(_compileClassNames6, style.commonSvg, true), _compileClassNames6));
+  return {
+    containerClass: containerClass,
+    trackClass: trackClass,
+    labelClass: labelClass,
+    trackWrapperClass: trackWrapperClass,
+    thumbClass: thumbClass,
+    labelIndicationClass: labelIndicationClass
+  };
+}

package/lib/components-v2/Switch/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  size: 'medium',
+  isDisabled: false,
+  isReadOnly: false,
+  // hasStateIndication: true,
+  labelPlacement: 'left',
+  labelSize: 'medium',
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customStyle: {}
+};
+exports["default"] = _default;

package/lib/components-v2/Switch/props/propTypes.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  name: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
+  isChecked: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  hasStateIndication: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  labelPlacement: _propTypes["default"].oneOf(['left', 'right']),
+  labelSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
+  title: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    label: _propTypes["default"].object
+  }),
+  tagAttributes: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    "switch": _propTypes["default"].object
+  }),
+  a11yAttributes: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    "switch": _propTypes["default"].object,
+    label: _propTypes["default"].object
+  }),
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object
+};
+exports["default"] = _default;

package/lib/components-v2/Switch/useSwitch.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useSwitch = function useSwitch(props) {
+  var isCheckedProp = props.isCheckedProp,
+      isDefaultChecked = props.isDefaultChecked,
+      onChange = props.onChange;
+  var isControlled = isCheckedProp !== undefined;
+
+  var _useState = (0, _react.useState)(isDefaultChecked),
+      _useState2 = _slicedToArray(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
+  var isChecked = isControlled ? isCheckedProp : internalChecked;
+
+  var handleChange = function handleChange(e) {
+    if (!isControlled) {
+      setInternalChecked(!isChecked);
+    }
+
+    if (onChange) {
+      onChange(!isChecked, e);
+    }
+  };
+
+  return {
+    isChecked: isChecked,
+    handleChange: handleChange
+  };
+};
+
+var _default = useSwitch;
+exports["default"] = _default;

package/lib/utils/Common.js

@@ -61,7 +61,7 @@ exports.parseDecimal = parseDecimal;
 
 var getTotalDimension = function getTotalDimension(elem, align) {
   var style = window.getComputedStyle(elem);
-  return align === 'vertical-reverse' || align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
+  return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
 
 exports.getTotalDimension = getTotalDimension;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-227",
+  "version": "1.0.0-temp-228",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run test-clean && npm run download && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run download",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -94,6 +94,7 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.4"
+    "@zohodesk/a11y": "2.3.4",
+    "@zohodesk/layout": "3.1.0"
   }
 }

package/react-cli.config.js

@@ -1,4 +1,4 @@
-exports.config = {
+exports.config= {
   "preprocess": {
     "runner": "./preprocess/index.js"
   },
@@ -14,7 +14,7 @@ exports.config = {
         "**/es/**",
         "!**/node_modules/**"
       ],
-      "hasRTL": [
+      "hasRTL":[
         "**/src/**",
         "!**/node_modules/**"
       ]