@dynamic-framework/ui-react 1.27.0 → 1.28.1

package/dist/types/components/DDatePicker/DDatePicker.d.ts

@@ -1,7 +1,7 @@
 import type { Locale } from 'date-fns';
 import type { ReactDatePickerProps } from 'react-datepicker';
-import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
-type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Pick<ReactDatePickerProps<CustomModifierNames, WithRange>, 'formatWeekDay' | 'onChange' | 'autoFocus' | 'inline' | 'withPortal' | 'minDate' | 'showTimeInput' | 'calendarStartDay' | 'dateFormat' | 'selectsStart' | 'selectsEnd' | 'startDate' | 'endDate' | 'fixedHeight'> & {
+import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps, StateIcons } from '../interface';
+type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & StateIcons & Pick<ReactDatePickerProps<CustomModifierNames, WithRange>, 'formatWeekDay' | 'onChange' | 'autoFocus' | 'inline' | 'withPortal' | 'minDate' | 'showTimeInput' | 'calendarStartDay' | 'dateFormat' | 'selectsStart' | 'selectsEnd' | 'startDate' | 'endDate' | 'fixedHeight' | 'renderCustomHeader'> & {
     date?: string | null;
     selectsRange?: boolean;
     inputLabel?: string;
@@ -25,5 +25,5 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     invalid?: boolean;
     valid?: boolean;
 };
-export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, renderCustomHeader: renderCustomHeaderProp, validIcon, invalidIcon, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DDatePickerInput/DDatePickerInput.d.ts

@@ -5,6 +5,8 @@ type Props = BaseProps & {
     value?: string;
     onClick?: () => void;
     inputLabel?: string;
+    validIcon?: string;
+    invalidIcon?: string;
 } & Omit<ComponentProps<typeof DInput>, 'type' | 'onIconEndClick' | 'value'>;
 declare const ForwardedDDatePickerInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDDatePickerInput;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -10,6 +10,6 @@ type ToastData = {
 };
 type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
 export default function useDToast(): {
-    toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps: Props) => string;
+    toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps?: Props) => string;
 };
 export {};

package/jest/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/jest/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/jest/setup.js

@@ -0,0 +1,16 @@
+jest.mock('react-content-loader', () => jest.fn());
+
+jest.mock('react-responsive-pagination', () => jest.fn());
+
+jest.mock('@react-input/mask', () => ({
+  InputMask: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (text) => text,
+    i18n: {
+      changeLanguage: () => new Promise(() => {}),
+    },
+  }),
+}));

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.27.0",
+  "version": "1.28.1",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -65,7 +65,8 @@
   "types": "./dist/types/index.d.ts",
   "files": [
     "dist/",
-    "src/style"
+    "src/style",
+    "jest/"
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.1",
@@ -81,7 +82,6 @@
     "react-content-loader": "^6.2.1",
     "react-datepicker": "^4.21.0",
     "react-dropzone": "^14.2.3",
-    "react-hot-toast": "^2.4.1",
     "react-responsive-pagination": "^2.4.1",
     "react-select": "^5.8.0"
   },
@@ -106,7 +106,7 @@
     "@storybook/theming": "^7.5.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.6",
+    "@types/jest": "^29.5.12",
     "@types/node": "^18.15.3",
     "@types/react": "^18.2.31",
     "@types/react-datepicker": "^4.19.1",
@@ -132,6 +132,7 @@
     "postcss-cli": "^10.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.3.1",
     "recharts": "^2.12.7",
     "rimraf": "^5.0.5",
@@ -140,13 +141,14 @@
     "storybook": "^7.5.1",
     "stylelint": "^15.11.0",
     "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.2.3",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.3.1",
     "recharts": "^2.12.7"
   },
@@ -155,5 +157,5 @@
       "optional": true
     }
   },
-  "gitHead": "6d8d838d164ddfddbb407e5bac99965970656a64"
+  "gitHead": "a3946a6a0d9769690a19880242ccadcec5dc7960"
 }

package/src/style/abstracts/variables/_+import.scss

@@ -80,6 +80,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "alerts";
 @import "progress";
 @import "list-group";
+@import "toast";
 @import "carousel";
 @import "close";
 @import "offcanvas";

package/src/style/abstracts/variables/_options.scss

@@ -12,7 +12,7 @@ $enable-reduced-motion: true !default;
 $enable-smooth-scroll: true !default;
 $enable-grid-classes: true !default;
 $enable-container-classes: true !default;
-$enable-cssgrid: false !default;
+$enable-cssgrid: true !default;
 $enable-button-pointers: true !default;
 $enable-rfs: true !default;
 $enable-validation-icons: false !default;

package/src/style/abstracts/variables/_toast.scss

@@ -0,0 +1,5 @@
+$toast-background-color: var(--#{$prefix}white) !default;
+$toast-header-color: var(--#{$prefix}body-color) !default;
+$toast-header-background-color: var(--#{$prefix}white) !default;
+$toast-border-color: var(--#{$prefix}border-color) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow-sm) !default;

package/src/style/base/_+import.scss

@@ -54,4 +54,5 @@
 @import "label";
 @import "avatar";
 @import "backdrop";
+@import "toast";
 @import "tooltip";

package/src/style/base/_toast.scss

@@ -0,0 +1,56 @@
+.toast {
+  --#{$prefix}toast-header-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}toast-color: var(--#{$prefix}gray-900);
+  --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
+  --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
+
+  .toast-title {
+    margin-right: auto;
+    margin-bottom: 0;
+  }
+
+  .toast-header {
+    gap: var(--#{$prefix}toast-header-gap);
+  }
+
+  .toast-body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .toast-icon.d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}toast-icon-color);
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+    $color: color-contrast-var($value);
+    &.toast-#{$theme} {
+      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme});
+      --#{$prefix}toast-color: #{$color};
+      --#{$prefix}toast-close-color: #{$color};
+      --#{$prefix}toast-header-color: #{$color};
+      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme});
+      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme});
+
+      .d-close {
+        color: var(--#{$prefix}toast-close-color);
+      }
+    }
+  }
+
+  &.toast-soft {
+    --#{$prefix}toast-color: var(--#{$prefix}gray-900);
+    --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
+    --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
+
+    @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+      &.toast-#{$theme} {
+        --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
+        --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
+        --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
+        --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
+      }
+    }
+  }
+}