@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-5W5E.1

package/dist/types/components/error-boundary/MrlErrorBoundary.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+interface ErrorProps {
+    children?: React.ReactNode;
+    /**
+     * Required to log the error to observability.
+     *
+     * @param error
+     * @param errorInfo
+     * @returns void
+     */
+    logError: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /**
+     * Fallback component to render when there is an error.
+     */
+    fallback: React.ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+/**
+ * When an error occurs during rendering, this component catches the error.
+ * Renders a fallback component for a user friendly msg and calls the log error callback.
+ *
+ * Error boundaries DO NOT catch errors for:
+ * Event handlers
+ * Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
+ * Server side rendering
+ * Errors thrown in the error boundary itself (rather than its children)
+ *
+ * @param ErrorProps
+ * @returns ErrorBoundary component
+ */
+declare class ErrorBoundary extends React.Component<ErrorProps, State> {
+    /**
+     * Error boundry
+     *
+     * @param props fallback and logError
+     */
+    constructor(props: ErrorProps);
+    /**
+     * Update state so the next render will show the fallback UI.
+     *
+     * @param _error Error
+     * @returns State
+     */
+    static getDerivedStateFromError: (_error: Error) => State;
+    /**
+     * componentDidCatch react lifecycle method
+     *
+     * @param error error object
+     * @param errorInfo react.error info
+     */
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    /**
+     * Renders react node wrapped in error handler.
+     *
+     * @returns React.ReactNode
+     */
+    render(): React.ReactNode;
+}
+export declare const MrlErrorBoundary: typeof ErrorBoundary;
+export {};

package/dist/types/components/error-boundary/index.d.ts

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

package/dist/types/components/filter/MrlFilter/MrlFilter.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { RovingPropTypes } from '../../rovingTabindex';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterProps = {
+    /**
+     * The label for the radio group.
+     */
+    radioGroupLabel: string;
+    /**
+     * The children elements to be rendered within the MrlFilter component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback function that is called when the filter value changes.
+     */
+    onFilterChange?: (checked: string) => void;
+    /**
+     * The default checked value for the filter. It will match the value of the MrlFilterItem.
+     */
+    defaultCheckedValue?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> & Required<Pick<RovingPropTypes, 'orientation'>> & DataQa;
+/**
+ * MrlFilter component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilter component.
+ */
+export declare function MrlFilter(props: MrlFilterProps): React.ReactElement;

package/dist/types/components/filter/MrlFilter/index.d.ts

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

package/dist/types/components/filter/MrlFilterContext/MrlFilterContext.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MrlFilterProps } from '../MrlFilter/MrlFilter';
+type MrlFilterState = {
+    checked: string;
+};
+type MrlFilterContextValue = {
+    state: MrlFilterState;
+    dispatch: React.Dispatch<MrlFilterAction>;
+};
+type SET_CHECKED = {
+    type: 'SET_CHECKED';
+    payload: string;
+};
+type MrlFilterAction = SET_CHECKED;
+type MrlFilterContextProviderProps = {
+    children: React.ReactNode;
+} & Pick<MrlFilterProps, 'defaultCheckedValue' | 'onFilterChange'>;
+/**
+ * MrlFilterContextProvider component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterContextProvider component.
+ */
+export declare function MrlFilterContextProvider(props: MrlFilterContextProviderProps): JSX.Element;
+/**
+ * Custom hook to use the MrlFilterContext.
+ *
+ * This hook provides access to the MrlFilterContext value.
+ *
+ * @returns The MrlFilterContext value.
+ * @throws Will throw an error if used outside of a MrlFilterContextProvider.
+ */
+export declare const useMrlFilterContext: () => MrlFilterContextValue;
+export {};

package/dist/types/components/filter/MrlFilterContext/index.d.ts

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

package/dist/types/components/filter/MrlFilterItem/MrlFilterItem.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataQa } from '../../../utils/dataQa';
+export type MrlFilterItemProps = {
+    /**
+     * The filter item's value.
+     */
+    value: string;
+    /**
+     * The content to be displayed within the filter item.
+     */
+    children?: React.ReactNode;
+    /**
+     * The count of items for this filter option.
+     */
+    count?: number;
+} & React.ComponentPropsWithoutRef<'span'> & DataQa;
+/**
+ * MrlFilterItem component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterItem component.
+ */
+export declare function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement;

