hrm_ui_lib 1.6.39 → 2.0.0

package/{Alert-fd6d6af9.js → Alert-CpcLdi-S.js}

@@ -1,17 +1,17 @@
-import { _ as _extends } from './extends-3e40af1f.js';
+import _extends from '@babel/runtime/helpers/extends';
 import React, { useMemo, forwardRef, useState, useCallback, useId, useEffect, useRef } from 'react';
-import { ICONS_MAPPING, TYPE_MAPPING } from './components/Alert/consts.js';
+import { TYPE_MAPPING, ICONS_MAPPING } from './components/Alert/consts.js';
 import classNames from 'classnames';
 import { Text } from './components/Text/Text.js';
-import { _ as _defineProperty } from './defineProperty-2ff83f38.js';
-import { _ as _objectWithoutProperties } from './objectWithoutProperties-0edf05e5.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'dayjs';
 import { Loader } from './helperComponents/Loader/Loader.js';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { FILE_ACCEPT_TYPE } from './consts/index.js';
 import './hooks/useScreenSize.js';
 import 'react-hook-form';
-import { _ as _toConsumableArray } from './toConsumableArray-f6050ff2.js';
-import { _ as _slicedToArray } from './slicedToArray-2d190e96.js';
 import { ErrorCode, useDropzone } from 'react-dropzone';
 import { IconUpload } from './components/SVGIcons/IconUpload.js';
 import { FileTypeEnum } from './type/file-upload.js';
@@ -33,12 +33,13 @@ import { Link } from './components/Link/Link.js';
 import { PopoverDesktop } from './components/Popover/PopoverDesktop.js';
 import { IconInfo } from './components/SVGIcons/IconInfo.js';
 import { IconDynamicComponent } from './helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '@babel/runtime/helpers/typeof';
 import { IconDismissFilled } from './components/SVGIcons/IconDismissFilled.js';
 import { IconDelete } from './components/SVGIcons/IconDelete.js';
 import { FilePreview } from './components/FileUpload/DropzoneFileUpload/FilePreview.js';
 import { IconArrowDownloadFilled } from './components/SVGIcons/IconArrowDownloadFilled.js';
 import { downloadFile } from './helpers/download-file.js';
