@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/_internal/components/navigation-4fd3917d.js

@@ -0,0 +1,210 @@
+import { c as classNames, _ as _extends, f as forwardRef } from '../forwardRef-49d2bb84.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme, T as ThemeProvider } from '../ThemeContext-3181f000.js';
+import { createContext, useState, useRef, useContext } from 'react';
+import { mdiChevronUp, mdiChevronDown } from '@lumx/icons';
+import { u as useId } from '../useId-3a1facc0.js';
+import { f as forwardRefPolymorphic, R as RawClickable } from '../RawClickable-c76bbc4c.js';
+import { u as useOverflowTooltipLabel, T as Text } from '../index-b4d256e7.js';
+import { Tooltip } from './tooltip-84ffb4f9.js';
+import { P as Placement } from '../constants-b9e57936.js';
+import { Icon } from './icon-2e7345ad.js';
+import { Size, Orientation, Theme } from '@lumx/core/js/constants';
+import { P as Popover } from '../index-f415b08e.js';
+
+/**
+ * Navigation item props
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'NavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    className,
+    icon,
+    label,
+    isCurrentPage,
+    as: Element = 'a',
+    ...forwardedProps
+  } = props;
+  const theme = useTheme();
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel(label);
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    }))
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    label: tooltipLabel,
+    placement: Placement.TOP
+  }, /*#__PURE__*/React.createElement(RawClickable, _extends({
+    as: Element,
+    className: handleBasicClasses({
+      prefix: `${CLASSNAME$2}__link`,
+      isSelected: isCurrentPage
+    }),
+    ref: ref,
+    "aria-current": isCurrentPage ? 'page' : undefined
+  }, forwardedProps), icon ? /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$2}__icon`,
+    icon: icon,
+    size: Size.xs,
+    theme: theme
+  }) : null, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    truncate: true,
+    className: `${CLASSNAME$2}__label`,
+    ref: labelRef
+  }, label))));
+}), {
+  displayName: COMPONENT_NAME$2,
+  className: CLASSNAME$2
+});
+
+const NavigationContext = /*#__PURE__*/createContext({
+  orientation: Orientation.vertical
+});
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'NavigationSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+const NavigationSection = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    label,
+    icon,
+    ...forwardedProps
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const sectionId = useId();
+  const {
+    orientation
+  } = useContext(NavigationContext) || {};
+  const theme = useTheme();
+  const isDropdown = orientation === Orientation.horizontal;
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    })),
+    ref: ref
+  }, /*#__PURE__*/React.createElement(RawClickable, _extends({
+    as: "button"
+  }, forwardedProps, {
+    "aria-controls": sectionId,
+    "aria-expanded": isOpen,
+    className: classNames(`${CLASSNAME$2}__link`),
+    ref: buttonRef,
+    onClick: event => {
+      setIsOpen(!isOpen);
+      event.stopPropagation();
+    }
+  }), icon ? /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$2}__icon`,
+    icon: icon,
+    size: Size.xs
+  }) : null, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    truncate: true,
+    className: `${CLASSNAME$2}__label`,
+    ref: ref
+  }, label), /*#__PURE__*/React.createElement(Icon, {
+    className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
+    icon: isOpen ? mdiChevronUp : mdiChevronDown
+  })), isOpen && (isDropdown ? /*#__PURE__*/React.createElement(Popover, {
+    anchorRef: buttonRef,
+    isOpen: isOpen,
+    placement: Placement.BOTTOM_START,
+    usePortal: false,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    onClick: () => setIsOpen(false),
+    onClose: () => setIsOpen(false),
+    zIndex: 996
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: Theme.light
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `${CLASSNAME$1}__drawer--popover`,
+    id: sectionId
+  }, /*#__PURE__*/React.createElement(NavigationContext.Provider, {
+    value: {
+      orientation: Orientation.vertical
+    }
+  }, children)))) : /*#__PURE__*/React.createElement("ul", {
+    className: `${CLASSNAME$1}__drawer`,
+    id: sectionId
+  }, children)));
+});
+NavigationSection.displayName = COMPONENT_NAME$1;
+NavigationSection.className = CLASSNAME$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Navigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.vertical
+};
+const Navigation = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    theme = defaultTheme,
+    orientation = DEFAULT_PROPS.orientation,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement("nav", _extends({
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme,
+      orientation
+    })),
+    ref: ref
+  }, forwardedProps), /*#__PURE__*/React.createElement(NavigationContext.Provider, {
+    value: {
+      orientation
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: `${CLASSNAME}__list`
+  }, children))));
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+
+// Sub components
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;
+
+export { Navigation };
+//# sourceMappingURL=navigation-4fd3917d.js.map

