oa-componentbook 0.17.80 → 0.17.81

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -79,6 +79,11 @@ function CustomDatePicker(_ref) {
         colorText: _ColorVariablesMap.default['--color-primary-content'],
         // Text color
 
+        colorIcon: _ColorVariablesMap.default['--color-primary'],
+        // Color of arrows icons beside month and year in datepicker
+        colorIconHover: _ColorVariablesMap.default['--color-primary-hover'],
+        // Hover color of arrows icons beside month and year in datepicker
+
         colorLink: _ColorVariablesMap.default['--color-primary'],
         colorLinkHover: _ColorVariablesMap.default['--color-primary-hover'],
         colorError: _ColorVariablesMap.default['--color-negative'],
@@ -90,6 +95,9 @@ function CustomDatePicker(_ref) {
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _CalendarTodayRounded.default,
       size: 20
+    }),
+    superNextIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _CalendarTodayRounded.default
     })
   }, props)));
 }

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

@@ -7,13 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nanoid = require("nanoid");
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
+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 _utils = require("../../utils");
 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); }
@@ -90,7 +89,7 @@ function CustomDrawer(_ref) {
       // If it doesn't we hardcode the button to never be disabled.
       : false,
       iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
-      key: (0, _nanoid.nanoid)(),
+      key: (0, _utils.getUUID)(),
       label: button.label,
       onClick: button.callback,
       size: "medium",

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

@@ -32,7 +32,7 @@ function MaterialIcon(_ref) {
   return /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
       color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
-      fontSize: "".concat(size, "px"),
+      fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")
     }, style)
@@ -48,6 +48,6 @@ MaterialIcon.propTypes = {
 MaterialIcon.defaultProps = {
   color: null,
   rotate: 0,
-  size: 20,
+  size: null,
   style: {}
 };

package/build/components/oa-component-input/CustomInput.js

@@ -8,9 +8,8 @@ exports.default = CustomInput;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _utils = require("../../utils");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-require("antd/dist/reset.css");
-var _helperFunctions = require("../../utils/helper-functions");
 const _excluded = ["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); }

package/build/components/oa-component-input-number/CustomInputNumber.js

@@ -8,8 +8,8 @@ exports.default = CustomInputNumber;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _utils = require("../../utils");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-var _helperFunctions = require("../../utils/helper-functions");
 const _excluded = ["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); }

package/build/components/oa-component-modal/CustomModal.js

@@ -10,7 +10,6 @@ require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _nanoid = require("nanoid");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
 var _utils = require("../../utils");
@@ -47,7 +46,7 @@ function CustomModal(_ref) {
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
-      key: (0, _nanoid.nanoid)()
+      key: (0, _utils.getUUID)()
     }, button, {
       iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
       label: button.label,

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

@@ -9,7 +9,9 @@ exports.default = CustomSelect;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
 var _utils = require("../../utils");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
@@ -74,6 +76,9 @@ function CustomSelect(_ref) {
         // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
         colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
         // Color of placeholder text
+        colorTextQuaternary: _ColorVariablesMap.default['--color-secondary-content'],
+        // Color of dropdown arrow.
+
         colorPrimary: _ColorVariablesMap.default['--color-primary'],
         // for active color of select
         colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
@@ -124,7 +129,11 @@ function CustomSelect(_ref) {
     dropdownStyle: {
       padding: '0px'
     },
-    maxTagCount: "responsive"
+    maxTagCount: "responsive",
+    suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _KeyboardArrowDown.default,
+      size: 20
+    })
   }, props)));
 }
 CustomSelect.Option = _antd.Select.Option;

package/build/components/oa-component-tabs/CustomTabs.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _nanoid = require("nanoid");
+var _utils = require("../../utils");
 var _styles = require("./styles");
 const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "style", "tabPosition", "type"],
   _excluded2 = ["body", "disabled", "key", "label"];