package/dist/types/components/filter/MrlFilterItem/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './MrlFilterContext';
+export * from './MrlFilterItem';
+export * from './MrlFilter';

package/dist/types/components/focus-trap/MrlFocusTrap/MrlFocusTrap.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface PropTypes {
+    /**
+     * Elements to be rendered within the focus trap
+     */
+    children: React.ReactNode | ((focusTrapRef: React.RefObject<HTMLDivElement>) => JSX.Element);
+    /**
+     * Specifies whether the focus trap should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Disable autofocus
+     */
+    disableAutofocus?: boolean;
+    /**
+     * Focus trap container reference. Can be used to specify a custom container if a ref is already available
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * Focus Trap React Component
+ * @param {object} props - The component props.
+ * @param {React.ReactElement} props.children - A function that returns the component's child element and receives a ref to the container.
+ * @param {boolean} [props.disabled] - Specifies whether the focus trap should be disabled.
+ * @param { React.RefObject<HTMLElement>} props.containerRef - Focus trap container reference
+ * @returns {React.ReactElement} - The rendered FocusTrap component.
+ */
+export declare const MrlFocusTrap: ({ children, disabled, disableAutofocus, containerRef, ...rest }: PropTypes) => JSX.Element;
+export {};

package/dist/types/components/focus-trap/MrlFocusTrap/index.d.ts

@@ -0,0 +1 @@
+export { MrlFocusTrap } from './MrlFocusTrap';

package/dist/types/components/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { MrlFocusTrap } from './MrlFocusTrap';

package/dist/types/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates, StaticIconConfig } from '../../constants';
+import './MrlCheckbox.global.scss';
+interface MrlCheckboxProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** Additional class to add to the container of the checkbox and label */
+    className?: string;
+    /** Adjusts the styles of the label, icon and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+    /** The text to display as the checkbox's label */
+    label: string;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /**
+     * Description, additional context text for the user.
+     * It can be a string or a React component for custom render.
+     * When using a React component it's necessary to add an id to the custom element and
+     * pass it to the MrlCheckbox through 'attrs["aria-describedby"]' to make it accessible
+     * to screen readers.
+     * Custom description should also implement the disabled state styles
+     * for text when the input is disabled or set color: inherit.
+     * @example
+     * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={
+     *   <p id={customId}>description</p>
+     * }>
+     */
+    description?: string | React.ReactNode;
+}
+/**
+ * Form element with an associated text label that allows the user to select one or more options
+ * from a provided list
+ * @param {MrlCheckboxProps} props - the component props
+ * @returns a checkbox element with an associated label
+ */
+export declare function MrlCheckbox({ attrs, className, description, hasMultilineLabel, state, selected, icon, label, ...rest }: MrlCheckboxProps): JSX.Element;
+export {};

package/dist/types/components/form/checkbox/MrlCheckbox/index.d.ts

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

package/dist/types/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import { CheckboxSelected, CheckboxStates } from '../../constants';
+import './MrlCheckboxStandalone.global.scss';
+interface MrlCheckboxStandaloneProps {
+    /** Applies additional HTML attributes to the checkbox element */
+    attrs?: AttrsObject;
+    /** The current state of the checkbox input based on user interactions or permissions */
+    state?: CheckboxStates;
+    /** Sets what selection state the checkbox is in. */
+    selected?: CheckboxSelected;
+}
+/**
+ * Input that allows the user to select one or more options from a provided list.
+ * Note, this component does not provide out of the box accessibility for ensuring
+ * an associated label and must be manually setup during adoption.
+ * @param {MrlCheckboxStandaloneProps} props - the component props
+ * @returns a checkbox element
+ */
+export declare function MrlCheckboxStandalone({ attrs, state, selected, ...rest }: MrlCheckboxStandaloneProps): JSX.Element;
+export {};

package/dist/types/components/form/checkbox/MrlCheckboxStandalone/index.d.ts

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

