@dynamic-framework/ui-react 1.33.0 → 1.35.0

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

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'react';
+import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
+import DButton from '../../DButton';
+import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../../interface';
+export declare enum PickerType {
+    Default = "default",
+    Quarter = "quarter",
+    Month = "month",
+    Year = "year"
+}
+type Props = BaseProps & FamilyIconProps & ReactDatePickerCustomHeaderProps & {
+    changeMonth: (monthNumber: number) => void;
+    changeYear: (yearNumber: number) => void;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
+    decreaseYear: () => void;
+    increaseYear: () => void;
+    pickerType?: PickerType;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    prevYearButtonDisabled: boolean;
+    nextYearButtonDisabled: boolean;
+    iconPrev?: string;
+    iconNext?: string;
+    prevMonthAriaLabel?: string;
+    nextMonthAriaLabel?: string;
+    prevYearAriaLabel?: string;
+    nextYearAriaLabel?: string;
+    iconSize?: ComponentSize;
+    buttonVariant?: ButtonVariant;
+    buttonTheme?: string;
+    minYearSelect?: number;
+    maxYearSelect?: number;
+    showHeaderSelectors?: boolean;
+    monthsShown?: number;
+} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onClick' | 'disabled'>;
+export default function DDatePickerHeaderSelector({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, decreaseYear, increaseYear, monthDate, pickerType, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown, iconPrev, iconNext, prevYearButtonDisabled, nextYearButtonDisabled, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, prevYearAriaLabel, nextYearAriaLabel, iconSize, buttonVariant, buttonTheme, style, className, minYearSelect, maxYearSelect, showHeaderSelectors, customHeaderCount, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/{DDatePickerInput → DDatePicker/components}/DDatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import DInput from '../DInput';
-import type { BaseProps } from '../interface';
+import { BaseProps } from '../../interface';
+import DInput from '../../DInput';
 type Props = BaseProps & {
     value?: string;
     onClick?: () => void;

package/dist/types/components/{DDatePickerTime → DDatePicker/components}/DDatePickerTime.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import DInput from '../DInput';
-import type { BaseProps } from '../interface';
+import { BaseProps } from '../../interface';
+import DInput from '../../DInput';
 type Props = BaseProps & {
     value?: string;
     onChange?: (value?: string) => void;

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
-declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & {
+declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -5,7 +5,7 @@ type NonDInputProps = {
     maxValue: number;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -19,5 +19,5 @@ declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "value" | "onChange" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "type" | "onChange" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCounter;

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

@@ -6,7 +6,7 @@ type NonDInputProps = {
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -20,5 +20,5 @@ declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticCompo
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "value" | "onChange">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "type" | "onChange">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCurrencyBase;

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

@@ -8,7 +8,7 @@ type NonDInputProps = {
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -22,5 +22,5 @@ declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticCompo
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "value" | "onChange">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "type" | "onChange">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCurrencyBase;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { MaskProps } from '@react-input/mask';
-declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BaseProps, LabelIconProps } from '../interface';
-declare const ForwardedDInputRange: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type">, "label" | "ariaLabel" | keyof BaseProps | keyof LabelIconProps | "filledValue"> & BaseProps & LabelIconProps & {
+declare const ForwardedDInputRange: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type">, "label" | keyof BaseProps | keyof LabelIconProps | "ariaLabel" | "filledValue"> & BaseProps & LabelIconProps & {
     label?: string | undefined;
     ariaLabel?: string | undefined;
     filledValue?: boolean | undefined;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "size" | "loading" | "label" | "value" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -11,8 +11,5 @@ type Props = BaseProps & PropsWithChildren<{
     setOpen?: (open: boolean) => void;
     adjustContentToRender?: boolean;
 }>;
-/**
- * @deprecated
- */
 export default function DPopover({ children, renderComponent, open, setOpen, adjustContentToRender, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,11 +2,8 @@ import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     line1: string;
     line2: string;
-    actionLinkText?: string;
-    actionLinkTheme?: string;
     actionIcon?: string;
-    secondaryActionIcon?: string;
-    secondaryActionAriaLabel?: string;
+    actionIconTheme?: string;
     actionIconFamilyClass?: string;
     actionIconFamilyPrefix?: string;
     representativeImage?: string;
@@ -15,11 +12,9 @@ type Props = BaseProps & {
     representativeIconHasCircle?: boolean;
     representativeIconFamilyClass?: string;
     representativeIconFamilyPrefix?: string;
+    href?: string;
+    hrefTarget?: string;
     onClick?: () => void;
-    onClickSecondary?: () => void;
 };
-/**
- * @deprecated
- */
-export default function DQuickActionButton({ line1, line2, className, actionLinkText, actionLinkTheme, actionIcon, secondaryActionIcon, secondaryActionAriaLabel, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DQuickActionButton({ line1, line2, className, actionIcon, actionIconFamilyClass, actionIconFamilyPrefix, actionIconTheme, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, href, hrefTarget, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/contexts/DContext.d.ts

@@ -33,11 +33,20 @@ type IconMapProps = {
         increase: string;
     };
 };
+export type BreakpointProps = {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
 type Props<T extends Record<string, unknown>> = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
     iconMap: IconMapProps;
+    breakpoints: BreakpointProps;
 } & PortalContextProps<T>;
 type Context<T extends Record<string, unknown>> = Props<T> & {
     setContext: (value: Partial<Props<T>>) => void;

package/dist/types/hooks/index.d.ts

@@ -6,3 +6,5 @@ export { default as useStackState } from './useStackState';
 export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
 export { default as usePortal } from './usePortal';
 export { default as useItemSelection } from './useItemSelection';
+export { default as useMediaQuery } from './useMediaQuery';
+export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';

package/dist/types/hooks/useMediaBreakpointUp.d.ts

@@ -0,0 +1,6 @@
+export declare function useMediaBreakpointUpXs(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpSm(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpMd(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpLg(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpXl(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpXxl(useListener?: boolean): boolean;

package/dist/types/hooks/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(mediaQuery: string, useListener?: boolean): boolean;

package/dist/types/utils/attr-accept.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Check if the provided file type should be accepted by the input with accept attribute.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
+ *
+ * Inspired by https://github.com/enyo/dropzone
+ *
+ * @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
+ * @param acceptedFiles {string|string[]}
+ * @returns {boolean}
+ */
+export default function attrAccept(file: File, acceptedFiles: string | Array<string>): boolean;

package/dist/types/utils/getCssVariable.d.ts

@@ -0,0 +1 @@
+export default function getCssVariable(variable: string): string;

package/dist/types/utils/getKeyboardFocusableElements.d.ts

@@ -0,0 +1 @@
+export default function getKeyboardFocusableElements(container?: HTMLElement): HTMLElement[];

package/dist/types/utils/index.d.ts

@@ -2,3 +2,5 @@ export { default as formatCurrency } from './formatCurrency';
 export { default as configureI18n } from './configureI18n';
 export { default as getQueryString } from './getQueryString';
 export { default as changeQueryString } from './changeQueryString';
+export { default as getCssVariable } from './getCssVariable';
+export * from './mediaQuery';

package/dist/types/utils/mediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare function subscribeToMediaQuery(query: string, callback: () => void): () => void;
+export declare function checkMediaQuery(query: string): boolean;

package/jest/setup.js

@@ -14,3 +14,17 @@ jest.mock('react-i18next', () => ({
     },
   }),
 }));
+
+global.window = {};
+Object.defineProperty(global.window, 'matchMedia', {
+  writable: true,
+  value: jest.fn(() => ({
+    matches: false,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.33.0",
+  "version": "1.35.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -47,6 +47,7 @@
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
+    "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
     "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
     "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
@@ -56,10 +57,10 @@
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build --docs -o docs",
     "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
-    "eslint:src": "eslint src/**/*{.ts,.tsx} --ignore-pattern '**/*.spec.tsx'",
+    "eslint:src": "eslint 'src/**/*.ts' 'src/**/*.tsx' --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
     "eslint:test": "eslint src/**/*.spec.tsx",
-    "stylelint": "stylelint \"**/*.{css,scss}\" --rd",
+    "stylelint": "stylelint '**/*.css' '**/*.scss' --rd",
     "postversion": "npm run build:scss",
     "publish:cdn": "npm run publish:cdn-version && npm run publish:cdn-latest",
     "publish:cdn-version": "node scripts/publish-cdn.js",
@@ -85,15 +86,14 @@
     "@react-input/mask": "~1.0.20",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "@types/react-datepicker": "~4.19.1",
     "bootstrap": "~5.3.3",
     "classnames": "~2.3.2",
     "currency.js": "~2.0.4",
     "date-fns": "~2.30.0",
+    "file-selector": "^2.1.2",
     "i18next": "~23.6.0",
     "react-content-loader": "~6.2.1",
-    "react-datepicker": "~4.21.0",
-    "react-dropzone": "~14.2.3",
+    "react-datepicker": "~8.3.0",
     "react-responsive-pagination": "^2.9.0",
     "react-select": "^5.8.3"
   },
@@ -123,7 +123,6 @@
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
     "@types/react": "~18.2.31",
-    "@types/react-datepicker": "~4.19.1",
     "@types/react-dom": "~18.2.14",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
@@ -147,25 +146,25 @@
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~18.2.0",
+    "react": "~18.3.1",
     "react-dom": "~18.2.0",
-    "react-hot-toast": "~2.4.1",
+    "react-hot-toast": "~2.5.2",
     "react-i18next": "~13.3.1",
     "recharts": "~2.12.7",
     "rimraf": "~5.0.5",
     "rollup": "^4.27.4",
     "sass": "~1.69.4",
     "storybook": "~8.2.9",
-    "stylelint": "~15.11.0",
-    "stylelint-config-twbs-bootstrap": "~11.0.1",
+    "stylelint": "^16.16.0",
+    "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
+    "react": "~18.3.1",
     "react-dom": "~18.2.0",
-    "react-hot-toast": "~2.4.1",
+    "react-hot-toast": "~2.5.2",
     "react-i18next": "~13.3.1",
     "recharts": "~2.12.7"
   },
@@ -174,4 +173,4 @@
       "optional": true
     }
   }
-}
+}

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

@@ -95,4 +95,5 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "chips";
 @import "collapse-icon-text";
 @import "box-file";
+@import "datepicker"
 // end custom

package/src/style/abstracts/variables/_box-file.scss

@@ -1,16 +1,23 @@
 $box-file-gap: var(--#{$prefix}ref-spacer-4) !default;
+$box-file-list-gap: var(--#{$prefix}ref-spacer-4) !default;
 $box-file-background: unset !default;
-$box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
-$box-file-border-radius: var(--#{$prefix}border-radius) !default;
+$box-file-border: 1px dashed var(--#{$prefix}gray-100) !default;
+$box-file-border-radius: var(--#{$prefix}ref-spacer-1) !default;
 $box-file-padding: var(--#{$prefix}ref-spacer-8) !default;
 $box-file-content-max-width: 220px !default;
 $box-file-icon-size: var(--#{$prefix}ref-spacer-14) !default;
-$box-file-icon-color: var(--#{$prefix}secondary-300) !default;
+$box-file-icon-color: var(--#{$prefix}primary) !default;
+$box-file-list-padding: var(--#{$prefix}ref-spacer-0) !default;
+$box-file-hover-border: 1px dashed var(--#{$prefix}primary-700) !default;
+$box-file-hover-background: var(--#{$prefix}primary-25) !default;
 
-$box-file-hover-border: 1px dashed var(--#{$prefix}secondary-700) !default;
-$box-file-hover-background: var(--#{$prefix}secondary-100) !default;
-
-$box-file-selected-border: 1px dashed var(--#{$prefix}secondary-700) !default;
+$box-file-selected-border: 1px dashed var(--#{$prefix}primary-700) !default;
 $box-file-selected-background: var(--#{$prefix}white) !default;
 
 $box-file-files-color: var(--#{$prefix}gray-500) !default;
+
+$box-file-disabled-border: 1px dashed var(--#{$prefix}gray-300) !default;
+$box-file-disabled-background: var(--#{$prefix}gray-100) !default;
+
+$box-file-valid-border: 1px dashed var(--#{$prefix}success) !default;
+$box-file-invalid-border: 1px dashed var(--#{$prefix}danger) !default;

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

@@ -1,7 +1,7 @@
 // Cards
 
 // scss-docs-start card-variables
-$card-border-width: 0px !default; // stylelint-disable-line length-zero-no-unit
+$card-border-width: 0px !default;
 $card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
 $card-spacer-y: $spacer-6 !default;

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

@@ -0,0 +1,50 @@
+// Datepicker
+// scss-docs-start datepicker-variables
+$datepicker-bg: var(--#{$prefix}white) !default;
+$datepicker-border-color: var(--#{$prefix}gray-400) !default;
+$datepicker-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$datepicker-day-border-radius: .25rem !default;
+// Header
+$datepicker-header-bg: var(--#{$prefix}gray-100) !default;
+$datepicker-header-padding: var(--#{$prefix}ref-spacer-2) 0 !default;
+$datepicker-header-font-weight: var(--#{$prefix}fw-bold) !default;
+$datepicker-day-names-color: var(--#{$prefix}body-color) !default;
+$datepicker-day-names-font-size: var(--#{$prefix}fs-small) !default;
+
+// Body
+$datepicker-body-margin: var(--#{$prefix}ref-spacer-2) !default;
+$datepicker-body-gap: var(--#{$prefix}ref-spacer-2) !default;
+
+// Day
+$datepicker-day-outside-month-color: var(--#{$prefix}gray-700) !default;
+$datepicker-day-bg: var(--#{$prefix}secondary) !default;
+$datepicker-day-hover-bg: var(--#{$prefix}gray-100) !default;
+$datepicker-day-width: var(--#{$prefix}ref-spacer-7) !default;
+
+// Day selected
+$datepicker-day-selected-color: var(--#{$prefix}white) !default;
+$datepicker-day-selected-bg: var(--#{$prefix}secondary) !default;
+
+// Day Disabled
+$datepicker-day-disabled-color: var(--#{$prefix}gray-400) !default;
+
+// Week
+$datepicker-week-number-bg: var(--#{$prefix}white) !default;
+$datepicker-week-number-hover-bg: $datepicker-day-hover-bg !default;
+$datepicker-week-number-hover-color: var(--#{$prefix}body-color) !default;
+$datepicker-week-number-border-radius: .25rem !default;
+
+// Range
+$datepicker-range-start-color: var(--#{$prefix}white) !default;
+$datepicker-range-start-bg: var(--#{$prefix}secondary-600) !default;
+$datepicker-range-end-color: var(--#{$prefix}white) !default;
+$datepicker-range-end-bg: var(--#{$prefix}secondary-600) !default;
+$datepicker-in-range-bg: var(--#{$prefix}secondary-200) !default;
+$datepicker-range-color: var(--#{$prefix}body-color) !default;
+$datepicker-in-range-hover-bg: var(--#{$prefix}secondary-400) !default;
+$datepicker-in-range-disabled-color: var(--#{$prefix}secondary-300) !default;
+$datepicker-in-range-disabled-bg: var(--#{$prefix}gray-300) !default;
+
+// Portal
+$datepicker-portal-bg: rgba(var(--#{$prefix}black-rgb), .3) !default;
+// scss-docs-start breadcrumb-variables

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

@@ -61,12 +61,13 @@ $form-switch-width: 2em !default;
 $form-switch-padding-start: $form-switch-width !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$gray-300}'/></svg>") !default;
 $form-switch-focus-color: $component-focus-border-color !default;
+$form-switch-border-radius: $form-switch-width !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$secondary-300}'/></svg>") !default;
 
-// custom
+// custom form-switch-variables
 $form-switch-valid-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$success}'/></svg>") !default;
 $form-switch-invalid-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$danger}'/></svg>") !default;
-// end custom
+// end custom form-switch-variables
 
 $form-switch-checked-color: var(--#{$prefix}white) !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$white}'/></svg>") !default;
@@ -78,13 +79,15 @@ $input-group-addon-border-color: transparent !default;
 // scss-docs-end input-group-variables
 
 // custom
+$input-group-sm-icon-size: $spacer-4 !default;
+$input-group-lg-icon-size: $spacer-7 !default;
 $form-text-padding-y: 0 !default;
 $form-text-padding-x: 0 !default;
 // end custom
 
 // scss-docs-start form-select-variables
 $form-select-disabled-color: $input-disabled-color !default;
-$form-select-bg-size: 24px !default; // In pixels because image dimensions
+$form-select-bg-size: 16px !default; // In pixels because image dimensions
 $form-select-bg-opacity: 0 !default;
 $form-select-indicator-color: var(--#{$prefix}gray-500) !default;
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$gray-500}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/></svg>") !default;

package/src/style/base/_form-switch.scss

@@ -1,9 +1,30 @@
 .form-switch {
+  --#{$prefix}form-switch-width: #{$form-switch-width};
+  --#{$prefix}form-switch-padding-start: #{$form-switch-padding-start} * -1;
+  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+  --#{$prefix}form-switch-border-radius: #{$form-switch-border-radius};
+  --#{$prefix}form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image)};
+  --#{$prefix}form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
+
+  .form-check-input {
+    width: var(--#{$prefix}form-switch-width);
+    margin-left: var(--#{$prefix}form-switch-padding-start);
+    border-radius: var(--#{$prefix}form-switch-border-radius);
+
+    &:focus {
+      --#{$prefix}form-switch-bg: var(--#{$prefix}form-switch-focus-bg-image);
+    }
+
+    &:checked {
+      --#{$prefix}form-switch-bg: var(--#{$prefix}form-switch-checked-bg-image);
+    }
+  }
+
   .form-check-input.is-valid:not(:checked) {
-    --bs-form-switch-bg: #{escape-svg($form-switch-valid-bg-image)};
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-valid-bg-image)};
   }
 
   .form-check-input.is-invalid:not(:checked) {
-    --bs-form-switch-bg: #{escape-svg($form-switch-invalid-bg-image)};
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-invalid-bg-image)};
   }
 }

package/src/style/base/_input-group.scss

@@ -35,6 +35,10 @@
 .input-group > .form-floating:not(:first-child) .form-select,
 .input-group > .form-floating:not(:first-child) .form-control {
   padding-left: 0;
+
+  ~label {
+    padding-left: 0;
+  }
 }
 
 .input-group > .form-floating:not(:last-child) .form-select {
@@ -62,6 +66,18 @@
   --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
   --#{$prefix}input-disabled-color: #{$input-disabled-color};
 
+  // input group icon sizes
+  --#{$prefix}input-group-sm-icon-size: #{$input-group-sm-icon-size};
+  --#{$prefix}input-group-lg-icon-size: #{$input-group-lg-icon-size};
+
+  &.input-group-sm .d-icon {
+    --#{$prefix}icon-component-size: var(--#{$prefix}input-group-sm-icon-size);
+  }
+
+  &.input-group-lg .d-icon {
+    --#{$prefix}icon-component-size: var(--#{$prefix}input-group-lg-icon-size);
+  }
+
   border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
   @include border-radius(var(--#{$prefix}input-border-radius), 0);
 
@@ -73,6 +89,7 @@
   // validation states
   @each $state, $data in $form-validation-states {
     $border-color: map-get($data, "border-color");
+    $color: map-get($data, "color");
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
     $box-shadow: map-get($data, "focus-box-shadow");
 
@@ -84,7 +101,7 @@
       }
 
       ~ .form-text {
-        color: $border-color;
+        color: $color;
       }
 
       .input-group-validation-icon {

package/src/style/base/_nav.scss

@@ -19,7 +19,6 @@
 .nav-pills,
 .nav-underline {
   gap: var(--#{$prefix}nav-tabs-nav-gap);
-  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
 
   &.flex-column {
     flex: 1 0 auto;