@@ -44,7 +44,7 @@ function CustomTabs(_ref) {
     return _objectSpread({
       children: body,
       disabled: isTabDisabed,
-      key: key !== null && key !== void 0 ? key : (0, _nanoid.nanoid)(),
+      key: key !== null && key !== void 0 ? key : (0, _utils.getUUID)(),
       label: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
         "data-test": "".concat(dataTest, "--label-(").concat(label, ")")
       }, label) : label

package/build/utils/helper-functions.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isString = exports.isObject = exports.isNumber = exports.isNullish = exports.isFunction = exports.hexToRgb = void 0;
+exports.isString = exports.isObject = exports.isNumber = exports.isNullish = exports.isFunction = exports.hexToRgb = exports.getUUID = void 0;
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.match.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.parse-int.js");
+var _window$crypto$random;
 const isNumber = variable => typeof variable === 'number';
 exports.isNumber = isNumber;
 const isNullish = variable => variable === undefined || variable === null;
@@ -28,4 +29,16 @@ const hexToRgb = hexCode => {
   return decimalRgbValues;
 };
 exports.hexToRgb = hexToRgb;
-hexToRgb('#ff0000');
+const getUniqueId = suffix => {
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[y]/g, characterToReplace => {
+    const randomHexNumber = Math.round(Math.random() * 15);
+    const replacementCharacter = characterToReplace === 'x' ? randomHexNumber : randomHexNumber % 4 + 8;
+    return replacementCharacter.toString(16);
+  });
+  if (typeof suffix === 'string' || typeof suffix === 'number') {
+    return "".concat(uuid, ":").concat(suffix);
+  }
+  return "".concat(uuid);
+};
+const getUUID = (_window$crypto$random = window.crypto.randomUUID) !== null && _window$crypto$random !== void 0 ? _window$crypto$random : getUniqueId;
+exports.getUUID = getUUID;

