@lumx/react 2.1.1 → 2.1.5

package/esm/_internal/UserBlock.js

@@ -1,8 +1,10 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
 import { Size, Orientation, Theme } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { A as Avatar } from './Avatar2.js';
+import { r as renderLink } from './renderLink.js';
+import { isEmpty } from 'lodash';
 
 /**
  * Component display name.
@@ -43,7 +45,9 @@ var UserBlock = forwardRef(function (props, ref) {
       simpleAction = props.simpleAction,
       size = props.size,
       theme = props.theme,
-      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
+      linkProps = props.linkProps,
+      linkAs = props.linkAs,
+      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme", "linkProps", "linkAs"]);
 
   var componentSize = size; // Special case - When using vertical orientation force the size to be Sizes.l.
 
@@ -52,12 +56,37 @@ var UserBlock = forwardRef(function (props, ref) {
   }
 
   var shouldDisplayActions = orientation === Orientation.vertical;
-  var nameBlock = name && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
-  React.createElement("span", {
-    className: "".concat(CLASSNAME, "__name"),
-    onClick: onClick,
-    tabIndex: onClick ? 0 : -1
-  }, name);
+  var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
+  var isClickable = !!onClick || isLink;
+  var nameBlock = React.useMemo(function () {
+    if (isEmpty(name)) {
+      return null;
+    }
+
+    var nameClassName = classnames(handleBasicClasses({
+      prefix: "".concat(CLASSNAME, "__name"),
+      isClickable: isClickable
+    }), isLink && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
+
+    if (isLink) {
+      return renderLink(_objectSpread2({}, linkProps, {
+        linkAs: linkAs,
+        className: nameClassName
+      }), name);
+    }
+
+    if (onClick) {
+      return React.createElement("button", {
+        onClick: onClick,
+        type: "button",
+        className: nameClassName
+      }, name);
+    }
+
+    return React.createElement("span", {
+      className: nameClassName
+    }, name);
+  }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
   }, fields.map(function (aField, idx) {
@@ -73,18 +102,19 @@ var UserBlock = forwardRef(function (props, ref) {
       prefix: CLASSNAME,
       orientation: orientation,
       size: componentSize,
-      theme: theme
+      theme: theme,
+      isClickable: isClickable
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter
-  }), avatarProps && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__avatar")
-  }, React.createElement(Avatar, _extends({}, avatarProps, {
+  }), avatarProps && React.createElement(Avatar, _extends({
+    linkProps: linkProps
+  }, avatarProps, {
+    className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
     size: componentSize,
     onClick: onClick,
-    tabIndex: onClick ? 0 : -1,
     theme: theme
-  }))), (fields || name) && React.createElement("div", {
+  })), (fields || name) && React.createElement("div", {
     className: "".concat(CLASSNAME, "__wrapper")
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && React.createElement("div", {
     className: "".concat(CLASSNAME, "__action")

package/esm/_internal/UserBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const nameBlock: ReactNode = name && (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions\n        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>\n            {name}\n        </span>\n    );\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <div className={`${CLASSNAME}__avatar`}>\n                    <Avatar\n                        {...avatarProps}\n                        size={componentSize}\n                        onClick={onClick}\n                        tabIndex={onClick ? 0 : -1}\n                        theme={theme}\n                    />\n                </div>\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","nameBlock","fieldsBlock","s","map","aField","idx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { isEmpty } from 'lodash';\nimport { renderLink } from '@lumx/react/utils/renderLink';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        const nameClassName = classNames(\n            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),\n            isLink && linkProps?.className,\n        );\n        if (isLink) {\n            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);\n        }\n        if (onClick) {\n            return (\n                <button onClick={onClick} type=\"button\" className={nameClassName}>\n                    {name}\n                </button>\n            );\n        }\n        return <span className={nameClassName}>{name}</span>;\n    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","linkProps","linkAs","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","nameClassName","classNames","handleBasicClasses","prefix","renderLink","fieldsBlock","s","map","aField","idx","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/getRootClassName.js

@@ -273,6 +273,22 @@ function onEscapePressed(handler) {
     handler(evt);
   };
 }
+/**
+ * Handle button key pressed (Enter + Space).
+ *
+ * @param  handler The handler to call.
+ * @return The decorated function.
+ */
+
+function onButtonPressed(handler) {
+  return function (evt) {
+    if (evt.key !== 'Enter' && evt.key !== ' ') {
+      return;
+    }
+
+    handler(evt);
+  };
+}
 
 /**
  * The prefix to use for the CSS classes.
@@ -308,5 +324,5 @@ function getRootClassName(componentName, subComponent) {
   return formattedClassName;
 }
 
-export { CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, NOTIFICATION_TRANSITION_DURATION as N, getBasicClass as a, createCommonjsModule as b, classnames as c, detectHorizontalSwipe as d, onEscapePressed as e, getRootClassName as g, handleBasicClasses as h, onEnterPressed as o };
+export { CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, NOTIFICATION_TRANSITION_DURATION as N, getBasicClass as a, onButtonPressed as b, classnames as c, createCommonjsModule as d, detectHorizontalSwipe as e, onEscapePressed as f, getRootClassName as g, handleBasicClasses as h, onEnterPressed as o };
 //# sourceMappingURL=getRootClassName.js.map

package/esm/_internal/getRootClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"getRootClassName.js","sources":["../../../../../node_modules/classnames/index.js","../../../../lumx-core/src/js/utils.ts","../../../../lumx-core/src/js/constants/index.ts","../../../src/utils/getRootClassName.ts"],"sourcesContent":["/*!\n  Copyright (c) 2017 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg) && arg.length) {\n\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\tif (inner) {\n\t\t\t\t\tclasses.push(inner);\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from 'classnames';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport React from 'react';\n\nimport isBoolean from 'lodash/isBoolean';\nimport isEmpty from 'lodash/isEmpty';\nimport kebabCase from 'lodash/kebabCase';\nimport noop from 'lodash/noop';\n\n/**\n * Enhance isEmpty method to also works with numbers.\n *\n * @param  value The value to check.\n * @return Whether the input value is empty or != 0.\n */\nconst _isEmpty = (value: any) => {\n    if (typeof value === 'number') {\n        return value === 0;\n    }\n\n    return isEmpty(value);\n};\n\n/**\n * Get the basic CSS class for the given type.\n *\n * @param  prefix The class name prefix for the generated CSS class.\n * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).\n * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).\n * @return The basic CSS class.\n */\nexport function getBasicClass({\n    prefix,\n    type,\n    value,\n}: {\n    prefix: string;\n    type: string;\n    value: string | number | boolean | undefined;\n}): string {\n    if (isBoolean(value)) {\n        if (!value) {\n            // False value should not return a class.\n            return '';\n        }\n        const booleanPrefixes = ['has', 'is'];\n\n        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {\n            return `${prefix}--${kebabCase(type)}`;\n        }\n\n        return `${prefix}--is-${kebabCase(type)}`;\n    }\n\n    return `${prefix}--${kebabCase(type)}-${value}`;\n}\n\n/**\n * Return all basic LumX CSS classes which are available for every components.\n *\n * @see {@link /src/components/index.d.ts} for the possible values of each parameter.\n *\n * @param  prefix The class name prefix for the generated CSS class.\n * @param  props  All the other props you want to generate a class.\n *                The rule of thumb: the key is the name of the prop in the class, the value a string that will\n *                be used in the classname to represent the value of the given prop.\n * @return All LumX basic CSS classes.\n */\nexport function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {\n    const otherClasses: any = {};\n    if (!isEmpty(props)) {\n        Object.keys(props).forEach((prop) => {\n            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])\n                ? props[prop]\n                : !_isEmpty(props[prop]);\n        });\n    }\n\n    return classNames(prefix, otherClasses);\n}\n\ndeclare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';\n\n/**\n * Detects swipe direction.\n * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.\n *\n * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)\n * @param  touchSurface          Element that will hold touch events.\n * @param  handleSwipe Callback function.\n * @return Function to remove listeners.\n */\nexport function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {\n    let distX: number;\n    let distY: number;\n    let startX: number;\n    let startY: number;\n    let direction: SwipeDirection;\n    // Required min distance traveled to be considered swipe.\n    const threshold = 150;\n    // Maximum distance allowed at the same time in perpendicular direction.\n    const restraint = 100;\n    // Maximum time allowed to travel that distance.\n    const allowedTime = 300;\n    let elapsedTime: number;\n    let startTime: number;\n\n    const onTouchStart = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        direction = 'none';\n        // Const dist = 0;\n        startX = touch.pageX;\n        startY = touch.pageY;\n        // Record time when finger first makes contact with surface.\n        startTime = new Date().getTime();\n        evt.preventDefault();\n    };\n\n    const onTouchMove = (evt: Event) => {\n        // Prevent scrolling when inside DIV.\n        evt.preventDefault();\n    };\n\n    const onTouchEnd = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        // Get horizontal dist traveled by finger while in contact with surface.\n        distX = touch.pageX - startX;\n        // Get vertical dist traveled by finger while in contact with surface.\n        distY = touch.pageY - startY;\n        // Get time elapsed.\n        elapsedTime = new Date().getTime() - startTime;\n        if (elapsedTime <= allowedTime) {\n            // First condition for awipe met.\n            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {\n                // 2nd condition for horizontal swipe met.\n                // If dist traveled is negative, it indicates left swipe.\n                direction = distX < 0 ? 'left' : 'right';\n            } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {\n                // 2nd condition for vertical swipe met.\n                // If dist traveled is negative, it indicates up swipe.\n                direction = distY < 0 ? 'up' : 'down';\n            }\n        }\n        handleSwipe(direction);\n        evt.preventDefault();\n    };\n\n    touchSurface.addEventListener('touchstart', onTouchStart, false);\n    touchSurface.addEventListener('touchmove', onTouchMove, false);\n    touchSurface.addEventListener('touchend', onTouchEnd, false);\n\n    return () => {\n        touchSurface.removeEventListener('touchstart', onTouchStart, false);\n        touchSurface.removeEventListener('touchmove', onTouchMove, false);\n        touchSurface.removeEventListener('touchend', onTouchEnd, false);\n    };\n}\n\n/**\n * Checks whether or not the browser support passive events.\n * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js\n */\nfunction isPassiveEventAvailable() {\n    let supportsPassiveOption = false;\n    try {\n        const opts = Object.defineProperty({}, 'passive', {\n            get() {\n                supportsPassiveOption = true;\n            },\n        });\n        window.addEventListener('testPassiveEventSupport', noop, opts);\n        window.removeEventListener('testPassiveEventSupport', noop, opts);\n    } catch (e) {\n        // ignored\n    }\n    return supportsPassiveOption;\n}\n\n/**\n * Detects horizontal swipe direction without blocking the browser scroll using passive event.\n * @see http://javascriptkit.com/javatutors/touchevents2.shtml\n * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n */\nexport function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void) {\n    let startX: number;\n    let startY: number;\n    // Required min distance traveled to be considered swipe.\n    const threshold = 150;\n    // Maximum distance allowed at the same time in perpendicular direction.\n    const restraint = 150;\n    // Maximum time allowed to travel that distance.\n    const allowedTime = 300;\n    let elapsedTime: number;\n    let startTime: number;\n    let finished: boolean;\n\n    const onTouchStart = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        startX = touch.pageX;\n        startY = touch.pageY;\n        // Record time when finger first makes contact with surface.\n        startTime = new Date().getTime();\n        finished = false;\n    };\n\n    const onTouchMove = (evt: Event) => {\n        if (finished) {\n            return;\n        }\n\n        elapsedTime = new Date().getTime() - startTime;\n        if (elapsedTime > allowedTime) {\n            // Touch swipe too long to be considered.\n            return;\n        }\n\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        // Get horizontal dist traveled by finger while in contact with surface.\n        const distX = touch.pageX - startX;\n        // Get vertical dist traveled by finger while in contact with surface.\n        const distY = touch.pageY - startY;\n\n        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {\n            // Swipe is not horizontal.\n            return;\n        }\n        // Swipe direction.\n        const direction = distX < 0 ? 'left' : 'right';\n\n        handleSwipe(direction);\n        finished = true;\n    };\n\n    // Activate passive event if possible for better scrolling performance.\n    const eventOptions: any = isPassiveEventAvailable() ? { passive: true } : false;\n    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);\n    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);\n\n    return () => {\n        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);\n        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);\n    };\n}\n\ntype KeyboardEventHandler<E extends KeyboardEvent | React.KeyboardEvent> = (event: E) => void;\n\n/**\n * Make sure the pressed key is the enter key before calling the callback.\n *\n * @param  handler The handler to call on enter/return press.\n * @return The decorated function.\n */\nexport function onEnterPressed<E extends KeyboardEvent | React.KeyboardEvent>(\n    handler: KeyboardEventHandler<E>,\n): KeyboardEventHandler<E> {\n    return (evt) => {\n        if (evt.key !== 'Enter') {\n            return;\n        }\n        handler(evt);\n    };\n}\n\n/**\n * Make sure the pressed key is the escape key before calling the callback.\n *\n * @param  handler The handler to call on enter/return press.\n * @return The decorated function.\n */\nexport function onEscapePressed<E extends KeyboardEvent | React.KeyboardEvent>(\n    handler: KeyboardEventHandler<E>,\n): KeyboardEventHandler<E> {\n    return (evt) => {\n        if (evt.key !== 'Escape') {\n            return;\n        }\n        handler(evt);\n    };\n}\n","/**\n * The prefix to use for the CSS classes.\n */\nexport const CSS_PREFIX = 'lumx';\n\n/**\n * Key codes.\n */\nexport * from './keycodes';\n\n/**\n * Animation duration constants. Take into consideration that if you change one of these variables,\n * you need to update their scss counterpart as well\n */\nexport const DIALOG_TRANSITION_DURATION = 400;\nexport const NOTIFICATION_TRANSITION_DURATION = 200;\n","import { CSS_PREFIX } from '@lumx/react/constants';\n\nimport kebabCase from 'lodash/kebabCase';\n\n// See https://regex101.com/r/YjS1uI/3\nconst LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;\n\n/**\n * Get the name of the root CSS class of a component based on its name.\n *\n * @param  componentName The name of the component. This name should contains the component prefix and be\n *                       written in PascalCase.\n * @param  subComponent Whether the current component is a sub component, if true, define the class according\n *                      to BEM standards.\n * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in\n *         lower-snake-case.\n */\nexport function getRootClassName(componentName: string, subComponent?: boolean): string {\n    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;\n\n    if (subComponent) {\n        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');\n    }\n    return formattedClassName;\n}\n"],"names":["_isEmpty","value","isEmpty","getBasicClass","prefix","type","isBoolean","booleanPrefixes","some","booleanPrefix","toString","startsWith","kebabCase","handleBasicClasses","props","otherClasses","Object","keys","forEach","prop","classNames","isPassiveEventAvailable","supportsPassiveOption","opts","defineProperty","get","window","addEventListener","noop","removeEventListener","e","detectHorizontalSwipe","touchSurface","handleSwipe","startX","startY","threshold","restraint","allowedTime","elapsedTime","startTime","finished","onTouchStart","evt","Array","from","changedTouches","touch","pageX","pageY","Date","getTime","onTouchMove","distX","distY","Math","abs","direction","eventOptions","passive","onEnterPressed","handler","key","onEscapePressed","CSS_PREFIX","DIALOG_TRANSITION_DURATION","NOTIFICATION_TRANSITION_DURATION","LAST_PART_CLASSNAME","getRootClassName","componentName","subComponent","formattedClassName","replace"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,YAAY;AAEb;AACA,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAChC;AACA,CAAC,SAAS,UAAU,IAAI;AACxB,EAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1B,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS;AACtB;AACA,GAAG,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;AAC5B;AACA,GAAG,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;AACrD,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtB,IAAI,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE;AAChD,IAAI,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAC5C,IAAI,IAAI,KAAK,EAAE;AACf,KAAK,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzB,KAAK;AACL,IAAI,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;AACpC,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACzB,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC5C,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxB,MAAM;AACN,KAAK;AACL,IAAI;AACJ,GAAG;AACH;AACA,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,EAAE;AACF;AACA,CAAC,KAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,EAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;AAClC,EAAE,cAAc,GAAG,UAAU,CAAC;AAC9B,EAAE,MAKM;AACR,EAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;AACjC,EAAE;AACF,CAAC,EAAE;;;AC1CH;;;;;;;AAMA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAgB;AAC7B,MAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC3B,WAAOA,KAAK,KAAK,CAAjB;AACH;;AAED,SAAOC,OAAO,CAACD,KAAD,CAAd;AACH,CAND;AAQA;;;;;;;;;;AAQO,SAASE,aAAT,OAQI;AAAA,MAPPC,MAOO,QAPPA,MAOO;AAAA,MANPC,IAMO,QANPA,IAMO;AAAA,MALPJ,KAKO,QALPA,KAKO;;AACP,MAAIK,SAAS,CAACL,KAAD,CAAb,EAAsB;AAClB,QAAI,CAACA,KAAL,EAAY;AACR;AACA,aAAO,EAAP;AACH;;AACD,QAAMM,eAAe,GAAG,CAAC,KAAD,EAAQ,IAAR,CAAxB;;AAEA,QAAIA,eAAe,CAACC,IAAhB,CAAqB,UAACC,aAAD;AAAA,aAAmBJ,IAAI,CAACK,QAAL,GAAgBC,UAAhB,CAA2BF,aAA3B,CAAnB;AAAA,KAArB,CAAJ,EAAwF;AACpF,uBAAUL,MAAV,eAAqBQ,SAAS,CAACP,IAAD,CAA9B;AACH;;AAED,qBAAUD,MAAV,kBAAwBQ,SAAS,CAACP,IAAD,CAAjC;AACH;;AAED,mBAAUD,MAAV,eAAqBQ,SAAS,CAACP,IAAD,CAA9B,cAAwCJ,KAAxC;AACH;AAED;;;;;;;;;;;;AAWO,SAASY,kBAAT,QAAmG;AAAA,MAArET,MAAqE,SAArEA,MAAqE;AAAA,MAA1DU,KAA0D;;AACtG,MAAMC,YAAiB,GAAG,EAA1B;;AACA,MAAI,CAACb,OAAO,CAACY,KAAD,CAAZ,EAAqB;AACjBE,IAAAA,MAAM,CAACC,IAAP,CAAYH,KAAZ,EAAmBI,OAAnB,CAA2B,UAACC,IAAD,EAAU;AACjCJ,MAAAA,YAAY,CAACZ,aAAa,CAAC;AAAEC,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAEc,IAAhB;AAAsBlB,QAAAA,KAAK,EAAEa,KAAK,CAACK,IAAD;AAAlC,OAAD,CAAd,CAAZ,GAA0Eb,SAAS,CAACQ,KAAK,CAACK,IAAD,CAAN,CAAT,GACpEL,KAAK,CAACK,IAAD,CAD+D,GAEpE,CAACnB,QAAQ,CAACc,KAAK,CAACK,IAAD,CAAN,CAFf;AAGH,KAJD;AAKH;;AAED,SAAOC,UAAU,CAAChB,MAAD,EAASW,YAAT,CAAjB;AACH;AA+ED;;;;;AAIA,SAASM,uBAAT,GAAmC;AAC/B,MAAIC,qBAAqB,GAAG,KAA5B;;AACA,MAAI;AACA,QAAMC,IAAI,GAAGP,MAAM,CAACQ,cAAP,CAAsB,EAAtB,EAA0B,SAA1B,EAAqC;AAC9CC,MAAAA,GAD8C,iBACxC;AACFH,QAAAA,qBAAqB,GAAG,IAAxB;AACH;AAH6C,KAArC,CAAb;AAKAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,yBAAxB,EAAmDC,IAAnD,EAAyDL,IAAzD;AACAG,IAAAA,MAAM,CAACG,mBAAP,CAA2B,yBAA3B,EAAsDD,IAAtD,EAA4DL,IAA5D;AACH,GARD,CAQE,OAAOO,CAAP,EAAU;AAEX;;AACD,SAAOR,qBAAP;AACH;AAED;;;;;;;AAKO,SAASS,qBAAT,CAA+BC,YAA/B,EAAsDC,WAAtD,EAA0G;AAC7G,MAAIC,MAAJ;AACA,MAAIC,MAAJ,CAF6G;;AAI7G,MAAMC,SAAS,GAAG,GAAlB,CAJ6G;;AAM7G,MAAMC,SAAS,GAAG,GAAlB,CAN6G;;AAQ7G,MAAMC,WAAW,GAAG,GAApB;AACA,MAAIC,WAAJ;AACA,MAAIC,SAAJ;AACA,MAAIC,QAAJ;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAgB;AAAA,uBACjBC,KAAK,CAACC,IAAN,CAAYF,GAAD,CAAoBG,cAA/B,CADiB;AAAA;AAAA,QAC1BC,KAD0B;;AAEjCb,IAAAA,MAAM,GAAGa,KAAK,CAACC,KAAf;AACAb,IAAAA,MAAM,GAAGY,KAAK,CAACE,KAAf,CAHiC;;AAKjCT,IAAAA,SAAS,GAAG,IAAIU,IAAJ,GAAWC,OAAX,EAAZ;AACAV,IAAAA,QAAQ,GAAG,KAAX;AACH,GAPD;;AASA,MAAMW,WAAW,GAAG,SAAdA,WAAc,CAACT,GAAD,EAAgB;AAChC,QAAIF,QAAJ,EAAc;AACV;AACH;;AAEDF,IAAAA,WAAW,GAAG,IAAIW,IAAJ,GAAWC,OAAX,KAAuBX,SAArC;;AACA,QAAID,WAAW,GAAGD,WAAlB,EAA+B;AAC3B;AACA;AACH;;AAT+B,uBAWhBM,KAAK,CAACC,IAAN,CAAYF,GAAD,CAAoBG,cAA/B,CAXgB;AAAA;AAAA,QAWzBC,KAXyB;;;AAahC,QAAMM,KAAK,GAAGN,KAAK,CAACC,KAAN,GAAcd,MAA5B,CAbgC;;AAehC,QAAMoB,KAAK,GAAGP,KAAK,CAACE,KAAN,GAAcd,MAA5B;;AAEA,QAAI,EAAEoB,IAAI,CAACC,GAAL,CAASH,KAAT,KAAmBjB,SAAnB,IAAgCmB,IAAI,CAACC,GAAL,CAASF,KAAT,KAAmBjB,SAArD,CAAJ,EAAqE;AACjE;AACA;AACH,KApB+B;;;AAsBhC,QAAMoB,SAAS,GAAGJ,KAAK,GAAG,CAAR,GAAY,MAAZ,GAAqB,OAAvC;AAEApB,IAAAA,WAAW,CAACwB,SAAD,CAAX;AACAhB,IAAAA,QAAQ,GAAG,IAAX;AACH,GA1BD,CAtB6G;;;AAmD7G,MAAMiB,YAAiB,GAAGrC,uBAAuB,KAAK;AAAEsC,IAAAA,OAAO,EAAE;AAAX,GAAL,GAAyB,KAA1E;AACA3B,EAAAA,YAAY,CAACL,gBAAb,CAA8B,YAA9B,EAA4Ce,YAA5C,EAA0DgB,YAA1D;AACA1B,EAAAA,YAAY,CAACL,gBAAb,CAA8B,WAA9B,EAA2CyB,WAA3C,EAAwDM,YAAxD;AAEA,SAAO,YAAM;AACT1B,IAAAA,YAAY,CAACH,mBAAb,CAAiC,YAAjC,EAA+Ca,YAA/C,EAA6DgB,YAA7D;AACA1B,IAAAA,YAAY,CAACH,mBAAb,CAAiC,WAAjC,EAA8CuB,WAA9C,EAA2DM,YAA3D;AACH,GAHD;AAIH;;AAID;;;;;;AAMO,SAASE,cAAT,CACHC,OADG,EAEoB;AACvB,SAAO,UAAClB,GAAD,EAAS;AACZ,QAAIA,GAAG,CAACmB,GAAJ,KAAY,OAAhB,EAAyB;AACrB;AACH;;AACDD,IAAAA,OAAO,CAAClB,GAAD,CAAP;AACH,GALD;AAMH;AAED;;;;;;;AAMO,SAASoB,eAAT,CACHF,OADG,EAEoB;AACvB,SAAO,UAAClB,GAAD,EAAS;AACZ,QAAIA,GAAG,CAACmB,GAAJ,KAAY,QAAhB,EAA0B;AACtB;AACH;;AACDD,IAAAA,OAAO,CAAClB,GAAD,CAAP;AACH,GALD;AAMH;;ACtRD;;;IAGaqB,UAAU,GAAG;AAO1B;;;;;IAIaC,0BAA0B,GAAG;IAC7BC,gCAAgC,GAAG;;ACVhD,IAAMC,mBAAmB,GAAG,eAA5B;AAEA;;;;;;;;;;;AAUO,SAASC,gBAAT,CAA0BC,aAA1B,EAAiDC,YAAjD,EAAiF;AACpF,MAAMC,kBAAkB,aAAMP,UAAN,cAAoBpD,SAAS,CAACyD,aAAD,CAA7B,CAAxB;;AAEA,MAAIC,YAAJ,EAAkB;AACd,WAAOC,kBAAkB,CAACC,OAAnB,CAA2BL,mBAA3B,EAAgD,QAAhD,CAAP;AACH;;AACD,SAAOI,kBAAP;AACH;;;;"}
+{"version":3,"file":"getRootClassName.js","sources":["../../../../../node_modules/classnames/index.js","../../../../lumx-core/src/js/utils.ts","../../../../lumx-core/src/js/constants/index.ts","../../../src/utils/getRootClassName.ts"],"sourcesContent":["/*!\n  Copyright (c) 2017 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg) && arg.length) {\n\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\tif (inner) {\n\t\t\t\t\tclasses.push(inner);\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from 'classnames';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport React from 'react';\n\nimport isBoolean from 'lodash/isBoolean';\nimport isEmpty from 'lodash/isEmpty';\nimport kebabCase from 'lodash/kebabCase';\nimport noop from 'lodash/noop';\n\n/**\n * Enhance isEmpty method to also works with numbers.\n *\n * @param  value The value to check.\n * @return Whether the input value is empty or != 0.\n */\nconst _isEmpty = (value: any) => {\n    if (typeof value === 'number') {\n        return value === 0;\n    }\n\n    return isEmpty(value);\n};\n\n/**\n * Get the basic CSS class for the given type.\n *\n * @param  prefix The class name prefix for the generated CSS class.\n * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).\n * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).\n * @return The basic CSS class.\n */\nexport function getBasicClass({\n    prefix,\n    type,\n    value,\n}: {\n    prefix: string;\n    type: string;\n    value: string | number | boolean | undefined;\n}): string {\n    if (isBoolean(value)) {\n        if (!value) {\n            // False value should not return a class.\n            return '';\n        }\n        const booleanPrefixes = ['has', 'is'];\n\n        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {\n            return `${prefix}--${kebabCase(type)}`;\n        }\n\n        return `${prefix}--is-${kebabCase(type)}`;\n    }\n\n    return `${prefix}--${kebabCase(type)}-${value}`;\n}\n\n/**\n * Return all basic LumX CSS classes which are available for every components.\n *\n * @see {@link /src/components/index.d.ts} for the possible values of each parameter.\n *\n * @param  prefix The class name prefix for the generated CSS class.\n * @param  props  All the other props you want to generate a class.\n *                The rule of thumb: the key is the name of the prop in the class, the value a string that will\n *                be used in the classname to represent the value of the given prop.\n * @return All LumX basic CSS classes.\n */\nexport function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {\n    const otherClasses: any = {};\n    if (!isEmpty(props)) {\n        Object.keys(props).forEach((prop) => {\n            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])\n                ? props[prop]\n                : !_isEmpty(props[prop]);\n        });\n    }\n\n    return classNames(prefix, otherClasses);\n}\n\ndeclare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';\n\n/**\n * Detects swipe direction.\n * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.\n *\n * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)\n * @param  touchSurface          Element that will hold touch events.\n * @param  handleSwipe Callback function.\n * @return Function to remove listeners.\n */\nexport function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {\n    let distX: number;\n    let distY: number;\n    let startX: number;\n    let startY: number;\n    let direction: SwipeDirection;\n    // Required min distance traveled to be considered swipe.\n    const threshold = 150;\n    // Maximum distance allowed at the same time in perpendicular direction.\n    const restraint = 100;\n    // Maximum time allowed to travel that distance.\n    const allowedTime = 300;\n    let elapsedTime: number;\n    let startTime: number;\n\n    const onTouchStart = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        direction = 'none';\n        // Const dist = 0;\n        startX = touch.pageX;\n        startY = touch.pageY;\n        // Record time when finger first makes contact with surface.\n        startTime = new Date().getTime();\n        evt.preventDefault();\n    };\n\n    const onTouchMove = (evt: Event) => {\n        // Prevent scrolling when inside DIV.\n        evt.preventDefault();\n    };\n\n    const onTouchEnd = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        // Get horizontal dist traveled by finger while in contact with surface.\n        distX = touch.pageX - startX;\n        // Get vertical dist traveled by finger while in contact with surface.\n        distY = touch.pageY - startY;\n        // Get time elapsed.\n        elapsedTime = new Date().getTime() - startTime;\n        if (elapsedTime <= allowedTime) {\n            // First condition for awipe met.\n            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {\n                // 2nd condition for horizontal swipe met.\n                // If dist traveled is negative, it indicates left swipe.\n                direction = distX < 0 ? 'left' : 'right';\n            } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {\n                // 2nd condition for vertical swipe met.\n                // If dist traveled is negative, it indicates up swipe.\n                direction = distY < 0 ? 'up' : 'down';\n            }\n        }\n        handleSwipe(direction);\n        evt.preventDefault();\n    };\n\n    touchSurface.addEventListener('touchstart', onTouchStart, false);\n    touchSurface.addEventListener('touchmove', onTouchMove, false);\n    touchSurface.addEventListener('touchend', onTouchEnd, false);\n\n    return () => {\n        touchSurface.removeEventListener('touchstart', onTouchStart, false);\n        touchSurface.removeEventListener('touchmove', onTouchMove, false);\n        touchSurface.removeEventListener('touchend', onTouchEnd, false);\n    };\n}\n\n/**\n * Checks whether or not the browser support passive events.\n * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js\n */\nfunction isPassiveEventAvailable() {\n    let supportsPassiveOption = false;\n    try {\n        const opts = Object.defineProperty({}, 'passive', {\n            get() {\n                supportsPassiveOption = true;\n            },\n        });\n        window.addEventListener('testPassiveEventSupport', noop, opts);\n        window.removeEventListener('testPassiveEventSupport', noop, opts);\n    } catch (e) {\n        // ignored\n    }\n    return supportsPassiveOption;\n}\n\n/**\n * Detects horizontal swipe direction without blocking the browser scroll using passive event.\n * @see http://javascriptkit.com/javatutors/touchevents2.shtml\n * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n */\nexport function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void) {\n    let startX: number;\n    let startY: number;\n    // Required min distance traveled to be considered swipe.\n    const threshold = 150;\n    // Maximum distance allowed at the same time in perpendicular direction.\n    const restraint = 150;\n    // Maximum time allowed to travel that distance.\n    const allowedTime = 300;\n    let elapsedTime: number;\n    let startTime: number;\n    let finished: boolean;\n\n    const onTouchStart = (evt: Event) => {\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        startX = touch.pageX;\n        startY = touch.pageY;\n        // Record time when finger first makes contact with surface.\n        startTime = new Date().getTime();\n        finished = false;\n    };\n\n    const onTouchMove = (evt: Event) => {\n        if (finished) {\n            return;\n        }\n\n        elapsedTime = new Date().getTime() - startTime;\n        if (elapsedTime > allowedTime) {\n            // Touch swipe too long to be considered.\n            return;\n        }\n\n        const [touch] = Array.from((evt as TouchEvent).changedTouches);\n        // Get horizontal dist traveled by finger while in contact with surface.\n        const distX = touch.pageX - startX;\n        // Get vertical dist traveled by finger while in contact with surface.\n        const distY = touch.pageY - startY;\n\n        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {\n            // Swipe is not horizontal.\n            return;\n        }\n        // Swipe direction.\n        const direction = distX < 0 ? 'left' : 'right';\n\n        handleSwipe(direction);\n        finished = true;\n    };\n\n    // Activate passive event if possible for better scrolling performance.\n    const eventOptions: any = isPassiveEventAvailable() ? { passive: true } : false;\n    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);\n    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);\n\n    return () => {\n        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);\n        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);\n    };\n}\n\ntype KeyboardEventHandler<E extends KeyboardEvent | React.KeyboardEvent> = (event: E) => void;\n\n/**\n * Make sure the pressed key is the enter key before calling the callback.\n *\n * @param  handler The handler to call on enter/return press.\n * @return The decorated function.\n */\nexport function onEnterPressed<E extends KeyboardEvent | React.KeyboardEvent>(\n    handler: KeyboardEventHandler<E>,\n): KeyboardEventHandler<E> {\n    return (evt) => {\n        if (evt.key !== 'Enter') {\n            return;\n        }\n        handler(evt);\n    };\n}\n\n/**\n * Make sure the pressed key is the escape key before calling the callback.\n *\n * @param  handler The handler to call on enter/return press.\n * @return The decorated function.\n */\nexport function onEscapePressed<E extends KeyboardEvent | React.KeyboardEvent>(\n    handler: KeyboardEventHandler<E>,\n): KeyboardEventHandler<E> {\n    return (evt) => {\n        if (evt.key !== 'Escape') {\n            return;\n        }\n        handler(evt);\n    };\n}\n\n/**\n * Handle button key pressed (Enter + Space).\n *\n * @param  handler The handler to call.\n * @return The decorated function.\n */\nexport function onButtonPressed<E extends KeyboardEvent | React.KeyboardEvent>(\n    handler: KeyboardEventHandler<E>,\n): KeyboardEventHandler<E> {\n    return (evt) => {\n        if (evt.key !== 'Enter' && evt.key !== ' ') {\n            return;\n        }\n        handler(evt);\n    };\n}\n","/**\n * The prefix to use for the CSS classes.\n */\nexport const CSS_PREFIX = 'lumx';\n\n/**\n * Key codes.\n */\nexport * from './keycodes';\n\n/**\n * Animation duration constants. Take into consideration that if you change one of these variables,\n * you need to update their scss counterpart as well\n */\nexport const DIALOG_TRANSITION_DURATION = 400;\nexport const NOTIFICATION_TRANSITION_DURATION = 200;\n","import { CSS_PREFIX } from '@lumx/react/constants';\n\nimport kebabCase from 'lodash/kebabCase';\n\n// See https://regex101.com/r/YjS1uI/3\nconst LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;\n\n/**\n * Get the name of the root CSS class of a component based on its name.\n *\n * @param  componentName The name of the component. This name should contains the component prefix and be\n *                       written in PascalCase.\n * @param  subComponent Whether the current component is a sub component, if true, define the class according\n *                      to BEM standards.\n * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in\n *         lower-snake-case.\n */\nexport function getRootClassName(componentName: string, subComponent?: boolean): string {\n    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;\n\n    if (subComponent) {\n        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');\n    }\n    return formattedClassName;\n}\n"],"names":["_isEmpty","value","isEmpty","getBasicClass","prefix","type","isBoolean","booleanPrefixes","some","booleanPrefix","toString","startsWith","kebabCase","handleBasicClasses","props","otherClasses","Object","keys","forEach","prop","classNames","isPassiveEventAvailable","supportsPassiveOption","opts","defineProperty","get","window","addEventListener","noop","removeEventListener","e","detectHorizontalSwipe","touchSurface","handleSwipe","startX","startY","threshold","restraint","allowedTime","elapsedTime","startTime","finished","onTouchStart","evt","Array","from","changedTouches","touch","pageX","pageY","Date","getTime","onTouchMove","distX","distY","Math","abs","direction","eventOptions","passive","onEnterPressed","handler","key","onEscapePressed","onButtonPressed","CSS_PREFIX","DIALOG_TRANSITION_DURATION","NOTIFICATION_TRANSITION_DURATION","LAST_PART_CLASSNAME","getRootClassName","componentName","subComponent","formattedClassName","replace"],"mappings":"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"}

package/esm/_internal/user-block.js

@@ -10,6 +10,7 @@ import 'lodash/noop';
 import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
+import './renderLink.js';
 import './Icon2.js';
 import './clamp.js';
 import './Thumbnail2.js';

package/esm/_internal/user-block.js.map

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

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.1",
-        "@lumx/icons": "^2.1.1",
+        "@lumx/core": "^2.1.5",
+        "@lumx/icons": "^2.1.5",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -78,7 +78,6 @@
         "ts-jest": "^26.2.0",
         "tsconfig-paths-webpack-plugin": "^3.2.0",
         "typescript": "^4.1.2",
-        "version-changelog": "^3.1.1",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
     },
@@ -123,9 +122,6 @@
         "storybook": "start-storybook -s ../site-demo/static/ -p 9000"
     },
     "sideEffects": false,
-    "version": "2.1.1",
-    "resolutions": {
-        "**/style-loader": "^1.0.0"
-    },
-    "gitHead": "91509a1f3e6af7c879c500ecea9518e2f4c7b945"
+    "version": "2.1.5",
+    "gitHead": "ad5125402db165c2a7d37fb72327153b80193759"
 }

