@lumx/react 3.20.1-alpha.33 → 3.20.1-alpha.35

package/_internal/3eba1faf.js

@@ -0,0 +1,87 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from './27df0cb6.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { ImageSlideshow } from './2cfeae78.js';
+import { useImageLightbox } from './2fc47dc4.js';
+import { CLASSNAME, COMPONENT_NAME } from './31b6784b.js';
+import { jsx } from 'react/jsx-runtime';
+import { Lightbox } from './5c4e10a0.js';
+import { ThemeProvider } from './d8ee966d.js';
+import { ClickAwayProvider } from './739f2f15.js';
+
+const Inner = forwardRef((props, ref) => {
+  const {
+    className,
+    isOpen,
+    closeButtonProps,
+    onClose,
+    parentElement,
+    activeImageIndex,
+    slideshowControlsProps,
+    slideGroupLabel,
+    images,
+    zoomOutButtonProps,
+    zoomInButtonProps,
+    activeImageRef: propImageRef,
+    ...forwardedProps
+  } = props;
+  const currentPaginationItemRef = React__default.useRef(null);
+  const footerRef = React__default.useRef(null);
+  const imageRef = React__default.useRef(null);
+  const clickAwayChildrenRefs = React__default.useRef([imageRef, footerRef]);
+  const onClickAway = React__default.useCallback(evt => {
+    const targetElement = evt.target;
+    if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
+
+    // Skip click away if clicking on the scrollbar
+    if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
+    onClose?.();
+  }, [onClose]);
+  return /*#__PURE__*/jsx(Lightbox, {
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    parentElement: parentElement,
+    isOpen: isOpen,
+    onClose: onClose,
+    closeButtonProps: closeButtonProps,
+    focusElement: currentPaginationItemRef,
+    ...forwardedProps,
+    // Disable the close on click away as we want a custom one here
+    preventAutoClose: true,
+    children: /*#__PURE__*/jsx(ClickAwayProvider, {
+      childrenRefs: clickAwayChildrenRefs,
+      callback: onClickAway,
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        value: "dark",
+        children: /*#__PURE__*/jsx(ImageSlideshow, {
+          activeImageIndex: activeImageIndex,
+          slideGroupLabel: slideGroupLabel,
+          slideshowControlsProps: slideshowControlsProps,
+          images: images,
+          zoomInButtonProps: zoomInButtonProps,
+          zoomOutButtonProps: zoomOutButtonProps,
+          footerRef: footerRef,
+          activeImageRef: useMergeRefs(propImageRef, imageRef),
+          currentPaginationItemRef: currentPaginationItemRef
+        })
+      })
+    })
+  });
+});
+Inner.displayName = COMPONENT_NAME;
+Inner.className = CLASSNAME;
+
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageLightbox = Object.assign(Inner, {
+  useImageLightbox
+});
+
+export { ImageLightbox };
+//# sourceMappingURL=3eba1faf.js.map