-import { LITE_LOADER_TYPES, ICON_SIZE_MAPPING, ICON_TYPE_MAPPING } from './components/Button/consts.js';
+import { LITE_LOADER_TYPES, ICON_TYPE_MAPPING, ICON_SIZE_MAPPING } from './components/Button/consts.js';
 
 var shortenFileName = function shortenFileName(fileName, maxLength) {
   // Regular expression to split the name into three parts: start, middle, and extension
@@ -65,14 +66,14 @@ var formatFileSize = function formatFileSize(sizeInBytes) {
   }
 };
 var generateAreaContent = function generateAreaContent(_ref) {
-  var accept = _ref.accept,
+  var allowedTypes = _ref.allowedTypes,
     maxSize = _ref.maxSize,
     locale = _ref.locale;
-  var acceptTypes = accept.map(function (type) {
+  var acceptTypes = allowedTypes.map(function (type) {
     return FILE_ACCEPT_TYPE[type];
   }).flat();
   var translation = getDropzoneLocale(locale);
-  var acceptTypesMessage = accept.length === 1 ? accept[0] : accept.reduce(function (acc, currentValue, _index, _arr) {
+  var acceptTypesMessage = allowedTypes.length === 1 ? allowedTypes[0] : allowedTypes.reduce(function (acc, currentValue, _index, _arr) {
     if (_index === _arr.length - 1) {
       return "".concat(acc, " ").concat(translation.or, " ").concat(currentValue);
     }
@@ -203,8 +204,8 @@ var PreviewItem = function PreviewItem(_ref) {
 var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   var _ref2$maxSize = _ref2.maxSize,
     maxSize = _ref2$maxSize === void 0 ? 10 * 1024 * 1024 : _ref2$maxSize,
-    _ref2$accept = _ref2.accept,
-    accept = _ref2$accept === void 0 ? [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC] : _ref2$accept,
+    _ref2$allowedTypes = _ref2.allowedTypes,
+    allowedTypes = _ref2$allowedTypes === void 0 ? [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC] : _ref2$allowedTypes,
     name = _ref2.name,
     setFiles = _ref2.setFiles,
     setFieldValue = _ref2.setFieldValue,
@@ -224,7 +225,7 @@ var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     errors = _useState2[0],
     setErrors = _useState2[1];
   var areaContent = generateAreaContent({
-    accept: accept,
+    allowedTypes: allowedTypes,
     maxSize: maxSize
   });
   var translation = getDropzoneLocale(locale);
@@ -295,7 +296,7 @@ var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     className: "mb-6"
   }, translation.title), /*#__PURE__*/React.createElement(Text, {
     size: "small"
-  }, "".concat(areaContent.acceptTypesMessage, " ").concat(areaContent.acceptTypes.length === 1 ? translation.format : translation.formats, ", ").concat(translation.maxSize.replace('$1', areaContent.maxSizeFormatted)))) : null, /*#__PURE__*/React.createElement("div", {
+  }, "".concat(areaContent.acceptTypesMessage, " ").concat((allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.length) === 1 ? translation.format : translation.formats, ", ").concat(translation.maxSize.replace('$1', areaContent.maxSizeFormatted)))) : null, /*#__PURE__*/React.createElement("div", {
     className: "dz-file-upload__files"
   }, errors.map(function (_ref3, index) {
     var code = _ref3.code;
@@ -747,4 +748,4 @@ var Alert = function Alert(props) {
   }) : null));
 };
 
-export { Alert as A, Button as B, Checkbox as C, DropzoneFileUpload as D, ErrorItem as E, Modal as M, Popover as P, MOBILE_ANIMATION as a, getDropzoneLocale as b, PreviewItem as c, ModalContent as d, PopoverMobile as e, formatFileSize as f, generateAreaContent as g, shortenFileName as s };
+export { Alert as A, Button as B, Checkbox as C, DropzoneFileUpload as D, ErrorItem as E, MOBILE_ANIMATION as M, Popover as P, Modal as a, getDropzoneLocale as b, PreviewItem as c, ModalContent as d, PopoverMobile as e, formatFileSize as f, generateAreaContent as g, shortenFileName as s };

package/README.md

@@ -0,0 +1,76 @@
+# People Space UI Tools
+
+See [UI library]([https://github.com/hrmuilibrary/hrm_ui_library]) for live demos and comprehensive docs.
+
+# Installation and usage
+```
+npm install hrm_ui_lib
+```
+
+Then use it in your app:
+```jsx
+import React from 'react';
+import { Button } from 'hrm_ui_lib/components/Button';
+import 'hrm_ui_lib/assets/styles/styles.scss'; 
+// Or you can import the styles.css file
+// import 'hrm_ui_lib/assets/styles/styles.css';
+
+const App = () => {
+  return <Button>Click me</Button>;
+};
+```
+
+How to use mixins:
+```scss
+@use "hrm_ui_lib/assets/styles/helpers/mixin";
+
+.divider {
+    @include mixin.flexbox();
+}
+```
+
+# How to create new icon
+    1. Add a new svg file in `svg-icons` folder.
+    2. Make sure the icon is matching with the design.
+    3. Make sure the svg file name is matching with pattern like this `chevron-right.svg`.
+    4. Run `npm run generate-svg-component` command to generate the new icon component.
+
+# How to create new component
+    1. Add a folder with the component name in `src/components/` folder.
+    2. Add a style file in the `assets/styles/components` fodler with the name `_componentName.scss`.
+    3. Import the created style file in `assets/styles/styles.scss` file using @use syntax.
+    4. Develop component based on the design.
+    5. Add `coomponentName.stories.tsx` file in src/stories folder to test created component.
+    6. Make sure you don't have type error and the component is matching with the design.
+    7. If everything is ok you can create a pull request into the master branch with correct commit message (you can read about it below).
+    8. The new version will be published automatically after the pull request is reviewed and merged.
+
+## Automated Releases with Semantic Release
+
+This project uses [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) to automate versioning and releases. It follows [Semantic Versioning](https://semver.org/) (semver) and determines the next version number based on commit messages.
+
+### How It Works
+
+    Semantic Release automates:
+
+    1. Version number updates.
+    2. Release notes generation.
+    3. Package publishing to npm.
+    4. GitHub release creation.
+
+### Commit Message Guidelines
+
+Semantic Release uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) to determine release types:
+
+    `fix:` – for bug fixes (patch release)
+    `feat:` – for new features (minor release)
+    `BREAKING CHANGE:` – for breaking changes (major release)
+
+### Releasing
+
+To trigger a release:
+
+    1. Commit your changes using the conventional commit format.
+    2. Open a pull request and merge it into the `master` branch with the appropriate commit message.
+
+Semantic Release will handle the rest, including publishing to npm and creating a GitHub release.

package/assets/styles/styles.css

@@ -4962,23 +4962,6 @@ body {
   width: 100%;
 }
 
-.mobile_time_picker {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.mobile_time_picker .picker_items {
-  gap: var(--ds-space-56);
-}
-
-.mobile_time_picker .picker_items .date_item_picker_container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-
 .custom_header_container {
   align-items: center;
   display: flex;
@@ -8412,18 +8395,139 @@ body {
   border-top: 1px solid var(--grey-50);
 }
 
+.time-picker-mobile .modal__content {
+  padding: 16px 0;
+}
+
+.mobile_time_picker {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--ds-size-8);
+}
+
+.mobile_time_picker-wheel-picker {
+  justify-content: center !important;
+}
+
+.mobile_time_picker-wheel-picker-item {
+  color: var(--grey-500) !important;
+  font-size: var(--font-size-16) !important;
+  font-weight: var(--font-weight-500) !important;
+  width: max-content !important;
+}
+
+.mobile_time_picker-wheel-picker-item__hour {
+  left: unset !important;
+  right: 18px !important;
+}
+
+.mobile_time_picker-wheel-picker-item__minute {
+  left: 18px !important;
+}
+
+.mobile_time_picker-wheel-picker-highlight {
+  background-color: var(--grey-100) !important;
+}
+
+.mobile_time_picker-wheel-picker-highlight-item__hour {
+  justify-content: flex-end !important;
+  margin-right: var(--ds-size-16);
+}
+
+.mobile_time_picker-wheel-picker-highlight-item__hour, .mobile_time_picker-wheel-picker-highlight-item__minute {
+  color: var(--grey-900) !important;
+  font-size: var(--font-size-20) !important;
+  font-weight: var(--font-weight-600) !important;
+}
+
+.mobile_time_picker-wheel-picker-highlight-item__minute {
+  justify-content: flex-start !important;
+  margin-left: var(--ds-size-16);
+}
+
+[data-rwp-wrapper] {
+  align-items: stretch;
+  display: flex;
+  justify-content: space-between;
+  perspective: 2000px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  width: 100%;
+}
+
+[data-rwp-wrapper], [data-rwp] {
+  overflow: hidden;
+  position: relative;
+}
+
+[data-rwp] {
+  cursor: default;
+  flex: 1;
+  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent);
+  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent);
+}
+
+[data-rwp-highlight-wrapper] {
+  font-size: 1rem;
+  font-weight: 500;
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+
+[data-rwp-highlight-list], [data-rwp-options] {
+  list-style: none;
+  position: absolute;
+  width: 100%;
+}
+
+[data-rwp-options] {
+  backface-visibility: hidden;
+  display: block;
+  height: 0;
+  margin: 0 auto;
+  top: 50%;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+[data-rwp-option], [data-rwp-options] {
+  -webkit-font-smoothing: subpixel-antialiased;
+  left: 0;
+}
+
+[data-rwp-option] {
+  font-size: 0.875rem;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  will-change: visibility;
+}
+
+[data-rwp-highlight-item], [data-rwp-option] {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 :root {
   --toastify-color-light:#fff;
   --toastify-color-dark:#121212;
   --toastify-color-info:#3498db;
   --toastify-color-success:#07bc0c;
   --toastify-color-warning:#f1c40f;
-  --toastify-color-error:#e74c3c;
+  --toastify-color-error:#e74d3c;
   --toastify-color-transparent:hsla(0,0%,100%,.7);
   --toastify-icon-color-info:var(--toastify-color-info);
   --toastify-icon-color-success:var(--toastify-color-success);
   --toastify-icon-color-warning:var(--toastify-color-warning);
   --toastify-icon-color-error:var(--toastify-color-error);
+  --toastify-container-width:fit-content;
   --toastify-toast-width:320px;
   --toastify-toast-offset:16px;
   --toastify-toast-top:max(var(--toastify-toast-offset),env(safe-area-inset-top));
@@ -8431,9 +8535,11 @@ body {
   --toastify-toast-left:max(var(--toastify-toast-offset),env(safe-area-inset-left));
   --toastify-toast-bottom:max(var(--toastify-toast-offset),env(safe-area-inset-bottom));
   --toastify-toast-background:#fff;
+  --toastify-toast-padding:14px;
   --toastify-toast-min-height:64px;
   --toastify-toast-max-height:800px;
   --toastify-toast-bd-radius:6px;
+  --toastify-toast-shadow:0px 4px 12px rgba(0,0,0,.1);
   --toastify-font-family:sans-serif;
   --toastify-z-index:9999;
   --toastify-text-color-light:#757575;
@@ -8456,10 +8562,11 @@ body {
 .Toastify__toast-container {
   box-sizing: border-box;
   color: #fff;
-  padding: 4px;
+  display: flex;
+  flex-direction: column;
   position: fixed;
   -webkit-transform: translateZ(var(--toastify-z-index));
-  width: var(--toastify-toast-width);
+  width: var(--toastify-container-width);
   z-index: var(--toastify-z-index);
 }
 
@@ -8469,12 +8576,14 @@ body {
 }
 
 .Toastify__toast-container--top-center {
+  align-items: center;
   left: 50%;
   top: var(--toastify-toast-top);
   transform: translateX(-50%);
 }
 
 .Toastify__toast-container--top-right {
+  align-items: end;
   right: var(--toastify-toast-right);
   top: var(--toastify-toast-top);
 }
@@ -8485,21 +8594,42 @@ body {
 }
 
 .Toastify__toast-container--bottom-center {
+  align-items: center;
   bottom: var(--toastify-toast-bottom);
   left: 50%;
   transform: translateX(-50%);
 }
 
 .Toastify__toast-container--bottom-right {
+  align-items: end;
   bottom: var(--toastify-toast-bottom);
   right: var(--toastify-toast-right);
 }
 
+.Toastify__toast {
+  --y:0;
+  align-items: center;
+  border-radius: var(--toastify-toast-bd-radius);
+  box-shadow: var(--toastify-toast-shadow);
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 auto;
+  font-family: var(--toastify-font-family);
+  margin-bottom: 1rem;
+  max-height: var(--toastify-toast-max-height);
+  min-height: var(--toastify-toast-min-height);
+  padding: var(--toastify-toast-padding);
+  position: relative;
+  touch-action: none;
+  width: var(--toastify-toast-width);
+  word-break: break-word;
+  z-index: 0;
+}
+
 @media only screen and (max-width: 480px) {
   .Toastify__toast-container {
     left: env(safe-area-inset-left);
     margin: 0;
-    padding: 0;
     width: 100vw;
   }
   .Toastify__toast-container--top-center, .Toastify__toast-container--top-left, .Toastify__toast-container--top-right {
@@ -8514,28 +8644,14 @@ body {
     left: auto;
     right: env(safe-area-inset-right);
   }
+  .Toastify__toast {
+    --toastify-toast-width:100%;
+    border-radius: 0;
+    margin-bottom: 0;
+  }
 }
-.Toastify__toast {
-  --y:0;
-  -ms-flex-pack: justify;
-  border-radius: var(--toastify-toast-bd-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-  cursor: default;
-  direction: ltr;
-  display: -ms-flexbox;
-  display: flex;
-  font-family: var(--toastify-font-family);
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  max-height: var(--toastify-toast-max-height);
-  min-height: var(--toastify-toast-min-height);
-  overflow: hidden;
-  padding: 8px;
-  position: relative;
-  -ms-touch-action: none;
-  touch-action: none;
-  z-index: 0;
+.Toastify__toast-container[data-stacked=true] {
+  width: var(--toastify-toast-width);
 }
 
 .Toastify__toast--stacked {
@@ -8601,31 +8717,11 @@ body {
   cursor: pointer;
 }
 
-.Toastify__toast-body {
-  -ms-flex-align: center;
-  align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  margin: auto 0;
-  padding: 6px;
-}
-
-.Toastify__toast-body > div:last-child {
-  -ms-flex: 1;
-  flex: 1;
-  word-break: break-word;
-}
-
 .Toastify__toast-icon {
-  -webkit-margin-end: 10px;
-  -ms-flex-negative: 0;
-  display: -ms-flexbox;
   display: flex;
   flex-shrink: 0;
   margin-inline-end: 10px;
-  width: 20px;
+  width: 22px;
 }
 
 .Toastify--animate {
@@ -8638,12 +8734,6 @@ body {
   animation-fill-mode: both;
 }
 
-@media only screen and (max-width: 480px) {
-  .Toastify__toast {
-    border-radius: 0;
-    margin-bottom: 0;
-  }
-}
 .Toastify__toast-theme--dark {
   background: var(--toastify-color-dark);
   color: var(--toastify-text-color-dark);
@@ -8703,8 +8793,6 @@ body {
 }
 
 .Toastify__close-button {
-  -ms-flex-item-align: start;
-  align-self: flex-start;
   background: transparent;
   border: none;
   color: #fff;
@@ -8712,10 +8800,18 @@ body {
   opacity: 0.7;
   outline: none;
   padding: 0;
+  position: absolute;
+  right: 6px;
+  top: 6px;
   transition: 0.3s ease;
   z-index: 1;
 }
 
+.Toastify__toast--rtl .Toastify__close-button {
+  left: 6px;
+  right: unset;
+}
+
 .Toastify__close-button--light {
   color: #000;
   opacity: 0.3;
@@ -8740,7 +8836,6 @@ body {
   }
 }
 .Toastify__progress-bar {
-  border-bottom-left-radius: var(--toastify-toast-bd-radius);
   bottom: 0;
   height: 100%;
   left: 0;
@@ -8748,7 +8843,7 @@ body {
   position: absolute;
   transform-origin: left;
   width: 100%;
-  z-index: var(--toastify-z-index);
+  z-index: 1;
 }
 
 .Toastify__progress-bar--animated {
@@ -8761,7 +8856,6 @@ body {
 
 .Toastify__progress-bar--rtl {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--toastify-toast-bd-radius);
   left: auto;
   right: 0;
   transform-origin: right;
@@ -8769,9 +8863,11 @@ body {
 
 .Toastify__progress-bar--wrp {
   border-bottom-left-radius: var(--toastify-toast-bd-radius);
+  border-bottom-right-radius: var(--toastify-toast-bd-radius);
   bottom: 0;
   height: 5px;
   left: 0;
+  overflow: hidden;
   position: absolute;
   width: 100%;
 }