package/_internal/components/navigation-4fd3917d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-4fd3917d.js","sources":["../../../src/components/navigation/NavigationItem.tsx","../../../src/components/navigation/context.tsx","../../../src/components/navigation/NavigationSection.tsx","../../../src/components/navigation/Navigation.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\nimport { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\ntype BaseNavigationItemProps = {\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Label content. */\n    label: ReactNode;\n    /** Mark as the current page link */\n    isCurrentPage?: boolean;\n};\n\n/**\n * Navigation item props\n */\nexport type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &\n    HasTheme &\n    HasClassName &\n    BaseNavigationItemProps &\n    HasRequiredLinkHref<E>;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationItem';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationItem = Object.assign(\n    forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {\n        const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;\n        const theme = useTheme();\n        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);\n\n        return (\n            <li\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        prefix: CLASSNAME,\n                        theme,\n                    }),\n                )}\n            >\n                <Tooltip label={tooltipLabel} placement={Placement.TOP}>\n                    <RawClickable\n                        as={Element}\n                        className={handleBasicClasses({\n                            prefix: `${CLASSNAME}__link`,\n                            isSelected: isCurrentPage,\n                        })}\n                        ref={ref as React.Ref<any>}\n                        aria-current={isCurrentPage ? 'page' : undefined}\n                        {...forwardedProps}\n                    >\n                        {icon ? (\n                            <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />\n                        ) : null}\n\n                        <Text as=\"span\" truncate className={`${CLASSNAME}__label`} ref={labelRef}>\n                            {label}\n                        </Text>\n                    </RawClickable>\n                </Tooltip>\n            </li>\n        );\n    }),\n    {\n        displayName: COMPONENT_NAME,\n        className: CLASSNAME,\n    },\n);\n","import { createContext } from 'react';\n\nimport { Orientation } from '@lumx/core/js/constants';\n\nexport const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({\n    orientation: Orientation.vertical,\n});\n","import { useRef, useState, useContext } from 'react';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\nimport { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';\nimport classNames from 'classnames';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { HasClassName } from '@lumx/react/utils/type';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {\n    /** Items inside the section */\n    children: React.ReactNode;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Label content. */\n    label: string | React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationSection';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {\n    const { children, className, label, icon, ...forwardedProps } = props;\n    const [isOpen, setIsOpen] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const sectionId = useId();\n    const { orientation } = useContext(NavigationContext) || {};\n    const theme = useTheme();\n    const isDropdown = orientation === Orientation.horizontal;\n    return (\n        <li\n            className={classNames(\n                className,\n                CLASSNAME,\n                ITEM_CLASSNAME,\n                handleBasicClasses({\n                    prefix: ITEM_CLASSNAME,\n                    theme,\n                }),\n            )}\n            ref={ref}\n        >\n            <RawClickable<'button'>\n                as=\"button\"\n                {...forwardedProps}\n                aria-controls={sectionId}\n                aria-expanded={isOpen}\n                className={classNames(`${ITEM_CLASSNAME}__link`)}\n                ref={buttonRef}\n                onClick={(event) => {\n                    setIsOpen(!isOpen);\n                    event.stopPropagation();\n                }}\n            >\n                {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}\n\n                <Text as=\"span\" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>\n                    {label}\n                </Text>\n                <Icon\n                    className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}\n                    icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                />\n            </RawClickable>\n            {isOpen &&\n                (isDropdown ? (\n                    <Popover\n                        anchorRef={buttonRef}\n                        isOpen={isOpen}\n                        placement={Placement.BOTTOM_START}\n                        usePortal={false}\n                        closeOnClickAway\n                        closeOnEscape\n                        onClick={() => setIsOpen(false)}\n                        onClose={() => setIsOpen(false)}\n                        zIndex={996}\n                    >\n                        <ThemeProvider value={Theme.light}>\n                            <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>\n                                <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>\n                                    {children}\n                                </NavigationContext.Provider>\n                            </ul>\n                        </ThemeProvider>\n                    </Popover>\n                ) : (\n                    <ul className={`${CLASSNAME}__drawer`} id={sectionId}>\n                        {children}\n                    </ul>\n                ))}\n        </li>\n    );\n});\nNavigationSection.displayName = COMPONENT_NAME;\nNavigationSection.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { Orientation, Theme } from '@lumx/react';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { NavigationSection } from './NavigationSection';\nimport { NavigationItem } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport type NavigationProps = React.ComponentProps<'nav'> &\n    HasClassName &\n    HasTheme & {\n        /** Content of the navigation. These components should be of type NavigationItem to be rendered */\n        children?: React.ReactNode;\n        orientation?: Orientation;\n    } & HasAriaLabelOrLabelledBy;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Navigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props\n */\nconst DEFAULT_PROPS = {\n    orientation: Orientation.vertical,\n};\n\ntype SubComponents = {\n    Section: typeof NavigationSection;\n    Item: typeof NavigationItem;\n};\n\nexport const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        children,\n        className,\n        theme = defaultTheme,\n        orientation = DEFAULT_PROPS.orientation,\n        ...forwardedProps\n    } = props;\n    return (\n        <ThemeProvider value={theme}>\n            <nav\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        prefix: CLASSNAME,\n                        theme,\n                        orientation,\n                    }),\n                )}\n                ref={ref}\n                {...forwardedProps}\n            >\n                <NavigationContext.Provider value={{ orientation }}>\n                    <ul className={`${CLASSNAME}__list`}>{children}</ul>\n                </NavigationContext.Provider>\n            </nav>\n        </ThemeProvider>\n    );\n});\nNavigation.displayName = COMPONENT_NAME;\nNavigation.className = CLASSNAME;\nNavigation.defaultProps = DEFAULT_PROPS;\n\n// Sub components\nNavigation.Section = NavigationSection;\nNavigation.Item = NavigationItem;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","NavigationItem","Object","assign","forwardRefPolymorphic","props","ref","className","icon","label","isCurrentPage","as","Element","forwardedProps","theme","useTheme","tooltipLabel","labelRef","useOverflowTooltipLabel","React","createElement","classNames","handleBasicClasses","prefix","Tooltip","placement","Placement","TOP","RawClickable","_extends","isSelected","undefined","Icon","size","Size","xs","Text","truncate","displayName","NavigationContext","createContext","orientation","Orientation","vertical","NavigationSection","forwardRef","children","isOpen","setIsOpen","useState","buttonRef","useRef","sectionId","useId","useContext","isDropdown","horizontal","ITEM_CLASSNAME","onClick","event","stopPropagation","mdiChevronUp","mdiChevronDown","Popover","anchorRef","BOTTOM_START","usePortal","closeOnClickAway","closeOnEscape","onClose","zIndex","ThemeProvider","value","Theme","light","id","Provider","DEFAULT_PROPS","Navigation","defaultTheme","defaultProps","Section","Item"],"mappings":"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"}

package/_internal/components/notification-9063c963.js

@@ -0,0 +1,140 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { useRef } from 'react';
+import isFunction from 'lodash/isFunction';
+import { D as DOCUMENT } from '../constants-d0e3f49e.js';
+import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle } from '@lumx/icons';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
+import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { P as Portal } from '../Portal-c43d098b.js';
+import { Theme, Size, Emphasis, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { Icon } from './icon-2e7345ad.js';
+import { a as Button } from '../Button-f19e18df.js';
+
+/**
+ * Notification icon and colors according to their type.
+ */
+const NOTIFICATION_CONFIGURATION = {
+  error: {
+    color: 'red',
+    icon: mdiAlert
+  },
+  info: {
+    color: 'blue',
+    icon: mdiInformation
+  },
+  success: {
+    color: 'green',
+    icon: mdiCheckCircle
+  },
+  warning: {
+    color: 'yellow',
+    icon: mdiAlertCircle
+  }
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Notification';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  zIndex: 9999,
+  usePortal: true
+};
+
+/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+/**
+ * Notification component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Notification = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    actionLabel,
+    className,
+    content,
+    isOpen,
+    onActionClick,
+    onClick,
+    theme = defaultTheme,
+    type,
+    zIndex = DEFAULT_PROPS.zIndex,
+    usePortal = DEFAULT_PROPS.usePortal,
+    style,
+    ...forwardedProps
+  } = props;
+  if (!DOCUMENT) {
+    // Can't render in SSR.
+    return null;
+  }
+  const {
+    color,
+    icon
+  } = NOTIFICATION_CONFIGURATION[type] || {};
+  const rootRef = useRef(null);
+  const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
+  const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
+  const handleCallback = evt => {
+    if (isFunction(onActionClick)) {
+      onActionClick();
+    }
+    evt.stopPropagation();
+  };
+  if (!type || !isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    enabled: usePortal
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(ref, rootRef),
+    role: "alert"
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      color,
+      hasAction,
+      isHidden: !isOpen,
+      prefix: CLASSNAME
+    })),
+    onClick: onClick,
+    style: {
+      ...style,
+      zIndex
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__icon`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: Size.s
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__content`
+  }, content), hasAction && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__action`
+  }, /*#__PURE__*/React.createElement(Button, {
+    emphasis: Emphasis.medium,
+    theme: theme,
+    onClick: handleCallback
+  }, /*#__PURE__*/React.createElement("span", null, actionLabel)))));
+});
+Notification.displayName = COMPONENT_NAME;
+Notification.className = CLASSNAME;
+Notification.defaultProps = DEFAULT_PROPS;
+
+export { Notification };
+//# sourceMappingURL=notification-9063c963.js.map

