@tridion-sites/extensions 2.0.1 → 2.0.2

package/dist/dts/api/editors/folder/hooks/useFolderEditor.d.ts

@@ -0,0 +1,32 @@
+import type { Folder, Schema } from '@tridion-sites/models';
+/**
+ * @public
+ */
+export interface FolderEditorHookResult {
+    /**
+     * Editable Folder.
+     */
+    folder: Folder;
+    /**
+     * Folder's metadata schema.
+     */
+    metadataSchema: Schema | undefined;
+    /**
+     * Boolean that indicates that Folder has unsaved changes.
+     */
+    isChanged: boolean;
+    /**
+     * Boolean that indicates that Folder can be edited.
+     */
+    isEditing: boolean;
+}
+/**
+ * Hook for accessing Folder Editor data when available.
+ *
+ * @remarks
+ * Safe to be used within or outside of the Folder Editor.
+ * `undefined` is returned when used outside of Folder Editor.
+ *
+ * @public
+ */
+export type OptionalFolderEditorHook = () => FolderEditorHookResult | undefined;

package/dist/dts/api/editors/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useEditor';

package/dist/dts/api/editors/hooks/useEditor.d.ts

@@ -0,0 +1,40 @@
+import type { Bundle, Component, Folder, Keyword, KeywordCategory, MultimediaComponent, Page, Schema, StructureGroup } from '@tridion-sites/models';
+/**
+ * @public
+ */
+export interface EditorHookResult {
+    /**
+     * Editable item.
+     */
+    item: Bundle | KeywordCategory | Component | MultimediaComponent | Folder | Keyword | Page | StructureGroup;
+    /**
+     * Item's metadata schema.
+     */
+    schema: Schema | undefined;
+    /**
+     * Boolean that indicates that Item has unsaved changes.
+     */
+    isChanged: boolean;
+    /**
+     * Boolean that indicates that item can be edited.
+     */
+    isEditing: boolean;
+    /**
+     * Callback to update internal editor state.
+     */
+    onUpdate: (item: Bundle | KeywordCategory | Component | MultimediaComponent | Folder | Keyword | Page | StructureGroup) => void;
+}
+/**
+ * @public
+ */
+export type EditorHook = () => EditorHookResult;
+/**
+ * Hook for accessing Item Editor data when available.
+ *
+ * @remarks
+ * Safe to be used within or outside of the Item Editor.
+ * `undefined` is returned when used outside of Item Editor.
+ *
+ * @public
+ */
+export type OptionalEditorHook = () => EditorHookResult | undefined;

package/dist/dts/api/editors/index.d.ts

@@ -0,0 +1,8 @@
+export * from './component/hooks';
+export * from './bundle/hooks';
+export * from './category/hooks';
+export * from './folder/hooks';
+export * from './hooks';
+export * from './keyword/hooks';
+export * from './page/hooks';
+export * from './structureGroup/hooks';

package/dist/dts/api/editors/keyword/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useKeywordEditor';

package/dist/dts/api/editors/keyword/hooks/useKeywordEditor.d.ts

@@ -0,0 +1,32 @@
+import type { Keyword, Schema } from '@tridion-sites/models';
+/**
+ * @public
+ */
+export interface KeywordEditorHookResult {
+    /**
+     * Editable Keyword.
+     */
+    keyword: Keyword;
+    /**
+     * Keyword's metadata schema.
+     */
+    metadataSchema: Schema | undefined;
+    /**
+     * Boolean that indicates that Keyword has unsaved changes.
+     */
+    isChanged: boolean;
+    /**
+     * Boolean that indicates that Keyword can be edited.
+     */
+    isEditing: boolean;
+}
+/**
+ * Hook for accessing Keyword Editor data when available.
+ *
+ * @remarks
+ * Safe to be used within or outside of the Keyword Editor.
+ * `undefined` is returned when used outside of Keyword Editor.
+ *
+ * @public
+ */
+export type OptionalKeywordEditorHook = () => KeywordEditorHookResult | undefined;

package/dist/dts/api/editors/page/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './usePageEditor';

package/dist/dts/api/editors/page/hooks/usePageEditor.d.ts