package/build/utils/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "getUUID", {
+  enumerable: true,
+  get: function get() {
+    return _helperFunctions.getUUID;
+  }
+});
+Object.defineProperty(exports, "hexToRgb", {
+  enumerable: true,
+  get: function get() {
+    return _helperFunctions.hexToRgb;
+  }
+});
 Object.defineProperty(exports, "isFunction", {
   enumerable: true,
   get: function get() {

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nanoid = require("nanoid");
 var _utils = require("../../utils");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,7 +38,7 @@ function KeyValueDataView(_ref) {
       let [key, value] = _ref2;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "valuestyle",
-        key: (0, _nanoid.nanoid)()
+        key: (0, _utils.getUUID)()
       }, /*#__PURE__*/_react.default.createElement("b", {
         className: "type-b2-400"
       }, key, ":"), ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) && /*#__PURE__*/_react.default.createElement("span", {

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -8,10 +8,10 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
 var _antd = require("antd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nanoid = require("nanoid");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _DeleteOutlineRounded = _interopRequireDefault(require("@material-ui/icons/DeleteOutlineRounded"));
 var _WarningRounded = _interopRequireDefault(require("@material-ui/icons/WarningRounded"));
+var _utils = require("../../utils");
 var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
@@ -52,7 +52,7 @@ const renderAction = (action, record) => {
   if (action.icon === 'delete') {
     return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       "data-test": action['data-test'],
-      key: (0, _nanoid.nanoid)(),
+      key: (0, _utils.getUUID)(),
       onClick: () => action.successCallback(record),
       type: "danger-text-only",
       iconConfig: {
@@ -122,7 +122,7 @@ function SparePartsWidget(_ref) {
     }), showCostBreakdown && /*#__PURE__*/_react.default.createElement(CostBreakdown, null, Object.keys(scopeDetails).map((key, index) => {
       if (costCoveredBy[key] && scopeDetails[key] != null && scopeDetails[key] !== undefined) {
         return /*#__PURE__*/_react.default.createElement("ul", {
-          key: (0, _nanoid.nanoid)()
+          key: (0, _utils.getUUID)()
         }, /*#__PURE__*/_react.default.createElement("li", {
           className: "type-b2-400"
         }, costCoveredBy[key]), ' ', /*#__PURE__*/_react.default.createElement("li", {

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

@@ -8,8 +8,8 @@ exports.default = StageTimelineWidget;
 require("core-js/modules/es.string.ends-with.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nanoid = require("nanoid");
 var _CheckRounded = _interopRequireDefault(require("@material-ui/icons/CheckRounded"));
+var _utils = require("../../utils");
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _styles = require("./styles");
@@ -47,7 +47,7 @@ function StageTimelineChild(_ref) {
     typography: className === 'inprogress--active' || className === 'completed--active' ? 'type-button-500' : 'type-b2-400'
   }, stageName));
   return /*#__PURE__*/_react.default.createElement("li", {
-    key: (0, _nanoid.nanoid)()
+    key: (0, _utils.getUUID)()
   }, (subStages === null || subStages === void 0 ? void 0 : subStages.length) > 0 ? /*#__PURE__*/_react.default.createElement(_styles.CollapsibleStage
   // onClick of the stage passed to onChange of the collapse
   , {
@@ -76,7 +76,7 @@ function StageTimelineChild(_ref) {
           subStageClassName = 'active';
         }
         return /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
-          key: (0, _nanoid.nanoid)(),
+          key: (0, _utils.getUUID)(),
           className: subStageClassName,
           "data-test": dataTest ? "".concat(dataTest, "--substage-(").concat(subStage.stageName, ")") : undefined,
           onClick: subStage.onClick,
@@ -134,7 +134,7 @@ function StageTimelineWidget(_ref2) {
     "data-test": dataTest
   }, children.map(child => /*#__PURE__*/_react.default.cloneElement(child, {
     'data-test': "".concat(dataTest, "--stage-(").concat(child.props.stageName, ")"),
-    key: (0, _nanoid.nanoid)()
+    key: (0, _utils.getUUID)()
   }))) : /*#__PURE__*/_react.default.createElement(_styles.StagesList, null, children);
 }
 StageTimelineWidget.propTypes = {

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

@@ -17,7 +17,7 @@ exports.CollapsibleStage = CollapsibleStage;
 const 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 => {
   switch (props.className) {
     case 'inprogress--active':
-      return 'blue';
+      return 'var(--color-primary)';
     case 'inprogress':
       return 'var(--color-disabled-button)';
     case 'notstarted':

package/build/widgets/oa-widget-upload-download/UploadDownloadWidget.js

@@ -10,7 +10,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _GetAppRounded = _interopRequireDefault(require("@material-ui/icons/GetAppRounded"));
 var _DeleteOutlineRounded = _interopRequireDefault(require("@material-ui/icons/DeleteOutlineRounded"));
 var _antd = require("antd");
-var _nanoid = require("nanoid");
 var _styles = require("./styles");
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
@@ -86,7 +85,7 @@ function UploadDownloadWidget(_ref) {
   }))), (uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length) > 0 && uploadedDocuments.map((uploadedDocument, index) => {
     var _uploadedDocument$onD, _uploadedDocument$onD2;
     return /*#__PURE__*/_react.default.createElement(_styles.StyledSection, {
-      key: (0, _nanoid.nanoid)()
+      key: (0, _utils.getUUID)()
     }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       "data-test": dataTest ? "".concat(dataTest, "--download-button-").concat(index) : undefined,
       iconConfig: {
@@ -118,12 +117,12 @@ function UploadDownloadWidget(_ref) {
     }));
   }) ||
   // No uploaded documents available to display and no upload functionality.
-  !((uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length) > 0) && !((0, _utils.isFunction)(onUpload) &&
+  !((uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length) > 0) && !(0, _utils.isFunction)(onUpload) &&
   /*#__PURE__*/
-  // Neither downloadable, uploadable nor deletable
+  // Neither downloadable, uploadable nor deletable */}
   _react.default.createElement(_Typography.default, {
     type: "type-b2-400"
-  }, "Not Uploaded")));
+  }, "Document not uploaded"));
 }
 UploadDownloadWidget.propTypes = {
   className: _propTypes.default.string,

package/build/widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget.js

@@ -11,11 +11,11 @@ require("core-js/modules/es.array.sort.js");
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nanoid = require("nanoid");
+var _utils = require("../../utils");
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _styles = require("./styles");
 var _CustomToggle = _interopRequireDefault(require("../../components/oa-component-toggle/CustomToggle"));
+var _styles = require("./styles");
 const _excluded = ["currentDescription", "data-test", "previousDescriptions", "onClose", "onTranslate", "open"];
 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); }
@@ -115,7 +115,7 @@ function ViewPreviousDescriptionWidget(_ref) {
   }).map((previousDescription, index) => {
     var _translatedText;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: (0, _nanoid.nanoid)()
+      key: (0, _utils.getUUID)()
     }, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement(_Typography.default
     // This data-test attribute helps in checking if the translation took place
     , {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.80",
+  "version": "0.17.81",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -20,7 +20,6 @@
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/cli": "^7.3.2",
     "antd": "^5.11.4",
-    "nanoid": "^5.0.1",
     "prop-types": "^15.8.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",