@muraldevkit/ui-toolkit 4.25.1 → 4.27.0

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

@@ -1,6 +1,6 @@
-export * from './select';
-export * from './select/MrlSelectItem';
-export * from './select/MrlSelectMenu';
+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';
@@ -15,4 +15,4 @@ export * from './radio/MrlRadioButton';
 export * from './radio/MrlRadioButtonStandalone';
 export * from './switch';
 export * from './date-picker';
-export * from './new-select';
+export * from './select';

package/dist/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/components/form/legacy-select/MrlLegacySelect/index.d.ts

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

package/dist/components/form/{select/MrlSelectItem/MrlSelectItem.d.ts → legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AttrsObject } from '../../../../utils';
-export interface MrlSelectItemProptypes extends React.HTMLAttributes<HTMLDivElement> {
+export interface MrlLegacySelectItemProptypes extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * value of the select item that is stored as the selected value of the select input
      */
@@ -30,7 +30,7 @@ export interface MrlSelectItemProptypes extends React.HTMLAttributes<HTMLDivElem
 /**
  * Renders a select component
  *
- * @param {MrlSelectItemProptypes} props the props for your MrlLink
+ * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-export declare const MrlSelectItem: ({ attrs, children, index, value, isDisabled, ...theRest }: MrlSelectItemProptypes) => React.ReactElement;
+export declare const MrlLegacySelectItem: ({ attrs, children, index, value, isDisabled, ...theRest }: MrlLegacySelectItemProptypes) => React.ReactElement;

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

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

package/dist/components/form/{select/MrlSelectMenu/MrlSelectMenu.d.ts → legacy-select/MrlLegacySelectMenu/MrlLegacySelectMenu.d.ts}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactElement } from 'react';
 import { SelectMenuPositions } from '../../constants';
 import { AttrsObject } from '../../../../utils';
-export interface MrlSelectMenuProptypes extends React.HTMLAttributes<HTMLDivElement> {
+export interface MrlLegacySelectMenuProptypes extends React.HTMLAttributes<HTMLDivElement> {
     /** The placement of the menu in relation to its trigger */
     position?: SelectMenuPositions;
     /** Current value of the select input */
@@ -22,7 +22,7 @@ export interface MrlSelectMenuProptypes extends React.HTMLAttributes<HTMLDivElem
      */
     attrs?: AttrsObject;
     /**
-     * menu - list of options for the user to chose from; expects an `MrlSelectMenu` component
+     * menu - list of options for the user to chose from; expects an `MrlLegacySelectMenu` component
      */
     children?: React.ReactNode;
     /**
@@ -37,7 +37,7 @@ export interface MrlSelectMenuProptypes extends React.HTMLAttributes<HTMLDivElem
  * controlled by the wrapping mrl-select but we need this component
  * within our HTML structure for valid aria usage.
  *
- * @param {MrlSelectMenuProptypes} props MrlSelectMenuProptypes
- * @returns {React.ReactElement} returns a MrlSelectMenu
+ * @param {MrlLegacySelectMenuProptypes} props MrlLegacySelectMenuProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelectMenu
  */
-export declare const MrlSelectMenu: ({ attrs, children, labelId, position, ...theRest }: MrlSelectMenuProptypes) => React.ReactElement;
+export declare const MrlLegacySelectMenu: ({ attrs, children, labelId, position, ...theRest }: MrlLegacySelectMenuProptypes) => React.ReactElement;

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MrlLegacySelectProptypes } from './MrlLegacySelect';
+/**
+ * Creates and exports component class for Mural Select
+ *
+ * @param {MrlLegacySelectProptypes} props MrlLegacySelectProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelect wrapped in a select provider.
+ */
+export declare const MrlLegacySelect: ({ hookChange, id, defaultValue, state, children, value, ...rest }: MrlLegacySelectProptypes) => React.ReactElement;

package/dist/components/form/{new-select → select}/MrlMultiSelect/MrlMultiSelect.d.ts