@@ -0,0 +1,40 @@
+import type { Page, PageTemplate, Schema } from '@tridion-sites/models';
+/**
+ * @public
+ */
+export interface PageEditorHookResult {
+    /**
+     * Editable Page.
+     */
+    page: Page;
+    /**
+     * Template that is used to publish Page with.
+     */
+    pageTemplate: PageTemplate | undefined;
+    /**
+     * Page's metadata schema.
+     */
+    metadataSchema: Schema | undefined;
+    /**
+     * Boolean that indicates that Page has unsaved changes.
+     */
+    isChanged: boolean;
+    /**
+     * Boolean that indicates that Page can be edited.
+     */
+    isEditing: boolean;
+    /**
+     * Boolean that indicates whether any components in the page have unsaved changes.
+     */
+    hasUnsavedRelatives: boolean;
+}
+/**
+ * Hook for accessing Page Editor data when available.
+ *
+ * @remarks
+ * Safe to be used within or outside of the Page Editor.
+ * `undefined` is returned when used outside of Page Editor.
+ *
+ * @public
+ */
+export type OptionalPageEditorHook = () => PageEditorHookResult | undefined;

package/dist/dts/api/editors/structureGroup/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useStructureGroupEditor';

package/dist/dts/api/editors/structureGroup/hooks/useStructureGroupEditor.d.ts

@@ -0,0 +1,32 @@
+import type { Schema, StructureGroup } from '@tridion-sites/models';
+/**
+ * @public
+ */
+export interface StructureGroupEditorHookResult {
+    /**
+     * Editable Structure Group.
+     */
+    structureGroup: StructureGroup;
+    /**
+     * Structure Group's metadata schema.
+     */
+    metadataSchema: Schema | undefined;
+    /**
+     * Boolean that indicates that Structure Group has unsaved changes.
+     */
+    isChanged: boolean;
+    /**
+     * Boolean that indicates that Structure Group can be edited.
+     */
+    isEditing: boolean;
+}
+/**
+ * Hook for accessing Structure Group Editor data when available.
+ *
+ * @remarks
+ * Safe to be used within or outside of the Structure Group Editor.
+ * `undefined` is returned when used outside of Structure Group Editor.
+ *
+ * @public
+ */
+export type OptionalStructureGroupEditorHook = () => StructureGroupEditorHookResult | undefined;

package/dist/dts/api/general/components/button.d.ts

@@ -0,0 +1,33 @@
+import type { ForwardRefExoticComponent, MouseEvent, RefAttributes } from 'react';
+/**
+ * @public
+ */
+export interface ButtonProps extends RefAttributes<HTMLElement> {
+    /**
+     * Callback executed when the button is clicked.
+     */
+    onClick: (event: MouseEvent) => void;
+    /**
+     * If `true`, the element is displayed in a disabled state.
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the element shows a processing indicator.
+     */
+    isProcessing?: boolean;
+    /**
+     * Text that is displayed inside button, i.e., the button label.
+     * If omitted, you must provide a `tooltip`.
+     */
+    label?: string;
+    /**
+     * A tooltip text that is displayed when the element is hovered.
+     * Can be omitted if `label` is specified. Required if there is no `label` specified.
+     * For accessibility purposes, the tooltip is only displayed when it differs from the label.
+     */
+    tooltip?: string;
+}
+/**
+ * @public
+ */
+export type ButtonComponent = ForwardRefExoticComponent<ButtonProps>;

package/dist/dts/api/general/components/icon.d.ts

@@ -0,0 +1,19 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import type { ColorProps, SizeProps, SpaceProps, TooltipProps } from "../..";
+/**
+ * @public
+ */
+export interface IconProps extends TooltipProps, SpaceProps, SizeProps, ColorProps {
+    /**
+     * ViewBox of the provided content.
+     */
+    viewBox: string;
+    /**
+     * SVG content to render.
+     */
+    children: ReactNode;
+}
+/**
+ * @public
+ */
+export type IconComponent = FunctionComponent<IconProps>;

package/dist/dts/api/general/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './icon';
+export * from './layout';
+export * from './link';
+export * from './modal';
+export * from './text';
+export * from './textLink';

