@lumx/react 3.10.1-alpha.0 → 3.10.1-alpha.2

package/_internal/23bdba2d.js

@@ -0,0 +1,71 @@
+import { h as getRootClassName, E as Emphasis, S as Size, i as forwardRef, T as Theme, j as _objectWithoutProperties, _ as _extends, k as _objectSpread2 } from './1da25128.js';
+import React__default from 'react';
+import { B as ButtonRoot } from './17c3ea1d.js';
+import { u as useTheme } from './3181f000.js';
+import { Tooltip } from './components/tooltip/index.ts-905c847c.js';
+import { I as Icon } from './c6c99f76.js';
+
+const _excluded = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'IconButton';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  emphasis: Emphasis.high,
+  size: Size.m
+};
+
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const IconButton = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+      emphasis,
+      image,
+      icon,
+      label,
+      size,
+      theme = defaultTheme,
+      tooltipProps,
+      hideTooltip
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
+    label: hideTooltip ? '' : label
+  }, tooltipProps), /*#__PURE__*/React__default.createElement(ButtonRoot, _extends({
+    ref: ref
+  }, _objectSpread2({
+    emphasis,
+    size,
+    theme
+  }, forwardedProps), {
+    "aria-label": label,
+    variant: "icon"
+  }), image ? /*#__PURE__*/React__default.createElement("img", {
+    // no need to set alt as an aria-label is already set on the button
+    alt: "",
+    src: image
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: icon
+  })));
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+
+export { IconButton as I };
+//# sourceMappingURL=23bdba2d.js.map

package/_internal/23bdba2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"23bdba2d.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/react/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n    /**\n     * Icon (SVG path).\n     * If `image` is also set, `image` will be used instead.\n     */\n    icon?: string;\n    /**\n     * Image (image url).\n     * Has priority over `icon`.\n     */\n    image?: string;\n    /**\n     * Label text (required for a11y purpose).\n     * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n     */\n    label: string;\n    /**\n     * Props to pass to the tooltip.\n     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n     * */\n    tooltipProps?: Partial<TooltipProps>;\n    /** Whether the tooltip should be hidden or not. */\n    hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\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<IconButtonProps> = {\n    emphasis: Emphasis.high,\n    size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        emphasis,\n        image,\n        icon,\n        label,\n        size,\n        theme = defaultTheme,\n        tooltipProps,\n        hideTooltip,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n                {image ? (\n                    <img\n                        // no need to set alt as an aria-label is already set on the button\n                        alt=\"\"\n                        src={image}\n                    />\n                ) : (\n                    <Icon icon={icon as string} />\n                )}\n            </ButtonRoot>\n        </Tooltip>\n    );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","Tooltip","_extends","ButtonRoot","_objectSpread","variant","alt","src","Icon","displayName","className","defaultProps"],"mappings":";;;;;;;;AAiCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;MACFb,QAAQ;MACRc,KAAK;MACLC,IAAI;MACJC,KAAK;MACLb,IAAI;AACJc,MAAAA,KAAK,GAAGP,YAAY;MACpBQ,YAAY;AACZC,MAAAA,WAAAA;AAEJ,KAAC,GAAGX,KAAK;AADFY,IAAAA,cAAc,GAAAC,wBAAA,CACjBb,KAAK,EAAAc,SAAA,CAAA,CAAA;AAET,EAAA,oBACIC,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AAACV,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAAA;GAAWE,EAAAA,YAAY,gBACtDK,cAAA,CAAAC,aAAA,CAACG,UAAU,EAAAD,QAAA,CAAA;AAACjB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EAAAmB,cAAA,CAAA;IAAO5B,QAAQ;IAAEG,IAAI;AAAEc,IAAAA,KAAAA;AAAK,GAAA,EAAKG,cAAc,CAAA,EAAA;AAAI,IAAA,YAAA,EAAYJ,KAAM;AAACa,IAAAA,OAAO,EAAC,MAAA;AAAM,GAAA,CAAA,EACpGf,KAAK,gBACFS,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACI;AACAM,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAEjB,KAAAA;AAAM,GACd,CAAC,gBAEFS,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AAACjB,IAAAA,IAAI,EAAEA,IAAAA;GAAiB,CAEzB,CACP,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC2B,WAAW,GAAGrC,cAAc,CAAA;AACvCU,UAAU,CAAC4B,SAAS,GAAGrC,SAAS,CAAA;AAChCS,UAAU,CAAC6B,YAAY,GAAGpC,aAAa;;;;"}

package/_internal/26926e5c.d.ts