package/dist/types/components/form/constants.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { DSIconType } from '../svg';
+/**
+ * This should be used to communciate error information for a specific input
+ */
+export interface MrlFormInputError {
+    message: string;
+}
+export type InputStates = 'disabled' | 'error' | 'read-only';
+export type InputKinds = 'default' | 'inline' | 'inline-label';
+export type InputSizes = 'default' | 'large';
+export declare const allowedCheckboxValues: {
+    selected: readonly ["default", "checked", "indeterminate"];
+    states: readonly ["default", "disabled", "error", "read-only"];
+};
+export type CheckboxStates = (typeof allowedCheckboxValues.states)[number];
+export type CheckboxSelected = (typeof allowedCheckboxValues.selected)[number];
+interface CheckboxDefaults {
+    selected: CheckboxSelected;
+    state: CheckboxStates;
+}
+export declare const checkboxDefaults: CheckboxDefaults;
+export declare const allowedSelectItemValues: {
+    states: readonly ["default", "disabled", "selected"];
+};
+export type SelectItemStates = (typeof allowedSelectItemValues.states)[number];
+interface SelectItemDefaults {
+    state: SelectItemStates;
+}
+export declare const selectItemDefaults: SelectItemDefaults;
+export declare const allowedSelectMenuValues: {
+    positions: readonly ["bottom", "top"];
+};
+export type SelectMenuPositions = (typeof allowedSelectMenuValues.positions)[number];
+interface SelectMenuDefaults {
+    position: SelectMenuPositions;
+}
+export declare const selectMenuDefaults: SelectMenuDefaults;
+export declare const allowedSelectValues: {
+    states: readonly ["default", "disabled", "open", "read-only"];
+};
+export type SelectStates = (typeof allowedSelectValues.states)[number];
+interface SelectDefaults {
+    size: InputSizes;
+    kind: InputKinds;
+    state: SelectStates;
+}
+export declare const selectDefaults: SelectDefaults;
+export interface StaticIconConfig {
+    icon: DSIconType;
+    theme?: string;
+}
+export interface RightActionConfig extends StaticIconConfig {
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    label: string;
+}
+export declare const allowedLabelValues: {
+    kinds: readonly ["block", "inline"];
+    states: readonly ["default", "disabled"];
+};
+export type LabelStates = (typeof allowedLabelValues.states)[number];
+export type LabelKind = (typeof allowedLabelValues.kinds)[number];
+interface LabelDefaults {
+    kind: LabelKind;
+    state: LabelStates;
+}
+export declare const labelDefaults: LabelDefaults;
+export interface FormControlDefaults {
+    disabled: boolean;
+    label: string;
+}
+export interface FieldsetDefault {
+    label: string;
+}
+/**
+ * Default values for props on the Fieldset component;
+ * Shared between the component and Storybook
+ */
+export declare const fieldsetDefault: FieldsetDefault;
+/**
+ * Default values for props on the Fieldset component which is used to group Textarea components;
+ * Shared between the component and Storybook
+ */
+export declare const textareaDefaults: FormControlDefaults;
+export {};

package/dist/types/components/form/date-picker/MrlDatePicker.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { InputStates } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+export interface MrlDatePickerProps extends React.ComponentPropsWithRef<'input'>, DataQa {
+    /** Id of the text input */
+    inputId: string;
+    kind?: 'default' | 'borderless';
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    autofocus?: boolean;
+    /**
+     * Event handler for onChange Events
+     * The value is normalized to yyyy-mm-dd
+     *
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+     */
+    onChange?: React.ComponentPropsWithRef<'input'>['onChange'];
+}
+/**
+ * Allows the user to input a date
+ *
+ * @param {MrlDatePickerProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a date input element
+ */
+export declare const MrlDatePicker: React.ForwardRefExoticComponent<Omit<MrlDatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/form/date-picker/index.d.ts

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

package/dist/types/components/form/fieldset/MrlFieldset/MrlFieldset.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+interface MrlFieldsetProps {
+    /** Applies additional HTML attributes to the fieldset element */
+    attrs?: AttrsObject;
+    /** Text for the fieldset's legend */
+    label: string;
+    /** related form elements that will be grouped by the fieldset  */
+    children: React.ReactNode;
+    /** Additional class to add to the fieldset */
+    className?: string;
+}
+/**
+ * Groups related form elements
+ * @param {MrlFieldsetProps} props - the component props
+ * @returns a fieldset element
+ */
+export declare function MrlFieldset({ attrs, children, className, label, ...rest }: MrlFieldsetProps): JSX.Element;
+export {};

package/dist/types/components/form/fieldset/MrlFieldset/index.d.ts

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

package/dist/types/components/form/hooks/useActiveColor.d.ts

