@lumx/react 4.5.2-alpha.3 → 4.5.2-alpha.4

package/index.d.ts

@@ -1,7 +1,7 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, ColorPalette as ColorPalette$1, Size as Size$1, Theme as Theme$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Theme as Theme$1, Size as Size$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasCloseMode as HasCloseMode$1, HasClassName as HasClassName$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, CSSProperties, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1, SetStateAction, Key, ElementType, ComponentProps } from 'react';
@@ -242,7 +242,7 @@ interface AutocompleteMultipleProps extends AutocompleteProps {
     /** Alignment of the chips in the autocomplete. */
     chipsAlignment?: HorizontalAlignment$1;
     /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender(choice: any, index: number, onClear?: (event: React.MouseEvent, val: any) => void, isDisabled?: boolean): ReactNode | string;
+    selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
 }
 /**
  * AutocompleteMultiple component.
@@ -253,6 +253,24 @@ interface AutocompleteMultipleProps extends AutocompleteProps {
  */
 declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
 
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
 interface HasClassName {
     /**
      * Class name forwarded to the root element of the component.
@@ -755,7 +773,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -867,33 +885,72 @@ declare const Checkbox: Comp<CheckboxProps, HTMLDivElement>;
 /**
  * Chip sizes.
  */
-type ChipSize = Extract<Size$1, 's' | 'm'>;
+type ChipSize = Extract<Size, 's' | 'm'>;
 /**
  * Defines the props of the component.
  */
-interface ChipProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
+interface ChipProps$1 extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
     /** A component to be rendered after the content. */
-    after?: ReactNode;
+    after?: JSXElement;
     /** A component to be rendered before the content. */
-    before?: ReactNode;
+    before?: JSXElement;
     /** Color variant. */
-    color?: ColorPalette$1;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** Whether the chip is currently in a highlighted state or not. */
     isHighlighted?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
     /** Size variant. */
     size?: ChipSize;
+    /** href for the chip if it is a link */
+    href?: string;
+    /** reference to the root element */
+    ref?: CommonRef;
     /** On "after" element clicked callback. */
-    onAfterClick?: MouseEventHandler;
+    handleAfterClick?: (event?: any) => void;
+    /** On element key down callback. */
+    handleKeyDown?: (event?: any) => void;
     /** On "before" element clicked callback. */
-    onBeforeClick?: MouseEventHandler;
+    handleBeforeClick?: (event?: any) => void;
+    /** On element clicked callback. */
+    handleClick?: (event?: any) => void;
+    /** name of the prop for handling key down events */
+    keyDownProp?: string;
+    /** name of the prop for tab index */
+    tabIndexProp?: string;
     /** Children */
-    children?: React.ReactNode;
+    children?: JSXElement;
+    /** Props to apply when the component is in a disabled state. */
+    disabledStateProps: GenericProps;
+    /** Whether the "after" element has a click handler. */
+    hasAfterClick?: boolean;
+    /** Whether the "before" element has a click handler. */
+    hasBeforeClick?: boolean;
+    /** Whether the component has a main click handler. */
+    hasOnClick?: boolean;
+    /** Whether any part of the component is disabled. */
+    isAnyDisabled?: boolean;
+}
+type ChipPropsToOverride = 'disabledStateProps' | 'hasOnClick' | 'hasBeforeClick' | 'hasAfterClick' | 'before' | 'after' | 'keyDownProp' | 'tabIndexProp' | 'isAnyDisabled';
+
+/**
+ * Defines the props of the component.
+ */
+interface ChipProps extends GenericProps$1, ReactToJSX<ChipProps$1, ChipPropsToOverride> {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** On "after" element clicked callback. */
+    onAfterClick?: (event?: React.MouseEvent) => void;
+    /** On "before" element clicked callback. */
+    onBeforeClick?: (event?: React.MouseEvent) => void;
+    /** On element clicked callback. */
+    onClick?: (event?: React.MouseEvent) => void;
+    /** On element key down callback. */
+    onKeyDown?: (event?: React.KeyboardEvent) => void;
 }
 /**
  * Chip component.
@@ -1135,7 +1192,7 @@ declare const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface DialogProps extends GenericProps$1 {
+interface DialogProps extends GenericProps$1, HasCloseMode$1 {
     /** Footer content. */
     footer?: ReactNode;
     /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
@@ -1605,7 +1662,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "tiny" | "regular" | "medium" | "big" | "huge">;
+}, "medium" | "tiny" | "regular" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -2290,7 +2347,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -2523,7 +2580,7 @@ type NavigationProps = React.ComponentProps<'nav'> & HasClassName$1 & HasTheme$1
     /** Content of the navigation. These components should be of type NavigationItem to be rendered */
     children?: React.ReactNode;
     orientation?: Orientation$1;
