@dynamic-framework/ui-react 1.36.2 → 2.0.0-dev.10

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

@@ -1,6 +1,7 @@
 export { default as DAlert } from './DAlert';
 export { default as DAvatar } from './DAvatar';
 export { default as DBadge } from './DBadge';
+export { default as DBox } from './DBox';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
 export { default as DButtonIcon } from './DButtonIcon';
@@ -11,14 +12,15 @@ export { default as DCollapse } from './DCollapse';
 export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
+export { default as DLayout, DLayoutPane, } from './DLayout';
 export { default as DIconBase } from './DIconBase';
 export { default as DInput } from './DInput';
 export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
-export { default as DInputCurrencyBase } from './DInputCurrencyBase';
 export { default as DInputCurrency } from './DInputCurrency';
-export { default as DInputSearch } from './DInputSearch';
 export { default as DInputPassword } from './DInputPassword';
+export { default as DPasswordStrengthMeter } from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect } from './DInputSelect';
@@ -26,25 +28,22 @@ export type { DInputSelectDefaultOption, DInputSelectProps } from './DInputSelec
 export { default as DInputSwitch } from './DInputSwitch';
 export { default as DInputRange } from './DInputRange';
 export { default as DSelect } from './DSelect';
-export { default as DList, DListItem, } from './DList';
 export { default as DListGroup, DListGroupItem, } from './DListGroup';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';
 export { default as DPaginator } from './DPaginator';
 export { default as DPopover } from './DPopover';
 export { default as DProgress } from './DProgress';
-export { default as DQuickActionButton } from './DQuickActionButton';
-export { default as DQuickActionCheck } from './DQuickActionCheck';
-export { default as DQuickActionSelect } from './DQuickActionSelect';
-export { default as DQuickActionSwitch } from './DQuickActionSwitch';
-export { default as DSkeleton } from './DSkeleton';
 export { default as DStepper } from './DStepper';
 export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
+export { default as DTimeline } from './DTimeline';
 export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
-export { default as DTableHead } from './DTableHead';
 export { default as DInputPhone } from './DInputPhone';
+export { default as DCreditCard } from './DCreditCard';
+export { default as DDropdown } from './DDropdown';
+export { default as DVoucher } from './DVoucher';

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

@@ -24,12 +24,6 @@ export type FamilyIconProps = {
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
 };
-export type LabelIconProps = {
-    labelIcon?: string;
-    labelIconFamilyClass?: string;
-    labelIconFamilyPrefix?: string;
-    labelIconMaterialStyle?: boolean;
-};
 export type StartIconProps = {
     iconStart?: string;
     iconStartDisabled?: boolean;
@@ -48,9 +42,10 @@ export type EndIconProps = {
     iconEndTabIndex?: number;
     iconEndMaterialStyle?: boolean;
 };
-export type AlertTheme = 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+export type ComponentColor = string;
+export type ComponentStateColor = 'success' | 'danger' | 'warning' | 'info';
 export type AlertThemeIconMap = {
-    [state in AlertTheme]: string;
+    [state in ComponentStateColor]: string;
 };
 export type ButtonVariant = 'outline' | 'link';
 export type ButtonType = 'submit' | 'reset' | 'button';

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

@@ -24,8 +24,6 @@ type IconMapProps = {
     calendar: string;
     check: string;
     input: {
-        invalid: string;
-        valid: string;
         search: string;
         show: string;
         hide: string;

package/dist/types/hooks/tests/useDisableBodyScrollEffect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useDisableInputWheel.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useFormatCurrency.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useInputCurrency.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useItemSelection.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/usePortal.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useProvidedRefOrCreate.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/hooks/tests/useStackState.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@ import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
 import type { CustomStyles } from '../components/interface';
 export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>): {
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;

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

@@ -13,4 +13,4 @@ import React from 'react';
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
  */
-export default function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef>): React.RefObject<TRef>;
+export default function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;

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

@@ -0,0 +1,35 @@
+/**
+ * A mapping of breakpoint names to values for responsive properties.
+ *
+ * This type allows you to specify a value for one or more
+ * breakpoints ('xs', 'sm', 'md', 'lg', 'xl', 'xxl').
+ * When used with `useResponsiveProp`, the value for
+ * the highest matching breakpoint will be selected.
+ *
+ * Usage example:
+ * ```ts
+ * const prop: ResponsiveProp = { xs: "small", md: "medium", xl: "large" };
+ * ```
+ */
+export type ResponsiveProp = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', string>>;
+/**
+ * React hook to resolve a responsive property value based on the current viewport breakpoint.
+ *
+ * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.
+ * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.
+ * If no breakpoints match, `undefined` is returned.
+ *
+ * @param useListener - Whether to listen for breakpoint changes (default: false).
+ * @returns An object with a `responsivePropValue` function that takes a
+ * `ResponsiveProp` and returns the resolved value.
+ *
+ * Usage example:
+ * ```ts
+ * const { responsivePropValue } = useResponsiveProp();
+ * const value = responsivePropValue({ xs: "A", md: "B", xl: "C" });
+ * // value will be "C" if xl breakpoint is active, "B" if md is active, etc.
+ * ```
+ */
+export declare function useResponsiveProp(useListener?: boolean): {
+    responsivePropValue: (prop: ResponsiveProp) => string | undefined;
+};

package/dist/types/types/polymorphic.d.ts

@@ -27,11 +27,11 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
      * so that events are typed when using JSX.IntrinsicElements.
      */
     <As = IntrinsicElementString>(props: As extends '' ? {
-        as: keyof JSX.IntrinsicElements;
+        as: keyof React.JSX.IntrinsicElements;
     } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
         as: As;
-    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+    }> : As extends keyof React.JSX.IntrinsicElements ? Merge<React.JSX.IntrinsicElements[As], OwnProps & {
         as: As;
-    }> : never): React.ReactElement | null;
+    }> : never): React.ReactElement<unknown> | null;
 }
 export type { ForwardRefComponent, OwnProps, IntrinsicElement, Merge };

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

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/changeQueryString.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/configureI18n.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/formatCurrency.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/getQueryString.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/validatePhoneNumber.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/jest/setup.js

