@lumx/react 2.2.21 → 2.2.22-alpha-fix-generic-block.2

package/esm/_internal/Dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: RefObject<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\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<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={ref}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","createPortal","classNames","handleBasicClasses","isHidden","isShown","prefix","mergeRefs","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: Ref<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\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<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={mergeRefs(rootRef, ref)}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider\n                          callback={!preventAutoClose && onClose}\n                          childrenRefs={clickAwayRefs}\n                          parentRef={rootRef}\n                      >\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","rootRef","createPortal","mergeRefs","classNames","handleBasicClasses","isHidden","isShown","prefix","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Divider2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider2.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nexport const DEFAULT_PROPS: Partial<DividerProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Divider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <hr\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        />\n    );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Divider","forwardRef","props","ref","className","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;AAOA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;IAGaG,aAAoC,GAAG;AAChDC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADmC;AAIpD;;;;;;;;IAOaC,OAA0C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACzEC,SADyE,GACjCF,KADiC,CACzEE,SADyE;AAAA,MAC9DP,KAD8D,GACjCK,KADiC,CAC9DL,KAD8D;AAAA,MACpDQ,cADoD,4BACjCH,KADiC;;AAGjF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQE,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACF,SAAD,EAAYG,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAV;AAAqBG,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,KADJ;AAOH,CAVmE;AAWpEG,OAAO,CAACS,WAAR,GAAsBhB,cAAtB;AACAO,OAAO,CAACI,SAAR,GAAoBV,SAApB;AACAM,OAAO,CAACU,YAAR,GAAuBd,aAAvB;;;;"}
+{"version":3,"file":"Divider2.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nexport const DEFAULT_PROPS: Partial<DividerProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Divider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <hr\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        />\n    );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Divider","forwardRef","props","ref","className","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;AAOA;;;;AAKA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;IAGaG,aAAoC,GAAG;AAChDC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADmC;AAIpD;;;;;;;;IAOaC,OAA0C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACzEC,SADyE,GACjCF,KADiC,CACzEE,SADyE;AAAA,MAC9DP,KAD8D,GACjCK,KADiC,CAC9DL,KAD8D;AAAA,MACpDQ,cADoD,4BACjCH,KADiC;;AAGjF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQE,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACF,SAAD,EAAYG,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAV;AAAqBG,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,KADJ;AAOH,CAVmE;AAWpEG,OAAO,CAACS,WAAR,GAAsBhB,cAAtB;AACAO,OAAO,CAACI,SAAR,GAAoBV,SAApB;AACAM,OAAO,CAACU,YAAR,GAAuBd,aAAvB;;;;"}

package/esm/_internal/DragHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon\n                icon={mdiDragVertical}\n                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n                size={Size.xs}\n            />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","Size","xs","displayName"],"mappings":";;;;;;AAQA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEK,eADV;AAEI,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CD,YAAY,CAACD,IAFpE;AAGI,IAAA,IAAI,EAAEG,IAAI,CAACC;AAHf,IALJ,CADJ;AAaH,CAhB0E;AAiB3EhB,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}
+{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon\n                icon={mdiDragVertical}\n                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n                size={Size.xs}\n            />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","Size","xs","displayName"],"mappings":";;;;;;AAQA;;;;AAKA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEK,eADV;AAEI,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CD,YAAY,CAACD,IAFpE;AAGI,IAAA,IAAI,EAAEG,IAAI,CAACC;AAHf,IALJ,CADJ;AAaH,CAhB0E;AAiB3EhB,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}

