@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.12

package/_internal/5ec059fe.js

@@ -0,0 +1,145 @@
+import { useRef } from 'react';
+import { m as getRootClassName, n as forwardRef, b as Theme, l as classNames, c as Size, d as Emphasis, N as NOTIFICATION_TRANSITION_DURATION } from './6589b796.js';
+import isFunction from 'lodash/isFunction';
+import { D as DOCUMENT } from './478b5c92.js';
+import { m as mdiAlert, a as mdiInformation } from './49bbeed3.js';
+import { m as mdiCheckCircle } from './de24f857.js';
+import { m as mdiAlertCircle, I as Icon } from './8ab42752.js';
+import { h as handleBasicClasses } from './e2afb13f.js';
+import { u as useTransitionVisibility } from './e6dd117e.js';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { u as useTheme } from './3181f000.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { P as Portal } from './3f86608e.js';
+import { a as Button } from './a34639bd.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
+  }
+};
+
+/**
+ * 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__*/jsx(Portal, {
+    enabled: usePortal,
+    children: /*#__PURE__*/jsxs("div", {
+      ref: mergeRefs(ref, rootRef),
+      role: "alert",
+      ...forwardedProps,
+      className: classNames(className, handleBasicClasses({
+        color,
+        hasAction,
+        isHidden: !isOpen,
+        prefix: CLASSNAME
+      })),
+      onClick: onClick,
+      style: {
+        ...style,
+        zIndex
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__icon`,
+        children: /*#__PURE__*/jsx(Icon, {
+          icon: icon,
+          size: Size.s
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__content`,
+        children: content
+      }), hasAction && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__action`,
+        children: /*#__PURE__*/jsx(Button, {
+          emphasis: Emphasis.medium,
+          theme: theme,
+          onClick: handleCallback,
+          children: /*#__PURE__*/jsx("span", {
+            children: actionLabel
+          })
+        })
+      })]
+    })
+  });
+});
+Notification.displayName = COMPONENT_NAME;
+Notification.className = CLASSNAME;
+Notification.defaultProps = DEFAULT_PROPS;
+
+export { Notification };
+//# sourceMappingURL=5ec059fe.js.map

package/_internal/5ec059fe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5ec059fe.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","_jsx","Portal","enabled","children","_jsxs","mergeRefs","role","classNames","handleBasicClasses","isHidden","prefix","Icon","size","Size","s","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":";;;;;;;;;;;;;;;AAOA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAG;AACtCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,KAAK;AACZC,IAAAA,IAAI,EAAEC,QAAAA;GACT;AACDC,EAAAA,IAAI,EAAE;AACFH,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,IAAI,EAAEG,cAAAA;GACT;AACDC,EAAAA,OAAO,EAAE;AACLL,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,IAAI,EAAEK,cAAAA;GACT;AACDC,EAAAA,OAAO,EAAE;AACLP,IAAAA,KAAK,EAAE,QAAQ;AACfC,IAAAA,IAAI,EAAEO,cAAAA;AACV,GAAA;AACJ,CAAC;;ACYD;AACA;AACA;AACA,MAAMC,cAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAyC,GAAG;AAC9CC,EAAAA,MAAM,EAAE,IAAI;AACZC,EAAAA,SAAS,EAAE,IAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,OAAO;AACPC,IAAAA,KAAK,GAAGV,YAAY;IACpBW,IAAI;IACJjB,MAAM,GAAGD,aAAa,CAACC,MAAM;IAC7BC,SAAS,GAAGF,aAAa,CAACE,SAAS;IACnCiB,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGf,KAAK,CAAA;EACT,IAAI,CAACgB,QAAQ,EAAE;AACX;AACA,IAAA,OAAO,IAAI,CAAA;AACf,GAAA;EACA,MAAM;IAAEjC,KAAK;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGH,0BAA0B,CAACgC,IAAI,CAAS,IAAI,EAAE,CAAA;AACtE,EAAA,MAAMI,OAAO,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;EAC5C,MAAMC,SAAS,GAAGC,uBAAuB,CAACH,OAAO,EAAE,CAAC,CAACR,MAAM,EAAEY,gCAAgC,CAAC,CAAA;EAC9F,MAAMC,SAAkB,GAAGC,OAAO,CAACb,aAAa,CAAC,IAAIa,OAAO,CAACjB,WAAW,CAAC,CAAA;EAEzE,MAAMkB,cAAc,GAAIC,GAAqB,IAAK;AAC9C,IAAA,IAAIC,UAAU,CAAChB,aAAa,CAAC,EAAE;AAC3BA,MAAAA,aAAa,EAAE,CAAA;AACnB,KAAA;IACAe,GAAG,CAACE,eAAe,EAAE,CAAA;GACxB,CAAA;AAED,EAAA,IAAI,CAACd,IAAI,IAAI,CAACM,SAAS,EAAE;AACrB,IAAA,OAAO,IAAI,CAAA;AACf,GAAA;EAEA,oBACIS,GAAA,CAACC,MAAM,EAAA;AAACC,IAAAA,OAAO,EAAEjC,SAAU;AAAAkC,IAAAA,QAAA,eAEvBC,IAAA,CAAA,KAAA,EAAA;AACI/B,MAAAA,GAAG,EAAEgC,SAAS,CAAChC,GAAG,EAAEgB,OAAO,CAAE;AAC7BiB,MAAAA,IAAI,EAAC,OAAO;AAAA,MAAA,GACRnB,cAAc;AAClBR,MAAAA,SAAS,EAAE4B,UAAU,CACjB5B,SAAS,EACT6B,kBAAkB,CAAC;QACfrD,KAAK;QACLuC,SAAS;QACTe,QAAQ,EAAE,CAAC5B,MAAM;AACjB6B,QAAAA,MAAM,EAAE7C,SAAAA;AACZ,OAAC,CACL,CAAE;AACFkB,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,KAAK,EAAE;AAAE,QAAA,GAAGA,KAAK;AAAElB,QAAAA,MAAAA;OAAS;AAAAmC,MAAAA,QAAA,gBAE5BH,GAAA,CAAA,KAAA,EAAA;QAAKrB,SAAS,EAAE,CAAGd,EAAAA,SAAS,CAAS,MAAA,CAAA;QAAAsC,QAAA,eACjCH,GAAA,CAACW,IAAI,EAAA;AAACvD,UAAAA,IAAI,EAAEA,IAAK;UAACwD,IAAI,EAAEC,IAAI,CAACC,CAAAA;SAAI,CAAA;OAChC,CAAC,eACNd,GAAA,CAAA,KAAA,EAAA;QAAKrB,SAAS,EAAE,CAAGd,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAAsC,QAAAA,QAAA,EAAEvB,OAAAA;AAAO,OAAM,CAAC,EACvDc,SAAS,iBACNM,GAAA,CAAA,KAAA,EAAA;QAAKrB,SAAS,EAAE,CAAGd,EAAAA,SAAS,CAAW,QAAA,CAAA;QAAAsC,QAAA,eACnCH,GAAA,CAACe,MAAM,EAAA;UAACC,QAAQ,EAAEC,QAAQ,CAACC,MAAO;AAAClC,UAAAA,KAAK,EAAEA,KAAM;AAACD,UAAAA,OAAO,EAAEa,cAAe;AAAAO,UAAAA,QAAA,eACrEH,GAAA,CAAA,MAAA,EAAA;AAAAG,YAAAA,QAAA,EAAOzB,WAAAA;WAAkB,CAAA;SACrB,CAAA;AAAC,OACR,CACR,CAAA;KACA,CAAA;AAAC,GACF,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFR,YAAY,CAACiD,WAAW,GAAGvD,cAAc,CAAA;AACzCM,YAAY,CAACS,SAAS,GAAGd,SAAS,CAAA;AAClCK,YAAY,CAACkD,YAAY,GAAGrD,aAAa;;;;"}

package/_internal/5f8f9454.js

@@ -0,0 +1,70 @@
+import { m as getRootClassName, K as Kind, n as forwardRef, b as Theme, l as classNames } from './6589b796.js';
+import { h as handleBasicClasses } from './e2afb13f.js';
+import { u as useTheme } from './3181f000.js';
+import { jsx } from 'react/jsx-runtime';
+
+const INPUT_HELPER_CONFIGURATION = {
+  error: {
+    color: 'red'
+  },
+  success: {
+    color: 'green'
+  },
+  warning: {
+    color: 'yellow'
+  }
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'InputHelper';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  kind: Kind.info
+};
+
+/**
+ * InputHelper component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InputHelper = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    kind = DEFAULT_PROPS.kind,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const {
+    color
+  } = INPUT_HELPER_CONFIGURATION[kind] || {};
+  return /*#__PURE__*/jsx("p", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      color,
+      theme
+    })),
+    children: children
+  });
+});
+InputHelper.displayName = COMPONENT_NAME;
+InputHelper.className = CLASSNAME;
+InputHelper.defaultProps = DEFAULT_PROPS;
+
+export { InputHelper };
+//# sourceMappingURL=5f8f9454.js.map

package/_internal/5f8f9454.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5f8f9454.js","sources":["../../src/components/input-helper/constants.ts","../../src/components/input-helper/InputHelper.tsx"],"sourcesContent":["export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {\n    error: {\n        color: 'red',\n    },\n    success: {\n        color: 'green',\n    },\n    warning: {\n        color: 'yellow',\n    },\n};\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Kind, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { INPUT_HELPER_CONFIGURATION } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputHelperProps extends GenericProps, HasTheme {\n    /** Helper content. */\n    children: string | ReactNode;\n    /** Helper variant. */\n    kind?: Kind;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputHelper';\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<InputHelperProps> = {\n    kind: Kind.info,\n};\n\n/**\n * InputHelper component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { children, className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;\n    const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};\n\n    return (\n        <p\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}\n        >\n            {children}\n        </p>\n    );\n});\n\nInputHelper.displayName = COMPONENT_NAME;\nInputHelper.className = CLASSNAME;\nInputHelper.defaultProps = DEFAULT_PROPS;\n"],"names":["INPUT_HELPER_CONFIGURATION","error","color","success","warning","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","kind","Kind","info","InputHelper","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;AAAO,MAAMA,0BAA6D,GAAG;AACzEC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,KAAA;GACV;AACDC,EAAAA,OAAO,EAAE;AACLD,IAAAA,KAAK,EAAE,OAAA;GACV;AACDE,EAAAA,OAAO,EAAE;AACLF,IAAAA,KAAK,EAAE,QAAA;AACX,GAAA;AACJ,CAAC;;ACYD;AACA;AACA;AACA,MAAMG,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG;EAC7CC,IAAI,EAAEC,IAAI,CAACC,IAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAyC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEZ,IAAI,GAAGD,aAAa,CAACC,IAAI;AAAEa,IAAAA,KAAK,GAAGN,YAAY;IAAE,GAAGO,cAAAA;AAAe,GAAC,GAAGT,KAAK,CAAA;EACzG,MAAM;AAAEZ,IAAAA,KAAAA;AAAM,GAAC,GAAGF,0BAA0B,CAACS,IAAI,CAAQ,IAAI,EAAE,CAAA;AAE/D,EAAA,oBACIe,GAAA,CAAA,GAAA,EAAA;AACIT,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLQ,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAErB,SAAS;MAAEJ,KAAK;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAF,IAAAA,QAAA,EAEzFA,QAAAA;AAAQ,GACV,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFR,WAAW,CAACgB,WAAW,GAAGvB,cAAc,CAAA;AACxCO,WAAW,CAACS,SAAS,GAAGf,SAAS,CAAA;AACjCM,WAAW,CAACiB,YAAY,GAAGrB,aAAa;;;;"}

package/_internal/5fe09341.js

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import { D as DOCUMENT } from './478b5c92.js';
+import { g as getFocusableElements } from './230173a8.js';
+import { m as makeListenerTowerContext } from './d5f316cb.js';
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+function getFirstAndLastFocusable(parentElement) {
+  const focusableElements = getFocusableElements(parentElement);
+
+  // First non disabled element.
+  const first = focusableElements[0];
+  // Last non disabled element.
+  const last = focusableElements[focusableElements.length - 1];
+  if (last && first) {
+    return {
+      first,
+      last
+    };
+  }
+  return {};
+}
+
+const FOCUS_TRAPS = makeListenerTowerContext();
+
+/**
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
+ *
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
+ *
+ * @param focusZoneElement The element in which to trap the focus.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
+ */
+function useFocusTrap(focusZoneElement, focusElement) {
+  useEffect(() => {
+    // Body element can be undefined in SSR context.
+    const rootElement = DOCUMENT?.body;
+    if (!rootElement || !focusZoneElement) {
+      return undefined;
+    }
+
+    // Use the shadow root as focusZoneElement when available
+    const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+
+    // Trap 'Tab' key down focus switch into the focus zone.
+    const trapTabFocusInFocusZone = evt => {
+      const {
+        key
+      } = evt;
+      if (key !== 'Tab') {
+        return;
+      }
+      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
+
+      // Prevent focus switch if no focusable available.
+      if (!focusable.first) {
+        evt.preventDefault();
+        return;
+      }
+      const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
+      if (
+      // No previous focus
+      !activeElement ||
+      // Previous focus is at the end of the focus zone.
+      !evt.shiftKey && activeElement === focusable.last ||
+      // Previous focus is outside the focus zone
+      !focusZoneElementOrShadowRoot.contains(activeElement)) {
+        focusable.first.focus();
+        evt.preventDefault();
+        return;
+      }
+      if (
+      // Focus order reversed
+      evt.shiftKey &&
+      // Previous focus is at the start of the focus zone.
+      activeElement === focusable.first) {
+        focusable.last.focus();
+        evt.preventDefault();
+      }
+    };
+    const focusTrap = {
+      enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
+      disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
+    };
+
+    // SETUP:
+    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
+      // Focus the given element.
+      focusElement.focus({
+        preventScroll: true
+      });
+    } else {
+      // Focus the first focusable element in the zone.
+      getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({
+        preventScroll: true
+      });
+    }
+    FOCUS_TRAPS.register(focusTrap);
+
+    // TEARDOWN:
+    return () => FOCUS_TRAPS.unregister(focusTrap);
+  }, [focusElement, focusZoneElement]);
+}
+
+export { getFirstAndLastFocusable as g, useFocusTrap as u };
+//# sourceMappingURL=5fe09341.js.map

package/_internal/5fe09341.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5fe09341.js","sources":["../../src/utils/browser/focus/getFirstAndLastFocusable.ts","../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { getFocusableElements } from './getFocusableElements';\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {\n    const focusableElements = getFocusableElements(parentElement);\n\n    // First non disabled element.\n    const first = focusableElements[0];\n    // Last non disabled element.\n    const last = focusableElements[focusableElements.length - 1];\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n","import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';\nimport { Falsy } from '@lumx/react/utils/type';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';\n\nconst FOCUS_TRAPS = makeListenerTowerContext();\n\n/**\n * Trap 'Tab' focus switch inside the `focusZoneElement`.\n *\n * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one\n * gets activated again.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element\n *                         will be focused).\n */\nexport function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {\n    useEffect(() => {\n        // Body element can be undefined in SSR context.\n        const rootElement = DOCUMENT?.body;\n\n        if (!rootElement || !focusZoneElement) {\n            return undefined;\n        }\n\n        // Use the shadow root as focusZoneElement when available\n        const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;\n\n        // Trap 'Tab' key down focus switch into the focus zone.\n        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {\n            const { key } = evt;\n            if (key !== 'Tab') {\n                return;\n            }\n\n            const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);\n\n            // Prevent focus switch if no focusable available.\n            if (!focusable.first) {\n                evt.preventDefault();\n                return;\n            }\n\n            const activeElement = focusZoneElement.shadowRoot\n                ? focusZoneElement.shadowRoot.activeElement\n                : document.activeElement;\n\n            if (\n                // No previous focus\n                !activeElement ||\n                // Previous focus is at the end of the focus zone.\n                (!evt.shiftKey && activeElement === focusable.last) ||\n                // Previous focus is outside the focus zone\n                !focusZoneElementOrShadowRoot.contains(activeElement)\n            ) {\n                focusable.first.focus();\n                evt.preventDefault();\n                return;\n            }\n\n            if (\n                // Focus order reversed\n                evt.shiftKey &&\n                // Previous focus is at the start of the focus zone.\n                activeElement === focusable.first\n            ) {\n                focusable.last.focus();\n                evt.preventDefault();\n            }\n        };\n\n        const focusTrap: Listener = {\n            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),\n            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),\n        };\n\n        // SETUP:\n        if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {\n            // Focus the given element.\n            focusElement.focus({ preventScroll: true });\n        } else {\n            // Focus the first focusable element in the zone.\n            getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });\n        }\n        FOCUS_TRAPS.register(focusTrap);\n\n        // TEARDOWN:\n        return () => FOCUS_TRAPS.unregister(focusTrap);\n    }, [focusElement, focusZoneElement]);\n}\n"],"names":["getFirstAndLastFocusable","parentElement","focusableElements","getFocusableElements","first","last","length","FOCUS_TRAPS","makeListenerTowerContext","useFocusTrap","focusZoneElement","focusElement","useEffect","rootElement","DOCUMENT","body","undefined","focusZoneElementOrShadowRoot","shadowRoot","trapTabFocusInFocusZone","evt","key","focusable","preventDefault","activeElement","document","shiftKey","contains","focus","focusTrap","enable","addEventListener","disable","removeEventListener","preventScroll","register","unregister"],"mappings":"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"}