@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/Tabs/Tab.js

@@ -0,0 +1,69 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TABS_CLASSNAME } from "./constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Tabs/Tab.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${TABS_CLASSNAME}__link`;
+var { block } = bem(CLASSNAME);
+/**
+* Tab component.
+*
+* Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Tab = (props) => {
+	const { className, icon, iconProps = {}, isAnyDisabled, isDisabled, id, isActive, label, handleFocus, handleKeyPress, tabIndex = -1, tabIndexProp = "tabIndex", keyPressProp = "onKeyPress", changeToTab, tabPanelId, shouldActivateOnFocus, tabId, Icon, Text, ref, ...forwardedProps } = props;
+	const changeToCurrentTab = () => {
+		if (isAnyDisabled) return;
+		changeToTab?.();
+	};
+	const onFocus = (event) => {
+		handleFocus?.(event);
+		if (shouldActivateOnFocus) changeToCurrentTab();
+	};
+	const onKeyPress = (event) => {
+		handleKeyPress?.(event);
+		if (event.key !== "Enter" || isAnyDisabled) return;
+		changeToCurrentTab();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		...forwardedProps,
+		type: "button",
+		id: tabId,
+		className: import_classnames.default(className, block({
+			"is-active": isActive,
+			"is-disabled": isAnyDisabled
+		})),
+		onClick: changeToCurrentTab,
+		[keyPressProp]: onKeyPress,
+		onFocus,
+		role: "tab",
+		[tabIndexProp]: isActive ? 0 : tabIndex,
+		"aria-disabled": isAnyDisabled,
+		"aria-selected": isActive,
+		"aria-controls": tabPanelId,
+		children: [icon && /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: Size.xs,
+			...iconProps
+		}), label && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			truncate: true,
+			children: label
+		})]
+	});
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, Tab };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabList.d.ts

@@ -0,0 +1,27 @@
+import { Alignment } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Tabs/TabList.d.ts
+declare enum TabListLayout {
+  clustered = "clustered",
+  fixed = "fixed"
+}
+/**
+ * Defines the props of the component.
+ */
+interface TabListProps extends HasClassName, HasTheme {
+  /** ARIA label (purpose of the set of tabs). */
+  ['aria-label']: string;
+  /** Tab list. */
+  children: JSXElement;
+  /** Layout of the tabs in the list. */
+  layout?: TabListLayout;
+  /** Position of the tabs in the list (requires 'clustered' layout). */
+  position?: Alignment;
+  /** ref to the wrapper element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TabListLayout, TabListProps };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabList.js

@@ -0,0 +1,52 @@
+import { Alignment } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TABS_CLASSNAME } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Tabs/TabList.tsx
+var { block, element } = bem(TABS_CLASSNAME);
+var TabListLayout = /* @__PURE__ */ function(TabListLayout) {
+	TabListLayout["clustered"] = "clustered";
+	TabListLayout["fixed"] = "fixed";
+	return TabListLayout;
+}({});
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TabList";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	layout: "fixed",
+	position: Alignment.left
+};
+/**
+* TabList component.
+*
+* Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TabList = (props) => {
+	const { "aria-label": ariaLabel, children, className, layout = DEFAULT_PROPS.layout, position = DEFAULT_PROPS.position, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`layout-${layout}`]: Boolean(layout),
+			[`position-${position}`]: Boolean(position),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: /* @__PURE__ */ jsx("div", {
+			className: element("links"),
+			role: "tablist",
+			"aria-label": ariaLabel,
+			children
+		})
+	});
+};
+//#endregion
+export { COMPONENT_NAME, DEFAULT_PROPS, TabList, TabListLayout };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,26 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Tabs/TabPanel.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabPanelProps extends HasClassName {
+  /** Whether the tab is active or not. */
+  isActive?: boolean;
+  /** Whether the tab is lazy loaded or not */
+  isLazy?: boolean;
+  /** Children */
+  children?: JSXElement;
+  /** ID applied to the tab button element (for aria-labelledby on the panel). */
+  tabId?: string;
+  /** ID of the associated tab panel (for aria-controls). */
+  id?: string;
+  /** Name of the prop used to set tab index (framework-dependent). */
+  tabIndexProp?: string;
+  /** Forward ref to the underlying button element. */
+  ref?: CommonRef;
+}
+type TabPanelPropsToOverride = 'tabId' | 'isLazy' | 'tabIndexProp';
+//#endregion
+export { TabPanelProps, TabPanelPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabPanel.js

@@ -0,0 +1,41 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Tabs/TabPanel.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TabPanel";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `lumx-tab-panel`;
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* TabPanel component.
+*
+* Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TabPanel = (props) => {
+	const { children, className, isActive, id, tabId, isLazy, tabIndexProp = "tabIndex", ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		id,
+		className: import_classnames.default(className, block({ "is-active": isActive })),
+		role: "tabpanel",
+		[tabIndexProp]: isActive ? 0 : -1,
+		"aria-labelledby": tabId,
+		children: (!isLazy || isActive) && children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TabPanel };

package/_internal/packages/lumx-core/src/js/components/Tabs/constants.js

@@ -0,0 +1,7 @@
+//#region ../lumx-core/src/js/components/Tabs/constants.ts
+/**
+* Component default class name and class prefix.
+*/
+var TABS_CLASSNAME = `lumx-tabs`;
+//#endregion
+export { TABS_CLASSNAME };

package/_internal/packages/lumx-core/src/js/components/Tabs/state.js

@@ -0,0 +1,53 @@
+//#region ../lumx-core/src/js/components/Tabs/state.ts
+var INIT_STATE = {
+	isLazy: true,
+	shouldActivateOnFocus: false,
+	activeTabIndex: 0,
+	ids: {
+		tab: [],
+		tabPanel: []
+	}
+};
+var reducer = (state, action) => {
+	switch (action.type) {
+		case "update": return {
+			...state,
+			...action.payload
+		};
+		case "setActiveTabIndex":
+			if (state.activeTabIndex === action.payload) return state;
+			return {
+				...state,
+				activeTabIndex: action.payload
+			};
+		case "register": {
+			const { type, id } = action.payload;
+			return {
+				...state,
+				ids: {
+					...state.ids,
+					[type]: [...state.ids[type], id]
+				}
+			};
+		}
+		case "unregister": {
+			const { type, id } = action.payload;
+			const index = state.ids[type].indexOf(id);
+			if (index === -1) return state;
+			const tabIds = [...state.ids.tab];
+			tabIds.splice(index, 1);
+			const tabPanelIds = [...state.ids.tabPanel];
+			tabPanelIds.splice(index, 1);
+			return {
+				...state,
+				ids: {
+					tab: tabIds,
+					tabPanel: tabPanelIds
+				}
+			};
+		}
+		default: return state;
+	}
+};
+//#endregion
+export { INIT_STATE, reducer };

package/_internal/packages/lumx-core/src/js/components/Text/index.d.ts

@@ -0,0 +1,55 @@
+import { ColorVariant, ColorWithVariants, Typography, WhiteSpace } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { TextElement } from "../../types/TextElement.js";
+import { CSSProperties } from "react";
+
+//#region ../lumx-core/src/js/components/Text/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TextProps extends HasClassName {
+  /**
+   * Color variant.
+   */
+  color?: ColorWithVariants;
+  /**
+   * Lightened or darkened variant of the selected color.
+   */
+  colorVariant?: ColorVariant;
+  /**
+   * Typography variant.
+   */
+  typography?: Typography;
+  /**
+   * Custom component to render the text.
+   */
+  as: TextElement;
+  /**
+   * Control whether the text should truncate or not.
+   * Setting as `true` will make the text truncate on a single line.
+   * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+   */
+  truncate?: boolean | {
+    lines: number;
+  };
+  /**
+   * Prevents text to wrap on multiple lines
+   * (automatically activated when single line text truncate is activated).
+   */
+  noWrap?: boolean;
+  /**
+   * WhiteSpace variant
+   * Ignored when `noWrap` is set to true
+   * Ignored when `truncate` is set to true or lines: 1
+   * */
+  whiteSpace?: WhiteSpace;
+  /**
+   * Children
+   */
+  children?: JSXElement;
+  /** list of styles to apply */
+  style?: CSSProperties;
+}
+//#endregion
+export { TextProps };

package/_internal/packages/lumx-core/src/js/components/Text/index.js

@@ -0,0 +1,50 @@
+import { font } from "../../utils/classNames/color/index.js";
+import { typography } from "../../utils/classNames/typography/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+//#region ../lumx-core/src/js/components/Text/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Text";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-text";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Text component common props
+*
+* @param  props Component props.
+* @return Common Props
+*/
+var getTextProps = (props) => {
+	const { className, color, colorVariant, noWrap, typography: typography$1, truncate, whiteSpace, style } = props;
+	const truncateLinesStyle = typeof truncate === "object" && truncate.lines > 1 && { "--lumx-text-truncate-lines": truncate.lines };
+	const isTruncatedMultiline = !!truncateLinesStyle;
+	const isTruncated = !!truncate;
+	/**
+	* Add custom white-space style if specified
+	* Disabled if noWrap is specified
+	* Disabled if truncated on one-line
+	* */
+	const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && { "--lumx-text-white-space": whiteSpace };
+	return {
+		className: import_classnames.default(className, block({
+			"is-truncated": isTruncated && !isTruncatedMultiline,
+			"is-truncated-multiline": isTruncatedMultiline,
+			"no-wrap": noWrap
+		}), typography$1 && typography(typography$1), color && font(color, colorVariant)),
+		style: {
+			...truncateLinesStyle,
+			...whiteSpaceStyle,
+			...style
+		}
+	};
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, getTextProps };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputText.d.ts

@@ -0,0 +1,21 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HTMLInputTypeAttribute } from "react";
+
+//#region ../lumx-core/src/js/components/TextField/RawInputText.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextProps extends HasTheme, HasClassName {
+  value?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string | undefined;
+  ref?: CommonRef;
+  handleChange?: (value: string, name?: string, event?: any) => void;
+  handleInput?: (value: string, name?: string, event?: any) => void;
+  handleFocus?: (event?: any) => void;
+  handleBlur?: (event?: any) => void;
+}
+//#endregion
+export { RawInputTextProps };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputText.js

