@lumx/react 3.20.1-alpha.42 → 3.20.1-alpha.44

package/_internal/{Portal.js → useClassnames.js}

@@ -1,31 +1,8 @@
-import React__default, { useContext, useEffect, createContext, useMemo, useRef } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useEffect, useContext, createContext, useMemo, useRef } from 'react';
 import isEmpty from 'lodash/isEmpty';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-
-const DisabledStateContext = /*#__PURE__*/React__default.createContext({
-  state: null
-});
-/**
- * Disabled state provider.
- * All nested LumX Design System components inherit this disabled state.
- */
-function DisabledStateProvider({
-  children,
-  ...value
-}) {
-  return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-
-/**
- * Get DisabledState context value
- */
-function useDisabledStateContext() {
-  return useContext(DisabledStateContext);
-}
+import { cls } from '@lumx/core/js/utils';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(targets, refs) {
@@ -155,5 +132,73 @@ const Portal = ({
   return /*#__PURE__*/createPortal(children, context.container);
 };
 
-export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=Portal.js.map
+const DisabledStateContext = /*#__PURE__*/React__default.createContext({
+  state: null
+});
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+function DisabledStateProvider({
+  children,
+  ...value
+}) {
+  return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+/**
+ * Get DisabledState context value
+ */
+function useDisabledStateContext() {
+  return useContext(DisabledStateContext);
+}
+
+/**
+ * Hook that retrieves several utilities for the classnames feature.
+ * @param classname - base component class name
+ * @returns utility functions
+ */
+function useClassnames(classname) {
+  return useMemo(() => {
+    return {
+      /**
+       * Returns the BEM class for the given block (and modifier if it is defined)
+       *
+       * Executing `block()` returns`CLASSNAME`
+       *
+       * Executing `block('modifier')` returns  `CLASSNAME CLASSNAME--modifier`
+       *
+       * Executing `block({ modifier1: true, modifier2: false })` returns `CLASSNAME CLASSNAME--modifier1`
+       *
+       * Executing `block(['className'])` returns `CLASSNAME className`
+       *
+       * @param modifier - string or Record<string, boolean> or list of css classes
+       * @param additionalClasses - string | string[] - list of additional classes to be added
+       * @returns string
+       */
+      block: cls.bem.block(classname),
+      /**
+       * Returns the BEM class for the given element (and modifier if it is defined)
+       *
+       * Executing `element('element')` returns `CLASSNAME__element`
+       *
+       * Executing `element('element', 'modifier')` returns `CLASSNAME__element CLASSNAME__element--modifier`
+       *
+       * Executing `element('element', { modifier1: true, modifier2: false })` returns `CLASSNAME__element CLASSNAME__element--modifier1`
+       *
+       * Executing `element('element', ['classname'])` returns `CLASSNAME__element` class name
+       *
+       * @param modifier - string or Record<string, boolean> or list of css classes
+       * @param additionalClasses - string | string[] - list of additional classes to be added
+       * @returns string
+       */
+      element: cls.bem.element(classname)
+    };
+  }, [classname]);
+}
+
+export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useClassnames as b, useDisabledStateContext as u };
+//# sourceMappingURL=useClassnames.js.map

package/_internal/useClassnames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassnames.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../src/utils/disabled/DisabledStateContext.tsx","../../src/utils/className/useClassnames.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n","import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n    | {\n          state: 'disabled';\n      }\n    | { state: undefined | null };\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","import { cls } from '@lumx/core/js/utils';\nimport { useMemo } from 'react';\nimport type { KebabCase } from '@lumx/core/js/types';\n\n/**\n * Hook that retrieves several utilities for the classnames feature.\n * @param classname - base component class name\n * @returns utility functions\n */\nexport function useClassnames<C extends string>(classname: KebabCase<C>) {\n    return useMemo(() => {\n        return {\n            /**\n             * Returns the BEM class for the given block (and modifier if it is defined)\n             *\n             * Executing `block()` returns`CLASSNAME`\n             *\n             * Executing `block('modifier')` returns  `CLASSNAME CLASSNAME--modifier`\n             *\n             * Executing `block({ modifier1: true, modifier2: false })` returns `CLASSNAME CLASSNAME--modifier1`\n             *\n             * Executing `block(['className'])` returns `CLASSNAME className`\n             *\n             * @param modifier - string or Record<string, boolean> or list of css classes\n             * @param additionalClasses - string | string[] - list of additional classes to be added\n             * @returns string\n             */\n            block: cls.bem.block(classname),\n            /**\n             * Returns the BEM class for the given element (and modifier if it is defined)\n             *\n             * Executing `element('element')` returns `CLASSNAME__element`\n             *\n             * Executing `element('element', 'modifier')` returns `CLASSNAME__element CLASSNAME__element--modifier`\n             *\n             * Executing `element('element', { modifier1: true, modifier2: false })` returns `CLASSNAME__element CLASSNAME__element--modifier1`\n             *\n             * Executing `element('element', ['classname'])` returns `CLASSNAME__element` class name\n             *\n             * @param modifier - string or Record<string, boolean> or list of css classes\n             * @param additionalClasses - string | string[] - list of additional classes to be added\n             * @returns string\n             */\n            element: cls.bem.element(classname),\n        };\n    }, [classname]);\n}\n"],"names":["EVENT_TYPES","isClickAway","targets","refs","some","ref","target","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","composedPath","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","_jsx","Provider","value","displayName","PortalContext","React","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal","DisabledStateContext","state","DisabledStateProvider","useDisabledStateContext","useClassnames","classname","block","cls","bem","element"],"mappings":"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"}

package/index.d.ts

@@ -1,7 +1,7 @@
 import { Kind, HorizontalAlignment, Size, ColorPalette, Emphasis, Alignment, VerticalAlignment, Orientation, ColorWithVariants, ColorVariant, Typography, WhiteSpace, AspectRatio, GlobalSize, TypographyInterface, Theme } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps, HasTheme, ValueOf, HasCloseMode, TextElement, HeadingElement, Falsy, HasClassName, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
+import { GenericProps, HasTheme, ValueOf, HasCloseMode, TextElement, HeadingElement, Falsy, HasClassName, HasAriaLabelOrLabelledBy, LumxClassName } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType } from 'react';
@@ -1925,7 +1925,7 @@ declare const NavigationItem: (<E extends ElementType = "a">(props: React$1.Prop
     ref?: ComponentRef<E> | undefined;
 }) => React$1.JSX.Element) & {
     displayName: string;
-    className: string;
+    className: "lumx-navigation-item";
 };
 
 type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasTheme & {
@@ -2718,6 +2718,14 @@ interface TableProps extends GenericProps, HasTheme {
     /** Children */
     children?: React.ReactNode;
 }
+/**
+ * Component display name.
+ */
+declare const COMPONENT_NAME = "Table";
+/**
+ * Component default class name and class prefix.
+ */
+declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
 /**
  * Table component.
  *
@@ -3152,5 +3160,5 @@ declare const ThemeProvider: React__default.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };