oa-componentbook 0.17.95 → 0.17.97

package/build/components/oa-component-bar-chart/BarChart.js

@@ -6,25 +6,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BarChart;
+require("core-js/modules/es.array.reduce.js");
 var _react = _interopRequireWildcard(require("react"));
+var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var d3 = _interopRequireWildcard(require("d3"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
 var _colorOptions = require("../../global-css/color-options");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
 var _utils = require("../../utils");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
+const iconHtml = ReactDOMServer.renderToString( /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+  icon: _ExpandLess.default,
+  size: 20
+}));
+const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  .black {\n    color: var(--color-primary-content);\n  }\n"])));
 function BarChart(_ref) {
   var _barsConfig$length, _barsConfig$length2;
   let {
     barsConfig,
+    showPercentage,
     yStart,
-    yEnd
+    yEnd,
+    yLabel,
+    xLabel
   } = _ref;
   const height = 420;
   const width = 600;
@@ -33,9 +45,12 @@ function BarChart(_ref) {
   const marginTop = 32;
   const marginLeft = 44;
   const marginRight = 44;
+  const totalForPercentages = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.reduce((accumulator, currentValue) => currentValue.value + accumulator, 0);
+
+  // n + 1 bar spacing for n bars.
+  const numberOfSpacesPresentInGraph = ((_barsConfig$length = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length !== void 0 ? _barsConfig$length : 0) + 1;
   const widthOfEachBar = (width - marginLeft - marginRight // Removed left and right margin.
-  - barSpacing * ((_barsConfig$length = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length !== void 0 ? _barsConfig$length : 0 + 1) // Removed n + 1 bar spacings from the width
-  ) / ((_barsConfig$length2 = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length2 !== void 0 ? _barsConfig$length2 : 1); // Divided by the number of bars.
+  - barSpacing * numberOfSpacesPresentInGraph) / ((_barsConfig$length2 = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length2 !== void 0 ? _barsConfig$length2 : 1); // Divided by the number of bars.
 
   // Got the spacing in percentage of the width of the bar.
   const barSpacingInPercentage = barSpacing / (widthOfEachBar + barSpacing);
@@ -45,17 +60,18 @@ function BarChart(_ref) {
   const availableHeight = height - marginTop - marginBottom;
   const availableWidth = width - marginRight - marginLeft;
 
-  // Scale for the values on the Y-axis
-  const yScale = d3.scaleLinear().domain([yStart, yEnd])
   /*
-  Minimum value of scale is at bottom.
-   The scale goes from 0 to reduced value of height (remove upper and lower margin from height)
-  */.range([availableHeight, 0]);
+  Scale for the values on the Y-axis
+   Minimum value of scale is at bottom.
+  The scale goes from 0 to reduced value of height (remove upper and lower margin from height)
+  */
+  const yScale = d3.scaleLinear().domain([yStart, yEnd]).range([availableHeight, 0]);
 
-  // Scale for the bars on the X axis.
-  const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label))
-  // The scale goes from 0 to reduced value of width (remove left and right margin from height)
-  .range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
+  /*
+  Scale for the bars on the X axis.
+   The scale goes from 0 to reduced value of width (remove left and right margin from height)
+  */
+  const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
 
   (0, _react.useEffect)(() => {
     // Adding the svg element on first render.
@@ -66,33 +82,46 @@ function BarChart(_ref) {
     // Adding the X axis.
     const xAxis = barChartSvg.append('g').attr('id', 'x-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
     const yAxis = barChartSvg.append('g').attr('id', 'y-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
+    const yAxisLabel = barChartSvg.append('text').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).text(yLabel);
     // Removing the svg element, as a cleanup operation, before dismount.
     return () => {
       barChartSvg.remove();
     };
   });
-  (0, _react.useEffect)(() => {
-    // D3 code to create the graph
-    const barChartSvg = d3.select(barChartRef.current).select('svg');
+  const updateBars = barChartSvg => {
     barChartSvg.selectAll('rect').data(barsConfig) // Performing a data join for an array of objects.
     .join('rect').attr('x', (d, i) => marginRight + xScale(d.label)).attr('y', (d, i) => marginBottom + yScale(d.value)).attr('height', d => availableHeight - yScale(d.value)).attr('width', widthOfEachBar).style('fill', d => {
       var _d$color;
       return _ColorVariablesMap.default["--color-".concat((_d$color = d === null || d === void 0 ? void 0 : d.color) !== null && _d$color !== void 0 ? _d$color : 'warning')];
     });
-    const yAxisConfiguration = d3.axisLeft(yScale)
-    /*
-    tickSizeOuter is used to control the sizes of the ticks on the outer ends of the axes.
-    tickSizeInnr is for controlling the size of the remaining ticks.
-    tickSize sets both at once
-    */.tickSize(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
-    const yAxis = d3.select('#y-axis').call(yAxisConfiguration);
-    const xAxisConfiguration = d3.axisBottom(xScale)
+  };
+  const updateAxes = () => {
+    const xAxisRef = d3.select('#x-axis');
+    const yAxisRef = d3.select('#y-axis');
+
     /*
     tickSizeOuter is used to control the sizes of the ticks on the outer ends of the axes.
     tickSizeInnr is for controlling the size of the remaining ticks.
     tickSize sets both at once
-    */.tickSize(0).tickPadding(12);
-    const xAxis = d3.select('#x-axis').call(xAxisConfiguration);
+    */
+
+    const yAxisConfiguration = d3.axisLeft(yScale).tickSize(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
+    const yAxis = yAxisRef.call(yAxisConfiguration);
+    const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
+    // .attr("y", 0 – margin.left)
+    // .attr("x",0 - (height / 2))
+    // .attr("dy", "1em")
+    // .style("text-anchor", "middle")
+    // .text("Value");
+
+    const xAxisConfiguration = d3.axisBottom(xScale).tickSize(0).tickPadding(12);
+    const xAxis = xAxisRef.call(xAxisConfiguration);
+  };
+  (0, _react.useEffect)(() => {
+    // D3 code to create the graph
+    const barChartSvg = d3.select(barChartRef.current).select('svg');
+    updateBars(barChartSvg);
+    updateAxes();
   }, [barsConfig]); // Empty dependency array so that this code is called on every re-render
 
   return /*#__PURE__*/_react.default.createElement(FullSizeContainer, {
@@ -104,11 +133,17 @@ BarChart.propTypes = {
     value: _propTypes.default.number,
     color: _propTypes.default.oneOf(_colorOptions.colorOptions)
   })),
+  showPercentage: _propTypes.default.bool,
   yStart: _propTypes.default.number,
-  yEnd: _propTypes.default.number
+  yEnd: _propTypes.default.number,
+  yLabel: _propTypes.default.string,
+  xLabel: _propTypes.default.string
 };
 BarChart.defaultProps = {
   barsConfig: [],
+  showPercentage: false,
   yStart: 0,
-  yEnd: 100
+  yEnd: 100,
+  yLabel: 'Y',
+  xLabel: 'X'
 };

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
+var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
+var _ArrowBackIosRounded = _interopRequireDefault(require("@material-ui/icons/ArrowBackIosRounded"));
 var _utils = require("../../utils");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 const _excluded = ["buttonConfig", "children", "isBaseDrawer", "onClose", "open", "placement", "title", "height", "width", "data-test"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -73,11 +75,17 @@ function CustomDrawer(_ref) {
     open: open,
     placement: placement,
     push: false,
-    title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: "primary-content",
+      icon: _CloseRounded.default,
       onClick: handleClose,
+      size: 20,
       "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
-    })) : /*#__PURE__*/_react.default.createElement(_styles.LayeredDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_icons.LeftOutlined, {
+    })) : /*#__PURE__*/_react.default.createElement(_styles.LayeredDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: "primary-content",
+      icon: _ArrowBackIosRounded.default,
       onClick: handleClose,
+      size: 20,
       "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
     }), DrawerTitle(title)),
     height: height,

package/build/components/oa-component-icons/MaterialIcon.js

@@ -8,9 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = MaterialIcon;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _colorOptions = require("../../global-css/color-options");
-const _excluded = ["icon", "size", "color", "rotate", "style"];
+var _utils = require("../../utils");
+const _excluded = ["color", "icon", "onClick", "rotate", "size", "style"];
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,17 +23,20 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const UnstyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  height: ", "px;\n"])), props => props.size);
 function MaterialIcon(_ref) {
   let {
-      icon: Icon,
-      size,
       color,
       // By default, material icons inherit font color
+      icon: Icon,
+      onClick,
       rotate,
+      size,
       style
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(Icon, _extends({
+  const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
       color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
@@ -38,16 +44,22 @@ function MaterialIcon(_ref) {
       transform: "rotate(".concat(rotate, "deg)")
     }, style)
   }, props));
+  return (0, _utils.isFunction)(onClick) ? /*#__PURE__*/_react.default.createElement(UnstyledButton, _extends({
+    onClick: onClick,
+    size: size
+  }, props), renderedIcon) : renderedIcon;
 }
 MaterialIcon.propTypes = {
   color: _propTypes.default.oneOf(_colorOptions.colorOptions),
   icon: _propTypes.default.element.isRequired,
+  onClick: _propTypes.default.func,
   rotate: _propTypes.default.number,
   size: _propTypes.default.number,
   style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
 };
 MaterialIcon.defaultProps = {
   color: null,
+  onClick: null,
   rotate: 0,
   size: null,
   style: {}

package/build/components/oa-component-notification/CustomNotification.js

@@ -10,8 +10,9 @@ require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
+var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _typographyOptions = require("../../global-css/typography-options");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,11 +72,11 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         borderLeft: "4px solid ".concat(borderColor),
         boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
       },
-      closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
-        style: {
-          fontSize: '20px',
-          color: 'var(--color-primary-content'
-        }
+      closeIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-content",
+        icon: _CloseRounded.default,
+        onClick: handleClose,
+        size: 20
       }),
       onClick: handleClick,
       onClose: handleClose

package/build/components/oa-component-select/CustomSelect.js

@@ -22,7 +22,7 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 var _Elevation = require("../../global-css/Elevation");
-const _excluded = ["allText", "children", "defaultValue", "data-test", "onSelectionChange", "options"],
+const _excluded = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options"],
   _excluded2 = ["label", "disabled", "value"];
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,13 +51,15 @@ function CustomSelect(_ref) {
       children,
       defaultValue,
       'data-test': dataTest,
+      mode,
       onSelectionChange,
       options
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // If allText is present in default values, we select all the options manually.
-  const actualDefaultValue = [...defaultValue];
-  if (allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
+
+  const actualDefaultValue = mode === 'multiple' ? [...defaultValue] : defaultValue;
+  if (mode === 'multiple' && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
     var _options$filter$map, _options$filter;
     // Emptying the array first.
     actualDefaultValue.length = 0;
@@ -66,7 +68,10 @@ function CustomSelect(_ref) {
     actualDefaultValue === null || actualDefaultValue === void 0 || actualDefaultValue.push(allText);
 
     // Pushing the enabled options.
-    actualDefaultValue.push(...((_options$filter$map = options === null || options === void 0 || (_options$filter = options.filter(option => !(option !== null && option !== void 0 && option.disabled))) === null || _options$filter === void 0 ? void 0 : _options$filter.map(option => option.value)) !== null && _options$filter$map !== void 0 ? _options$filter$map : []));
+    actualDefaultValue.push(...((_options$filter$map = options === null || options === void 0 || (_options$filter = options.filter(option => {
+      var _option$disabled;
+      return !((_option$disabled = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false);
+    })) === null || _options$filter === void 0 ? void 0 : _options$filter.map(option => option.value)) !== null && _options$filter$map !== void 0 ? _options$filter$map : []));
   }
   const valueLabelMap = options.reduce((accumulator, option) => {
     var _option$label;
@@ -136,7 +141,14 @@ function CustomSelect(_ref) {
       }
     });
   };
-  const onOptionsChange = (select, value) => {
+  const onOptionsChangeForSingle = (select, value) => {
+    if (select) {
+      setSelectedOptions(value);
+    } else {
+      setSelectedOptions(null);
+    }
+  };
+  const onOptionsChangeForMultiple = (select, value) => {
     const newlySelectedOptions = selectedOptions.slice(0);
     const allIndex = newlySelectedOptions.indexOf(allText);
     if (allIndex !== -1) {
@@ -150,7 +162,11 @@ function CustomSelect(_ref) {
         addAllOptions(options, newlySelectedOptions);
       } else {
         safePush(newlySelectedOptions, value);
-        if (newlySelectedOptions.length === options.length && allText) {
+        const enabledOptions = options.filter(option => {
+          var _option$disabled2;
+          return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
+        });
+        if (newlySelectedOptions.length === enabledOptions.length && allText) {
           newlySelectedOptions.unshift(allText);
         }
       }
@@ -165,6 +181,7 @@ function CustomSelect(_ref) {
     onSelectionChange(valuesArrayToOptionArray(optionsWithoutAllText, valueLabelMap));
     setSelectedOptions(newlySelectedOptions);
   };
+  const onOptionsChange = mode === 'multiple' ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
@@ -233,15 +250,17 @@ function CustomSelect(_ref) {
     dropdownStyle: {
       padding: '0px'
     },
+    mode: mode,
     maxTagCount: selectedOptions.indexOf(allText) === -1 ? 'responsive' : 1,
     maxTagPlaceholder: getMaxTagPlaceholder,
-    onDeselect: value => onOptionsChange(false, value),
-    onSelect: value => onOptionsChange(true, value),
+    onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
+    onSelect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(true, value) : undefined,
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _KeyboardArrowDown.default,
       size: 20
     }),
-    value: (options === null || options === void 0 ? void 0 : options.length) > 0 ? selectedOptions : [],
+    value: (0, _utils.isFunction)(onSelectionChange) ? selectedOptions : undefined,
+    defaultValue: defaultValue,
     virtual: false
   }, props), allText && /*#__PURE__*/_react.default.createElement(Option, {
     value: allText
@@ -258,8 +277,9 @@ CustomSelect.Option = _antd.Select.Option;
 CustomSelect.propTypes = {
   allText: _propTypes.default.string,
   children: _propTypes.default.node,
-  defaultValue: _propTypes.default.array,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.number]),
   'data-test': _propTypes.default.string,
+  mode: _propTypes.default.oneOf(['multiple', 'tags']),
   onSelectionChange: _propTypes.default.func,
   options: _propTypes.default.arrayOf(
   // Checked from antd's github
@@ -274,7 +294,8 @@ CustomSelect.defaultProps = {
   children: null,
   defaultValue: [],
   'data-test': null,
-  onSelectionChange: selection => {},
+  mode: null,
+  onSelectionChange: null,
   options: [],
   size: 'middle'
 };

package/build/widgets/oa-widget-stage-timeline/styles.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SubStageContainer = exports.SubStage = exports.StaticStage = exports.StagesList = exports.StageDetails = exports.DotIcon = exports.CollapsibleStage = exports.CheckIcon = void 0;
-var _icons = require("@ant-design/icons");
+exports.SubStageContainer = exports.SubStage = exports.StaticStage = exports.StagesList = exports.StageDetails = exports.DotIcon = exports.CollapsibleStage = void 0;
 var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const CheckIcon = exports.CheckIcon = (0, _styledComponents.default)(_icons.CheckOutlined)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-positive) !important;\n"])));
-const CollapsibleStage = exports.CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n    \n\n  &.notstarted .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-disabled-button);\n  }\n  \n  &.inprogress--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-primary);\n  }\n\n  // This is for the arrow\n  &.completed .ant-collapse-header .ant-collapse-arrow, \n  &.inprogress .ant-collapse-header .ant-collapse-arrow, \n  &.completed--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-secondary-content);\n  }\n\n  & .ant-collapse-header {\n    /* !important needed to override pre-existing ant design styles */\n    padding: 12px 24px 12px 24px !important;\n    border-radius: 28px !important;\n    border: 1px solid transparent;\n    cursor: pointer;\n  }  \n\n  &.notstarted .ant-collapse-header {\n    cursor: not-allowed;\n  }\n\n  &.inprogress .ant-collapse-header, \n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n  }\n\n\n  &.inprogress--active .ant-collapse-header, \n  &.completed--active .ant-collapse-header {\n    background: var(--color-background-info);\n    border: 1px solid var(--color-background-info);\n  }\n"])));
-const DotIcon = exports.DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  \n  \n  border-radius: 50px;\n\n  display: flex;\n\n  background: ", ";\n"])), props => {
+const CollapsibleStage = exports.CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n    \n\n  &.notstarted .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-disabled-button);\n  }\n  \n  &.inprogress--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-primary);\n  }\n\n  // This is for the arrow\n  &.completed .ant-collapse-header .ant-collapse-arrow, \n  &.inprogress .ant-collapse-header .ant-collapse-arrow, \n  &.completed--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-secondary-content);\n  }\n\n  & .ant-collapse-header {\n    /* !important needed to override pre-existing ant design styles */\n    padding: 12px 24px 12px 24px !important;\n    border-radius: 28px !important;\n    border: 1px solid transparent;\n    cursor: pointer;\n  }  \n\n  &.notstarted .ant-collapse-header {\n    cursor: not-allowed;\n  }\n\n  &.inprogress .ant-collapse-header, \n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n  }\n\n\n  &.inprogress--active .ant-collapse-header, \n  &.completed--active .ant-collapse-header {\n    background: var(--color-background-info);\n    border: 1px solid var(--color-background-info);\n  }\n"])));
+const DotIcon = exports.DotIcon = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  \n  \n  border-radius: 50px;\n\n  display: flex;\n\n  background: ", ";\n"])), props => {
   switch (props.className) {
     case 'inprogress--active':
       return 'var(--color-primary)';
@@ -24,8 +22,8 @@ const DotIcon = exports.DotIcon = _styledComponents.default.span(_templateObject
       return '';
   }
 });