@@ -1,6 +1,97 @@
-jest.mock('react-content-loader', () => jest.fn());
+/* eslint-disable react/prop-types */
+const React = require('react');
 
-jest.mock('react-responsive-pagination', () => jest.fn());
+jest.mock('react-responsive-pagination', () => {
+  function MockPagination(props) {
+    const {
+      current,
+      total,
+      onPageChange,
+      className = '',
+    } = props;
+
+    const handleClick = React.useCallback(
+      (page) => {
+        if (page !== current && page >= 1 && page <= total) {
+          onPageChange(page);
+        }
+      },
+      [current, total, onPageChange],
+    );
+
+    return React.createElement('div', {
+      className,
+      'data-testid': 'responsive-pagination',
+    }, [
+      React.createElement('button', {
+        type: 'button',
+        key: 'prev',
+        onClick: () => handleClick(current - 1),
+        disabled: current === 1,
+        'data-testid': 'pagination-previous',
+      }, 'Previous'),
+
+      ...(function getPageButtons() {
+        const pageButtons = [];
+        const windowSize = 2; // Show current ±2
+        const startPage = Math.max(1, current - windowSize);
+        const endPage = Math.min(total, current + windowSize);
+        // Always show first page
+        if (startPage > 1) {
+          pageButtons.push(React.createElement('button', {
+            key: 1,
+            type: 'button',
+            onClick: () => handleClick(1),
+            'data-testid': 'pagination-page-1',
+            'aria-current': current === 1 ? 'page' : undefined,
+            style: { fontWeight: current === 1 ? 'bold' : 'normal' },
+          }, 1));
+          if (startPage > 2) {
+            pageButtons.push(React.createElement('span', { key: 'start-ellipsis', style: { margin: '0 4px' } }, '...'));
+          }
+        }
+        // Window of page buttons
+        for (let page = startPage; page <= endPage; page += 1) {
+          if (!(page === 1 && startPage > 1)) {
+            pageButtons.push(React.createElement('button', {
+              key: page,
+              type: 'button',
+              onClick: () => handleClick(page),
+              'data-testid': `pagination-page-${page}`,
+              'aria-current': page === current ? 'page' : undefined,
+              style: { fontWeight: page === current ? 'bold' : 'normal' },
+            }, page));
+          }
+        }
+        // Always show last page
+        if (endPage < total) {
+          if (endPage < total - 1) {
+            pageButtons.push(React.createElement('span', { key: 'end-ellipsis', style: { margin: '0 4px' } }, '...'));
+          }
+          pageButtons.push(React.createElement('button', {
+            key: total,
+            type: 'button',
+            onClick: () => handleClick(total),
+            'data-testid': `pagination-page-${total}`,
+            'aria-current': total === current ? 'page' : undefined,
+            style: { fontWeight: total === current ? 'bold' : 'normal' },
+          }, total));
+        }
+        return pageButtons;
+      }()),
+
+      React.createElement('button', {
+        key: 'next',
+        type: 'button',
+        onClick: () => handleClick(current + 1),
+        disabled: current === total,
+        'data-testid': 'pagination-next',
+      }, 'Next'),
+    ]);
+  }
+
+  return MockPagination;
+});
 
 jest.mock('@react-input/mask', () => ({
   InputMask: jest.fn(),

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.36.2",
+  "version": "2.0.0-dev.10",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -49,9 +49,13 @@
     "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",
+    "dev:ts": "tsc -p tsconfig.build.json",
+    "dev:rollup": "rollup -c rollup.config.mjs",
+    "dev:scss": "node scripts/build-scss.js",
+    "build:once": "npm run dev:ts && npm run dev:rollup && sleep 0.5 && npm run dev:scss && yalc push",
+    "watch:ds": "npx nodemon --watch src --ext ts,tsx,scss --delay 1000ms --exec \"npm run build:once\"",
+    "cp": "npm run cp:bootstrap && npm run cp:popper",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
-    "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
     "cp:popper": "scripts/cp-popper.sh",
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
@@ -67,12 +71,14 @@
     "publish:cdn-version": "node scripts/publish-cdn.js",
     "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
+    "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
-    "prepare": "husky install",
-    "commitlint": "commitlint --edit"
+    "prepare": "husky",
+    "commitlint": "commitlint --edit",
+    "verify": "node scripts/verify.js"
   },
   "engines": {
-    "node": ">=20.13.1"
+    "node": ">=22.0.0"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -83,22 +89,23 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "~0.26.1",
-    "@react-input/mask": "~1.0.20",
+    "@floating-ui/react": "~0.27.16",
+    "@react-input/mask": "~2.0.4",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "bootstrap": "~5.3.3",
-    "classnames": "~2.3.2",
+    "bootstrap": "~5.3.8",
+    "classnames": "~2.5.1",
     "currency.js": "~2.0.4",
-    "date-fns": "~2.30.0",
-    "file-selector": "^2.1.2",
-    "google-libphonenumber": "^3.2.40",
-    "i18next": "~23.6.0",
-    "react-content-loader": "~6.2.1",
+    "date-fns": "~4.1.0",
+    "file-selector": "~2.1.2",
+    "google-libphonenumber": "~3.2.43",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
+    "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
-    "react-international-phone": "~4.5.0",
-    "react-responsive-pagination": "^2.9.0",
-    "react-select": "^5.8.3"
+    "react-international-phone": "~4.6.0",
+    "react-responsive-pagination": "~2.11.3",
+    "react-select": "~5.10.2"
   },
   "devDependencies": {
     "@babel/core": "~7.23.2",
@@ -110,32 +117,25 @@
     "@mdx-js/react": "~2.3.0",
     "@popperjs/core": "~2.11.8",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "~8.2.9",
-    "@storybook/addon-actions": "~8.2.9",
-    "@storybook/addon-essentials": "~8.2.9",
-    "@storybook/addon-interactions": "~8.2.9",
-    "@storybook/addon-links": "~8.2.9",
-    "@storybook/addon-viewport": "~8.2.9",
-    "@storybook/blocks": "~8.2.9",
-    "@storybook/react": "~8.2.9",
-    "@storybook/react-vite": "~8.2.9",
-    "@storybook/test": "~8.2.9",
-    "@storybook/theming": "~8.2.9",
-    "@testing-library/jest-dom": "~6.1.4",
-    "@testing-library/react": "~14.0.0",
+    "@storybook/addon-a11y": "~9.0.17",
+    "@storybook/addon-docs": "~9.0.17",
+    "@storybook/addon-links": "~9.0.17",
+    "@storybook/react-vite": "~9.0.17",
+    "@testing-library/jest-dom": "~6.6.3",
+    "@testing-library/react": "~16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/google-libphonenumber": "^7.4.30",
+    "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
-    "@types/node": "~18.15.3",
-    "@types/react": "~18.2.31",
-    "@types/react-dom": "~18.2.14",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
+    "@vitejs/plugin-react": "~4.7.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "~9.1.3",
-    "bootstrap-icons": "~1.13.1",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -144,41 +144,41 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "formik": "^2.4.6",
-    "glob": "~10.3.10",
-    "husky": "~8.0.3",
+    "formik": "~2.4.8",
+    "framer-motion": "^12.23.24",
+    "glob": "^11.1.0",
+    "husky": "~9.1.7",
+    "i18next": "~25.6.1",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
     "jest-cli": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~18.3.1",
-    "react-dom": "~18.2.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~2.12.7",
-    "rimraf": "~5.0.5",
-    "rollup": "^4.27.4",
+    "react": "~19.2.1",
+    "react-dom": "~19.2.1",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "recharts": "~3.3.0",
+    "remark-gfm": "~4.0.1",
+    "rimraf": "~6.1.0",
+    "rollup": "~4.53.1",
     "sass": "~1.69.4",
-    "storybook": "~8.2.9",
+    "storybook": "~9.0.17",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
     "typescript": "~5.2.2",
+    "vite": "^6.4.1",
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~18.3.1",
-    "react-dom": "~18.2.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~2.12.7"
-  },
-  "peerDependenciesMeta": {
-    "recharts": {
-      "optional": true
-    }
+    "framer-motion": ">=12 <13",
+    "i18next": ">=25 <26",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-hot-toast": ">=2 <3",
+    "react-i18next": ">=16 <17"
   }
 }

package/src/style/_shame.scss

@@ -1,5 +1,46 @@
-// keep empty.
+/* stylelint-disable declaration-no-important */
 
 .flex-1 {
   flex: 1;
 }
+
+.text-muted {
+  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}text-muted) !important;
+}
+
+.form-text {
+  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}form-text) !important;
+}
+
+.spinner-border {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+th {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+}
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+
+@each $size, $width in $container-max-widths {
+  .max-w-#{$size} {
+    max-width: $width;
+  }
+}