@db-ux/react-core-components 1.0.0-test-13b991d

package/dist/shared/model.d.ts

@@ -0,0 +1,446 @@
+import * as React from "react";
+import { IconTypes } from '@db-ux/core-foundations';
+export type GlobalProps = {
+    /**
+     * default slot
+     */
+    children?: any;
+    /**
+     * React specific for adding className to the component.
+     */
+    className?: string;
+    /**
+     * Workaround for TypeScript using class for all components.
+     */
+    class?: string | any;
+    /**
+     * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
+     */
+    describedbyid?: string;
+    /**
+     * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.
+     */
+    id?: string;
+    /**
+     * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
+     */
+    autofocus?: boolean;
+};
+export type GlobalState = {
+    _id?: string;
+};
+export declare const SemanticList: readonly ["adaptive", "neutral", "critical", "informational", "warning", "successful"];
+export type SemanticType = (typeof SemanticList)[number];
+export type SemanticProps = {
+    /**
+     * The semantic defines the default variants for most components.
+     */
+    semantic?: SemanticType;
+};
+export type IconProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://db-ux-design-system.github.io/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    icon?: IconTypes;
+};
+export type ShowIconProps = {
+    /**
+     * Enables or disables the visibility of the icon. The default value depends on the component.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIcon?: boolean;
+};
+export type IconAfterProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://db-ux-design-system.github.io/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    iconAfter?: IconTypes;
+};
+export declare const SpacingList: readonly ["medium", "small", "large", "none"];
+export type SpacingType = (typeof SpacingList)[number];
+export type SpacingProps = {
+    /**
+     * The spacing attribute changes the padding of the component.
+     */
+    spacing?: SpacingType;
+};
+export declare const MarginList: readonly ["medium", "small", "large", "none"];
+export type MarginType = (typeof MarginList)[number];
+export type MarginProps = {
+    /**
+     * The margin attribute changes the margin of the component.
+     */
+    margin?: MarginType;
+};
+export declare const PlacementList: readonly ["left", "right", "top", "bottom", "left-start", "left-end", "right-start", "right-end", "top-start", "top-end", "bottom-start", "bottom-end"];
+export type PlacementType = (typeof PlacementList)[number];
+export type PlacementProps = {
+    /**
+     * The `placement` attributes values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: PlacementType;
+};
+export type NavigationBehaviorState = {
+    handleNavigationItemClick: (event: unknown) => void;
+};
+export type GapProps = {
+    /**
+     * If the absolute element should have a gap between the parent element.
+     */
+    gap?: boolean;
+};
+export declare const GapSpacingList: readonly ["none", "3x-large", "2x-large", "x-large", "large", "medium", "small", "x-small", "2x-small", "3x-small"];
+export type GapSpacingType = (typeof GapSpacingList)[number];
+export type GapSpacingProps = {
+    /**
+     * Set the gap/spacing between elements
+     */
+    gap?: GapSpacingType;
+};
+export type OverflowProps = {
+    /**
+     * The overflow attribute sets a max-width and longer text will be dotted.
+     */
+    overflow?: boolean;
+};
+export declare const OrientationList: readonly ["horizontal", "vertical"];
+export type OrientationType = (typeof OrientationList)[number];
+export type OrientationProps = {
+    /**
+     * Change the orientation. Defaults to horizontal.
+     */
+    orientation?: OrientationType;
+};
+export declare const WidthList: readonly ["full", "auto"];
+export type WidthType = (typeof WidthList)[number];
+export type WidthProps = {
+    /**
+     * Width of the component. Auto width based on children size, full width based on parent elements width.
+     */
+    width?: WidthType;
+};
+export declare const MaxWidthList: readonly ["full", "medium", "large", "small"];
+export type MaxWidthType = (typeof MaxWidthList)[number];
+export type ContainerWidthProps = {
+    /**
+     * Set max width for the component
+     */
+    width?: MaxWidthType;
+};
+export declare const PopoverDelayList: readonly ["none", "slow", "fast"];
+export type PopoverDelayType = (typeof PopoverDelayList)[number];
+export declare const PopoverWidthList: readonly ["auto", "fixed"];
+export type PopoverWidthType = (typeof PopoverWidthList)[number];
+export type PopoverProps = {
+    /**
+     * Add a delay before showing the tooltip
+     */
+    delay?: PopoverDelayType;
+    /**
+     * Disable animation
+     */
+    animation?: boolean;
+    /**
+     * Use fixed with for default max-width
+     */
+    width?: PopoverWidthType;
+};
+export type PopoverState = {
+    handleAutoPlacement: () => void;
+};
+export type ContentSlotProps = {
+    /**
+     * Default slot which is used to pass in additional content.
+     */
+    content?: any;
+};
+export declare const SizeList: readonly ["small", "medium"];
+export type SizeType = (typeof SizeList)[number];
+export type SizeProps = {
+    /**
+     * The size attribute changes the font-size and other related sizes of the component.
+     */
+    size?: SizeType;
+};
+export declare const EmphasisList: readonly ["weak", "strong"];
+export type EmphasisType = (typeof EmphasisList)[number];
+export type EmphasisProps = {
+    /**
+     * The emphasis attribute divides in between a weak or strong importance.
+     */
+    emphasis?: EmphasisType;
+};
+export declare const TagEmphasisList: readonly ["weak", "strong", "origin"];
+export type TagEmphasisType = (typeof TagEmphasisList)[number];
+export type TagEmphasisProps = {
+    /**
+     * The emphasis attribute divides in between a weak, strong or origin appearance.
+     */
+    emphasis?: TagEmphasisType;
+};
+export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
+export type ValidationType = (typeof ValidationList)[number];
+export type FormProps = {
+    /**
+     * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
+     */
+    validation?: ValidationType;
+    /**
+     * The disabled attribute can be set to keep a user from clicking on the form element.
+     */
+    disabled?: boolean;
+    /**
+     * 	Associates the control with a form element
+     */
+    form?: string;
+    /**
+     * The label attribute specifies the caption of the form element.
+     */
+    label?: string;
+    /**
+     * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
+     */
+    name?: string;
+    /**
+     * When the required attribute specified, the user will be required to fill the form element before submitting the form.
+     */
+    required?: boolean;
+    /**
+     * Enables/disables the visibility of the label
+     */
+    showLabel?: boolean;
+    /**
+     * The value property is to receive results from the native form element.
+     */
+    value?: any;
+};
+export type FormTextProps = {
+    /**
+     * Maximum length (number of characters) of value
+     */
+    maxLength?: number;
+    /**
+     * Minimum length (number of characters) of value
+     */
+    minLength?: number;
+    /**
+     * The disabled attribute can be set to keep a user from edit on the form element
+     */
+    readOnly?: boolean;
+};
+export type FormCheckProps = {
+    /**
+     * Define the radio or checkbox elements checked state
+     */
+    checked?: boolean;
+};
+export declare const LabelVariantList: readonly ["above", "floating"];
+export type LabelVariantType = (typeof LabelVariantList)[number];
+export declare const AutoCompleteList: readonly ["off", "on", "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "email", "username", "new-password", "current-password", "one-time-code", "organization-title", "organization", "street-address", "shipping", "billing", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-extension", "impp", "url", "photo", "webauthn"];
+export type AutoCompleteType = (typeof AutoCompleteList)[number];
+export type FormMessageProps = {
+    /**
+     * Change the variant of the label to float or hidden
+     */
+    variant?: LabelVariantType;
+    /**
+     * Text that appears in the form control when it has no value set
+     */
+    placeholder?: string;
+    /**
+     * Optional helper message for form components
+     */
+    message?: string;
+    /**
+     * Helper message for valid form components
+     */
+    validMessage?: string;
+    /**
+     * Helper message for invalid form components
+     */
+    invalidMessage?: string;
+    /**
+     * Set/overwrite icon for helper message for form components
+     */
+    messageIcon?: IconTypes;
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete?: string | AutoCompleteType;
+    /**
+     * Enables or disables the visibility of the message.
+     */
+    showMessage?: boolean;
+};
+export type FormState = {
+    _messageId?: string;
+    _validMessageId?: string;
+    _invalidMessageId?: string;
+    _descByIds?: string;
+    _value?: string;
+    /**
+     * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+     * Currently VoiceOver isn't supporting changes from aria-describedby.
+     * This is an internal Fallback
+     */
+    _voiceOverFallback?: string;
+};
+export type InitializedState = {
+    initialized: boolean;
+};
+export declare const LinkCurrentList: readonly ["time", "true", "false", "date", "page", "step", "location"];
+export type LinkCurrentType = (typeof LinkCurrentList)[number];
+export declare const LinkTargetList: readonly ["_self", "_blank", "_parent", "_top"];
+export type LinkTargetType = (typeof LinkTargetList)[number];
+export declare const LinkReferrerPolicyList: readonly ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"];
+export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
+export type LinkProps = {
+    /**
+     * Sets aria attribute based on [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
+     */
+    current?: boolean | LinkCurrentType;
+    /**
+     * Disables the link.
+     */
+    disabled?: boolean;
+    /**
+     * The [URL that the hyperlink points to](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
+     */
+    href?: string;
+    /**
+     * Hints for the human [language of the linked page or document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
+     */
+    hreflang?: string;
+    /**
+     * Sets aria attribute based on [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
+     */
+    label?: string;
+    /**
+     * Where to open the linked URL, as the name for a [browsing context](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
+     */
+    target?: LinkTargetType;
+    /**
+     * The relationship of the linked URL as space-separated link types.
+     */
+    rel?: string;
+    /**
+     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     */
+    role?: string;
+    /**
+     * How much of the referrer to send when following the link.
+     */
+    referrerpolicy?: LinkReferrerPolicyType;
+    /**
+     * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
+     */
+    selected?: boolean;
+};
+export type TextProps = {
+    /**
+     * Alternative for default slot/children.
+     */
+    text?: string;
+};
+export type ClickEvent<T> = React.MouseEvent<T, MouseEvent>;
+export type ClickEventProps<T> = {
+    /**
+     * React specific onClick to pass to forward ref.
+     */
+    onClick?: (event: ClickEvent<T>) => void;
+};
+export type ClickEventState<T> = {
+    handleClick: (event: ClickEvent<T>) => void;
+};
+export type ToggleEventProps = {
+    onToggle?: (open: boolean) => void;
+};
+export type ToggleEventState<T> = {
+    toggle: (event?: ClickEvent<T>) => void;
+};
+export type CloseEventProps = {
+    /**
+     * Function to handle button click (close).
+     */
+    onClose?: (event?: any) => void;
+};
+export type CloseEventState = {
+    handleClose: (event: any) => void;
+};
+export declare const AlignmentList: readonly ["start", "center"];
+export type AlignmentType = (typeof AlignmentList)[number];
+export type AlignmentProps = {
+    /**
+     * Define the content alignment in full width
+     */
+    alignment?: AlignmentType;
+};
+export type ActiveProps = {
+    /**
+     * If the tab is checked/active.
+     */
+    active?: boolean;
+};
+export type InputEvent<T> = React.FormEvent<T>;
+export type InputEventProps<T> = {
+    input?: (event: InputEvent<T>) => void;
+    onInput?: (event: InputEvent<T>) => void;
+};
+export type InputEventState<T> = {
+    handleInput: (event: InputEvent<T>) => void;
+};
+export type ChangeEvent<T> = React.ChangeEvent<T>;
+export type ChangeEventProps<T> = {
+    change?: (event: ChangeEvent<T>) => void;
+    onChange?: (event: ChangeEvent<T>) => void;
+};
+export type ChangeEventState<T> = {
+    handleChange: (event: ChangeEvent<T>) => void;
+};
+export type InteractionEvent<T> = React.FocusEvent<T>;
+export type FocusEventProps<T> = {
+    blur?: (event: InteractionEvent<T>) => void;
+    onBlur?: (event: InteractionEvent<T>) => void;
+    focus?: (event: InteractionEvent<T>) => void;
+    onFocus?: (event: InteractionEvent<T>) => void;
+};
+export type FocusEventState<T> = {
+    handleBlur: (event: InteractionEvent<T>) => void;
+    handleFocus: (event: InteractionEvent<T>) => void;
+};
+export type InnerCloseButtonProps = {
+    /**
+     * The closeButtonId attribute changes the id inside the close button.
+     */
+    closeButtonId?: string;
+    /**
+     * The closeButtonText attribute changes the text inside the close button.
+     */
+    closeButtonText?: string;
+};
+export type NavigationBackButtonProps = {
+    /**
+     * The backButtonId attribute changes the id inside the back button.
+     */
+    backButtonId?: string;
+    /**
+     * The backButtonText attribute changes the text inside the back button.
+     */
+    backButtonText?: string;
+};
+export type AriaLabelledByProps = {
+    /**
+     * Pass aria-labelledby to inner element
+     */
+    labelledBy?: string;
+};
+export type AriaControlsProps = {
+    /**
+     * Pass aria-controls to inner element
+     */
+    controls?: string;
+};
+export type ValueLabelType = {
+    value: string;
+    label?: string;
+};

package/dist/shared/model.js

@@ -0,0 +1,20 @@
+export const SemanticList = ['adaptive', 'neutral', 'critical', 'informational', 'warning', 'successful'];
+export const SpacingList = ['medium', 'small', 'large', 'none'];
+export const MarginList = ['medium', 'small', 'large', 'none'];
+export const PlacementList = ['left', 'right', 'top', 'bottom', 'left-start', 'left-end', 'right-start', 'right-end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
+export const GapSpacingList = ['none', '3x-large', '2x-large', 'x-large', 'large', 'medium', 'small', 'x-small', '2x-small', '3x-small'];
+export const OrientationList = ['horizontal', 'vertical'];
+export const WidthList = ['full', 'auto'];
+export const MaxWidthList = ['full', 'medium', 'large', 'small'];
+export const PopoverDelayList = ['none', 'slow', 'fast'];
+export const PopoverWidthList = ['auto', 'fixed'];
+export const SizeList = ['small', 'medium'];
+export const EmphasisList = ['weak', 'strong'];
+export const TagEmphasisList = [...EmphasisList, 'origin'];
+export const ValidationList = ['invalid', 'valid', 'no-validation'];
+export const LabelVariantList = ['above', 'floating'];
+export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
+export const LinkCurrentList = ['time', 'true', 'false', 'date', 'page', 'step', 'location'];
+export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
+export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
+export const AlignmentList = ['start', 'center'];

package/dist/utils/form-components.d.ts

@@ -0,0 +1,2 @@
+export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
+export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;

package/dist/utils/form-components.js

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
+    // Change event to work with reactive and template driven forms
+    component.propagateChange(event.target[modelValue]);
+    component.writeValue(event.target[modelValue]);
+};
+export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
+    // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+    emit(`update:${modelValue}`, event.target[modelValue]);
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,61 @@
+export declare const uuid: () => string;
+export declare const addAttributeToChildren: (element: Element, attribute: {
+    key: string;
+    value: string;
+}) => void;
+export type ClassNameArg = string | {
+    [key: string]: boolean | undefined;
+} | undefined;
+export declare const cls: (...args: ClassNameArg[]) => string;
+export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+export declare const visibleInVX: (el: Element) => boolean;
+export declare const visibleInVY: (el: Element) => boolean;
+export declare const isInView: (el: Element) => {
+    outTop: boolean;
+    outBottom: boolean;
+    outLeft: boolean;
+    outRight: boolean;
+};
+export interface DBDataOutsidePair {
+    vx?: 'left' | 'right';
+    vy?: 'top' | 'bottom';
+}
+export declare const handleDataOutside: (el: Element) => DBDataOutsidePair;
+export declare const isArrayOfStrings: (value: unknown) => value is string[];
+export declare const hasVoiceOver: () => boolean;
+export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
+/**
+ * Some frameworks like stencil would not add "true" as value for a prop
+ * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Some boolean to convert to string
+ */
+export declare const getBooleanAsString: (originBool?: boolean) => any;
+export declare const getHideProp: (show?: boolean) => any;
+export declare const stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
+declare const _default: {
+    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+    cls: (...args: ClassNameArg[]) => string;
+    addAttributeToChildren: (element: Element, attribute: {
+        key: string;
+        value: string;
+    }) => void;
+    uuid: () => string;
+    visibleInVX: (el: Element) => boolean;
+    visibleInVY: (el: Element) => boolean;
+    isInView: (el: Element) => {
+        outTop: boolean;
+        outBottom: boolean;
+        outLeft: boolean;
+        outRight: boolean;
+    };
+    handleDataOutside: (el: Element) => DBDataOutsidePair;
+    isArrayOfStrings: (value: unknown) => value is string[];
+    hasVoiceOver: () => boolean;
+    delay: (fn: () => void, ms: number) => Promise<unknown>;
+    getBooleanAsString: (originBool?: boolean) => any;
+    getHideProp: (show?: boolean) => any;
+    stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
+};
+export default _default;