@@ -0,0 +1,13 @@
+import { InputStates } from '../constants';
+type useActiveColorReturn = {
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+};
+/**
+ * Custom hook used to track the active color state of inputs
+ *
+ * @param {InputStates | undefined} state - the input state
+ * @returns the hasActiveColor state and handler
+ */
+export declare function useActiveColor(state?: InputStates): useActiveColorReturn;
+export {};

package/dist/types/components/form/hooks/useIsEditable.d.ts

@@ -0,0 +1,28 @@
+import { InputStates } from '../constants';
+type UseIsEditableReturn = {
+    isEditable: boolean;
+    isEditing: boolean;
+    setIsEditable: (isEditable: boolean) => void;
+    setIsEditing: (isEditingUpdate: boolean) => void;
+};
+/**
+ * Custom hook used to track the edit state of a text input.
+ *
+ * isEditing represents if someone has actively decided to start editing a field.
+ * isEditable controls if the input field can be interacted with directly.
+ *
+ * This leaves open the possibility for a field to be editable even if someone has not explicitly decided to edit it.
+ * @param param - useIsEditable options
+ * @param param.changeHandler - optional set handler
+ * @param param.initialValue - the text input initial value
+ * @param param.state - the text input state
+ * @param param.value - optional control value
+ * @returns the isEditable, isEditing state and handler
+ */
+export declare function useIsEditable({ changeHandler, initialValue, state, value }: {
+    changeHandler?: (isEditableUpdate: boolean) => void;
+    initialValue: boolean;
+    state?: InputStates;
+    value?: boolean;
+}): UseIsEditableReturn;
+export {};

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

@@ -0,0 +1,19 @@
+export * from './legacy-select';
+export * from './legacy-select/MrlLegacySelectItem';
+export * from './legacy-select/MrlLegacySelectMenu';
+export * from './text-input/MrlTextInput';
+export * from './text-input/MrlEditableTextInput';
+export * from './label/MrlLabel';
+export * from './label/MrlLabelWithDescription';
+export * from './textarea/MrlTextarea';
+export * from './textarea/MrlEditableTextarea';
+export * from './fieldset/MrlFieldset';
+export * from './checkbox/MrlCheckbox';
+export * from './checkbox/MrlCheckboxStandalone';
+export * from './constants';
+export * from './radio/MrlRadioGroup';
+export * from './radio/MrlRadioButton';
+export * from './radio/MrlRadioButtonStandalone';
+export * from './switch';
+export * from './date-picker';
+export * from './select';

package/dist/types/components/form/label/MrlLabel/MrlLabel.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+import { LabelKind, LabelStates, StaticIconConfig } from '../../constants';
+interface MrlLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+    /** Applies additional HTML attributes to the label element */
+    attrs?: AttrsObject;
+    /** Informs the user of the form element's purpose */
+    text: string;
+    /** ID of the form elements so all users can understand the relationship between the two elements */
+    htmlFor?: string;
+    /** Label style based on the type of associated form element */
+    kind?: LabelKind;
+    /**
+     * Configures a leading icon within the label. This is only supported with an inline label
+     */
+    icon?: StaticIconConfig;
+    /**
+     * Changes the state of the label based on state of the associated input. Note, do not
+     * use this prop only for styling, it must match the state of the input for accessibility compliance.
+     */
+    state?: LabelStates;
+    /** Additional class to add to the label */
+    className?: string;
+}
+/**
+ * Provides a label for a form element
+ *
+ * @param {MrlLabelProps} props - the component props
+ * @returns a label element
+ */
+export declare function MrlLabel({ attrs, className, text, htmlFor, kind, icon, state, ...rest }: MrlLabelProps): JSX.Element;
+export {};

package/dist/types/components/form/label/MrlLabel/index.d.ts

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