@@ -0,0 +1,40 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_NATIVE_CLASSNAME } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/TextField/RawInputText.tsx
+var { block } = bem(INPUT_NATIVE_CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { type: "text" };
+/**
+* Raw input text component
+* (input element without any decoration)
+*/
+var RawInputText = (props) => {
+	const { className, theme, value, handleChange, handleInput, handleFocus, handleBlur, type = DEFAULT_PROPS.type, name, ref, ...forwardedProps } = props;
+	const handleOnChange = (evt) => {
+		handleChange?.(evt.target.value, name, evt);
+	};
+	const handleOnInput = (evt) => {
+		handleInput?.(evt.target.value, name, evt);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		...forwardedProps,
+		name,
+		type,
+		ref,
+		className: import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			text: true
+		})),
+		onChange: handleOnChange,
+		onInput: handleOnInput,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		value
+	});
+};
+//#endregion
+export { DEFAULT_PROPS, RawInputText };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputTextarea.d.ts

@@ -0,0 +1,19 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/TextField/RawInputTextarea.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextareaProps extends HasTheme, HasClassName {
+  value?: string;
+  rows?: number;
+  name?: string | undefined;
+  ref?: CommonRef;
+  handleChange?: (value: string, name?: string, event?: any) => void;
+  handleInput?: (value: string, name?: string, event?: any) => void;
+  handleFocus?: (event?: any) => void;
+  handleBlur?: (event?: any) => void;
+}
+//#endregion
+export { RawInputTextareaProps };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputTextarea.js

