@sitecore/sc-contenthub-blok 1.0.27 → 1.0.28

package/esm/Components/BlokSearchBox/BlokSearchBox.d.ts

@@ -0,0 +1,155 @@
+import { ClipboardEventHandler, type FC, KeyboardEvent, type ReactNode, Ref } from "react";
+import { Optional } from "../../Foundations/utils";
+export declare const SEARCH_BOX_MAX_WIDTH = 500;
+export declare const SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
+export declare const DEFAULT_SEARCH_BOX_HEIGHT = "36px";
+export interface BlokSearchBoxSlots {
+    slot1?: ReactNode;
+    slot2?: ReactNode;
+}
+export interface BlokSearchBoxProps {
+    /**
+     * Callback when typing into the searchBox.
+     */
+    onSearch: (searchFilter: string) => void;
+    /**
+     * Callback when clearing the searchBox.
+     */
+    onClearSearch?: () => void;
+    /**
+     * Callback when pushing the enter button.
+     */
+    onEnterPress?: () => void;
+    /**
+     * Value for the search filter.
+     */
+    value: string;
+    /**
+     * A class name to overrule some styles.
+     */
+    className?: string;
+    /**
+     * Placeholder text for the searchBox.
+     */
+    placeholder?: string;
+    /**
+     * Indicates if the search needs to be canceled when the ESC key is pressed.
+     */
+    cancelOnEscape?: boolean;
+    /**
+     * Indicates if the searchBox should stay in view (will render with a white background and shadow).
+     */
+    isSticky?: boolean;
+    /**
+     * The top position of the sticky searchBox in px.
+     */
+    stickyTopPosition?: string;
+    /**
+     * Indicates if the searchBox should be auto focused.
+     */
+    isAutofocus?: boolean;
+    /**
+     * Indicates if the searchBox is used inside a dropdown.
+     */
+    isInsideDropdown?: boolean;
+    /**
+     * Indicate if the searchBox should be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates if the searchBox should have a bottom gutter.
+     */
+    hasGutterBottom?: boolean;
+    /**
+     * Optional sticky searchBox background color.
+     */
+    stickySearchBoxBackground?: string;
+    /**
+     * Optional status to show the sticky search box in scrolled status.
+     */
+    shouldShowScrolledStatus?: boolean;
+    /**
+     * Optional class name for the clear button to override some styles.
+     */
+    clearButtonClassName?: string;
+    /**
+     * Allows the keypress events to propagate (for the autosuggest).
+     */
+    allowKeyPressPropagation?: boolean;
+    /**
+     * A function to handle the keyPresses (for autosuggest).
+     */
+    handleKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * A callback to call when pasting a value.
+     */
+    onPaste?: ClipboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Max number of characters a user can type.
+     */
+    maxNumberOfCharacters?: number;
+    /**
+     * Max number of words a user can type.
+     */
+    maxNumberOfWords?: number;
+    /**
+     * Clear message to show when hovering over the clear button.
+     */
+    clearMessage: string;
+    /**
+     * Search message to show when hovering over the search button.
+     */
+    searchMessage: string;
+    /**
+     * Indicates if the searchBox should allow multiple lines.
+     */
+    allowMultipleLines?: boolean;
+    /**
+     * Slots for rendering custom content in different parts of the search box.
+     */
+    slots?: BlokSearchBoxSlots;
+    /**
+     * Indicates if the searchBox should have a limited width.
+     */
+    hasLimitedWidth?: boolean;
+    /**
+     * When true, the multiline search box will expand and overlay content below it.
+     * When false, it will push content down as it expands.
+     */
+    expandOverContent?: boolean;
+    /**
+     * Icon to show in the search button.
+     */
+    searchIcon?: string;
+    /**
+     * An optional search icon image to show in the search button instead of a normal icon (e.g. for AI search).
+     */
+    searchIconImage?: string;
+    /**
+     * Indicates if the searchBox should be shown with specific AI styles.
+     */
+    applyAiStyles?: boolean;
+    /**
+     * A function to handle pasted text.
+     * @param text
+     */
+    handlePastedText?: (pastedText: string, searchBoxValue: string) => string;
+    /**
+     * Indicates if the searchBox should show a character counter.
+     * For this a maxNumberOfCharacters prop is required.
+     */
+    showCounter?: boolean;
+    /**
+     * When provided, text matching this regular expression will be exempt from character and word limitations.
+     * For example, when the text contains id= we ignore the limitations.
+     */
+    ignoreLimitationsRegex?: RegExp;
+    /**
+     * A function to transform the typed text.
+     */
+    transformTypedText?: (text: string) => string;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare const truncateString: (str: string, maxChars: Optional<number>, maxWords: Optional<number>) => string;
+export declare const BlokSearchBox: FC<BlokSearchBoxProps>;
+//# sourceMappingURL=BlokSearchBox.d.ts.map

package/esm/Components/BlokSelect/BlokSelect.d.ts

@@ -0,0 +1,116 @@
+import { ReactElement } from "react";
+import { Nullable } from "../../Foundations/utils";
+interface BlokSelectProps<T, K> {
+    /**
+     * Unique id of the SelectMenu.
+     */
+    id: string;
+    /**
+     * Different options that menu provides.
+     */
+    options: Array<T>;
+    /**
+     * OnChange function to propagate the new item back to the parent.
+     */
+    onChange: (item: K) => void | Promise<void> | unknown;
+    /**
+     * The current value of the SelectMenu.
+     */
+    value?: T;
+    /**
+     * A function that maps the item to a label.
+     */
+    labelMapper?: (item: T) => string;
+    /**
+     *  A function that maps the item to a value.
+     */
+    valueMapper?: (item: T) => string;
+    /**
+     * Callback that returns the value of the selected item.
+     */
+    returnValue?: (item: T) => K;
+    /**
+     * Placeholder in case no value is found.
+     */
+    placeholder?: string;
+    /**
+     * Indicates if an empty value should be selectable.
+     */
+    emptyValueSelectable?: boolean;
+    /**
+     * Custom css class name to overrule some styling.
+     */
+    className?: string;
+    /**
+     * IsReadOnly mode for SelectMenu component.
+     */
+    isReadOnly?: boolean;
+    /**
+     * The minimum amount of items to have before searchbox is shown.
+     */
+    searchBoxMinAmountOfItems?: number;
+    /**
+     * An optional tooltip that is shown on hover.
+     */
+    tooltip?: string;
+    /**
+     * Indicates if both the icon and text for selected value should be displayed (e.g. search grouping column and row dropdowns).
+     */
+    showIconAndText?: boolean;
+    /**
+     * Indicates if the icons on the dropdown items should be hidden (e.g. search grouping column and row dropdown values).
+     */
+    hideItemIcons?: boolean;
+    /**
+     * Indicates if the select menu button should be full width (to align it with text boxes that are also full width).
+     */
+    isFullWidth?: boolean;
+    /**
+     * Used to link a label that can focus the select menu
+     */
+    accessibilityId?: string;
+    /**
+     * An optional max height for the dropdown.
+     */
+    maxHeight?: number;
+    /**
+     * An optional array of items to disable.
+     */
+    itemsToDisable?: Array<T>;
+    /**
+     * Indicates whether the dropdown should be open on initial render. Defaults to false.
+     */
+    openMenuByDefault?: boolean;
+    /**
+     * Indicates whether the dropdown should be rendered when there is no option available.
+     */
+    showEmptyDropdown?: boolean;
+    /**
+     * The message to show when no results are found.
+     */
+    noneLabel?: string;
+    /**
+     * The message to show when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Clear message to show when hovering over the clear button.
+     */
+    clearMessage: string;
+    /**
+     * Search message to show when hovering over the search button.
+     */
+    searchMessage: string;
+    /**
+     * Indicates whether the select is in a loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Loading text to show when in loading state.
+     */
+    loadingText?: string;
+}
+declare function BlokSelect<T = string, K = T>({ id, options, onChange: onChange_, value, labelMapper, valueMapper, returnValue, placeholder, emptyValueSelectable, className, isReadOnly, searchBoxMinAmountOfItems, tooltip, showIconAndText, hideItemIcons, isFullWidth, accessibilityId, maxHeight, itemsToDisable, openMenuByDefault, showEmptyDropdown, noneLabel, noResultsText, clearMessage, searchMessage, isLoading, loadingText, }: BlokSelectProps<T, K>): Nullable<ReactElement>;
+export { BlokSelect };
+export type { BlokSelectProps };
+//# sourceMappingURL=BlokSelect.d.ts.map

package/esm/Components/BlokTag/BlokTag.d.ts

@@ -0,0 +1,24 @@
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
+import { type ColorName } from "../../Foundations";
+export interface BlokTagSlots {
+    start?: ReactNode;
+    end?: ReactNode;
+}
+export interface BlokTagProps {
+    size?: "sm" | "md" | "lg" | "xl";
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    onDelete?: () => void;
+    colorScheme?: ColorName;
+    deleteLabel?: string;
+    className?: string;
+    expandedContent?: ReactNode;
+    expandLabel?: string;
+    collapseLabel?: string;
+    allowMultiline?: boolean;
+    deleteId?: string;
+    onClick?: () => void;
+    slots?: BlokTagSlots;
+}
+export declare const BlokTag: FC<PropsWithChildren<BlokTagProps>>;
+//# sourceMappingURL=BlokTag.d.ts.map

package/esm/Components/BlokTooltip/BlokTooltip.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+interface TooltipProps {
+    placement?: string;
+    title: string;
+    tooltipId?: string;
+}
+export declare const BlokTooltip: FC<PropsWithChildren<TooltipProps>>;
+export {};
+//# sourceMappingURL=BlokTooltip.d.ts.map

package/esm/Components/CoreComponents.d.ts

@@ -0,0 +1,8 @@
+import { SxProps } from "@mui/material";
+import * as colors from "@mui/material/colors";
+export type { SxProps };
+export { colors };
+export * from "@mui/material";
+export * from "@mui/material/styles";
+export type AlertColor = "success" | "info" | "warning" | "error" | "neutral" | "ai";
+//# sourceMappingURL=CoreComponents.d.ts.map

package/esm/Components/index.d.ts

@@ -0,0 +1,18 @@
+export * from "./BlokAlert/BlokAlert";
+export * from "./BlokBadge/BlokBadge";
+export * from "./BlokBreadcrumb/BlokBreadcrumb";
+export * from "./BlokBreadcrumb/BlokBreadcrumbItem";
+export * from "./BlokButton/BlokButton";
+export * from "./BlokButtonGroup/BlokButtonGroup";
+export * from "./BlokButtonSelect/BlokButtonSelect";
+export * from "./BlokIcon/BlokIcon";
+export * from "./BlokIcon/BlokIconContext";
+export * from "./BlokIconButton/BlokIconButton";
+export * from "./BlokImage/BlokImage";
+export * from "./BlokLabeledIcon/BlokLabeledIcon";
+export * from "./BlokLink/BlokLink";
+export * from "./BlokSearchBox/BlokSearchBox";
+export * from "./BlokSelect/BlokSelect";
+export * from "./BlokTag/BlokTag";
+export * from "./BlokTooltip/BlokTooltip";
+//# sourceMappingURL=index.d.ts.map

package/esm/Foundations/borderRadius.d.ts

@@ -0,0 +1,12 @@
+export declare const borderRadiusSm: string | number;
+export declare const borderRadiusBase: string | number;
+export declare const borderRadiusMd: string | number;
+export declare const borderRadiusLg: string | number;
+export declare const borderRadiusXl: string | number;
+export declare const borderRadius2xl: string | number;
+export declare const borderRadius3xl: string | number;
+export declare const borderRadiusFull: string | number;
+export declare const btnBorderRadius: string | number;
+export declare const baseBorderRadius: string | number;
+export declare const borderRadiusNone = 0;
+//# sourceMappingURL=borderRadius.d.ts.map

package/esm/Foundations/buttons.d.ts

@@ -0,0 +1,8 @@
+import { type ColorShade } from "./colors";
+export declare const btnFontWeight: "bold" | "normal" | number;
+export declare const btnFontFamily: string;
+export declare const btnTextTransform: "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase";
+export declare const buttonPadding = "0.375rem 0.75rem";
+export declare const getGhostButtonBackgroundColor: (color: string, isDarkTheme: boolean, darkShade: ColorShade, lightShade: ColorShade) => string;
+export declare const getSolidButtonBackgroundColor: (color: string, isDarkTheme: boolean, darkShade: ColorShade, lightShade: ColorShade) => string;
+//# sourceMappingURL=buttons.d.ts.map