@@ -0,0 +1,36 @@
+import { C as Comp } from './8d67e1e3.js';
+import { ReactNode } from 'react';
+import { B as BaseButtonProps } from './7f022f8c.js';
+
+/**
+ * Button emphasis definition.
+ * @deprecated Use Emphasis instead.
+ */
+declare const ButtonEmphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+/**
+ * Defines the props of the component.
+ */
+interface ButtonProps extends BaseButtonProps {
+    /** Button content. */
+    children?: ReactNode;
+    /** Left icon (SVG path). */
+    leftIcon?: string;
+    /** Right icon (SVG path). */
+    rightIcon?: string;
+    /** When `true`, the button gets as large as possible. */
+    fullWidth?: boolean;
+}
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+
+export { ButtonEmphasis as B, type ButtonProps as a, Button as b };

package/_internal/2a3d237c.js

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react';
+
+const useBooleanState = defaultValue => {
+  const [booleanValue, setBoolean] = useState(defaultValue);
+  const setToFalse = useCallback(() => setBoolean(false), []);
+  const setToTrue = useCallback(() => setBoolean(true), []);
+  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
+  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
+};
+
+export { useBooleanState as u };
+//# sourceMappingURL=2a3d237c.js.map

package/_internal/2a3d237c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"2a3d237c.js","sources":["../../src/hooks/useBooleanState.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useBooleanState = (defaultValue: boolean): [boolean, () => void, () => void, () => void] => {\n    const [booleanValue, setBoolean] = useState<boolean>(defaultValue);\n\n    const setToFalse = useCallback(() => setBoolean(false), []);\n\n    const setToTrue = useCallback(() => setBoolean(true), []);\n\n    const toggleBoolean = useCallback(() => setBoolean((previousValue) => !previousValue), []);\n\n    return [booleanValue, setToFalse, setToTrue, toggleBoolean];\n};\n"],"names":["useBooleanState","defaultValue","booleanValue","setBoolean","useState","setToFalse","useCallback","setToTrue","toggleBoolean","previousValue"],"mappings":";;AAEaA,MAAAA,eAAe,GAAIC,YAAqB,IAAoD;EACrG,MAAM,CAACC,YAAY,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAUH,YAAY,CAAC,CAAA;EAElE,MAAMI,UAAU,GAAGC,WAAW,CAAC,MAAMH,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;EAE3D,MAAMI,SAAS,GAAGD,WAAW,CAAC,MAAMH,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AAEzD,EAAA,MAAMK,aAAa,GAAGF,WAAW,CAAC,MAAMH,UAAU,CAAEM,aAAa,IAAK,CAACA,aAAa,CAAC,EAAE,EAAE,CAAC,CAAA;EAE1F,OAAO,CAACP,YAAY,EAAEG,UAAU,EAAEE,SAAS,EAAEC,aAAa,CAAC,CAAA;AAC/D;;;;"}

package/_internal/2c5dbb03.js

@@ -0,0 +1,26 @@
+import { j as _objectWithoutProperties } from './1da25128.js';
+import React__default from 'react';
+
+const _excluded = ["linkAs"];
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+const renderLink = function (_ref) {
+  let {
+      linkAs
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded);
+  for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    children[_key - 1] = arguments[_key];
+  }
+  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+};
+
+export { renderLink as r };
+//# sourceMappingURL=2c5dbb03.js.map

package/_internal/2c5dbb03.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"2c5dbb03.js","sources":["../../src/utils/renderLink.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\ninterface Props {\n    linkAs?: any;\n}\n\n/**\n * Render link with default <a> HTML component or a custom one provided by `linkAs`.\n *\n * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.\n *\n * @param linkAs    Custom link component.\n * @param children  Link children.\n * @return          A link.\n */\nexport const renderLink = <P extends Props>({ linkAs, ...forwardedProps }: P, ...children: ReactNode[]): ReactElement =>\n    React.createElement(linkAs || 'a', forwardedProps, ...children);\n"],"names":["renderLink","_ref","linkAs","forwardedProps","_objectWithoutProperties","_excluded","_len","arguments","length","children","Array","_key","React","createElement"],"mappings":";;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,UAAU,GAAG,UAAAC,IAAA,EAAA;EAAA,IAAkB;AAAEC,MAAAA,MAAAA;AAA6B,KAAC,GAAAD,IAAA;AAAnBE,IAAAA,cAAc,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;EAAA,KAAAC,IAAAA,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAUC,QAAQ,OAAAC,KAAA,CAAAJ,IAAA,GAAAA,CAAAA,GAAAA,IAAA,WAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAARF,IAAAA,QAAQ,CAAAE,IAAA,GAAAJ,CAAAA,CAAAA,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,oBACrFC,cAAK,CAACC,aAAa,CAACX,MAAM,IAAI,GAAG,EAAEC,cAAc,EAAE,GAAGM,QAAQ,CAAC,CAAA;AAAA;;;;"}