package/_internal/components/notification-9063c963.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-9063c963.js","sources":["../../../src/components/notification/constants.ts","../../../src/components/notification/Notification.tsx"],"sourcesContent":["import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\n\n/**\n * Notification delay before hiding.\n */\nexport const HIDE_DELAY = 6000;\n\n/**\n * Notification icon and colors according to their type.\n */\nexport const NOTIFICATION_CONFIGURATION = {\n    error: {\n        color: 'red',\n        icon: mdiAlert,\n    },\n    info: {\n        color: 'blue',\n        icon: mdiInformation,\n    },\n    success: {\n        color: 'green',\n        icon: mdiCheckCircle,\n    },\n    warning: {\n        color: 'yellow',\n        icon: mdiAlertCircle,\n    },\n};\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\nimport isFunction from 'lodash/isFunction';\n\nimport { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';\nimport { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';\nimport { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface NotificationProps extends GenericProps, HasTheme {\n    /** Action button label. */\n    actionLabel?: string;\n    /** Content. */\n    content?: React.ReactNode;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Notification type. */\n    type?: Kind;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On action button click callback. */\n    onActionClick?(): void;\n    /** On click callback. */\n    onClick?(): void;\n    /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n    usePortal?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Notification';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<NotificationProps> = {\n    zIndex: 9999,\n    usePortal: true,\n};\n\n/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n/**\n * Notification component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actionLabel,\n        className,\n        content,\n        isOpen,\n        onActionClick,\n        onClick,\n        theme = defaultTheme,\n        type,\n        zIndex = DEFAULT_PROPS.zIndex,\n        usePortal = DEFAULT_PROPS.usePortal,\n        style,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n    const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};\n    const rootRef = useRef<HTMLDivElement>(null);\n    const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);\n    const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);\n\n    const handleCallback = (evt: React.MouseEvent) => {\n        if (isFunction(onActionClick)) {\n            onActionClick();\n        }\n        evt.stopPropagation();\n    };\n\n    if (!type || !isVisible) {\n        return null;\n    }\n\n    return (\n        <Portal enabled={usePortal}>\n            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n            <div\n                ref={mergeRefs(ref, rootRef)}\n                role=\"alert\"\n                {...forwardedProps}\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        color,\n                        hasAction,\n                        isHidden: !isOpen,\n                        prefix: CLASSNAME,\n                    }),\n                )}\n                onClick={onClick}\n                style={{ ...style, zIndex }}\n            >\n                <div className={`${CLASSNAME}__icon`}>\n                    <Icon icon={icon} size={Size.s} />\n                </div>\n                <div className={`${CLASSNAME}__content`}>{content}</div>\n                {hasAction && (\n                    <div className={`${CLASSNAME}__action`}>\n                        <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>\n                            <span>{actionLabel}</span>\n                        </Button>\n                    </div>\n                )}\n            </div>\n        </Portal>\n    );\n});\nNotification.displayName = COMPONENT_NAME;\nNotification.className = CLASSNAME;\nNotification.defaultProps = DEFAULT_PROPS;\n"],"names":["NOTIFICATION_CONFIGURATION","error","color","icon","mdiAlert","info","mdiInformation","success","mdiCheckCircle","warning","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","zIndex","usePortal","Notification","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actionLabel","className","content","isOpen","onActionClick","onClick","theme","type","style","forwardedProps","DOCUMENT","rootRef","useRef","isVisible","useTransitionVisibility","NOTIFICATION_TRANSITION_DURATION","hasAction","Boolean","handleCallback","evt","isFunction","stopPropagation","React","createElement","Portal","enabled","_extends","mergeRefs","role","classNames","handleBasicClasses","isHidden","prefix","Icon","size","Size","s","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/popover-3c4c54bd.js

@@ -0,0 +1,3 @@
+export { P as Popover } from '../index-f415b08e.js';
+export { P as Placement } from '../constants-b9e57936.js';
+//# sourceMappingURL=popover-3c4c54bd.js.map

package/_internal/components/popover-3c4c54bd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-3c4c54bd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/_internal/components/post-block-0cfc2206.js

@@ -0,0 +1,99 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import isObject from 'lodash/isObject';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { ThumbnailVariant } from './thumbnail-e3acff82.js';
+import { Orientation, Theme } from '@lumx/core/js/constants';
+import { T as Thumbnail } from '../Thumbnail-30d2a781.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PostBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.horizontal
+};
+
+/**
+ * PostBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const PostBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    actions,
+    attachments,
+    author,
+    className,
+    meta,
+    onClick,
+    orientation = DEFAULT_PROPS.orientation,
+    tags,
+    text,
+    theme = defaultTheme,
+    thumbnailProps,
+    title,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      orientation,
+      theme
+    }))
+  }, forwardedProps), thumbnailProps && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__thumbnail`
+  }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
+    theme: theme,
+    variant: ThumbnailVariant.rounded
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, author && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__author`
+  }, author), title && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `${CLASSNAME}__title`,
+    onClick: onClick
+  }, title), meta && /*#__PURE__*/React.createElement("span", {
+    className: `${CLASSNAME}__meta`
+  }, meta), isObject(text) && text.__html ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-danger
+  React.createElement("p", {
+    dangerouslySetInnerHTML: text,
+    className: `${CLASSNAME}__text`
+  }) : /*#__PURE__*/React.createElement("p", {
+    className: `${CLASSNAME}__text`
+  }, text), attachments && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__attachments`
+  }, attachments), (tags || actions) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__toolbar`
+  }, tags && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__tags`
+  }, tags), actions && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__actions`
+  }, actions))));
+});
+PostBlock.displayName = COMPONENT_NAME;
+PostBlock.className = CLASSNAME;
+PostBlock.defaultProps = DEFAULT_PROPS;
+
+export { PostBlock };
+//# sourceMappingURL=post-block-0cfc2206.js.map