package/src/components/avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
 import { AvatarSize, Badge, ColorPalette, Emphasis, Icon, IconButton, Size } from '@lumx/react';
-import { AVATAR_IMAGES, avatarImageKnob, PORTRAIT_IMAGES } from '@lumx/react/stories/knobs';
+import { AVATAR_IMAGES, avatarImageKnob, PORTRAIT_IMAGES } from '@lumx/react/stories/knobs/image';
 import { select } from '@storybook/addon-knobs';
 import React from 'react';
 

package/src/components/avatar/Avatar.tsx

@@ -36,6 +36,10 @@ export interface AvatarProps extends GenericProps {
         ThumbnailProps,
         'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
     >;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
 }
 
 /**
@@ -75,6 +79,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         theme,
         thumbnailProps,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
 
@@ -85,6 +91,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
+                linkProps={linkProps}
+                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}

package/src/components/button/Button.stories.tsx

@@ -1,9 +1,10 @@
-import { mdiSend, mdiClose } from '@lumx/icons';
-
-import { Button, ColorPalette, Emphasis, IconButton, Size } from '@lumx/react';
-import { squareImageKnob } from '@lumx/react/stories/knobs';
+import React, { Fragment } from 'react';
+import { mdiSend } from '@lumx/icons';
+import { Button, ColorPalette, IconButton } from '@lumx/react';
+import { squareImageKnob } from '@lumx/react/stories/knobs/image';
+import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
+import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
 import { boolean, select, text } from '@storybook/addon-knobs';
-import React from 'react';
 
 export default { title: 'LumX components/button/Button' };
 
@@ -12,11 +13,11 @@ const DEFAULT_PROPS = Button.defaultProps as any;
 export const SimpleButton = ({ theme }: any) => {
     return (
         <Button
-            emphasis={select('Emphasis', Emphasis, DEFAULT_PROPS.emphasis)}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
             theme={theme}
             rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
             leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
-            size={select('Size', [Size.m, Size.s], DEFAULT_PROPS.size)}
+            size={buttonSize()}
             isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
             isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
             color={select('color', ColorPalette, DEFAULT_PROPS.color)}
@@ -38,22 +39,91 @@ export const DisabledWithHref = () => (
     </Button>
 );
 
-export const IconButtonLowEmphasis = () => <IconButton emphasis={Emphasis.low} icon={mdiClose} label="Close" />;
-
-export const IconButtonLowEmphasisHasBackground = () => (
-    <IconButton emphasis={Emphasis.low} hasBackground icon={mdiClose} label="Close" />
-);
-
 export const IconButtonWithImage = ({ theme }: any) => (
     <div>
         <IconButton
             theme={theme}
             label="Image label"
             image={squareImageKnob()}
-            size={select('Size', [Size.m, Size.s], DEFAULT_PROPS.size)}
+            size={buttonSize()}
             hasBackground={boolean('Has background', false)}
-            emphasis={select('Emphasis', Emphasis, DEFAULT_PROPS.emphasis)}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
             color={select('color', ColorPalette, DEFAULT_PROPS.color)}
         />
     </div>
 );
+
+export const FullWidthButton = () => <Button fullWidth>Full width button</Button>;
+
+/**
+ * Template story to generate all variants for button and icon button.
+ */
+const AllVariantTemplate = (Component: any, props: any) => () => {
+    // Major variants.
+    const variants = {
+        'Default (emphasis high)': {},
+        'Full width': { fullWidth: true },
+        'Emphasis medium': { emphasis: 'medium' },
+        'Emphasis low': { emphasis: 'low' },
+        'Has background (emphasis low)': { emphasis: 'low', hasBackground: true },
+        'Has background + Full width': { emphasis: 'low', hasBackground: true, fullWidth: true },
+    } as const;
+
+    // Color modifiers.
+    const colorModifiers = {
+        Default: {},
+        'Color: light': { color: 'light' },
+        'Color: dark': { color: 'dark' },
+        'Color: red': { color: 'red' },
+        'Theme: dark': { theme: 'dark' },
+    } as const;
+
+    // State modifiers.
+    const stateModifiers = {
+        'Default state': {},
+        Selected: { isSelected: true },
+        Hovered: { isHovered: true },
+        Focused: { isFocused: true },
+        Active: { isActive: true },
+        Disabled: { isDisabled: true },
+    };
+
+    return (
+        <div style={{ background: 'lightgray' }}>
+            {Object.entries(stateModifiers).map(([stateKey, state]) => (
+                <Fragment key={stateKey}>
+                    <h2>{stateKey}</h2>
+                    <table style={{ width: '100%' }}>
+                        <tr>
+                            <td style={{ whiteSpace: 'nowrap', width: 200 }} />
+                            {Object.keys(colorModifiers).map((colorKey) => (
+                                <td key={colorKey}>{colorKey}</td>
+                            ))}
+                        </tr>
+
+                        {Object.entries(variants).map(([variantKey, variant]: any) => (
+                            <tr key={variantKey}>
+                                <td>{variantKey}</td>
+                                {Object.entries(colorModifiers).map(([colorKey, color]) => (
+                                    <td key={colorKey}>
+                                        <Component {...props} {...variant} {...color} {...state} />
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </table>
+                </Fragment>
+            ))}
+        </div>
+    );
+};
+
+/**
+ * Check button style variations (color, states, emphasis, etc.)
+ */
+export const ButtonVariations = AllVariantTemplate(Button, { children: 'Button' });
+
+/**
+ * Check icon button style variations (color, states, emphasis, etc.)
+ */
+export const IconButtonVariations = AllVariantTemplate(IconButton, { label: 'Send', icon: mdiSend });

package/src/components/button/Button.tsx

@@ -23,6 +23,8 @@ export interface ButtonProps extends BaseButtonProps {
     leftIcon?: string;
     /** Right icon (SVG path). */
     rightIcon?: string;
+    /** When `true`, the button gets as large as possible. */
+    fullWidth?: boolean;
 }
 
 /**

package/src/components/button/ButtonRoot.test.tsx

@@ -168,6 +168,19 @@ describe(`<${ButtonRoot.displayName}>`, () => {
                 expect(buttonWrapper).toHaveClassName(getBasicClass({ prefix: BUTTON_WRAPPER_CLASSNAME, type, value }));
             }
         });
+
+        it('should be full width', () => {
+            const buttonProps: Partial<ButtonRootProps> = {
+                fullWidth: true,
+                emphasis: Emphasis.high,
+                theme: Theme.light,
+            };
+
+            const { wrapper, button } = setup(buttonProps);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(button).toHaveClassName(getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'fullWidth', value: true }));
+        });
     });
 
     // 3. Test events.

package/src/components/button/ButtonRoot.tsx

@@ -64,7 +64,7 @@ export const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;
  * @return React element.
  */
 const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
-    const { color, emphasis, variant } = props;
+    const { color, emphasis, variant, fullWidth } = props;
 
     const adaptedColor =
         emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
@@ -74,6 +74,7 @@ const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
             color: adaptedColor,
             prefix: BUTTON_WRAPPER_CLASSNAME,
             variant,
+            fullWidth,
         }),
     );
     const buttonProps = { ...props, hasBackground: false };
@@ -105,6 +106,9 @@ export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorEle
         href,
         isDisabled = disabled,
         isSelected,
+        isActive,
+        isFocused,
+        isHovered,
         linkAs,
         name,
         size,
@@ -112,6 +116,7 @@ export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorEle
         theme,
         variant,
         type = 'button',
+        fullWidth,
         ...forwardedProps
     } = props;
 
@@ -132,10 +137,14 @@ export const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorEle
             emphasis,
             isSelected,
             isDisabled,
+            isActive,
+            isFocused,
+            isHovered,
             prefix: BUTTON_CLASSNAME,
             size,
             theme: emphasis === Emphasis.high && theme,
             variant,
+            fullWidth,
         }),
     );
 

package/src/components/button/IconButton.test.tsx

@@ -4,6 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { mdiClose } from '@lumx/icons';
 
 import { IconButton, IconButtonProps } from './IconButton';
 
@@ -48,6 +49,14 @@ describe(`<${IconButton.displayName}>`, () => {
             expect(icon).not.toExist();
             expect(img).toExist();
         });
+
+        it('should render icon button with an image if both props are set', () => {
+            const { buttonRoot, icon, img, wrapper } = setup({ image: 'http://foo.com', icon: mdiClose });
+            expect(wrapper).toMatchSnapshot();
+            expect(buttonRoot).toExist();
+            expect(icon).not.toExist();
+            expect(img).toExist();
+        });
     });
 
     // 2. Test defaultProps value and important props custom values.