package/dist/types/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { StaticIconConfig } from '../../constants';
+interface MrlLabelWithDescriptionProps {
+    /** Additional class to add to the container of the label and description */
+    className?: string;
+    /** Description text or a custom component */
+    description?: string | React.ReactNode;
+    /** The id that's linked to the form element "aria-describedby" attribute */
+    descriptionId?: string;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** Indeterminate state */
+    isIndeterminate?: boolean;
+    /** Selected state */
+    isSelected?: boolean;
+    /** Adjusts the styles of the label, icon, and description when the label is multiline */
+    hasMultilineLabel?: boolean;
+    /** ID of the form elements so all users can understand the relationship between the two elements */
+    htmlFor: string;
+    /** Leading label icon */
+    icon?: StaticIconConfig;
+    /** The text to display as the label */
+    label: string;
+}
+/**
+ * Form control label that can render a label, an icon and description text
+ *
+ * @param {MrlLabelWithDescriptionProps} props - the component props
+ * @returns a form control label with description
+ */
+export declare function MrlLabelWithDescription({ className, description, descriptionId, isDisabled, isIndeterminate, isSelected, hasMultilineLabel, htmlFor, icon, label, ...rest }: MrlLabelWithDescriptionProps): JSX.Element;
+export {};

package/dist/types/components/form/label/MrlLabelWithDescription/index.d.ts

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

package/dist/types/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { SelectStates, InputKinds, InputSizes } from '../../constants';
+import { AttrsObject } from '../../../../utils';
+export interface MrlLegacySelectProptypes extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional function to be run when the value of the select changes */
+    hookChange?: (newValue?: string) => void | undefined;
+    /** State of the select element based on user actions or permissions */
+    state?: SelectStates;
+    /**
+     * By default, we will select the first item in the list.
+     * To select a different option by default, pass that item’s value as the defaultValue to the mrlSelect element.
+     */
+    defaultValue?: string;
+    /**
+     * Because this is a custom element, we can't use a standard "for" attribute setup. The label
+     * element needs to have an id and then we reference via the select with aria
+     */
+    labelId: string;
+    /**
+     * Changes the visual style of the select trigger; Use 'inline when your select is inline
+     * with other content
+     */
+    kind?: InputKinds;
+    /**
+     * Changes the visual size of the select trigger; Currently only supported when kind="inline"
+     */
+    size?: InputSizes;
+    /**
+     * Applies additional HTML attributes to the `mrl-select` element after the
+     * hydration process. It is recommended only to use when overwriting an attribute
+     * assigned internally by the design system.
+     * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.
+     * Otherwise, the value object needs to be stringified to not receive `"[Object object]"`.
+     * Example: `attrs='{ "tabindex": "1" }'`
+     */
+    attrs?: AttrsObject;
+    /**
+     * menu - list of options for the user to chose from; expects an `MrlLegacySelectMenu` component
+     */
+    children?: React.ReactNode;
+    /**
+     * optional id - we will generate a unique one if it isn't given.
+     * ID will be decorated with `${id}-mrl-select` to not conflict with aria controls.
+     */
+    id?: string;
+    /**
+     * optional value - control which item is selected by passing an `MrlLegacySelectItem` value (overrides `defaultValue`)
+     * Can be used in conjunction with `hookChange` to create a controlled component.
+     */
+    value?: string;
+}
+/**
+ * Creates and exports component class for Mural Select
+ *
+ * @param {MrlLegacySelectProptypes} props the props for your MrlLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlLegacySelect: ({ attrs, children, kind, labelId, size, ...theRest }: MrlLegacySelectProptypes) => React.ReactElement;

package/dist/types/components/form/legacy-select/MrlLegacySelect/index.d.ts

@@ -0,0 +1 @@
+export { MrlLegacySelect, type MrlLegacySelectProptypes } from './MrlLegacySelect';

package/dist/types/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../../utils';
+export interface MrlLegacySelectItemProptypes extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * value of the select item that is stored as the selected value of the select input
+     */
+    value: string;
+    /**
+     * index of the select item starting at 0
+     */
+    index?: number;
+    /**
+     * Applies additional HTML attributes to the `mrl-select-item` element after the
+     * hydration process. It is recommended only to use when overwriting an attribute
+     * assigned internally by the design system.
+     * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.
+     * Otherwise, the value object needs to be stringified to not receive `"[Object object]"`.
+     * Example: `attrs='{ "aria-disabled": "true" }'`
+     */
+    attrs?: AttrsObject;
+    /**
+     * Set the item to disabled, this will prevent click and enter events.
+     */
+    isDisabled?: boolean;
+    /**
+     * content for the item
+     */
+    children: React.ReactNode;
+}
+/**
+ * Renders a select component
+ *
+ * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlLegacySelectItem: ({ attrs, children, index, value, isDisabled, ...theRest }: MrlLegacySelectItemProptypes) => React.ReactElement;