package/esm/_internal/Dropdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown2.js","sources":["../../../src/hooks/useInfiniteScroll.tsx","../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\ntype useInfiniteScrollType = (\n    ref: React.RefObject<HTMLElement>,\n    callback?: EventCallback,\n    callbackOnMount?: boolean,\n) => void;\ntype EventCallback = (evt?: Event) => void;\n\n// The error margin in px we want to have for triggering infinite scroll\nconst SCROLL_TRIGGER_MARGIN = 5;\n\n/**\n * Listen to clicks away from a given element and callback the passed in function.\n *\n * @param  ref               A reference to the element on which you want to listen scroll event.\n * @param  [callback]        A callback function to call when the bottom of the reference element is reached.\n * @param  [callbackOnMount] A callback function to call when the component is mounted.\n */\nexport const useInfiniteScroll: useInfiniteScrollType = (\n    ref,\n    callback,\n    callbackOnMount = false,\n    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,\n) => {\n    useEffect(() => {\n        const { current } = ref;\n        if (!callback || !current) {\n            return undefined;\n        }\n\n        const isAtBottom = () =>\n            Boolean(\n                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,\n            );\n\n        const onScroll = (e?: Event): void => {\n            if (isAtBottom()) {\n                callback(e);\n            }\n        };\n\n        if (isAtBottom()) {\n            onScroll();\n        }\n\n        current.addEventListener('scroll', onScroll);\n        current.addEventListener('resize', onScroll);\n        return () => {\n            current.removeEventListener('scroll', onScroll);\n            current.removeEventListener('resize', onScroll);\n        };\n    }, [ref, callback, scrollTriggerMargin]);\n\n    useEffect(() => {\n        if (callback && callbackOnMount) {\n            callback();\n        }\n    }, [callback, callbackOnMount]);\n};\n","import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { List, ListProps } from '@lumx/react/components/list/List';\nimport { Offset, Placement, Popover } from '@lumx/react/components/popover/Popover';\nimport { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DropdownProps extends GenericProps {\n    /** Reference to the element around which the dropdown is placed.\n     * @see {@link PopoverProps#anchorRef}\n     */\n    anchorRef: React.RefObject<HTMLElement>;\n    /** Dropdown content. */\n    children: React.ReactNode;\n    /**\n     * Whether a click anywhere out of the Dropdown would close it or not.\n     * @see {@link PopoverProps#closeOnClickAway}\n     */\n    closeOnClickAway?: boolean;\n    /**\n     * Whether to close the Dropdown when clicking in it or not.\n     */\n    closeOnClick?: boolean;\n    /**\n     * Whether an escape key press would close the Dropdown or not.\n     * @see {@link PopoverProps#closeOnEscape}\n     */\n    closeOnEscape?: boolean;\n    /**\n     * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.\n     * @see {@link PopoverProps#fitToAnchorWidth}\n     */\n    fitToAnchorWidth?: boolean;\n    /**\n     * Whether the dropdown should shrink to fit within the viewport height or not.\n     * @see {@link PopoverProps#fitWithinViewportHeight}\n     */\n    fitWithinViewportHeight?: boolean;\n    /**\n     * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.\n     * @see {@link PopoverProps#isOpen}\n     */\n    isOpen: boolean;\n    /**\n     * Offset applied to the Dropdown position.\n     * @see {@link PopoverProps#offset}\n     */\n    offset?: Offset;\n    /**\n     * Preferred Dropdown placement against the anchor element.\n     * @see {@link PopoverProps#placement}\n     */\n    placement?: Placement;\n    /** Whether the focus should be set on the list when the dropdown is open or not. */\n    shouldFocusOnOpen?: boolean;\n    /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */\n    focusAnchorOnClose?: boolean;\n    /**\n     * Z-axis position.\n     * @see {@link PopoverProps#zIndex}\n     */\n    zIndex?: number;\n    /**\n     * On close callback.\n     * @see {@link PopoverProps#onClose}\n     */\n    onClose?(): void;\n    /** On scroll end callback. */\n    onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dropdown';\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<DropdownProps> = {\n    closeOnClick: true,\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    fitToAnchorWidth: true,\n    fitWithinViewportHeight: true,\n    placement: Placement.BOTTOM_START,\n    shouldFocusOnOpen: true,\n    focusAnchorOnClose: true,\n};\n\n/**\n * Dropdown component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        anchorRef,\n        children,\n        className,\n        closeOnClick,\n        closeOnClickAway,\n        closeOnEscape,\n        fitToAnchorWidth,\n        fitWithinViewportHeight,\n        isOpen,\n        offset,\n        focusAnchorOnClose,\n        onClose,\n        onInfiniteScroll,\n        placement,\n        shouldFocusOnOpen,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    const innerRef = useRef<HTMLDivElement>(null);\n    const listElement = useRef(null);\n\n    useInfiniteScroll(innerRef, onInfiniteScroll);\n\n    const popperElement = useMemo(() => {\n        return !Array.isArray(children) && isComponent(List)(children)\n            ? cloneElement<ListProps>(children, {\n                  ...children.props,\n                  ref: listElement,\n                  onClick(evt: MouseEvent) {\n                      children.props.onClick?.(evt);\n\n                      if (closeOnClick) {\n                          onClose?.();\n                      }\n                  },\n                  isClickable: true,\n              })\n            : children;\n    }, [children, closeOnClick, onClose]);\n\n    return isOpen ? (\n        <Popover\n            ref={ref}\n            {...forwardedProps}\n            focusAnchorOnClose={focusAnchorOnClose}\n            anchorRef={anchorRef}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n            elevation={0 as any}\n            closeOnClickAway={closeOnClickAway}\n            closeOnEscape={closeOnEscape}\n            fitToAnchorWidth={fitToAnchorWidth}\n            fitWithinViewportHeight={fitWithinViewportHeight}\n            focusElement={shouldFocusOnOpen ? listElement : undefined}\n            isOpen={isOpen}\n            offset={offset}\n            onClose={onClose}\n            placement={placement}\n            zIndex={zIndex}\n        >\n            <div className={`${CLASSNAME}__menu`} ref={innerRef}>\n                {popperElement}\n            </div>\n        </Popover>\n    ) : null;\n});\nDropdown.displayName = COMPONENT_NAME;\nDropdown.className = CLASSNAME;\nDropdown.defaultProps = DEFAULT_PROPS;\n"],"names":["SCROLL_TRIGGER_MARGIN","useInfiniteScroll","ref","callback","callbackOnMount","scrollTriggerMargin","useEffect","current","undefined","isAtBottom","Boolean","scrollHeight","scrollTop","clientHeight","onScroll","e","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","closeOnClick","closeOnClickAway","closeOnEscape","fitToAnchorWidth","fitWithinViewportHeight","placement","Placement","BOTTOM_START","shouldFocusOnOpen","focusAnchorOnClose","Dropdown","forwardRef","props","anchorRef","children","className","isOpen","offset","onClose","onInfiniteScroll","zIndex","forwardedProps","innerRef","useRef","listElement","popperElement","useMemo","Array","isArray","isComponent","List","cloneElement","onClick","evt","isClickable","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Dropdown2.js","sources":["../../../src/hooks/useInfiniteScroll.tsx","../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\ntype useInfiniteScrollType = (\n    ref: React.RefObject<HTMLElement>,\n    callback?: EventCallback,\n    callbackOnMount?: boolean,\n) => void;\ntype EventCallback = (evt?: Event) => void;\n\n// The error margin in px we want to have for triggering infinite scroll\nconst SCROLL_TRIGGER_MARGIN = 5;\n\n/**\n * Listen to clicks away from a given element and callback the passed in function.\n *\n * @param  ref               A reference to the element on which you want to listen scroll event.\n * @param  [callback]        A callback function to call when the bottom of the reference element is reached.\n * @param  [callbackOnMount] A callback function to call when the component is mounted.\n */\nexport const useInfiniteScroll: useInfiniteScrollType = (\n    ref,\n    callback,\n    callbackOnMount = false,\n    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,\n) => {\n    useEffect(() => {\n        const { current } = ref;\n        if (!callback || !current) {\n            return undefined;\n        }\n\n        const isAtBottom = () =>\n            Boolean(\n                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,\n            );\n\n        const onScroll = (e?: Event): void => {\n            if (isAtBottom()) {\n                callback(e);\n            }\n        };\n\n        if (isAtBottom()) {\n            onScroll();\n        }\n\n        current.addEventListener('scroll', onScroll);\n        current.addEventListener('resize', onScroll);\n        return () => {\n            current.removeEventListener('scroll', onScroll);\n            current.removeEventListener('resize', onScroll);\n        };\n    }, [ref, callback, scrollTriggerMargin]);\n\n    useEffect(() => {\n        if (callback && callbackOnMount) {\n            callback();\n        }\n    }, [callback, callbackOnMount]);\n};\n","import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { List, ListProps } from '@lumx/react/components/list/List';\nimport { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';\nimport { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DropdownProps extends GenericProps {\n    /**\n     * Reference to the element around which the dropdown is placed.\n     * @see {@link PopoverProps#anchorRef}\n     */\n    anchorRef: PopoverProps['anchorRef'];\n    /** Dropdown content. */\n    children: React.ReactNode;\n    /**\n     * Whether a click anywhere out of the Dropdown would close it or not.\n     * @see {@link PopoverProps#closeOnClickAway}\n     */\n    closeOnClickAway?: boolean;\n    /**\n     * Whether to close the Dropdown when clicking in it or not.\n     */\n    closeOnClick?: boolean;\n    /**\n     * Whether an escape key press would close the Dropdown or not.\n     * @see {@link PopoverProps#closeOnEscape}\n     */\n    closeOnEscape?: boolean;\n    /**\n     * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.\n     * @see {@link PopoverProps#fitToAnchorWidth}\n     */\n    fitToAnchorWidth?: boolean;\n    /**\n     * Whether the dropdown should shrink to fit within the viewport height or not.\n     * @see {@link PopoverProps#fitWithinViewportHeight}\n     */\n    fitWithinViewportHeight?: boolean;\n    /**\n     * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.\n     * @see {@link PopoverProps#isOpen}\n     */\n    isOpen: boolean;\n    /**\n     * Offset applied to the Dropdown position.\n     * @see {@link PopoverProps#offset}\n     */\n    offset?: Offset;\n    /**\n     * Preferred Dropdown placement against the anchor element.\n     * @see {@link PopoverProps#placement}\n     */\n    placement?: Placement;\n    /** Whether the focus should be set on the list when the dropdown is open or not. */\n    shouldFocusOnOpen?: boolean;\n    /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */\n    focusAnchorOnClose?: boolean;\n    /**\n     * Z-axis position.\n     * @see {@link PopoverProps#zIndex}\n     */\n    zIndex?: number;\n    /**\n     * On close callback.\n     * @see {@link PopoverProps#onClose}\n     */\n    onClose?(): void;\n    /** On scroll end callback. */\n    onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dropdown';\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<DropdownProps> = {\n    closeOnClick: true,\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    fitToAnchorWidth: true,\n    fitWithinViewportHeight: true,\n    placement: Placement.BOTTOM_START,\n    shouldFocusOnOpen: true,\n    focusAnchorOnClose: true,\n};\n\n/**\n * Dropdown component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        anchorRef,\n        children,\n        className,\n        closeOnClick,\n        closeOnClickAway,\n        closeOnEscape,\n        fitToAnchorWidth,\n        fitWithinViewportHeight,\n        isOpen,\n        offset,\n        focusAnchorOnClose,\n        onClose,\n        onInfiniteScroll,\n        placement,\n        shouldFocusOnOpen,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    const innerRef = useRef<HTMLDivElement>(null);\n    const listElement = useRef(null);\n\n    useInfiniteScroll(innerRef, onInfiniteScroll);\n\n    const popperElement = useMemo(() => {\n        return !Array.isArray(children) && isComponent(List)(children)\n            ? cloneElement<ListProps>(children, {\n                  ...children.props,\n                  ref: listElement,\n                  onClick(evt: MouseEvent) {\n                      children.props.onClick?.(evt);\n\n                      if (closeOnClick) {\n                          onClose?.();\n                      }\n                  },\n                  isClickable: true,\n              })\n            : children;\n    }, [children, closeOnClick, onClose]);\n\n    return isOpen ? (\n        <Popover\n            ref={ref}\n            {...forwardedProps}\n            focusAnchorOnClose={focusAnchorOnClose}\n            anchorRef={anchorRef}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n            elevation={0 as any}\n            closeOnClickAway={closeOnClickAway}\n            closeOnEscape={closeOnEscape}\n            fitToAnchorWidth={fitToAnchorWidth}\n            fitWithinViewportHeight={fitWithinViewportHeight}\n            focusElement={shouldFocusOnOpen ? listElement : undefined}\n            isOpen={isOpen}\n            offset={offset}\n            onClose={onClose}\n            placement={placement}\n            zIndex={zIndex}\n        >\n            <div className={`${CLASSNAME}__menu`} ref={innerRef}>\n                {popperElement}\n            </div>\n        </Popover>\n    ) : null;\n});\nDropdown.displayName = COMPONENT_NAME;\nDropdown.className = CLASSNAME;\nDropdown.defaultProps = DEFAULT_PROPS;\n"],"names":["SCROLL_TRIGGER_MARGIN","useInfiniteScroll","ref","callback","callbackOnMount","scrollTriggerMargin","useEffect","current","undefined","isAtBottom","Boolean","scrollHeight","scrollTop","clientHeight","onScroll","e","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","closeOnClick","closeOnClickAway","closeOnEscape","fitToAnchorWidth","fitWithinViewportHeight","placement","Placement","BOTTOM_START","shouldFocusOnOpen","focusAnchorOnClose","Dropdown","forwardRef","props","anchorRef","children","className","isOpen","offset","onClose","onInfiniteScroll","zIndex","forwardedProps","innerRef","useRef","listElement","popperElement","useMemo","Array","isArray","isComponent","List","cloneElement","onClick","evt","isClickable","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/ExpansionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionPanel.js","sources":["../../../src/components/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\n\nimport get from 'lodash/get';\nimport isEmpty from 'lodash/isEmpty';\nimport isFunction from 'lodash/isFunction';\n\nimport { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport {\n    Callback,\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface ExpansionPanelProps extends GenericProps {\n    /** Whether the expansion panel has a background. */\n    hasBackground?: boolean;\n    /** Whether the header has a divider. */\n    hasHeaderDivider?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Label text (overwritten if a `<header>` is provided in the children). */\n    label?: string;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On open callback. */\n    onOpen?: Callback;\n    /** On close callback. */\n    onClose?: Callback;\n    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */\n    toggleButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** On toggle open or close callback. */\n    onToggleOpen?(shouldOpen: boolean): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ExpansionPanel';\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<ExpansionPanelProps> = {\n    theme: Theme.light,\n};\n\nconst isDragHandle = isComponent(DragHandle);\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * ExpansionPanel component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        className,\n        children: anyChildren,\n        hasBackground,\n        hasHeaderDivider,\n        isOpen,\n        label,\n        onClose,\n        onOpen,\n        onToggleOpen,\n        theme,\n        toggleButtonProps,\n        ...forwardedProps\n    } = props;\n\n    const children: ReactNode[] = Children.toArray(anyChildren);\n\n    // Partition children by types.\n    const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);\n\n    // Either take the header in children or create one with the label.\n    const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};\n    const headerContent = !isEmpty(headerProps.children) ? (\n        headerProps.children\n    ) : (\n        <span className={`${CLASSNAME}__label`}>{label}</span>\n    );\n\n    const toggleOpen = () => {\n        const shouldOpen = !isOpen;\n        if (isFunction(onOpen) && shouldOpen) {\n            onOpen();\n        }\n        if (isFunction(onClose) && !shouldOpen) {\n            onClose();\n        }\n        if (isFunction(onToggleOpen)) {\n            onToggleOpen(shouldOpen);\n        }\n    };\n\n    const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;\n\n    const rootClassName = classNames(\n        className,\n        handleBasicClasses({\n            hasBackground,\n            hasHeader: Boolean(!isEmpty(headerProps.children)),\n            hasHeaderDivider,\n            isClose: !isOpen,\n            isDraggable: Boolean(dragHandle),\n            isOpen,\n            prefix: CLASSNAME,\n            theme,\n        }),\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;\n\n    // Switch max height on/off to activate the CSS transition (updates when children changes).\n    const [maxHeight, setMaxHeight] = useState('0');\n    useEffect(() => {\n        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;\n        setMaxHeight(`${height}px`);\n    }, [children, isOpen]);\n\n    return (\n        <section ref={ref} {...forwardedProps} className={rootClassName}>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n            <header className={`${CLASSNAME}__header`} onClick={toggleOpen}>\n                {dragHandle && <div className={`${CLASSNAME}__header-drag`}>{dragHandle}</div>}\n\n                <div {...headerProps} className={`${CLASSNAME}__header-content`}>\n                    {headerContent}\n                </div>\n\n                <div className={`${CLASSNAME}__header-toggle`}>\n                    <IconButton\n                        {...toggleButtonProps}\n                        color={color}\n                        emphasis={Emphasis.low}\n                        icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                    />\n                </div>\n            </header>\n\n            {(isOpen || isContentVisible()) && (\n                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>\n                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>\n                        <div className={`${CLASSNAME}__content`}>{content}</div>\n\n                        {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}\n                    </div>\n                </div>\n            )}\n        </section>\n    );\n});\nExpansionPanel.displayName = COMPONENT_NAME;\nExpansionPanel.className = CLASSNAME;\nExpansionPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","isDragHandle","isComponent","DragHandle","isHeader","isFooter","ExpansionPanel","forwardRef","props","ref","className","anyChildren","children","hasBackground","hasHeaderDivider","isOpen","label","onClose","onOpen","onToggleOpen","toggleButtonProps","forwardedProps","Children","toArray","partitionMulti","dragHandle","header","footer","content","headerProps","React","isValidElement","headerContent","isEmpty","toggleOpen","shouldOpen","isFunction","color","dark","ColorPalette","rootClassName","classNames","handleBasicClasses","hasHeader","Boolean","isClose","isDraggable","prefix","wrapperRef","useRef","isContentVisible","get","current","useState","maxHeight","setMaxHeight","useEffect","height","Emphasis","low","mdiChevronUp","mdiChevronDown","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"ExpansionPanel.js","sources":["../../../src/components/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\n\nimport get from 'lodash/get';\nimport isEmpty from 'lodash/isEmpty';\nimport isFunction from 'lodash/isFunction';\n\nimport { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport {\n    Callback,\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    HasTheme,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface ExpansionPanelProps extends GenericProps, HasTheme {\n    /** Whether the expansion panel has a background. */\n    hasBackground?: boolean;\n    /** Whether the header has a divider. */\n    hasHeaderDivider?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Label text (overwritten if a `<header>` is provided in the children). */\n    label?: string;\n    /** On open callback. */\n    onOpen?: Callback;\n    /** On close callback. */\n    onClose?: Callback;\n    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */\n    toggleButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** On toggle open or close callback. */\n    onToggleOpen?(shouldOpen: boolean): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ExpansionPanel';\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<ExpansionPanelProps> = {\n    theme: Theme.light,\n};\n\nconst isDragHandle = isComponent(DragHandle);\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * ExpansionPanel component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        className,\n        children: anyChildren,\n        hasBackground,\n        hasHeaderDivider,\n        isOpen,\n        label,\n        onClose,\n        onOpen,\n        onToggleOpen,\n        theme,\n        toggleButtonProps,\n        ...forwardedProps\n    } = props;\n\n    const children: ReactNode[] = Children.toArray(anyChildren);\n\n    // Partition children by types.\n    const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);\n\n    // Either take the header in children or create one with the label.\n    const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};\n    const headerContent = !isEmpty(headerProps.children) ? (\n        headerProps.children\n    ) : (\n        <span className={`${CLASSNAME}__label`}>{label}</span>\n    );\n\n    const toggleOpen = () => {\n        const shouldOpen = !isOpen;\n        if (isFunction(onOpen) && shouldOpen) {\n            onOpen();\n        }\n        if (isFunction(onClose) && !shouldOpen) {\n            onClose();\n        }\n        if (isFunction(onToggleOpen)) {\n            onToggleOpen(shouldOpen);\n        }\n    };\n\n    const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;\n\n    const rootClassName = classNames(\n        className,\n        handleBasicClasses({\n            hasBackground,\n            hasHeader: Boolean(!isEmpty(headerProps.children)),\n            hasHeaderDivider,\n            isClose: !isOpen,\n            isDraggable: Boolean(dragHandle),\n            isOpen,\n            prefix: CLASSNAME,\n            theme,\n        }),\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;\n\n    // Switch max height on/off to activate the CSS transition (updates when children changes).\n    const [maxHeight, setMaxHeight] = useState('0');\n    useEffect(() => {\n        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;\n        setMaxHeight(`${height}px`);\n    }, [children, isOpen]);\n\n    return (\n        <section ref={ref} {...forwardedProps} className={rootClassName}>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n            <header className={`${CLASSNAME}__header`} onClick={toggleOpen}>\n                {dragHandle && <div className={`${CLASSNAME}__header-drag`}>{dragHandle}</div>}\n\n                <div {...headerProps} className={`${CLASSNAME}__header-content`}>\n                    {headerContent}\n                </div>\n\n                <div className={`${CLASSNAME}__header-toggle`}>\n                    <IconButton\n                        {...toggleButtonProps}\n                        color={color}\n                        emphasis={Emphasis.low}\n                        icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                    />\n                </div>\n            </header>\n\n            {(isOpen || isContentVisible()) && (\n                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>\n                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>\n                        <div className={`${CLASSNAME}__content`}>{content}</div>\n\n                        {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}\n                    </div>\n                </div>\n            )}\n        </section>\n    );\n});\nExpansionPanel.displayName = COMPONENT_NAME;\nExpansionPanel.className = CLASSNAME;\nExpansionPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","isDragHandle","isComponent","DragHandle","isHeader","isFooter","ExpansionPanel","forwardRef","props","ref","className","anyChildren","children","hasBackground","hasHeaderDivider","isOpen","label","onClose","onOpen","onToggleOpen","toggleButtonProps","forwardedProps","Children","toArray","partitionMulti","dragHandle","header","footer","content","headerProps","React","isValidElement","headerContent","isEmpty","toggleOpen","shouldOpen","isFunction","color","dark","ColorPalette","rootClassName","classNames","handleBasicClasses","hasHeader","Boolean","isClose","isDraggable","prefix","wrapperRef","useRef","isContentVisible","get","current","useState","maxHeight","setMaxHeight","useEffect","height","Emphasis","low","mdiChevronUp","mdiChevronDown","displayName","defaultProps"],"mappings":";;;;;;;;;;;;;AAsBA;;;;AAuBA;;;AAGA,IAAMA,cAAc,GAAG,gBAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAA2C,GAAG;AAChDC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADmC,CAApD;AAIA,IAAMC,YAAY,GAAGC,WAAW,CAACC,UAAD,CAAhC;AACA,IAAMC,QAAQ,GAAGF,WAAW,CAAC,QAAD,CAA5B;AACA,IAAMG,QAAQ,GAAGH,WAAW,CAAC,QAAD,CAA5B;AAEA;;;;;;;;IAOaI,cAAyD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5FC,SAF4F,GAc5FF,KAd4F,CAE5FE,SAF4F;AAAA,MAGlFC,WAHkF,GAc5FH,KAd4F,CAG5FI,QAH4F;AAAA,MAI5FC,aAJ4F,GAc5FL,KAd4F,CAI5FK,aAJ4F;AAAA,MAK5FC,gBAL4F,GAc5FN,KAd4F,CAK5FM,gBAL4F;AAAA,MAM5FC,MAN4F,GAc5FP,KAd4F,CAM5FO,MAN4F;AAAA,MAO5FC,KAP4F,GAc5FR,KAd4F,CAO5FQ,KAP4F;AAAA,MAQ5FC,OAR4F,GAc5FT,KAd4F,CAQ5FS,OAR4F;AAAA,MAS5FC,MAT4F,GAc5FV,KAd4F,CAS5FU,MAT4F;AAAA,MAU5FC,YAV4F,GAc5FX,KAd4F,CAU5FW,YAV4F;AAAA,MAW5FrB,KAX4F,GAc5FU,KAd4F,CAW5FV,KAX4F;AAAA,MAY5FsB,iBAZ4F,GAc5FZ,KAd4F,CAY5FY,iBAZ4F;AAAA,MAazFC,cAbyF,4BAc5Fb,KAd4F;;AAgBhG,MAAMI,QAAqB,GAAGU,QAAQ,CAACC,OAAT,CAAiBZ,WAAjB,CAA9B,CAhBgG;;AAAA,wBAmB5Ca,cAAc,CAACZ,QAAD,EAAW,CAACX,YAAD,EAAeG,QAAf,EAAyBC,QAAzB,CAAX,CAnB8B;AAAA;AAAA;AAAA,MAmBxFoB,UAnBwF;AAAA;AAAA,MAmB1EC,MAnB0E;AAAA;AAAA,MAmBhEC,MAnBgE;AAAA,MAmBvDC,OAnBuD;;;AAsBhG,MAAMC,WAAmC,GAAGC,KAAK,CAACC,cAAN,CAAqBL,MAArB,IAA+BA,MAAM,CAAClB,KAAtC,GAA8C,EAA1F;AACA,MAAMwB,aAAa,GAAG,CAACC,OAAO,CAACJ,WAAW,CAACjB,QAAb,CAAR,GAClBiB,WAAW,CAACjB,QADM,GAGlB;AAAM,IAAA,SAAS,YAAKjB,SAAL;AAAf,KAAyCqB,KAAzC,CAHJ;;AAMA,MAAMkB,UAAU,GAAG,SAAbA,UAAa,GAAM;AACrB,QAAMC,UAAU,GAAG,CAACpB,MAApB;;AACA,QAAIqB,UAAU,CAAClB,MAAD,CAAV,IAAsBiB,UAA1B,EAAsC;AAClCjB,MAAAA,MAAM;AACT;;AACD,QAAIkB,UAAU,CAACnB,OAAD,CAAV,IAAuB,CAACkB,UAA5B,EAAwC;AACpClB,MAAAA,OAAO;AACV;;AACD,QAAImB,UAAU,CAACjB,YAAD,CAAd,EAA8B;AAC1BA,MAAAA,YAAY,CAACgB,UAAD,CAAZ;AACH;AACJ,GAXD;;AAaA,MAAME,KAAK,GAAGvC,KAAK,KAAKC,KAAK,CAACuC,IAAhB,GAAuBC,YAAY,CAACvC,KAApC,GAA4CuC,YAAY,CAACD,IAAvE;AAEA,MAAME,aAAa,GAAGC,UAAU,CAC5B/B,SAD4B,EAE5BgC,kBAAkB,CAAC;AACf7B,IAAAA,aAAa,EAAbA,aADe;AAEf8B,IAAAA,SAAS,EAAEC,OAAO,CAAC,CAACX,OAAO,CAACJ,WAAW,CAACjB,QAAb,CAAT,CAFH;AAGfE,IAAAA,gBAAgB,EAAhBA,gBAHe;AAIf+B,IAAAA,OAAO,EAAE,CAAC9B,MAJK;AAKf+B,IAAAA,WAAW,EAAEF,OAAO,CAACnB,UAAD,CALL;AAMfV,IAAAA,MAAM,EAANA,MANe;AAOfgC,IAAAA,MAAM,EAAEpD,SAPO;AAQfG,IAAAA,KAAK,EAALA;AARe,GAAD,CAFU,CAAhC;AAcA,MAAMkD,UAAU,GAAGC,MAAM,CAAiB,IAAjB,CAAzB;;AACA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,WAAeC,GAAG,CAACH,UAAU,CAACI,OAAZ,EAAqB,cAArB,EAAqC,CAArC,CAAH,GAA6C,CAA5D;AAAA,GAAzB,CA3DgG;;;AAAA,kBA8D9DC,QAAQ,CAAC,GAAD,CA9DsD;AAAA;AAAA,MA8DzFC,SA9DyF;AAAA,MA8D9EC,YA9D8E;;AA+DhGC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAMC,MAAM,GAAG1C,MAAM,GAAGoC,GAAG,CAACH,UAAU,CAACI,OAAZ,EAAqB,cAArB,EAAqC,CAArC,CAAN,GAAgD,CAArE;AACAG,IAAAA,YAAY,WAAIE,MAAJ,QAAZ;AACH,GAHQ,EAGN,CAAC7C,QAAD,EAAWG,MAAX,CAHM,CAAT;AAKA,SACI;AAAS,IAAA,GAAG,EAAEN;AAAd,KAAuBY,cAAvB;AAAuC,IAAA,SAAS,EAAEmB;AAAlD,MAEI;AAAQ,IAAA,SAAS,YAAK7C,SAAL,aAAjB;AAA2C,IAAA,OAAO,EAAEuC;AAApD,KACKT,UAAU,IAAI;AAAK,IAAA,SAAS,YAAK9B,SAAL;AAAd,KAA8C8B,UAA9C,CADnB,EAGI,wCAASI,WAAT;AAAsB,IAAA,SAAS,YAAKlC,SAAL;AAA/B,MACKqC,aADL,CAHJ,EAOI;AAAK,IAAA,SAAS,YAAKrC,SAAL;AAAd,KACI,oBAAC,UAAD,eACQyB,iBADR;AAEI,IAAA,KAAK,EAAEiB,KAFX;AAGI,IAAA,QAAQ,EAAEqB,QAAQ,CAACC,GAHvB;AAII,IAAA,IAAI,EAAE5C,MAAM,GAAG6C,YAAH,GAAkBC;AAJlC,KADJ,CAPJ,CAFJ,EAmBK,CAAC9C,MAAM,IAAImC,gBAAgB,EAA3B,KACG;AAAK,IAAA,SAAS,YAAKvD,SAAL,cAAd;AAAyC,IAAA,KAAK,EAAE;AAAE2D,MAAAA,SAAS,EAATA;AAAF;AAAhD,KACI;AAAK,IAAA,SAAS,YAAK3D,SAAL,gBAAd;AAA2C,IAAA,GAAG,EAAEqD;AAAhD,KACI;AAAK,IAAA,SAAS,YAAKrD,SAAL;AAAd,KAA0CiC,OAA1C,CADJ,EAGKD,MAAM,IAAI;AAAK,IAAA,SAAS,YAAKhC,SAAL;AAAd,KAAyCgC,MAAzC,CAHf,CADJ,CApBR,CADJ;AA+BH,CAnGkF;AAoGnFrB,cAAc,CAACwD,WAAf,GAA6BpE,cAA7B;AACAY,cAAc,CAACI,SAAf,GAA2Bf,SAA3B;AACAW,cAAc,CAACyD,YAAf,GAA8BlE,aAA9B;;;;"}

