Merge branch 'main' into dependabot/npm_and_yarn/cross-spawn-7.0.6

.storybook/manager.js

@@ -7,5 +7,5 @@ addons.setConfig({
 
 const link = document.createElement("link");
 link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", "./favicon_light.ico");
+link.setAttribute("href", "./favicon.ico");
 document.head.appendChild(link);

CHANGELOG.md

@@ -23,6 +23,21 @@ Each change is prefixed with one of these keywords::
 - *Fixed*: Denotes bug fixes.
 - *Security*: Pertains to actions taken in response to vulnerabilities.
 
+## 8.2.40 - 2024-11-27
+
+- The false value of the prop `icon` was ignored in the implementations before v9.0.2.
+- After 9.0.2, the [implementation](https://github.com/fkhadra/react-toastify/blob/main/src/components/Toast.tsx#L108-L117) is such that the icon is rendered as passed in the config.
+- Since the `false` value was used to show the default icon set internally, replaced it with a function that returns null
+  which solved the problem.
+  - Code ref: https://github.com/fkhadra/react-toastify/blob/v8.0.1/src/components/Toast.tsx#L65-L75.
+  - The `if (icon === false)` statement was never success for some reason.
+
+- PR which addressed this issue: https://github.com/fkhadra/react-toastify/pull/758
+
+## 8.2.39 - 2024-11-27
+
+- Updates the value and default value fixed to the allowed range only if the user has touched the fields. This will fix the values outside the allowed ranges until not properly rendered initially.
+
 ## 8.2.36 - 2024-11-12
 
 - Removed the toastr icon by default.
@@ -191,9 +206,7 @@ Updates all formik components in neetoUI to use status to show server error and
 - Updated: `--neeto-ui-gray-100` from `#f8f9f9` to `#f6f7f8`.
 - Added: `--neeto-ui-gray-50` - `#fafafa`.
 - Updated: `--neeto-ui-primary-800` from `#2d36d4` to `#006653`.
-
 - Updated: `--neeto-ui-primary-600` from `#3642df` to `#007a64`.
-
 - Updated: `--neeto-ui-primary-500` from `#4558f9` to `#008068`.
 
 - Updated: `--neeto-ui-primary-100` from `#ebecfe` to `#e1f3ee`.
@@ -648,9 +661,7 @@ Added: `rejectCharsRegex` prop to *Input* component.
 - Fixed: Handled dot paths in *ScrollToErrorField*.
 ## 5.1.3 - 2023-08-02
 - Fixed: Disabled click in selected option close button if select is disabled.
-
 ## 5.1.2 - 2023-08-02
-
 - FIxed: Updated deprecated CSS property `color-adjust`
 
 ## 5.1.1 - 2023-08-02

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "8.2.37",
+  "version": "8.2.40",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",

src/components/DatePicker/index.jsx

@@ -1,4 +1,10 @@
-import React, { forwardRef, useState, useEffect } from "react";
+import React, {
+  forwardRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
 
 import { DatePicker as AntDatePicker } from "antd";
 import classnames from "classnames";
@@ -62,6 +68,7 @@ const DatePicker = forwardRef(
     const [value, setValue] = useState(inputValue);
     const [mode, setMode] = useState(picker);
     const [pickerValue, setPickerValue] = useState();
+    const [touched, setTouched] = useState(false);
     const id = useId(otherProps.id);
     const datePickerRef = useSyncedRef(ref);
 
@@ -78,17 +85,19 @@ const DatePicker = forwardRef(
       setMode(picker);
     }, [picker]);
 
+    const getAllowedValue = useCallback(
+      date => getAllowed(date, minDate, maxDate),
+      [minDate, maxDate]
+    );
+
     const handleOnChange = (date, dateString) => {
       if (type === "range" && isNotPresent(date)) {
         return onChange([], dateString);
       }
 
-      const allowed = getAllowed(
-        getTimezoneAppliedDateTime(date),
-        minDate,
-        maxDate
-      );
+      const allowed = getAllowedValue(getTimezoneAppliedDateTime(date));
       setValue(allowed);
+      setTouched(true);
 
       return onChange(allowed, formattedString(allowed, dateFormat));
     };
@@ -108,16 +117,29 @@ const DatePicker = forwardRef(
       );
     };
 
+    const { sanitizedValue, sanitizedDefaultValue } = useMemo(() => {
+      let sanitizedDefaultValue = convertToDayjsObjects(defaultValue);
+      let sanitizedValue = convertToDayjsObjects(value);
+
+      if (touched) {
+        sanitizedValue = getAllowedValue(sanitizedValue);
+        sanitizedDefaultValue = getAllowedValue(sanitizedDefaultValue);
+      }
+
+      return { sanitizedDefaultValue, sanitizedValue };
+    }, [defaultValue, value, touched, getAllowedValue]);
+
     return (
       <Provider>
         <div className="neeto-ui-input__wrapper">
           {label && <Label {...{ required, ...labelProps }}>{label}</Label>}
           <Component
             data-cy={label ? `${hyphenize(label)}-input` : "picker-input"}
+            defaultValue={sanitizedDefaultValue}
             placeholder={placeholder ?? format}
             ref={datePickerRef}
             showTime={showTime && { format: timeFormat, ...timePickerProps }}
-            value={getAllowed(convertToDayjsObjects(value), minDate, maxDate)}
+            value={sanitizedValue}
             className={classnames("neeto-ui-date-input", [className], {
               "neeto-ui-date-input--small": size === "small",
               "neeto-ui-date-input--medium": size === "medium",
@@ -126,11 +148,6 @@ const DatePicker = forwardRef(
               "neeto-ui-date-input--naked": nakedInput,
               "neeto-ui-date-input--error": !!error,
             })}
-            defaultValue={getAllowed(
-              convertToDayjsObjects(defaultValue),
-              minDate,
-              maxDate
-            )}
             popupClassName={classnames("neeto-ui-date-time-dropdown", [
               dropdownClassName, // Will be removed in the next major version
               popupClassName,

src/components/Toastr/index.jsx

@@ -44,7 +44,7 @@ const TOAST_ICON = {
   ),
   error: (
     <Warning
-      className="neeto-ui-white"
+      className="neeto-ui-text-white"
       data-cy="error-toast-icon"
       data-testid="error-toast-icon"
     />
@@ -99,7 +99,12 @@ const withUniqueCheck =
     if (toastrList.add({ type, message, buttonLabel })) {
       const config = {
         ...TOAST_CONFIG,
-        icon: showIcon && TOAST_ICON[type],
+        // The false value of the icon was ignored in the implementations before v9.0.2.
+        // After 9.0.2, the implementation is such that the icon is rendered as passed in the config.
+        // Since the `false` value used to show the default icon set internally, used a function that returns null
+        // which solved the problem.
+        // PR which addressed this issue: https://github.com/fkhadra/react-toastify/pull/758
+        icon: showIcon ? TOAST_ICON[type] : () => null,
         onClose: () => toastrList.remove({ type, message, buttonLabel }),
         ...customConfig,
       };

src/styles/components/_accordion.scss

@@ -11,18 +11,18 @@
   --neeto-ui-accordion-wrapper-border-radius: 0px;
 
   // Item
-  --neeto-ui-accordion-item-padding-x: 8px;
-  --neeto-ui-accordion-item-padding-y: 16px;
+  --neeto-ui-accordion-item-padding-x: 0.5rem;
+  --neeto-ui-accordion-item-padding-y: 1rem;
   --neeto-ui-accordion-item-font-size: var(--neeto-ui-text-base);
   --neeto-ui-accordion-item-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-accordion-item-line-height: 16px;
+  --neeto-ui-accordion-item-line-height: 1rem;
   --neeto-ui-accordion-item-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-accordion-item-bg-color: transparent;
 
   // Drop
-  --neeto-ui-accordion-drop-padding-x: 8px;
-  --neeto-ui-accordion-drop-padding-top: 4px;
-  --neeto-ui-accordion-drop-padding-bottom: 16px;
+  --neeto-ui-accordion-drop-padding-x: 0.5rem;
+  --neeto-ui-accordion-drop-padding-top: 0.25rem;
+  --neeto-ui-accordion-drop-padding-bottom: 1rem;
   --neeto-ui-accordion-drop-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-accordion-drop-margin-bottom: 0px;
 
@@ -45,8 +45,8 @@
   background-color: var(--neeto-ui-accordion-outer-wrapper-bg-color);
 
   &--padded {
-    --neeto-ui-accordion-outer-wrapper-padding-x: 24px;
-    --neeto-ui-accordion-outer-wrapper-padding-y: 24px;
+    --neeto-ui-accordion-outer-wrapper-padding-x: 1.5rem;
+    --neeto-ui-accordion-outer-wrapper-padding-y: 1.5rem;
     --neeto-ui-accordion-outer-wrapper-border-radius: var(--neeto-ui-rounded-lg);
   }
 

src/styles/components/_avatar.scss

@@ -1,17 +1,17 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   // Container
   --neeto-ui-avatar-container-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-avatar-container-width: 24px;
-  --neeto-ui-avatar-container-height: 24px;
+  --neeto-ui-avatar-container-width: 1.5rem;
+  --neeto-ui-avatar-container-height: 1.5rem;
 
   // Avatar
   --neeto-ui-avatar-width: 1.5rem;
   --neeto-ui-avatar-height: 1.5rem;
   --neeto-ui-avatar-border-radius: var(--neeto-ui-rounded-full);
 
   // Status
-  --neeto-ui-avatar-status-width: 12px;
-  --neeto-ui-avatar-status-height: 12px;
+  --neeto-ui-avatar-status-width: 0.75rem;
+  --neeto-ui-avatar-status-height: 0.75rem;
   --neeto-ui-avatar-status-bg-color: var(--neeto-ui-white);
   --neeto-ui-avatar-status-border-width: 2px;
   --neeto-ui-avatar-status-border-color: rgb(var(--neeto-ui-white));
@@ -34,18 +34,18 @@
   }
 
   &--medium {
-    --neeto-ui-avatar-container-width: 32px;
-    --neeto-ui-avatar-container-height: 32px;
+    --neeto-ui-avatar-container-width: 2rem;
+    --neeto-ui-avatar-container-height: 2rem;
   }
 
   &--large {
-    --neeto-ui-avatar-container-width: 40px;
-    --neeto-ui-avatar-container-height: 40px;
+    --neeto-ui-avatar-container-width: 2.5rem;
+    --neeto-ui-avatar-container-height: 2.5rem;
   }
 
   &--xlarge {
-    --neeto-ui-avatar-container-width: 64px;
-    --neeto-ui-avatar-container-height: 64px;
+    --neeto-ui-avatar-container-width: 4rem;
+    --neeto-ui-avatar-container-height: 4rem;
   }
 
   .neeto-ui-avatar__status {
@@ -61,18 +61,18 @@
     z-index: 4;
 
     &.neeto-ui-avatar__status-medium {
-      --neeto-ui-avatar-status-width: 12px;
-      --neeto-ui-avatar-status-height: 12px;
+      --neeto-ui-avatar-status-width: 0.75rem;
+      --neeto-ui-avatar-status-height: 0.75rem;
     }
 
     &.neeto-ui-avatar__status-large {
-      --neeto-ui-avatar-status-width: 14px;
-      --neeto-ui-avatar-status-height: 14px;
+      --neeto-ui-avatar-status-width: 0.875rem;
+      --neeto-ui-avatar-status-height: 0.875rem;
     }
 
     &.neeto-ui-avatar__status-xlarge {
-      --neeto-ui-avatar-status-width: 16px;
-      --neeto-ui-avatar-status-height: 16px;
+      --neeto-ui-avatar-status-width: 1rem;
+      --neeto-ui-avatar-status-height: 1rem;
     }
 
     &.online {

src/styles/components/_button.scss

@@ -1,16 +1,16 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-btn-padding-x: 8px;
-  --neeto-ui-btn-padding-y: 6px;
+  --neeto-ui-btn-padding-x: 0.5rem;
+  --neeto-ui-btn-padding-y: 0.375rem;
   --neeto-ui-btn-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-btn-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-btn-line-height: 16px;
+  --neeto-ui-btn-line-height: 1rem;
   --neeto-ui-btn-color: rgb(var(--neeto-ui-black));
   --neeto-ui-btn-bg-color: transparent;
   --neeto-ui-btn-border-width: 0;
   --neeto-ui-btn-border-color: transparent;
   --neeto-ui-btn-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-btn-gap: 4px;
-  --neeto-ui-btn-icon-size: 16px;
+  --neeto-ui-btn-gap: 0.25rem;
+  --neeto-ui-btn-icon-size: 1rem;
   --neeto-ui-btn-box-shadow: none;
   --neeto-ui-btn-outline: none;
 
@@ -60,8 +60,8 @@
   cursor: pointer;
 
   &.neeto-ui-btn--icon-only {
-    --neeto-ui-btn-padding-x: 6px;
-    --neeto-ui-btn-padding-y: 6px;
+    --neeto-ui-btn-padding-x: 0.375rem;
+    --neeto-ui-btn-padding-y: 0.375rem;
 
     .neeto-ui-btn__icon,
     .neeto-ui-btn__spinner svg {
@@ -73,23 +73,23 @@
 
   // size - medium - 32px
   &--size-medium {
-    --neeto-ui-btn-padding-x: 16px;
-    --neeto-ui-btn-padding-y: 8px;
-    --neeto-ui-btn-gap: 8px;
-    --neeto-ui-btn-icon-size: 20px;
+    --neeto-ui-btn-padding-x: 1rem;
+    --neeto-ui-btn-padding-y: 0.5rem;
+    --neeto-ui-btn-gap: 0.5rem;
+    --neeto-ui-btn-icon-size: 1.25rem;
   }
 
   // size - large - 40px
   &--size-large {
     --neeto-ui-btn-font-size: var(--neeto-ui-text-base);
-    --neeto-ui-btn-padding-x: 20px;
-    --neeto-ui-btn-padding-y: 12px;
-    --neeto-ui-btn-gap: 10px;
-    --neeto-ui-btn-icon-size: 24px;
+    --neeto-ui-btn-padding-x: 1.25rem;
+    --neeto-ui-btn-padding-y: 0.75rem;
+    --neeto-ui-btn-gap: 0.625rem;
+    --neeto-ui-btn-icon-size: 1.5rem;
 
     &.neeto-ui-btn--icon-only {
-      --neeto-ui-btn-padding-x: 8px;
-      --neeto-ui-btn-padding-y: 8px;
+      --neeto-ui-btn-padding-x: 0.5rem;
+      --neeto-ui-btn-padding-y: 0.5rem;
     }
   }
 

src/styles/components/_checkbox.scss

@@ -1,5 +1,5 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-checkbox-size: 16px;
+  --neeto-ui-checkbox-size: 1rem;
   --neeto-ui-checkbox-color: rgb(var(--neeto-ui-primary-500));
   --neeto-ui-checkbox-border-width: 2px;
   --neeto-ui-checkbox-border-color: rgb(var(--neeto-ui-gray-400));
@@ -24,7 +24,7 @@
   --neeto-ui-checkbox-checked-border-color: rgb(var(--neeto-ui-primary-500));
 
   // Margin
-  --neeto-ui-checkbox-label-margin: 8px;
+  --neeto-ui-checkbox-label-margin: 0.5rem;
   --neeto-ui-checkbox-label-line-height: 1.2;
 }