@juspay/blend-design-system 0.0.36 → 0.0.37-beta.0

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

@@ -248,6 +248,7 @@ export type DateRangePickerProps = {
     onChange?: (range: DateRange) => void;
     onPresetSelection?: (data: PresetSelectionData) => void;
     showDateTimePicker?: boolean;
+    showDateInput?: boolean;
     showPresets?: boolean;
     customPresets?: PresetsConfig;
     placeholder?: string;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MenuAlignment {
@@ -38,7 +39,7 @@ export type MenuProps = {
     alignOffset?: number;
     collisonBoundaryRef?: Element | null | Array<Element | null>;
     skeleton?: MenuSkeletonProps;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot'>;
 export type SubMenuVirtualScrollProps = {
     enableVirtualScrolling?: boolean;
     virtualItemHeight?: number;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, ...rest }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/components/MultiSelect/MultiSelectTrigger.d.ts

@@ -15,13 +15,13 @@ export type MultiSelectTriggerProps = {
     selectionTagType: MultiSelectSelectionTagType;
     valueLabelMap: Record<string, string>;
     open: boolean;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     multiSelectTokens: MultiSelectTokensType;
     inline?: boolean;
     error?: boolean;
     disabled?: boolean;
     maxTriggerWidth?: number;
     minTriggerWidth?: number;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onClick' | 'name' | 'disabled' | 'onChange'>;
 declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, open, onClick, multiSelectTokens, inline, error, maxTriggerWidth, minTriggerWidth, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectTrigger;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MultiSelectVariant {
@@ -92,8 +93,6 @@ export type MultiSelectProps = {
     sideOffset?: number;
     alignOffset?: number;
     inline?: boolean;
-    onBlur?: () => void;
-    onFocus?: () => void;
     onOpenChange?: (open: boolean) => void;
     error?: boolean;
     errorMessage?: string;
@@ -127,7 +126,7 @@ export type MultiSelectProps = {
     showClearButton?: boolean;
     onClearAllClick?: () => void;
     multiSelectGroupPosition?: 'center' | 'left' | 'right';
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onChange'>;
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
     selected: string[];

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, singleSelectGroupPosition, allowDeselect, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, singleSelectGroupPosition, allowDeselect, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectTrigger.d.ts

@@ -10,7 +10,7 @@ export type SingleSelectTriggerProps = {
     required: boolean;
     valueLabelMap: Record<string, string>;
     open: boolean;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     slot: React.ReactNode;
     variant: SelectMenuVariant;
     isSmallScreenWithLargeSize: boolean;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
@@ -96,8 +97,6 @@ export type SingleSelectProps = {
     maxMenuWidth?: number;
     maxMenuHeight?: number;
     inline?: boolean;
-    onBlur?: () => void;
-    onFocus?: () => void;
     error?: boolean;
     errorMessage?: string;
     fullWidth?: boolean;
@@ -115,4 +114,4 @@ export type SingleSelectProps = {
     customValueLabel?: string;
     singleSelectGroupPosition?: 'center' | 'left' | 'right';
     allowDeselect?: boolean;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onSelect'>;

package/dist/context/ShadowAware.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+type ShadowRootContextType = {
+    shadowRoot: ShadowRoot | null;
+    target: HTMLElement | null;
+};
+export declare const useShadowRoot: () => ShadowRootContextType;
+type ShadowAwareProps = {
+    children: ReactNode;
+    /**
+     * Target HTMLElement for styled-components to inject styles into.
+     * This should be an element inside a ShadowRoot.
+     */
+    target: HTMLElement;
+};
+declare const ShadowAware: ({ children, target }: ShadowAwareProps) => import("react/jsx-runtime").JSX.Element;
+export default ShadowAware;

package/dist/context/ThemeProvider.d.ts

@@ -8,6 +8,15 @@ type ThemeProviderProps = {
     breakpoints?: BreakpointType;
     theme?: Theme | string;
     children: React.ReactNode;
+    /**
+     * Target HTMLElement for styled-components to inject styles into.
+     * Use this when rendering inside a Shadow DOM.
+     * The element must be inside a shadow root.
+     *
+     * Note: This is the actual DOM element (not the ShadowRoot itself) that
+     * styled-components will use as the style injection target.
+     */
+    target?: HTMLElement;
 };
-declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, target, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/context/index.d.ts

@@ -3,3 +3,4 @@ export { Theme } from './theme.enum';
 export { useTheme } from './ThemeContext';
 export type { ComponentTokenType } from './ThemeContext';
 export type { ThemeType } from '../tokens';
+export { default as ShadowAware, useShadowRoot } from './ShadowAware';

package/dist/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { default as usePreventParentScroll } from './usePreventParentScroll';
 export { default as useDropdownInteractionLock } from './useDropdownInteractionLock';
 export { default as useTruncationDetection } from './useTruncationDetection';
 export type { UseTruncationDetectionOptions } from './useTruncationDetection';
+export { useShadowRoot } from '../context/ShadowAware';