package/esm/_internal/Flag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAiBA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEU,IAAI,CAACC,GAA7B;AAAkC,IAAA,SAAS,YAAKtB,SAAL;AAA3C,IALb,EAMI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CANJ,CADJ;AAUH,CAd8D;AAe/DJ,IAAI,CAACiB,WAAL,GAAmBxB,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACkB,YAAL,GAAoBtB,aAApB;;;;"}
+{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps, HasTheme {\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAeA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEU,IAAI,CAACC,GAA7B;AAAkC,IAAA,SAAS,YAAKtB,SAAL;AAA3C,IALb,EAMI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CANJ,CADJ;AAUH,CAd8D;AAe/DJ,IAAI,CAACiB,WAAL,GAAmBxB,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACkB,YAAL,GAAoBtB,aAApB;;;;"}

package/esm/_internal/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\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                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
+{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\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                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}

package/esm/_internal/GenericBlock.js

@@ -1,11 +1,13 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Orientation, Size, Alignment } from './components.js';
-import React, { forwardRef } from 'react';
+import { b as _objectWithoutProperties, f as _toArray, d as _slicedToArray, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { Orientation, Size } from './components.js';
+import React, { forwardRef, Children } from 'react';
 import { g as getRootClassName, c as classnames } from './getRootClassName.js';
 import 'lodash/isBoolean';
-import 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty';
 import 'lodash/kebabCase';
-import 'lodash/noop';
+import noop from 'lodash/noop';
+import { p as partitionMulti } from './partitionMulti.js';
+import { a as isComponentType } from './type.js';
 import { F as FlexBox } from './FlexBox.js';
 
 /**
@@ -22,24 +24,30 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 
 var DEFAULT_PROPS = {
-  gap: Size.regular,
-  orientation: Orientation.vertical,
-  hAlign: Alignment.center,
-  vAlign: Alignment.center
+  gap: Size.big,
+  orientation: Orientation.horizontal
 };
+var Figure = noop.bind({});
+var isFigure = isComponentType(Figure);
+var Content = noop.bind({});
+var isContent = isComponentType(Content);
+var Actions = noop.bind({});
+var isActions = isComponentType(Actions);
 /**
  * The GenericBlock is a layout component made of 3 sections that can be
  * displayed either horizontally of vertically with the same gap between each section.
  *
  * The sections are:
- * * (Optional) `Figure` => A visual element to display before the main content.
- * * (Required) `Content` => The main content displayed
- * * (Optional) `Actions` => One or more actions to set after the element.
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
 
-var GenericBlock = forwardRef(function (props, ref) {
+var BaseGenericBlock = forwardRef(function (props, ref) {
+  var _sections$figureChild, _ref4, _sections$figureChild2, _sections$figureChild3, _sections$contentChil, _ref5, _sections$contentChil2, _sections$contentChil3, _sections$actionsChil, _ref6, _sections$actionsChil2, _sections$actionsChil3;
+
   var className = props.className,
       figure = props.figure,
       figureProps = props.figureProps,
@@ -51,40 +59,67 @@ var GenericBlock = forwardRef(function (props, ref) {
       contentProps = props.contentProps,
       forwardedProps = _objectWithoutProperties(props, ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"]);
 
-  var actionsVAlign = Alignment.center;
-
-  if (orientation === Orientation.horizontal) {
-    actionsVAlign = Alignment.right;
-  }
+  var sections = React.useMemo(function () {
+    var _ref, _ref2, _ref3;
 
-  var contentVAlign = Alignment.center;
-
-  if (orientation === Orientation.horizontal) {
-    contentVAlign = Alignment.left;
-  }
+    // Split children by section type
+    var _partitionMulti = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]),
+        _partitionMulti2 = _toArray(_partitionMulti),
+        _partitionMulti2$ = _slicedToArray(_partitionMulti2[0], 1),
+        figureChild = _partitionMulti2$[0],
+        _partitionMulti2$2 = _slicedToArray(_partitionMulti2[1], 1),
+        contentChild = _partitionMulti2$2[0],
+        _partitionMulti2$3 = _slicedToArray(_partitionMulti2[2], 1),
+        actionsChild = _partitionMulti2$3[0],
+        otherChildren = _partitionMulti2.slice(3);
 
+    return {
+      figureChild: figureChild,
+      figureChildProps: (_ref = figureChild) === null || _ref === void 0 ? void 0 : _ref.props,
+      contentChild: contentChild,
+      contentChildProps: (_ref2 = contentChild) === null || _ref2 === void 0 ? void 0 : _ref2.props,
+      actionsChild: actionsChild,
+      actionsChildProps: (_ref3 = actionsChild) === null || _ref3 === void 0 ? void 0 : _ref3.props,
+      otherChildren: otherChildren.filter(function (child) {
+        return !isEmpty(child);
+      })
+    };
+  }, [children]);
   return React.createElement(FlexBox, _extends({
     ref: ref,
     className: classnames(className, CLASSNAME),
     gap: gap,
     orientation: orientation
-  }, forwardedProps), React.createElement(FlexBox, _extends({}, figureProps, {
-    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, "".concat(CLASSNAME, "__figure"))
-  }), figure), children && React.createElement(FlexBox, _extends({
+  }, forwardedProps), (figure || ((_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.children)) && React.createElement(FlexBox, _extends({
+    ref: (_ref4 = sections.figureChild) === null || _ref4 === void 0 ? void 0 : _ref4.ref,
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
+  }, figureProps, sections.figureChildProps, {
+    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild2 = sections.figureChildProps) === null || _sections$figureChild2 === void 0 ? void 0 : _sections$figureChild2.className, "".concat(CLASSNAME, "__figure"))
+  }), figure, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.children), (((_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.children) || sections.otherChildren.length > 0) && React.createElement(FlexBox, _extends({
+    ref: (_ref5 = sections.contentChild) === null || _ref5 === void 0 ? void 0 : _ref5.ref,
     orientation: Orientation.vertical,
     fillSpace: true,
-    vAlign: contentVAlign
-  }, contentProps, {
-    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, "".concat(CLASSNAME, "__content"))
-  }), children), React.createElement(FlexBox, _extends({
-    vAlign: actionsVAlign
-  }, actionsProps, {
-    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, "".concat(CLASSNAME, "__actions"))
-  }), actions));
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
+  }, contentProps, sections.contentChildProps, {
+    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil2 = sections.contentChildProps) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.className, "".concat(CLASSNAME, "__content"))
+  }), (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.children, sections.otherChildren), (actions || ((_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.children)) && React.createElement(FlexBox, _extends({
+    ref: (_ref6 = sections.actionsChild) === null || _ref6 === void 0 ? void 0 : _ref6.ref,
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
+  }, actionsProps, sections.actionsChildProps, {
+    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil2 = sections.actionsChildProps) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.className, "".concat(CLASSNAME, "__actions"))
+  }), actions, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.children));
+});
+BaseGenericBlock.displayName = COMPONENT_NAME;
+BaseGenericBlock.className = CLASSNAME;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS;
+var GenericBlock = Object.assign(BaseGenericBlock, {
+  Figure: Figure,
+  Content: Content,
+  Actions: Actions
 });
-GenericBlock.displayName = COMPONENT_NAME;
-GenericBlock.className = CLASSNAME;
-GenericBlock.defaultProps = DEFAULT_PROPS;
 
 export { GenericBlock as G };
 //# sourceMappingURL=GenericBlock.js.map

package/esm/_internal/GenericBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getRootClassName } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n    /** Component to use as visual element. */\n    figure?: ReactNode;\n    /** Actions to set after the main content. */\n    actions?: ReactNode;\n    /** Main content to display */\n    children: ReactNode;\n    /** Orientation of the 3 sections */\n    orientation?: FlexBoxProps['orientation'];\n    /** Horizontal alignment. */\n    hAlign?: FlexBoxProps['hAlign'];\n    /** Vertical alignment. */\n    vAlign?: FlexBoxProps['vAlign'];\n    /**\n     * The props to forward to the content.\n     * By default, the content will have the same alignment as wrapper.\n     */\n    contentProps?: Omit<FlexBoxProps, 'children'>;\n    /** props to forward to the actions element. */\n    actionsProps?: Omit<FlexBoxProps, 'children'>;\n    /** props to forward to the figure element. */\n    figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\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<GenericBlockProps> = {\n    gap: Size.regular,\n    orientation: Orientation.vertical,\n    hAlign: Alignment.center,\n    vAlign: Alignment.center,\n};\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * * (Optional) `Figure` => A visual element to display before the main content.\n * * (Required) `Content` => The main content displayed\n * * (Optional) `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nexport const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        className,\n        figure,\n        figureProps,\n        children,\n        actions,\n        actionsProps,\n        gap,\n        orientation,\n        contentProps,\n        ...forwardedProps\n    } = props;\n\n    let actionsVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        actionsVAlign = Alignment.right;\n    }\n    let contentVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        contentVAlign = Alignment.left;\n    }\n\n    return (\n        <FlexBox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            gap={gap}\n            orientation={orientation}\n            {...forwardedProps}\n        >\n            <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>\n                {figure}\n            </FlexBox>\n\n            {children && (\n                <FlexBox\n                    orientation={Orientation.vertical}\n                    fillSpace\n                    vAlign={contentVAlign}\n                    {...contentProps}\n                    className={classNames(contentProps?.className, `${CLASSNAME}__content`)}\n                >\n                    {children}\n                </FlexBox>\n            )}\n\n            <FlexBox\n                vAlign={actionsVAlign}\n                {...actionsProps}\n                className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}\n            >\n                {actions}\n            </FlexBox>\n        </FlexBox>\n    );\n});\nGenericBlock.displayName = COMPONENT_NAME;\nGenericBlock.className = CLASSNAME;\nGenericBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","regular","orientation","Orientation","vertical","hAlign","Alignment","center","vAlign","GenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","actionsVAlign","horizontal","right","contentVAlign","left","classNames","displayName","defaultProps"],"mappings":";;;;;;;;;;AA6BA;;;AAGA,IAAMA,cAAc,GAAG,cAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAyC,GAAG;AAC9CC,EAAAA,GAAG,EAAEC,IAAI,CAACC,OADoC;AAE9CC,EAAAA,WAAW,EAAEC,WAAW,CAACC,QAFqB;AAG9CC,EAAAA,MAAM,EAAEC,SAAS,CAACC,MAH4B;AAI9CC,EAAAA,MAAM,EAAEF,SAAS,CAACC;AAJ4B,CAAlD;AAOA;;;;;;;;;;;;IAWaE,YAAqD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAExFC,SAFwF,GAYxFF,KAZwF,CAExFE,SAFwF;AAAA,MAGxFC,MAHwF,GAYxFH,KAZwF,CAGxFG,MAHwF;AAAA,MAIxFC,WAJwF,GAYxFJ,KAZwF,CAIxFI,WAJwF;AAAA,MAKxFC,QALwF,GAYxFL,KAZwF,CAKxFK,QALwF;AAAA,MAMxFC,OANwF,GAYxFN,KAZwF,CAMxFM,OANwF;AAAA,MAOxFC,YAPwF,GAYxFP,KAZwF,CAOxFO,YAPwF;AAAA,MAQxFnB,GARwF,GAYxFY,KAZwF,CAQxFZ,GARwF;AAAA,MASxFG,WATwF,GAYxFS,KAZwF,CASxFT,WATwF;AAAA,MAUxFiB,YAVwF,GAYxFR,KAZwF,CAUxFQ,YAVwF;AAAA,MAWrFC,cAXqF,4BAYxFT,KAZwF;;AAc5F,MAAIU,aAAkC,GAAGf,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCD,IAAAA,aAAa,GAAGf,SAAS,CAACiB,KAA1B;AACH;;AACD,MAAIC,aAAkC,GAAGlB,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCE,IAAAA,aAAa,GAAGlB,SAAS,CAACmB,IAA1B;AACH;;AAED,SACI,oBAAC,OAAD;AACI,IAAA,GAAG,EAAEb,GADT;AAEI,IAAA,SAAS,EAAEc,UAAU,CAACb,SAAD,EAAYjB,SAAZ,CAFzB;AAGI,IAAA,GAAG,EAAEG,GAHT;AAII,IAAA,WAAW,EAAEG;AAJjB,KAKQkB,cALR,GAOI,oBAAC,OAAD,eAAaL,WAAb;AAA0B,IAAA,SAAS,EAAEW,UAAU,CAACX,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEF,SAAd,YAA4BjB,SAA5B;AAA/C,MACKkB,MADL,CAPJ,EAWKE,QAAQ,IACL,oBAAC,OAAD;AACI,IAAA,WAAW,EAAEb,WAAW,CAACC,QAD7B;AAEI,IAAA,SAAS,MAFb;AAGI,IAAA,MAAM,EAAEoB;AAHZ,KAIQL,YAJR;AAKI,IAAA,SAAS,EAAEO,UAAU,CAACP,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEN,SAAf,YAA6BjB,SAA7B;AALzB,MAOKoB,QAPL,CAZR,EAuBI,oBAAC,OAAD;AACI,IAAA,MAAM,EAAEK;AADZ,KAEQH,YAFR;AAGI,IAAA,SAAS,EAAEQ,UAAU,CAACR,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEL,SAAf,YAA6BjB,SAA7B;AAHzB,MAKKqB,OALL,CAvBJ,CADJ;AAiCH,CAxD8E;AAyD/ER,YAAY,CAACkB,WAAb,GAA2BhC,cAA3B;AACAc,YAAY,CAACI,SAAb,GAAyBjB,SAAzB;AACAa,YAAY,CAACmB,YAAb,GAA4B9B,aAA5B;;;;"}
+{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport noop from 'lodash/noop';\nimport { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n    /**\n     * Component to use as visual element.\n     */\n    figure?: ReactNode;\n    /**\n     * Actions to set after the main content.\n     */\n    actions?: ReactNode;\n    /**\n     * Main content to display or sections components\n     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n     */\n    children: ReactNode;\n    /**\n     * Orientation of the 3 sections\n     */\n    orientation?: FlexBoxProps['orientation'];\n    /**\n     * Horizontal alignment.\n     */\n    hAlign?: FlexBoxProps['hAlign'];\n    /**\n     * Vertical alignment.\n     */\n    vAlign?: FlexBoxProps['vAlign'];\n    /**\n     * The props to forward to the content.\n     * By default, the content will have the same alignment as wrapper.\n     */\n    contentProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the actions element.\n     */\n    actionsProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the figure element.\n     */\n    figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\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<GenericBlockProps> = {\n    gap: Size.big,\n    orientation: Orientation.horizontal,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlock extends BaseGenericBlock {\n    /**\n     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n     */\n    Figure: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n     */\n    Content: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n     */\n    Actions: Comp<FlexBoxProps>;\n}\n\nconst Figure = noop.bind({}) as Comp<FlexBoxProps>;\nconst isFigure = isComponentType(Figure);\n\nconst Content = noop.bind({}) as Comp<FlexBoxProps>;\nconst isContent = isComponentType(Content);\n\nconst Actions = noop.bind({}) as Comp<FlexBoxProps>;\nconst isActions = isComponentType(Actions);\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * - `Figure` => A visual element to display before the main content.\n * - `Content` => The main content displayed\n * - `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n    const {\n        className,\n        figure,\n        figureProps,\n        children,\n        actions,\n        actionsProps,\n        gap,\n        orientation,\n        contentProps,\n        ...forwardedProps\n    } = props;\n\n    const sections = React.useMemo(() => {\n        // Split children by section type\n        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n            Children.toArray(children),\n            [isFigure, isContent, isActions],\n        );\n        return {\n            figureChild,\n            figureChildProps: (figureChild as ReactElement)?.props,\n            contentChild,\n            contentChildProps: (contentChild as ReactElement)?.props,\n            actionsChild,\n            actionsChildProps: (actionsChild as ReactElement)?.props,\n            otherChildren: otherChildren.filter((child) => !isEmpty(child)),\n        };\n    }, [children]);\n\n    return (\n        <FlexBox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            gap={gap}\n            orientation={orientation}\n            {...forwardedProps}\n        >\n            {(figure || sections.figureChildProps?.children) && (\n                <FlexBox\n                    ref={(sections.figureChild as any)?.ref}\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...figureProps}\n                    {...sections.figureChildProps}\n                    className={classNames(\n                        figureProps?.className,\n                        sections.figureChildProps?.className,\n                        `${CLASSNAME}__figure`,\n                    )}\n                >\n                    {figure}\n                    {sections.figureChildProps?.children}\n                </FlexBox>\n            )}\n\n            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (\n                <FlexBox\n                    ref={(sections.contentChild as any)?.ref}\n                    orientation={Orientation.vertical}\n                    fillSpace\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...contentProps}\n                    {...sections.contentChildProps}\n                    className={classNames(\n                        contentProps?.className,\n                        sections.contentChildProps?.className,\n                        `${CLASSNAME}__content`,\n                    )}\n                >\n                    {sections.contentChildProps?.children}\n                    {sections.otherChildren}\n                </FlexBox>\n            )}\n\n            {(actions || sections.actionsChildProps?.children) && (\n                <FlexBox\n                    ref={(sections.actionsChild as any)?.ref}\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...actionsProps}\n                    {...sections.actionsChildProps}\n                    className={classNames(\n                        actionsProps?.className,\n                        sections.actionsChildProps?.className,\n                        `${CLASSNAME}__actions`,\n                    )}\n                >\n                    {actions}\n                    {sections.actionsChildProps?.children}\n                </FlexBox>\n            )}\n        </FlexBox>\n    );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","big","orientation","Orientation","horizontal","Figure","noop","bind","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","partitionMulti","Children","toArray","figureChild","contentChild","actionsChild","otherChildren","figureChildProps","contentChildProps","actionsChildProps","filter","child","isEmpty","classNames","vAlign","hAlign","length","vertical","displayName","defaultProps","GenericBlock","Object","assign"],"mappings":"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"}