@@ -0,0 +1,40 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_NATIVE_CLASSNAME } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/TextField/RawInputTextarea.tsx
+var { block } = bem(INPUT_NATIVE_CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { rows: 2 };
+/**
+* Raw input textarea component
+* (textarea element without any decoration)
+*/
+var RawInputTextarea = (props) => {
+	const { className, theme, value, handleChange, handleInput, handleFocus, handleBlur, rows = DEFAULT_PROPS.rows, name, ref, ...forwardedProps } = props;
+	const handleOnChange = (evt) => {
+		handleChange?.(evt.target.value, name, evt);
+	};
+	const handleOnInput = (evt) => {
+		handleInput?.(evt.target.value, name, evt);
+	};
+	return /* @__PURE__ */ jsx("textarea", {
+		...forwardedProps,
+		name,
+		ref,
+		className: import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			textarea: true
+		})),
+		onChange: handleOnChange,
+		onInput: handleOnInput,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		value,
+		rows
+	});
+};
+//#endregion
+export { DEFAULT_PROPS, RawInputTextarea };

package/_internal/packages/lumx-core/src/js/components/TextField/TextField.d.ts

@@ -0,0 +1,70 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+import { InputLabelProps } from "../InputLabel/index.js";
+
+//#region ../lumx-core/src/js/components/TextField/TextField.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled, HasDisabled {
+  /** Chip Group to be rendered before the main text input. */
+  chips?: JSXElement;
+  /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
+  clearButtonProps?: GenericProps;
+  /** Error message. */
+  error?: string | JSXElement;
+  /** Whether we force the focus style or not. */
+  forceFocusStyle?: boolean;
+  /** Whether the text field is displayed with error style or not. */
+  hasError?: boolean;
+  /** Additional element to put at the end of the text field. */
+  afterElement?: JSXElement;
+  /** Helper text. */
+  helper?: string | JSXElement;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Native input id property (generated if not provided to link the label element). */
+  id?: string;
+  /** Generated helper id for accessibility attributes. */
+  helperId?: string;
+  /** Generated error id for accessibility attributes. */
+  errorId?: string;
+  /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+  labelId?: string;
+  /** Whether the component is required or not. */
+  isRequired?: boolean;
+  /** Whether the text field is displayed with valid style or not. */
+  isValid?: boolean;
+  /** Label text. */
+  label?: string;
+  /** Additional label props. */
+  labelProps?: InputLabelProps;
+  /** Max string length the input accepts (constrains the input and displays a character counter). */
+  maxLength?: number;
+  /** Whether the text field is a textarea or an input. */
+  multiline?: boolean;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Reference to the wrapper. */
+  textFieldRef?: CommonRef;
+  /** Value. */
+  value?: string;
+  /** Whether any part is disabled. */
+  isAnyDisabled?: boolean;
+  /** The input element (input or textarea). */
+  input: JSXElement;
+  /** Whether the input is focused. */
+  isFocus?: boolean;
+  /** IconButton component. */
+  IconButton: (props: Record<string, any>) => any;
+  /** Ref to the component root. */
+  ref?: CommonRef;
+}
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
+//#endregion
+export { TextFieldProps, TextFieldPropsToOverride };