package/dist/dts/api/general/components/layout/block.d.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties, DragEvent, FocusEvent, ForwardRefExoticComponent, KeyboardEvent, MouseEvent, ReactHTML, ReactNode, RefAttributes } from 'react';
+import type { AriaProps, BackgroundColorProps, ClickableProps, FocusBehaviorProps, OpacityProps, SizeProps, SpaceProps, TooltipProps } from "../../..";
+/**
+ * @public
+ */
+export type Tag = keyof ReactHTML;
+/**
+ * @public
+ */
+export interface BlockProps extends RefAttributes<HTMLElement>, SpaceProps, SizeProps, ClickableProps, BackgroundColorProps, OpacityProps, TooltipProps, FocusBehaviorProps {
+    /**
+     * Accessibility-related props.
+     */
+    aria?: Partial<AriaProps>;
+    /**
+     * The Block's content.
+     */
+    children?: ReactNode;
+    /**
+     * Custom CSS class that should be passed to the node.
+     * Should be used for custom styling that is not covered by other properties.
+     */
+    className?: string;
+    /**
+     * Custom CSS style that would be applied to the node directly.
+     * Useful for frequently changing styles, e.g., animation.
+     * In the case of less frequent updates it is preferable to use 'className' prop.
+     */
+    cssStyle?: CSSProperties;
+    /**
+     * Should content be scrollable?
+     * Scrollbar will not appear if content doesn't overflow Block (i.e: if Block's size is not restricted).
+     */
+    hasScroll?: boolean;
+    /**
+     * The HTML tag that should be used for this component.
+     */
+    tag?: Tag;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+    onDragEnter?: (event: DragEvent<HTMLElement>) => void;
+    onDragLeave?: (event: DragEvent<HTMLElement>) => void;
+    onDragOver?: (event: DragEvent<HTMLElement>) => void;
+    onDrop?: (event: DragEvent<HTMLElement>) => void;
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+    onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * @public
+ */
+export type BlockComponent = ForwardRefExoticComponent<BlockProps>;

package/dist/dts/api/general/components/layout/center.d.ts

@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { FlexProps } from "../../..";
+import type { Without } from '@tridion/graphene';
+/**
+ * @public
+ */
+export interface CenterProps extends Without<FlexProps, 'mainAxis' | 'crossAxis'> {
+}
+/**
+ * @public
+ */
+export type CenterComponent = ForwardRefExoticComponent<CenterProps>;

package/dist/dts/api/general/components/layout/flex.d.ts

@@ -0,0 +1,50 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { BlockProps } from "../../..";
+/**
+ * @public
+ */
+export type AxisDirection = 'row' | 'column';
+/**
+ * @public
+ */
+export type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+/**
+ * @public
+ */
+export type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * @public
+ */
+export interface FlexProps extends BlockProps {
+    /**
+     * Defines how items are placed in the container.
+     */
+    direction?: AxisDirection;
+    /**
+     * Item alignment on the main axis.
+     */
+    mainAxis?: MainAxisAlignment;
+    /**
+     * Item alignment on the cross axis.
+     * Items are centered by default if direction="row".
+     */
+    crossAxis?: CrossAxisAlignment;
+    /**
+     * Render as an inline-level element or as a block-level one?
+     */
+    inline?: boolean;
+    /**
+     * Whether flex items are forced onto one line or can wrap onto multiple lines.
+     */
+    shouldWrap?: boolean;
+    /**
+     * Take available space in the parent.
+     * The parent is required to be Flex for this property to work.
+     * Multiple components with this property set to true are going to split available space equally between them.
+     */
+    shouldFill?: boolean;
+}
+/**
+ * @public
+ */
+export type FlexComponent = ForwardRefExoticComponent<FlexProps>;

package/dist/dts/api/general/components/layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from './block';
+export * from './center';
+export * from './flex';
+export * from './stack';

package/dist/dts/api/general/components/layout/stack.d.ts

@@ -0,0 +1,39 @@
+import type { ForwardRefExoticComponent } from 'react';
+import type { BlockProps, SpacingUnit } from "../../..";
+/**
+ * @public
+ */
+export type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/**
+ * @public
+ */
+export type StackDirection = 'row' | 'column';
+/**
+ * @public
+ */
+export interface StackProps extends BlockProps {
+    /**
+     * The direction in which items are going to stack.
+     */
+    direction: StackDirection;
+    /**
+     * The spacing between items in the stack.
+     */
+    itemGap: SpacingUnit;
+    /**
+     * How items should be aligned vertically.
+     */
+    verticalAlignment?: StackAlignment;
+    /**
+     * How items should be aligned horizontally.
+     */
+    horizontalAlignment?: StackAlignment;
+    /**
+     * Render as an inline-level element or as a block-level one?
+     */
+    inline?: boolean;
+}
+/**
+ * @public
+ */
+export type StackComponent = ForwardRefExoticComponent<StackProps>;

package/dist/dts/api/general/components/link.d.ts

@@ -0,0 +1,29 @@
+import type { FunctionComponent, ReactNode } from 'react';
+/**
+ * @public
+ */
+export interface LinkProps {
+    /**
+     * String that represents a valid path to the external or internal source. The relative path always starts with `/`, otherwise it's treated as an absolute path.
+     * Relative to the current directory path is not supported (ex. `subfolder`).
+     *
+     * @example `/explorer` or `https://www.website.com`.
+     */
+    to: string;
+    /**
+     * Boolean that indicates whether a link should be opened in new tab.
+     */
+    openInNewTab?: boolean;
+    /**
+     * String that is shown as tooltip on hover.
+     */
+    tooltip?: string;
+    /**
+     * The content to be rendered inside the Link component.
+     */
+    children?: ReactNode;
+}
+/**
+ * @public
+ */
+export type LinkComponent = FunctionComponent<LinkProps>;

package/dist/dts/api/general/components/modal.d.ts

@@ -0,0 +1,61 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import type { FlexProps } from './layout';
+/**
+ * @public
+ */
+export interface ModalHeaderComponentProps {
+    /**
+     * React node that is rendered as a title of the Modal component, includes expand and close buttons by default.
+     */
+    title?: ReactNode;
+}
+/**
+ * @public
+ */
+export type ModalHeaderComponent = FunctionComponent<ModalHeaderComponentProps>;
+/**
+ * @public
+ */
+export interface ModalFooterComponentProps {
+    /**
+     * Label for the Cancel button of the Modal.
+     */
+    cancelButtonLabel?: string;
+    /**
+     * Boolean that indicates disabled state of the Cancel button.
+     */
+    isCancelButtonDisabled?: boolean;
+    /**
+     * Boolean that indicates disabled state of the Ok button.
+     */
+    isOkButtonDisabled?: boolean;
+    /**
+     * Label for the Ok button of the Modal.
+     */
+    okButtonLabel?: string;
+    /**
+     * Callback executed when Ok button clicked.
+     */
+    onOk?: () => void;
+    /**
+     * Callback executed when Cancel button clicked.
+     */
+    onCancel?: () => void;
+}
+/**
+ * @public
+ */
+export type ModalFooterComponent = FunctionComponent<ModalFooterComponentProps>;
+/**
+ * @public
+ */
+export interface ModalContentComponentProps extends FlexProps {
+    /**
+     * Content of the Modal.
+     */
+    children: ReactNode;
+}
+/**
+ * @public
+ */
+export type ModalContentComponent = FunctionComponent<ModalContentComponentProps>;

package/dist/dts/api/general/components/text.d.ts

@@ -0,0 +1,82 @@
+import type { FunctionComponent, ReactNode } from 'react';
+import type { ColorProps, TooltipProps } from '../mixins';
+/**
+ * @public
+ */
+export type TextTag = 'div' | 'span' | 'h1' | 'h2' | 'h3';
+/**
+ * @public
+ */
+export type TextAlignment = 'left' | 'center' | 'right' | 'justify';
+/**
+ * @public
+ */
+export type TextDirection = 'leftToRight' | 'rightToLeft';
+/**
+ * @public
+ */
+export type TextType = 'heading1' | 'heading2' | 'heading3' | 'default' | 'defaultBold' | 'small' | 'smallBold';
+/**
+ * @public
+ */
+export interface TextProps extends ColorProps, TooltipProps {
+    /**
+     * The alignment of the text in the container.
+     */
+    alignment?: TextAlignment;
+    /**
+     * Determines whether the text should break words if they exceed the container width.
+     * Note that it can be used in combination with `multiLine: true` only, since single line text is truncated by default.
+     */
+    breakWord?: boolean;
+    /**
+     * The content to be rendered inside the Text component.
+     */
+    children?: ReactNode;
+    /**
+     * Determines whether the Text component should have compact spacing.
+     * If set to `true`, the line height of the text will be reduced.
+     */
+    compact?: boolean;
+    /**
+     * The direction of the text.
+     */
+    direction?: TextDirection;
+    /**
+     * Allow text to flow over multiple lines.
+     * By default it's a single line text with truncation enabled.
+     */
+    multiLine?: boolean;
+    /**
+     * Option to make text non-selectable by the user.
+     */
+    notSelectable?: boolean;
+    /**
+     * The HTML tag to be used for rendering the Text component. Overrides default tag defined by `type`.
+     */
+    tag?: TextTag;
+    /**
+     * Preset that consist of specific styling (size, weight, etc) and HTML tag.
+     *
+     * - `heading1` - usually represents a top-level heading or title. It is styled as a large and prominent text. By default `<h1>` HTML tag is used.
+     * - `heading2` - a secondary-level heading. It is styled as a slightly smaller text compared to `heading1`. By default `<h2>` HTML tag is used.
+     * - `heading3` - a tertiary-level heading. It is styled as a smaller text compared to `heading2`. By default `<h3>` HTML tag is used.
+     * - `default` - default style for regular text. It is styled as a standard paragraph text. By default `<div>` HTML tag used.
+     * - `defaultBold` - the default style for bold text. It is styled similarly to `default` but with added font-weight. By default `<div>` HTML tag is used.
+     * - `small` - a smaller size for text. It is typically used for captions, footnotes, or other smaller pieces of text. By default `<div>` HTML tag is used.
+     * - `smallBold` - a smaller size for bold text. It combines the smaller size of 'small' with the added font-weight. By default `<div>` HTML tag is used.
+     */
+    type?: TextType;
+    /**
+     * Determines whether the text should have an underline.
+     */
+    underline?: boolean;
+    /**
+     * Determines whether the text should be displayed in uppercase.
+     */
+    uppercase?: boolean;
+}
+/**
+ * @public
+ */
+export type TextComponent = FunctionComponent<TextProps>;

package/dist/dts/api/general/components/textLink.d.ts

@@ -0,0 +1,16 @@
+import type { FunctionComponent } from 'react';
+import type { LinkProps } from './link';
+import type { TextProps } from './text';
+/**
+ * @public
+ */
+export interface TextLinkProps extends TextProps, LinkProps {
+    /**
+     * String that is rendered as a link.
+     */
+    text: string;
+}
+/**
+ * @public
+ */
+export type TextLinkComponent = FunctionComponent<TextLinkProps>;

package/dist/dts/api/general/globals/borderRadius.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @public
+ */
+export interface BorderRadius {
+    small: number;
+    large: number;
+}
+/**
+ * @public
+ */
+export type BorderRadiusGetter = () => BorderRadius;
+/**
+ * @public
+ */
+export type BorderRadiusUnit = keyof BorderRadius;

package/dist/dts/api/general/globals/color.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @public
+ */
+export interface ColorPalette {
+    transparent: string;
+    brandLight: string;
+    brandPrimary: string;
+    brandAccessible: string;
+    brandDark: string;
+    gray0: string;
+    gray10: string;
+    gray20: string;
+    gray50: string;
+    gray80: string;
+    gray100: string;
+    gray120: string;
+    gray180: string;
+    blue50: string;
+    blue100: string;
+    red50: string;
+    red100: string;
+    red120: string;
+    orange50: string;
+    orange100: string;
+    magenta50: string;
+    magenta100: string;
+    magenta120: string;
+    yellow10: string;
+    yellow50: string;
+    yellow100: string;
+    yellow120: string;
+    yellow140: string;
+}
+/**
+ * @public
+ */
+export type ColorPaletteGetter = () => ColorPalette;
+/**
+ * @public
+ */
+export type Color = keyof ColorPalette;