package/_internal/3eba1faf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3eba1faf.js","sources":["../../src/components/image-lightbox/ImageLightbox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { Lightbox, ThemeProvider } from '@lumx/react';\nimport { ClickAwayProvider } from '@lumx/react/utils';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ImageSlideshow } from './internal/ImageSlideshow';\nimport { useImageLightbox } from './useImageLightbox';\nimport type { ImageLightboxProps } from './types';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\n\nconst Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {\n    const {\n        className,\n        isOpen,\n        closeButtonProps,\n        onClose,\n        parentElement,\n        activeImageIndex,\n        slideshowControlsProps,\n        slideGroupLabel,\n        images,\n        zoomOutButtonProps,\n        zoomInButtonProps,\n        activeImageRef: propImageRef,\n        ...forwardedProps\n    } = props;\n    const currentPaginationItemRef = React.useRef(null);\n    const footerRef = React.useRef(null);\n    const imageRef = React.useRef(null);\n    const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);\n\n    const onClickAway = React.useCallback(\n        (evt: Event) => {\n            const targetElement = evt.target;\n            if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;\n\n            // Skip click away if clicking on the scrollbar\n            if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;\n\n            onClose?.();\n        },\n        [onClose],\n    );\n\n    return (\n        <Lightbox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            parentElement={parentElement}\n            isOpen={isOpen}\n            onClose={onClose}\n            closeButtonProps={closeButtonProps}\n            focusElement={currentPaginationItemRef}\n            {...forwardedProps}\n            // Disable the close on click away as we want a custom one here\n            preventAutoClose\n        >\n            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>\n                <ThemeProvider value=\"dark\">\n                    <ImageSlideshow\n                        activeImageIndex={activeImageIndex}\n                        slideGroupLabel={slideGroupLabel}\n                        slideshowControlsProps={slideshowControlsProps}\n                        images={images}\n                        zoomInButtonProps={zoomInButtonProps}\n                        zoomOutButtonProps={zoomOutButtonProps}\n                        footerRef={footerRef}\n                        activeImageRef={useMergeRefs(propImageRef, imageRef)}\n                        currentPaginationItemRef={currentPaginationItemRef}\n                    />\n                </ThemeProvider>\n            </ClickAwayProvider>\n        </Lightbox>\n    );\n});\nInner.displayName = COMPONENT_NAME;\nInner.className = CLASSNAME;\n\n/**\n * ImageLightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ImageLightbox = Object.assign(Inner, { useImageLightbox });\n"],"names":["Inner","forwardRef","props","ref","className","isOpen","closeButtonProps","onClose","parentElement","activeImageIndex","slideshowControlsProps","slideGroupLabel","images","zoomOutButtonProps","zoomInButtonProps","activeImageRef","propImageRef","forwardedProps","currentPaginationItemRef","React","useRef","footerRef","imageRef","clickAwayChildrenRefs","onClickAway","useCallback","evt","targetElement","target","HTMLElement","MouseEvent","clientWidth","clientX","clientHeight","clientY","_jsx","Lightbox","classNames","CLASSNAME","focusElement","preventAutoClose","children","ClickAwayProvider","childrenRefs","callback","ThemeProvider","value","ImageSlideshow","useMergeRefs","displayName","COMPONENT_NAME","ImageLightbox","Object","assign","useImageLightbox"],"mappings":"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"}

package/_internal/3f48eb48.js

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTheme } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+import { Theme } from '@lumx/core/js/constants';
+
+const SkeletonRectangleVariant = {
+  squared: 'squared',
+  rounded: 'rounded',
+  pill: 'pill'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS = {
+  variant: SkeletonRectangleVariant.squared
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonRectangle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonRectangle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    aspectRatio,
+    className,
+    height,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS.variant,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      aspectRatio,
+      height: aspectRatio ? undefined : height,
+      theme,
+      variant,
+      width,
+      color
+    })),
+    children: /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__inner`
+    })
+  });
+});
+SkeletonRectangle.displayName = COMPONENT_NAME;
+SkeletonRectangle.className = CLASSNAME;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS;
+
+export { SkeletonRectangle, SkeletonRectangleVariant };
+//# sourceMappingURL=3f48eb48.js.map

package/_internal/3f48eb48.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3f48eb48.js","sources":["../../src/components/skeleton/SkeletonRectangle.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } 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 * Skeleton variants.\n */\nexport const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;\nexport type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonRectangleProps extends GenericProps, HasTheme {\n    /** Aspect ratio (use with width and not height). */\n    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;\n    /** Height size. */\n    height?: GlobalSize;\n    /** Border variant. */\n    variant?: SkeletonRectangleVariant;\n    /** Width size. */\n    width?: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {\n    variant: SkeletonRectangleVariant.squared,\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonRectangle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonRectangle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        aspectRatio,\n        className,\n        height,\n        theme = defaultTheme,\n        variant = DEFAULT_PROPS.variant,\n        width,\n        color,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    aspectRatio,\n                    height: aspectRatio ? undefined : height,\n                    theme,\n                    variant,\n                    width,\n                    color,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonRectangle.displayName = COMPONENT_NAME;\nSkeletonRectangle.className = CLASSNAME;\nSkeletonRectangle.defaultProps = DEFAULT_PROPS;\n"],"names":["SkeletonRectangleVariant","squared","rounded","pill","DEFAULT_PROPS","variant","COMPONENT_NAME","CLASSNAME","getRootClassName","SkeletonRectangle","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","aspectRatio","className","height","theme","width","color","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","undefined","children","displayName","defaultProps"],"mappings":";;;;;;;AAWO,MAAMA,wBAAwB,GAAG;AAAEC,EAAAA,OAAO,EAAE,SAAS;AAAEC,EAAAA,OAAO,EAAE,SAAS;AAAEC,EAAAA,IAAI,EAAE,MAAA;AAAO,EAAU;;AAGzG;AACA;AACA;;AAcA,MAAMC,aAA8C,GAAG;EACnDC,OAAO,EAAEL,wBAAwB,CAACC,OAAAA;AACtC,CAAC,CAAA;;AAED;AACA;AACA;AACA,MAAMK,cAAc,GAAG,mBAAmB,CAAA;;AAE1C;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,iBAAiB,GAAGC,UAAU,CAAyC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChG,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,MAAM;AACNC,IAAAA,KAAK,GAAGP,YAAY;IACpBR,OAAO,GAAGD,aAAa,CAACC,OAAO;IAC/BgB,KAAK;IACLC,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;AAET,EAAA,oBACIa,GAAA,CAAA,KAAA,EAAA;AACIZ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLW,cAAc;AAClBL,IAAAA,SAAS,EAAEO,UAAU,CACjBP,SAAS,EACTQ,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEpB,SAAS;MACjBU,WAAW;AACXE,MAAAA,MAAM,EAAEF,WAAW,GAAGW,SAAS,GAAGT,MAAM;MACxCC,KAAK;MACLf,OAAO;MACPgB,KAAK;AACLC,MAAAA,KAAAA;AACJ,KAAC,CACL,CAAE;AAAAO,IAAAA,QAAA,eAEFL,GAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAE,GAAGX,SAAS,CAAA,OAAA,CAAA;KAAY,CAAA;AAAC,GACxC,CAAC,CAAA;AAEd,CAAC,EAAC;AACFE,iBAAiB,CAACqB,WAAW,GAAGxB,cAAc,CAAA;AAC9CG,iBAAiB,CAACS,SAAS,GAAGX,SAAS,CAAA;AACvCE,iBAAiB,CAACsB,YAAY,GAAG3B,aAAa;;;;"}

package/_internal/3f51175c.js

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { useDisableStateProps } from './ef982c3d.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TableRow';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableRow = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    children,
+    className,
+    isClickable,
+    isSelected,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/jsx("tr", {
+    ref: ref,
+    tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      isClickable: isClickable && !isAnyDisabled,
+      isDisabled: isAnyDisabled,
+      isSelected: isSelected && !isAnyDisabled,
+      prefix: CLASSNAME
+    })),
+    "aria-disabled": isAnyDisabled,
+    children: children
+  });
+});
+TableRow.displayName = COMPONENT_NAME;
+TableRow.className = CLASSNAME;
+TableRow.defaultProps = DEFAULT_PROPS;
+
+export { TableRow };
+//# sourceMappingURL=3f51175c.js.map

package/_internal/3f51175c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3f51175c.js","sources":["../../src/components/table/TableRow.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableRowProps extends GenericProps {\n    /** Whether the component is clickable or not. */\n    isClickable?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableRow';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableRowProps> = {};\n\n/**\n * TableRow component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const TableRow = forwardRef<TableRowProps, HTMLTableRowElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const { children, className, isClickable, isSelected, ...forwardedProps } = otherProps;\n\n    return (\n        <tr\n            ref={ref}\n            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : -1}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    isClickable: isClickable && !isAnyDisabled,\n                    isDisabled: isAnyDisabled,\n                    isSelected: isSelected && !isAnyDisabled,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            aria-disabled={isAnyDisabled}\n        >\n            {children}\n        </tr>\n    );\n});\n\nTableRow.displayName = COMPONENT_NAME;\nTableRow.className = CLASSNAME;\nTableRow.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","TableRow","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","children","className","isClickable","isSelected","forwardedProps","_jsx","tabIndex","disabled","classNames","handleBasicClasses","isDisabled","prefix","displayName","defaultProps"],"mappings":";;;;;;AAqBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,UAAU,CAAA;;AAEjC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,EAAE,IAAI,CAAC,CAAA;;AAExD;AACA;AACA;AACA,MAAMG,aAAqC,GAAG,EAAE,CAAA;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,QAAQ,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnF,MAAM;IAAEC,aAAa;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACL,KAAK,CAAC,CAAA;EACrF,MAAM;IAAEM,QAAQ;IAAEC,SAAS;IAAEC,WAAW;IAAEC,UAAU;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGN,UAAU,CAAA;AAEtF,EAAA,oBACIO,GAAA,CAAA,IAAA,EAAA;AACIV,IAAAA,GAAG,EAAEA,GAAI;IACTW,QAAQ,EAAEJ,WAAW,IAAI,CAACL,kBAAkB,CAACU,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;AAAA,IAAA,GAC3DH,cAAc;AAClBH,IAAAA,SAAS,EAAEO,UAAU,CACjBP,SAAS,EACTQ,kBAAkB,CAAC;AACfP,MAAAA,WAAW,EAAEA,WAAW,IAAI,CAACN,aAAa;AAC1Cc,MAAAA,UAAU,EAAEd,aAAa;AACzBO,MAAAA,UAAU,EAAEA,UAAU,IAAI,CAACP,aAAa;AACxCe,MAAAA,MAAM,EAAEtB,SAAAA;AACZ,KAAC,CACL,CAAE;AACF,IAAA,eAAA,EAAeO,aAAc;AAAAI,IAAAA,QAAA,EAE5BA,QAAAA;AAAQ,GACT,CAAC,CAAA;AAEb,CAAC,EAAC;AAEFR,QAAQ,CAACoB,WAAW,GAAGxB,cAAc,CAAA;AACrCI,QAAQ,CAACS,SAAS,GAAGZ,SAAS,CAAA;AAC9BG,QAAQ,CAACqB,YAAY,GAAGtB,aAAa;;;;"}

package/_internal/3f54fe9e.js

@@ -0,0 +1,4 @@
+var reactIs = {exports: {}};
+
+export { reactIs as __module };
+//# sourceMappingURL=3f54fe9e.js.map

package/_internal/3f54fe9e.js.map

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

package/_internal/41a8b20f.js

@@ -0,0 +1,362 @@
+import { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import get from 'lodash/get';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { mergeRefs } from './27df0cb6.js';
+import { useId } from './11687649.js';
+import { useTheme } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { useDisableStateProps } from './ef982c3d.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Theme, Size, Emphasis, Kind } from '@lumx/core/js/constants';
+import { InputLabel } from './26a92990.js';
+import { Icon } from './595d0e66.js';
+import { mdiAlertCircle } from './893eb653.js';
+import { mdiCheckCircle } from './e47dacb8.js';
+import { IconButton } from './5a0207d9.js';
+import { mdiCloseCircle } from './6f37d603.js';
+import { InputHelper } from './3119c1fe.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TextField';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Default minimum number of rows in the multiline mode.
+ */
+const DEFAULT_MIN_ROWS = 2;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  type: 'text'
+};
+
+/**
+ * Hook that allows to calculate the number of rows needed for a text area.
+ * @param minimumRows Minimum number of rows that we want to display.
+ * @return rows to be used and a callback to recalculate
+ */
+const useComputeNumberOfRows = minimumRows => {
+  const [rows, setRows] = useState(minimumRows);
+  const recompute = target => {
+    /**
+     * HEAD's UP! This part is a little bit tricky. The idea here is to only
+     * display the necessary rows on the textarea. In order to dynamically adjust
+     * the height on that field, we need to:
+     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
+     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
+     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
+     * by the line height.
+     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
+     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
+     * when we will not see the update and the rows will be resized to the minimum.
+     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
+     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
+     */
+    // eslint-disable-next-line no-param-reassign
+    target.rows = minimumRows;
+    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
+    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
+    // eslint-disable-next-line no-param-reassign
+    target.rows = currentRows;
+    setRows(currentRows);
+  };
+  return {
+    recomputeNumberOfRows: recompute,
+    rows
+  };
+};
+const renderInputNative = props => {
+  const {
+    id,
+    isRequired,
+    placeholder,
+    multiline,
+    value,
+    setFocus,
+    onChange,
+    onFocus,
+    onBlur,
+    inputRef,
+    rows,
+    recomputeNumberOfRows,
+    type,
+    name,
+    hasError,
+    describedById,
+    ...forwardedProps
+  } = props;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = useRef(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    // Recompute the number of rows for the first rendering
+    if (multiline && ref && ref.current) {
+      recomputeNumberOfRows(ref.current);
+    }
+  }, [ref, multiline, recomputeNumberOfRows, value]);
+  const onTextFieldFocus = event => {
+    onFocus?.(event);
+    setFocus(true);
+  };
+  const onTextFieldBlur = event => {
+    onBlur?.(event);
+    setFocus(false);
+  };
+  const handleChange = event => {
+    onChange(get(event, 'target.value'), name, event);
+  };
+  const Component = multiline ? 'textarea' : 'input';
+  const inputProps = {
+    ...forwardedProps,
+    id,
+    className: multiline ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea` : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,
+    placeholder,
+    value,
+    name,
+    required: isRequired,
+    onFocus: onTextFieldFocus,
+    onBlur: onTextFieldBlur,
+    onChange: handleChange,
+    'aria-invalid': hasError ? 'true' : undefined,
+    'aria-describedby': describedById,
+    readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
+    ref: mergeRefs(inputRef, ref)
+  };
+  if (multiline) {
+    inputProps.rows = rows;
+  } else {
+    inputProps.type = type;
+  }
+  return /*#__PURE__*/jsx(Component, {
+    ...inputProps
+  });
+};
+
+/**
+ * TextField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TextField = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    chips,
+    className,
+    clearButtonProps,
+    error,
+    forceFocusStyle,
+    hasError,
+    helper,
+    icon,
+    id,
+    inputRef: inputRefProps,
+    isRequired,
+    isValid,
+    label,
+    labelProps,
+    maxLength,
+    minimumRows,
+    multiline,
+    name,
+    onBlur,
+    onChange,
+    onClear,
+    onFocus,
+    placeholder,
+    textFieldRef,
+    theme = defaultTheme,
+    type = DEFAULT_PROPS.type,
+    value,
+    afterElement,
+    ...forwardedProps
+  } = otherProps;
+  const generatedTextFieldId = useId();
+  const textFieldId = id || generatedTextFieldId;
+  /** Keep a clean local input ref to manage focus */
+  const localInputRef = useRef(null);
+  /** Merge prop input ref and local input ref */
+  const inputRef = mergeRefs(localInputRef, inputRefProps);
+  /**
+   * Generate unique ids for both the helper and error texts, in order to
+   * later on add them to the input native as aria-describedby. If both the error and the helper are present,
+   * we want to first use the most important one, which is the errorId. That way, screen readers will read first
+   * the error and then the helper
+   */
+  const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
+  const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
+  const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
+  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
+  const [isFocus, setFocus] = useState(false);
+  const {
+    rows,
+    recomputeNumberOfRows
+  } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
+  const valueLength = (value || '').length;
+  const isNotEmpty = valueLength > 0;
+
+  /**
+   * Function triggered when the Clear Button is clicked.
+   * The idea is to execute the `onChange` callback with an empty string
+   * and remove focus from the clear button.
+   * @param evt On clear event.
+   */
+  const handleClear = evt => {
+    evt.nativeEvent.preventDefault();
+    evt.nativeEvent.stopPropagation();
+    evt.currentTarget.blur();
+    onChange('');
+    if (onClear) {
+      onClear(evt);
+    }
+
+    /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
+    const inputElement = localInputRef;
+    if (inputElement && inputElement.current) {
+      inputElement.current.focus();
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: classNames(className, handleBasicClasses({
+      hasChips: Boolean(chips),
+      hasError: !isValid && hasError,
+      hasIcon: Boolean(icon),
+      hasInput: !multiline,
+      hasInputClear: clearButtonProps && isNotEmpty,
+      hasLabel: Boolean(label),
+      hasPlaceholder: Boolean(placeholder),
+      hasTextarea: multiline,
+      hasValue: Boolean(value),
+      isDisabled: isAnyDisabled,
+      isFocus: isFocus || forceFocusStyle,
+      isValid,
+      prefix: CLASSNAME,
+      theme
+    })),
+    children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME}__header`,
+      children: [label && /*#__PURE__*/jsx(InputLabel, {
+        ...labelProps,
+        htmlFor: textFieldId,
+        className: `${CLASSNAME}__label`,
+        isRequired: isRequired,
+        theme: theme,
+        children: label
+      }), maxLength && /*#__PURE__*/jsxs("div", {
+        className: `${CLASSNAME}__char-counter`,
+        children: [/*#__PURE__*/jsx("span", {
+          children: maxLength - valueLength
+        }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
+          icon: mdiAlertCircle,
+          size: Size.xxs
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME}__wrapper`,
+      ref: textFieldRef,
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME}__input-icon`,
+        color: theme === Theme.dark ? 'light' : undefined,
+        icon: icon,
+        size: Size.xs
+      }), chips && /*#__PURE__*/jsxs("div", {
+        className: `${CLASSNAME}__chips`,
+        children: [chips, renderInputNative({
+          id: textFieldId,
+          inputRef,
+          ...disabledStateProps,
+          isRequired,
+          maxLength,
+          multiline,
+          onBlur,
+          onChange,
+          onFocus,
+          placeholder,
+          recomputeNumberOfRows,
+          rows,
+          setFocus,
+          type,
+          value,
+          name,
+          hasError,
+          describedById,
+          ...forwardedProps
+        })]
+      }), !chips && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__input-wrapper`,
+        children: renderInputNative({
+          id: textFieldId,
+          inputRef,
+          ...disabledStateProps,
+          isRequired,
+          maxLength,
+          multiline,
+          onBlur,
+          onChange,
+          onFocus,
+          placeholder,
+          recomputeNumberOfRows,
+          rows,
+          setFocus,
+          type,
+          value,
+          name,
+          hasError,
+          describedById,
+          ...forwardedProps
+        })
+      }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME}__input-validity`,
+        color: theme === Theme.dark ? 'light' : undefined,
+        icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+        size: Size.xxs
+      }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
+        ...clearButtonProps,
+        className: `${CLASSNAME}__input-clear`,
+        icon: mdiCloseCircle,
+        emphasis: Emphasis.low,
+        size: Size.s,
+        theme: theme,
+        onClick: handleClear,
+        type: "button"
+      }), afterElement && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__after-element`,
+        children: afterElement
+      })]
+    }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
+      className: `${CLASSNAME}__helper`,
+      kind: Kind.error,
+      theme: theme,
+      id: errorId,
+      children: error
+    }), helper && /*#__PURE__*/jsx(InputHelper, {
+      className: `${CLASSNAME}__helper`,
+      theme: theme,
+      id: helperId,
+      children: helper
+    })]
+  });
+});
+TextField.displayName = COMPONENT_NAME;
+TextField.className = CLASSNAME;
+TextField.defaultProps = DEFAULT_PROPS;
+
+export { TextField };
+//# sourceMappingURL=41a8b20f.js.map