@dynamic-framework/ui-react 2.6.0 → 2.7.0

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

@@ -1,11 +1,18 @@
-/// <reference types="react" />
 import { Splide } from '@splidejs/react-splide';
+import type { ComponentProps } from 'react';
 import type { SplideProps } from '@splidejs/react-splide';
+import DIcon from '../DIcon';
 import DCarouselSlide from './components/DCarouselSlide';
 import type { BaseProps } from '../interface';
+type ArrowIconProps = {
+    /** DIcon props used to render the "previous" arrow icon. */
+    iconArrowLeft?: ComponentProps<typeof DIcon>;
+    /** DIcon props used to render the "next" arrow icon. */
+    iconArrowRight?: ComponentProps<typeof DIcon>;
+};
 declare const _default: import("react").ForwardRefExoticComponent<SplideProps & BaseProps & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<Splide>> & {
+} & ArrowIconProps & import("react").RefAttributes<Splide>> & {
     Slide: typeof DCarouselSlide;
 };
 export default _default;

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

@@ -1,5 +1,5 @@
-import type { ComponentProps } from 'react';
-import DIconBase from '../DIconBase';
-type Props = ComponentProps<typeof DIconBase>;
-export default function DIcon({ familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle, ...props }: Props): import("react").JSX.Element;
+/// <reference types="react" />
+import type { DIconBaseProps } from '../DIconBase';
+type Props = DIconBaseProps;
+export default function DIcon({ icon, familyClass: propFamilyClass, familyPrefix: propFamilyPrefix, materialStyle: propMaterialStyle, ...props }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { BaseProps, ComponentColor } from '../interface';
+import type { BaseProps, ComponentColor, IconValue } from '../interface';
 import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
-    icon: string;
+    icon: IconValue;
     color?: ComponentColor;
     size?: string | ResponsiveProp;
     /**
@@ -18,5 +18,6 @@ type Props = BaseProps & {
     familyPrefix?: string;
     strokeWidth?: number;
 };
+export type DIconBaseProps = Props;
 export default function DIconBase({ icon, color, style, className, size, useListenerSize, hasCircle, materialStyle, familyClass, familyPrefix, strokeWidth, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,2 +1,3 @@
 import DIconBase from './DIconBase';
+export type { DIconBaseProps } from './DIconBase';
 export default DIconBase;

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

@@ -1,17 +1,29 @@
 import { type Transition } from 'framer-motion';
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 import DOffcanvasHeader from './components/DOffcanvasHeader';
 import DOffcanvasBody from './components/DOffcanvasBody';
 import DOffcanvasFooter from './components/DOffcanvasFooter';
 import type { BaseProps, OffcanvasPositionToggleFrom } from '../interface';
+type OffcanvasResponsivePlacement = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', OffcanvasPositionToggleFrom>>;
 type Props = BaseProps & PropsWithChildren<{
     name: string;
     staticBackdrop?: boolean;
     scrollable?: boolean;
-    openFrom?: OffcanvasPositionToggleFrom;
+    openFrom?: OffcanvasPositionToggleFrom | OffcanvasResponsivePlacement;
+    /**
+     * Overrides the offcanvas size on the `start`/`end` placements (defaults to `400px`).
+     * Accepts any CSS length (e.g. `'320px'`, `'50vw'`, `'100%'`) or a `ResponsiveProp` object.
+     */
+    width?: string | ResponsiveProp;
+    /**
+     * Overrides the offcanvas size on the `top`/`bottom` placements (defaults to `100%`).
+     * Accepts any CSS length (e.g. `'50vh'`, `'320px'`) or a `ResponsiveProp` object.
+     */
+    height?: string | ResponsiveProp;
     transition?: Transition;
 }>;
-declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, transition, children, dataAttributes, }: Props): import("react").JSX.Element;
+declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, width, height, transition, children, dataAttributes, }: Props): import("react").JSX.Element;
 declare const _default: typeof DOffcanvas & {
     Header: typeof DOffcanvasHeader;
     Body: typeof DOffcanvasBody;

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { ComponentType, CSSProperties, SVGProps } from 'react';
 export type ClassMap = {
     [className: string]: boolean;
 };
@@ -19,13 +19,15 @@ export type BaseProps = {
     className?: string;
     dataAttributes?: DataAttributes;
 };
+export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+export type IconValue = string | IconComponent;
 export type FamilyIconProps = {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
 };
 export type StartIconProps = {
-    iconStart?: string;
+    iconStart?: IconValue;
     iconStartDisabled?: boolean;
     iconStartFamilyClass?: string;
     iconStartFamilyPrefix?: string;
@@ -34,7 +36,7 @@ export type StartIconProps = {
     iconStartMaterialStyle?: boolean;
 };
 export type EndIconProps = {
-    iconEnd?: string;
+    iconEnd?: IconValue;
     iconEndDisabled?: boolean;
     iconEndFamilyClass?: string;
     iconEndFamilyPrefix?: string;

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

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 import { type PortalContextProps } from './DPortalContext';
-import type { AlertThemeIconMap } from '../components/interface';
+import type { AlertThemeIconMap, IconComponent } from '../components/interface';
 /**
  * Currency formatting configuration used by `DContextProvider`.
  */
@@ -86,6 +86,7 @@ type Props = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
+    iconRegistry?: Record<string, IconComponent>;
     iconMap: IconMapProps;
     breakpoints: BreakpointProps;
 };
@@ -124,7 +125,7 @@ export declare const DContext: import("react").Context<Context>;
  * @template T - Map of portal name → payload shape (e.g. `{ modal: { title: string } }`).
  *   Pass it once at the top level: `<DContextProvider<MyPortals> ...>`.
  */
-export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<DContextProviderProps<T>>>): import("react").JSX.Element;
+export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconRegistry, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<DContextProviderProps<T>>>): import("react").JSX.Element;
 /**
  * Returns the Dynamic UI context value set by `DContextProvider`.
  * Falls back to the library's built-in defaults when no `DContextProvider`

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -110,6 +110,7 @@
     "react-datepicker": "~8.3.0",
     "react-error-boundary": "^6.1.0",
     "react-international-phone": "~4.6.0",
+    "react-is": "^19.2.7",
     "react-responsive-pagination": "~2.11.3",
     "react-select": "~5.10.2"
   },
@@ -132,6 +133,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@types/react-is": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",

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

@@ -15,3 +15,11 @@ $offcanvas-separator-margin-x: var(--#{$prefix}ref-spacer-4) !default;
 
 $offcanvas-bg-color: var(--#{$prefix}white) !default;
 // scss-docs-end offcanvas-variables
+
+// custom
+// Bootstrap's default is 30vh, which cuts off top/bottom offcanvas content
+// (e.g. mobile bottom-sheet placements) and forces an inner scroll. Cover the
+// full viewport height instead, relying on `.offcanvas-body`'s own
+// `overflow-y: auto` to scroll long content while header/footer stay fixed.
+$offcanvas-vertical-height: 100% !default;
+// end custom

package/src/style/components/_d-carousel.scss

@@ -42,9 +42,27 @@
     height: $carousel-control-height;
     background: var(--#{$prefix}primary);
     padding: var(--#{$prefix}ref-spacer-1);
-    svg {
+
+    // Only invert the default arrow icon (a bare <svg> as a direct child).
+    // Custom icons rendered via `iconArrowLeft`/`iconArrowRight` use DIcon
+    // (wrapped in a .d-icon span) and are reset below, so they are untouched here.
+    > svg {
       filter: invert(1);
     }
+
+    // Splide's default theme applies `fill` and, for the prev arrow, a
+    // `scaleX(-1)` flip to every descendant <svg>, assuming a single arrow
+    // path reused for both directions. `iconArrowLeft`/`iconArrowRight` are
+    // typed as DIcon props, so the only <svg> rendered here is a Lucide icon,
+    // which is always stroke-based with `fill="none"` (see lucide-react
+    // defaultAttributes). Resetting to `fill: none` restores that intended
+    // stroke-only look and lets DIcon's own `color` (applied via `currentColor`
+    // on stroke) keep controlling the icon color; `transform: none` cancels
+    // the flip so the icon keeps its intended orientation.
+    .d-icon svg {
+      fill: none;
+      transform: none;
+    }
   }
 
   .d-carousel-pagination {