-const StageDetails = exports.StageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  \n  &.notstarted {\n    color: var(--color-disabled-button);\n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n  }\n\n  &.completed, &.inprogress, &.completed--active {\n    color: var(--color-secondary-content);\n  }\n"])));
-const StaticStage = exports.StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 16px 24px 16px 24px;  \n  cursor: not-allowed;\n  border: 1px solid transparent;\n  color: var(--color-disabled-button);  \n  text-decoration: none;\n  border-radius: 28px;\n\n  \n \n  &.completed, &.inprogress {\n    border-color: var(--color-divider);\n    background: var(--color-primary-background);\n    cursor: pointer;\n  }\n  \n  &.completed--active {\n    color: var(--color-secondary-content);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    \n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    cursor: pointer;\n  }\n"])));
-const StagesList = exports.StagesList = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n  \n  /* Since width is 100%, it'll take up all of its container */\n  /* width: 100%; */\n"])));
-const SubStage = exports.SubStage = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 4px 1px 4px calc(12px + 12px + 10px);\n  \n  background: inherit;\n  border: none;\n  text-align: left;\n  \n  cursor: pointer;\n  \n  &.active {\n    color: var(--color-primary-content);\n  } \n  \n  &.inactive {\n    color: var(--color-secondary-content);\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    color: var(--color-disabled-button);\n  }\n"])));
-const SubStageContainer = exports.SubStageContainer = _styledComponents.default.section(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n\n  /* &.notstarted {\n    cursor: not-allowed;\n    pointer-events: none;\n  } */\n"])));
+const StageDetails = exports.StageDetails = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  \n  &.notstarted {\n    color: var(--color-disabled-button);\n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n  }\n\n  &.completed, &.inprogress, &.completed--active {\n    color: var(--color-secondary-content);\n  }\n"])));
+const StaticStage = exports.StaticStage = _styledComponents.default.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 16px 24px 16px 24px;  \n  cursor: not-allowed;\n  border: 1px solid transparent;\n  color: var(--color-disabled-button);  \n  text-decoration: none;\n  border-radius: 28px;\n\n  \n \n  &.completed, &.inprogress {\n    border-color: var(--color-divider);\n    background: var(--color-primary-background);\n    cursor: pointer;\n  }\n  \n  &.completed--active {\n    color: var(--color-secondary-content);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    \n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    cursor: pointer;\n  }\n"])));
+const StagesList = exports.StagesList = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n  \n  /* Since width is 100%, it'll take up all of its container */\n  /* width: 100%; */\n"])));
+const SubStage = exports.SubStage = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 4px 1px 4px calc(12px + 12px + 10px);\n  \n  background: inherit;\n  border: none;\n  text-align: left;\n  \n  cursor: pointer;\n  \n  &.active {\n    color: var(--color-primary-content);\n  } \n  \n  &.inactive {\n    color: var(--color-secondary-content);\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    color: var(--color-disabled-button);\n  }\n"])));
+const SubStageContainer = exports.SubStageContainer = _styledComponents.default.section(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n\n  /* &.notstarted {\n    cursor: not-allowed;\n    pointer-events: none;\n  } */\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.95",
+  "version": "0.17.97",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -41,12 +41,12 @@
     "react-scripts": "^5.0.1",
     "storybook": "^7.6.3",
     "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "d3": "^7.8.5"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
-    "d3": "^7.8.5",
     "prop-types": "^15.8.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",