-} & HasAriaLabelOrLabelledBy;
+} & HasAriaLabelOrLabelledBy$1;
 type SubComponents = {
     Section: typeof NavigationSection;
     Item: typeof NavigationItem;
@@ -2564,13 +2621,23 @@ declare const Notification: Comp<NotificationProps, HTMLDivElement>;
  * PopoverDialog props.
  * The PopoverDialog has the same props as the Popover but requires an accessible label.
  */
-type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
+type PopoverDialogProps$1 = PopoverProps$1 & HasAriaLabelOrLabelledBy & {
+    /** Accessible label for the dialog (alternative to aria-label prop). */
+    label?: string;
+};
+
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+type PopoverDialogProps = PopoverProps & Omit<PopoverDialogProps$1, keyof PopoverProps$1>;
 /**
  * PopoverDialog component.
- * Defines a popover that acts like a dialog
- * * Has a dialog aria role
- * * Sets a focus trap within the popover
- * * Closes on click away and escape.
+ * Defines a popover that acts like a dialog:
+ * - Has a dialog aria role
+ * - Sets a focus trap within the popover
+ * - Closes on click away and escape
+ * - Resets heading level context to 2
  */
 declare const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement>;
 
@@ -2935,7 +3002,7 @@ interface SelectMultipleProps extends CoreSelectProps {
     /** Selected values. */
     value: string[];
     /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender?(choice: string, index: number, onClear?: (event: SyntheticEvent, choice: string) => void, isDisabled?: boolean, theme?: any): ReactNode | string;
+    selectedChipRender?(choice: string, index: number, onClear?: (event?: SyntheticEvent, choice?: string) => void, isDisabled?: boolean, theme?: any): ReactNode | string;
 }
 declare const SelectMultipleField: React.FC<SelectMultipleProps>;
 /**

package/index.js

@@ -7,7 +7,7 @@ import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiInformation } from '@lumx/icons/esm/information.js';
-import { classNames, onEnterPressed, onEscapePressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
+import { classNames, onEnterPressed as onEnterPressed$1, onEscapePressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
@@ -784,6 +784,21 @@ function bem(baseName) {
   };
 }
 
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEnterPressed(handler) {
+  return evt => {
+    if (evt.key !== 'Enter') {
+      return;
+    }
+    handler(evt);
+  };
+}
+
 /**
  * Animation duration constants. Take into consideration that if you change one of these variables,
  * you need to update their scss counterpart as well
@@ -1918,13 +1933,13 @@ const CLASSNAME$16 = 'lumx-chip';
 const {
   block: block$X,
   element: element$J
-} = classNames.bem(CLASSNAME$16);
+} = bem(CLASSNAME$16);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$_ = {
-  size: Size$1.m
+  size: Size.m
 };
 
 /**
@@ -1934,13 +1949,7 @@ const DEFAULT_PROPS$_ = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Chip = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
+const Chip$1 = props => {
   const {
     after,
     before,
@@ -1950,41 +1959,48 @@ const Chip = forwardRef((props, ref) => {
     isClickable: propIsClickable,
     isHighlighted,
     isSelected,
-    onAfterClick,
-    onBeforeClick,
-    onClick,
+    handleAfterClick,
+    handleBeforeClick,
+    handleClick,
+    hasAfterClick,
+    hasBeforeClick,
+    hasOnClick,
     size = DEFAULT_PROPS$_.size,
-    theme = defaultTheme,
+    theme,
+    ref,
     href,
-    onKeyDown,
+    handleKeyDown,
+    disabledStateProps,
+    isAnyDisabled,
+    keyDownProp = 'onKeyDown',
+    tabIndexProp = 'tabIndex',
     ...forwardedProps
-  } = otherProps;
-  const hasAfterClick = isFunction(onAfterClick);
-  const hasBeforeClick = isFunction(onBeforeClick);
-  const hasOnClick = isFunction(props.onClick);
+  } = props;
   const isButton = hasOnClick && !href;
   const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
   // Adapt color to the theme.
-  const chipColor = color || (theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light);
-  const handleOnBeforeClick = useStopPropagation(onBeforeClick);
-  const handleOnAfterClick = useStopPropagation(onAfterClick);
-  const handleKeyDown = evt => {
-    onKeyDown?.(evt);
-    if (hasOnClick) {
-      onEnterPressed(onClick)(evt);
+  const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+  const handleOnKeyDown = evt => {
+    handleKeyDown?.(evt);
+    if (hasOnClick && handleClick) {
+      onEnterPressed(handleClick)(evt);
     }
   };
+  const compatibilityProps = {
+    [keyDownProp]: handleOnKeyDown,
+    [tabIndexProp]: isClickable && !disabledStateProps.disabled ? 0 : undefined
+  };
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     jsxs("a", {
       role: isButton ? 'button' : undefined,
-      tabIndex: isClickable && !disabledStateProps.disabled ? 0 : undefined,
+      ...compatibilityProps,
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, block$X({
+      className: classnames(className, block$X({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -1996,8 +2012,7 @@ const Chip = forwardRef((props, ref) => {
         'is-unselected': Boolean(!isSelected)
       })),
       "aria-disabled": isClickable && isAnyDisabled || undefined,
-      onClick: hasOnClick ? onClick : undefined,
-      onKeyDown: handleKeyDown,
+      onClick: hasOnClick ? handleClick : undefined,
       children: [before &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
@@ -2005,7 +2020,7 @@ const Chip = forwardRef((props, ref) => {
         className: element$J('before', {
           'is-clickable': hasBeforeClick
         }),
-        onClick: handleOnBeforeClick,
+        onClick: handleBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
         className: element$J('label'),
@@ -2017,11 +2032,58 @@ const Chip = forwardRef((props, ref) => {
         className: element$J('after', {
           'is-clickable': hasAfterClick
         }),
-        onClick: handleOnAfterClick,
+        onClick: handleAfterClick,
         children: after
       })]
     })
   );
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Chip = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    onAfterClick,
+    onBeforeClick,
+    onClick,
+    theme = defaultTheme,
+    onKeyDown,
+    ...forwardedProps
+  } = otherProps;
+  const hasAfterClick = isFunction(onAfterClick);
+  const hasBeforeClick = isFunction(onBeforeClick);
+  const hasOnClick = isFunction(props.onClick);
+  const handleOnBeforeClick = useStopPropagation(onBeforeClick);
+  const handleOnAfterClick = useStopPropagation(onAfterClick);
+  return Chip$1({
+    hasAfterClick,
+    hasBeforeClick,
+    hasOnClick,
+    handleAfterClick: handleOnAfterClick,
+    handleBeforeClick: handleOnBeforeClick,
+    handleClick: onClick,
+    handleKeyDown: onKeyDown,
+    theme,
+    disabledStateProps,
+    isAnyDisabled,
+    ref,
+    ...forwardedProps
+  });
 });
 Chip.displayName = COMPONENT_NAME$16;
 Chip.className = CLASSNAME$16;
@@ -2745,7 +2807,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const updateYear = React__default.useCallback(() => {
     updateMonthOffset(currentYear);
   }, [updateMonthOffset, currentYear]);
-  const updateYearOnEnterPressed = React__default.useMemo(() => onEnterPressed(updateYear), [updateYear]);
+  const updateYearOnEnterPressed = React__default.useMemo(() => onEnterPressed$1(updateYear), [updateYear]);
   const monthYear = selectedMonth.toLocaleDateString(locale, {
     year: 'numeric',
     month: 'long'
@@ -3518,6 +3580,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$X = {
+  closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3537,6 +3600,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
+    closeMode = DEFAULT_PROPS$X.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -3619,7 +3683,8 @@ const Dialog = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
   const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
-  return isOpen || isVisible ? /*#__PURE__*/jsx(Portal, {
+  const isMounted = isOpen || isVisible || closeMode === 'hide';
+  return isMounted ? /*#__PURE__*/jsx(Portal, {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
@@ -9759,6 +9824,11 @@ Notification.displayName = COMPONENT_NAME$A;
 Notification.className = CLASSNAME$B;
 Notification.defaultProps = DEFAULT_PROPS$E;
 
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+
 /**
  * Component display name.
  */
@@ -9776,16 +9846,15 @@ const DEFAULT_PROPS$D = {};
 
 /**
  * PopoverDialog component.
- * Defines a popover that acts like a dialog
- * * Has a dialog aria role
- * * Sets a focus trap within the popover
- * * Closes on click away and escape.
+ * Defines a popover that acts like a dialog:
+ * - Has a dialog aria role
+ * - Sets a focus trap within the popover
+ * - Closes on click away and escape
+ * - Resets heading level context to 2
  */
 const PopoverDialog = forwardRef((props, ref) => {
   const {
     children,
-    isOpen,
-    focusElement,
     'aria-label': ariaLabel,
     label = ariaLabel,
     className,
@@ -9802,8 +9871,6 @@ const PopoverDialog = forwardRef((props, ref) => {
      * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
      */,
     "aria-label": label,
-    isOpen: isOpen,
-    focusElement: focusElement,
     closeOnClickAway: true,
     closeOnEscape: true,
     withFocusTrap: true,