@@ -5,8 +5,8 @@ export interface MrlMultiSelectProps<T, IsMulti extends boolean = false, Group e
     hasError?: boolean;
     isReadOnly?: boolean;
 }
-export declare const CLASS_NAME_PREFIX = "MrlMultiSelect";
-export declare const MENU_LIST_CLASS_NAME: string;
+export declare const MULTI_SELECT_CLASS_NAME_PREFIX = "MrlMultiSelect";
+export declare const MULTI_SELECT_MENU_LIST_CLASS_NAME: string;
 /**
  * MrlSelect component
  *

package/dist/components/form/select/MrlSelect/MrlSelect.d.ts

@@ -1,58 +1,17 @@
-import * as React from 'react';
-import { SelectStates, InputKinds, InputSizes } from '../../constants';
-import { AttrsObject } from '../../../../utils';
-export interface MrlSelectProptypes 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 `MrlSelectMenu` 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 `MrlSelectItem` value (overrides `defaultValue`)
-     * Can be used in conjunction with `hookChange` to create a controlled component.
-     */
-    value?: string;
+/// <reference types="react" />
+import { GroupBase, Props } from 'react-select';
+import { SelectKind } from '../types';
+export interface MrlSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
+    hasError?: boolean;
+    isReadOnly?: boolean;
+    kind?: SelectKind;
 }
+export declare const SELECT_CLASS_NAME_PREFIX = "MrlSelect";
+export declare const SELECT_MENU_LIST_CLASS_NAME: string;
 /**
- * Creates and exports component class for Mural Select
+ * MrlSelect component
  *
- * @param {MrlSelectProptypes} props the props for your MrlLink
- * @returns {React.ReactElement} an a element containing the text you pass
+ * @param props - the component props
+ * @returns the select component
  */
-export declare const MrlSelect: ({ attrs, children, kind, labelId, size, ...theRest }: MrlSelectProptypes) => React.ReactElement;
+export declare function MrlSelect<T>(props: MrlSelectProps<T>): JSX.Element;

package/dist/components/form/select/MrlSelect/index.d.ts

@@ -1 +1 @@
-export { MrlSelect, type MrlSelectProptypes } from './MrlSelect';
+export * from './MrlSelect';

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

@@ -1,9 +1,2 @@
-import * as React from 'react';
-import { MrlSelectProptypes } from './MrlSelect';
-/**
- * Creates and exports component class for Mural Select
- *
- * @param {MrlSelectProptypes} props MrlSelectProptypes
- * @returns {React.ReactElement} returns a MrlSelect wrapped in a select provider.
- */
-export declare const MrlSelect: ({ hookChange, id, defaultValue, state, children, value, ...rest }: MrlSelectProptypes) => React.ReactElement;
+export * from './MrlSelect';
+export * from './MrlMultiSelect';

package/dist/components/tabs/MrlTabLink/MrlTabLink.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+export interface MrlTabLinkProps extends NavLinkProps {
+    /** Class to be applied to the NavLink element of the MrlTabLink */
+    className?: string;
+    icon?: React.ReactElement;
+    /**
+     * The id that will be passed to the MrlTabContext to set the active state.
+     * NOTE: This must match the `tabId` set on `MrlTabContent`!
+     */
+    id: string;
+    /** An addition function to call when clicking on a tab */
+    hookClick?: () => void;
+    text: string;
+}
+/**
+ * Renders a tab component
+ *
+ * @param {MrlTabLinkProps} props the props for your MrlTabLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlTabLink: ({ className, icon, id, hookClick, text, to, ...remainingProps }: MrlTabLinkProps) => React.ReactElement;

package/dist/components/tabs/MrlTabLink/index.d.ts

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

package/dist/components/tabs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './MrlTab';
 export * from './MrlTabContent';
 export * from './MrlTabGroup';
+export * from './MrlTabLink';
 export * from './MrlTabs';