package/_internal/components/post-block-0cfc2206.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-block-0cfc2206.js","sources":["../../../src/components/post-block/PostBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isObject from 'lodash/isObject';\n\nimport { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface PostBlockProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Attachment content. */\n    attachments?: ReactNode;\n    /** Author content. */\n    author?: ReactNode;\n    /** Metadata content. */\n    meta?: ReactNode;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Tag content. */\n    tags?: ReactNode;\n    /** Content (string, or sanitized html). */\n    text?: string | { __html: string };\n    /** Thumbnail. */\n    thumbnailProps?: ThumbnailProps;\n    /** Title. */\n    title: string;\n    /** On click callback. */\n    onClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'PostBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<PostBlockProps> = {\n    orientation: Orientation.horizontal,\n};\n\n/**\n * PostBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        attachments,\n        author,\n        className,\n        meta,\n        onClick,\n        orientation = DEFAULT_PROPS.orientation,\n        tags,\n        text,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}\n            {...forwardedProps}\n        >\n            {thumbnailProps && (\n                <div className={`${CLASSNAME}__thumbnail`}>\n                    <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />\n                </div>\n            )}\n            <div className={`${CLASSNAME}__wrapper`}>\n                {author && <div className={`${CLASSNAME}__author`}>{author}</div>}\n\n                {title && (\n                    <button type=\"button\" className={`${CLASSNAME}__title`} onClick={onClick}>\n                        {title}\n                    </button>\n                )}\n\n                {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}\n\n                {isObject(text) && text.__html ? (\n                    // eslint-disable-next-line react/no-danger\n                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />\n                ) : (\n                    <p className={`${CLASSNAME}__text`}>{text}</p>\n                )}\n\n                {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}\n                {(tags || actions) && (\n                    <div className={`${CLASSNAME}__toolbar`}>\n                        {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n                        {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n});\nPostBlock.displayName = COMPONENT_NAME;\nPostBlock.className = CLASSNAME;\nPostBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","PostBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","attachments","author","className","meta","onClick","tags","text","theme","thumbnailProps","title","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","variant","ThumbnailVariant","rounded","type","isObject","__html","dangerouslySetInnerHTML","displayName","defaultProps"],"mappings":"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"}