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

package/_internal/d3286249.js

@@ -0,0 +1,72 @@
+import getBasePlacement from './215781b4.js';
+import getVariation from './9a5db774.js';
+import getMainAxisFromPlacement from './728684f6.js';
+import { left, right, bottom, top, end, start } from './f4baa1da.js';
+
+function computeOffsets(_ref) {
+  var reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case top:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = Math.floor(offsets[mainAxis]) - Math.floor(reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = Math.floor(offsets[mainAxis]) + Math.ceil(reference[len] / 2 - element[len] / 2);
+        break;
+    }
+  }
+
+  return offsets;
+}
+
+export { computeOffsets as default };
+//# sourceMappingURL=d3286249.js.map

package/_internal/d3286249.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d3286249.js","sources":["../../../../node_modules/@popperjs/core/lib/utils/computeOffsets.js"],"sourcesContent":["import getBasePlacement from \"./getBasePlacement.js\";\nimport getVariation from \"./getVariation.js\";\nimport getMainAxisFromPlacement from \"./getMainAxisFromPlacement.js\";\nimport { top, right, bottom, left, start, end } from \"../enums.js\";\nexport default function computeOffsets(_ref) {\n  var reference = _ref.reference,\n      element = _ref.element,\n      placement = _ref.placement;\n  var basePlacement = placement ? getBasePlacement(placement) : null;\n  var variation = placement ? getVariation(placement) : null;\n  var commonX = reference.x + reference.width / 2 - element.width / 2;\n  var commonY = reference.y + reference.height / 2 - element.height / 2;\n  var offsets;\n\n  switch (basePlacement) {\n    case top:\n      offsets = {\n        x: commonX,\n        y: reference.y - element.height\n      };\n      break;\n\n    case bottom:\n      offsets = {\n        x: commonX,\n        y: reference.y + reference.height\n      };\n      break;\n\n    case right:\n      offsets = {\n        x: reference.x + reference.width,\n        y: commonY\n      };\n      break;\n\n    case left:\n      offsets = {\n        x: reference.x - element.width,\n        y: commonY\n      };\n      break;\n\n    default:\n      offsets = {\n        x: reference.x,\n        y: reference.y\n      };\n  }\n\n  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;\n\n  if (mainAxis != null) {\n    var len = mainAxis === 'y' ? 'height' : 'width';\n\n    switch (variation) {\n      case start:\n        offsets[mainAxis] = Math.floor(offsets[mainAxis]) - Math.floor(reference[len] / 2 - element[len] / 2);\n        break;\n\n      case end:\n        offsets[mainAxis] = Math.floor(offsets[mainAxis]) + Math.ceil(reference[len] / 2 - element[len] / 2);\n        break;\n\n      default:\n    }\n  }\n\n  return offsets;\n}"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/_internal/d57d3fc6.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };
+//# sourceMappingURL=d57d3fc6.js.map

package/_internal/d57d3fc6.js.map

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

package/_internal/d5f5f3f5.js

@@ -0,0 +1,18 @@
+function debounce(fn) {
+  var pending;
+  return function () {
+    if (!pending) {
+      pending = new Promise(function (resolve) {
+        Promise.resolve().then(function () {
+          pending = undefined;
+          resolve(fn());
+        });
+      });
+    }
+
+    return pending;
+  };
+}
+
+export { debounce as default };
+//# sourceMappingURL=d5f5f3f5.js.map

package/_internal/d5f5f3f5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d5f5f3f5.js","sources":["../../../../node_modules/@popperjs/core/lib/utils/debounce.js"],"sourcesContent":["export default function debounce(fn) {\n  var pending;\n  return function () {\n    if (!pending) {\n      pending = new Promise(function (resolve) {\n        Promise.resolve().then(function () {\n          pending = undefined;\n          resolve(fn());\n        });\n      });\n    }\n\n    return pending;\n  };\n}"],"names":[],"mappings":"AAAe,SAAS,QAAQ,CAAC,EAAE,EAAE;AACrC,EAAE,IAAI,OAAO,CAAC;AACd,EAAE,OAAO,YAAY;AACrB,IAAI,IAAI,CAAC,OAAO,EAAE;AAClB,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,UAAU,OAAO,EAAE;AAC/C,QAAQ,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,YAAY;AAC3C,UAAU,OAAO,GAAG,SAAS,CAAC;AAC9B,UAAU,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACxB,SAAS,CAAC,CAAC;AACX,OAAO,CAAC,CAAC;AACT,KAAK;AACL;AACA,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG,CAAC;AACJ;;;;","x_google_ignoreList":[0]}

package/_internal/d672fc0e.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+/** Get natural image size after load. */
+function useImageSize(imgRef, getInitialSize) {
+  const [imageSize, setImageSize] = React__default.useState(getInitialSize || null);
+  React__default.useEffect(() => {
+    const {
+      current: img
+    } = imgRef;
+    if (!img) {
+      return undefined;
+    }
+    const onLoad = () => setImageSize({
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+    img.addEventListener('load', onLoad);
+    return () => img.removeEventListener('load', onLoad);
+  }, [imgRef]);
+  return imageSize;
+}
+
+export { useImageSize };
+//# sourceMappingURL=d672fc0e.js.map

package/_internal/d672fc0e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d672fc0e.js","sources":["../../src/hooks/useImageSize.ts"],"sourcesContent":["import React from 'react';\nimport { RectSize } from '@lumx/react/utils/type';\n\n/** Get natural image size after load. */\nexport function useImageSize(imgRef: React.RefObject<HTMLImageElement>, getInitialSize?: () => RectSize | null) {\n    const [imageSize, setImageSize] = React.useState<null | RectSize>(getInitialSize || null);\n    React.useEffect(() => {\n        const { current: img } = imgRef;\n        if (!img) {\n            return undefined;\n        }\n        const onLoad = () => setImageSize({ width: img.naturalWidth, height: img.naturalHeight });\n        img.addEventListener('load', onLoad);\n        return () => img.removeEventListener('load', onLoad);\n    }, [imgRef]);\n    return imageSize;\n}\n"],"names":["useImageSize","imgRef","getInitialSize","imageSize","setImageSize","React","useState","useEffect","current","img","undefined","onLoad","width","naturalWidth","height","naturalHeight","addEventListener","removeEventListener"],"mappings":";;AAGA;AACO,SAASA,YAAYA,CAACC,MAAyC,EAAEC,cAAsC,EAAE;AAC5G,EAAA,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAkBJ,cAAc,IAAI,IAAI,CAAC,CAAA;EACzFG,cAAK,CAACE,SAAS,CAAC,MAAM;IAClB,MAAM;AAAEC,MAAAA,OAAO,EAAEC,GAAAA;AAAI,KAAC,GAAGR,MAAM,CAAA;IAC/B,IAAI,CAACQ,GAAG,EAAE;AACN,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;AACA,IAAA,MAAMC,MAAM,GAAGA,MAAMP,YAAY,CAAC;MAAEQ,KAAK,EAAEH,GAAG,CAACI,YAAY;MAAEC,MAAM,EAAEL,GAAG,CAACM,aAAAA;AAAc,KAAC,CAAC,CAAA;AACzFN,IAAAA,GAAG,CAACO,gBAAgB,CAAC,MAAM,EAAEL,MAAM,CAAC,CAAA;IACpC,OAAO,MAAMF,GAAG,CAACQ,mBAAmB,CAAC,MAAM,EAAEN,MAAM,CAAC,CAAA;AACxD,GAAC,EAAE,CAACV,MAAM,CAAC,CAAC,CAAA;AACZ,EAAA,OAAOE,SAAS,CAAA;AACpB;;;;"}

package/_internal/d7ee7efe.js

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'RadioGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * RadioGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const RadioGroup = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME),
+    children: children
+  });
+});
+RadioGroup.displayName = COMPONENT_NAME;
+RadioGroup.className = CLASSNAME;
+
+export { RadioGroup };
+//# sourceMappingURL=d7ee7efe.js.map

package/_internal/d7ee7efe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d7ee7efe.js","sources":["../../src/components/radio-button/RadioGroup.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioGroupProps extends GenericProps {\n    /** RadioButton elements */\n    children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioGroup';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * RadioGroup component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {\n    const { children, className, ...forwardedProps } = props;\n\n    return (\n        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            {children}\n        </div>\n    );\n});\nRadioGroup.displayName = COMPONENT_NAME;\nRadioGroup.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","RadioGroup","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName"],"mappings":";;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEP,SAAS,CAAE;AAAAM,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,UAAU,CAACS,WAAW,GAAGZ,cAAc,CAAA;AACvCG,UAAU,CAACK,SAAS,GAAGP,SAAS;;;;"}

package/_internal/d8ee966d.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+const ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
+
+/** Provide a theme context to all children. */
+const ThemeProvider = ThemeContext.Provider;
+
+/** Get the theme in the current context. */
+function useTheme() {
+  return React__default.useContext(ThemeContext);
+}
+
+export { ThemeContext, ThemeProvider, useTheme };
+//# sourceMappingURL=d8ee966d.js.map

package/_internal/d8ee966d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d8ee966d.js","sources":["../../src/utils/theme/ThemeContext.ts"],"sourcesContent":["import React from 'react';\nimport type { Theme } from '@lumx/react';\n\ntype ThemeContextValue = Theme | undefined;\nexport const ThemeContext = React.createContext<ThemeContextValue>(undefined);\n\n/** Provide a theme context to all children. */\nexport const ThemeProvider = ThemeContext.Provider as React.FC<{\n    value: ThemeContextValue;\n    children?: React.ReactNode;\n}>;\n\n/** Get the theme in the current context. */\nexport function useTheme(): ThemeContextValue {\n    return React.useContext(ThemeContext);\n}\n"],"names":["ThemeContext","React","createContext","undefined","ThemeProvider","Provider","useTheme","useContext"],"mappings":";;AAIO,MAAMA,YAAY,gBAAGC,cAAK,CAACC,aAAa,CAAoBC,SAAS,EAAC;;AAE7E;AACaC,MAAAA,aAAa,GAAGJ,YAAY,CAACK,SAGxC;;AAEF;AACO,SAASC,QAAQA,GAAsB;AAC1C,EAAA,OAAOL,cAAK,CAACM,UAAU,CAACP,YAAY,CAAC,CAAA;AACzC;;;;"}

package/_internal/db88500d.js

@@ -0,0 +1,10 @@
+function formatDayNumber(locale, date) {
+  const formattedDate = date.toLocaleDateString(locale, {
+    day: 'numeric'
+  });
+  if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
+  return formattedDate;
+}
+
+export { formatDayNumber };
+//# sourceMappingURL=db88500d.js.map

package/_internal/db88500d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"db88500d.js","sources":["../../src/utils/date/formatDayNumber.ts"],"sourcesContent":["export function formatDayNumber(locale: string, date: Date): string {\n    const formattedDate = date.toLocaleDateString(locale, { day: 'numeric' });\n    if (formattedDate.match(/\\d/)) return formattedDate.replace(/\\D*(\\d+)\\D*/g, '$1');\n    return formattedDate;\n}\n"],"names":["formatDayNumber","locale","date","formattedDate","toLocaleDateString","day","match","replace"],"mappings":"AAAO,SAASA,eAAeA,CAACC,MAAc,EAAEC,IAAU,EAAU;AAChE,EAAA,MAAMC,aAAa,GAAGD,IAAI,CAACE,kBAAkB,CAACH,MAAM,EAAE;AAAEI,IAAAA,GAAG,EAAE,SAAA;AAAU,GAAC,CAAC,CAAA;AACzE,EAAA,IAAIF,aAAa,CAACG,KAAK,CAAC,IAAI,CAAC,EAAE,OAAOH,aAAa,CAACI,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AACjF,EAAA,OAAOJ,aAAa,CAAA;AACxB;;;;"}

package/_internal/dbc379f8.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+
+// The error margin in px we want to have for triggering infinite scroll
+const SCROLL_TRIGGER_MARGIN = 5;
+
+/**
+ * Listen to clicks away from a given element and callback the passed in function.
+ *
+ * @param  ref               A reference to the element on which you want to listen scroll event.
+ * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
+ * @param  [callbackOnMount] A callback function to call when the component is mounted.
+ */
+const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTriggerMargin = SCROLL_TRIGGER_MARGIN) => {
+  useEffect(() => {
+    const {
+      current
+    } = ref;
+    if (!callback || !current) {
+      return undefined;
+    }
+    const isAtBottom = () => Boolean(current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin);
+    const onScroll = e => {
+      if (isAtBottom()) {
+        callback(e);
+      }
+    };
+    if (isAtBottom()) {
+      onScroll();
+    }
+    current.addEventListener('scroll', onScroll);
+    current.addEventListener('resize', onScroll);
+    return () => {
+      current.removeEventListener('scroll', onScroll);
+      current.removeEventListener('resize', onScroll);
+    };
+  }, [ref, callback, scrollTriggerMargin]);
+  useEffect(() => {
+    if (callback && callbackOnMount) {
+      callback();
+    }
+  }, [callback, callbackOnMount]);
+};
+
+export { useInfiniteScroll };
+//# sourceMappingURL=dbc379f8.js.map

package/_internal/dbc379f8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dbc379f8.js","sources":["../../src/hooks/useInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\ntype useInfiniteScrollType = (\n    ref: React.RefObject<HTMLElement>,\n    callback?: EventCallback,\n    callbackOnMount?: boolean,\n) => void;\ntype EventCallback = (evt?: Event) => void;\n\n// The error margin in px we want to have for triggering infinite scroll\nconst SCROLL_TRIGGER_MARGIN = 5;\n\n/**\n * Listen to clicks away from a given element and callback the passed in function.\n *\n * @param  ref               A reference to the element on which you want to listen scroll event.\n * @param  [callback]        A callback function to call when the bottom of the reference element is reached.\n * @param  [callbackOnMount] A callback function to call when the component is mounted.\n */\nexport const useInfiniteScroll: useInfiniteScrollType = (\n    ref,\n    callback,\n    callbackOnMount = false,\n    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,\n) => {\n    useEffect(() => {\n        const { current } = ref;\n        if (!callback || !current) {\n            return undefined;\n        }\n\n        const isAtBottom = () =>\n            Boolean(\n                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,\n            );\n\n        const onScroll = (e?: Event): void => {\n            if (isAtBottom()) {\n                callback(e);\n            }\n        };\n\n        if (isAtBottom()) {\n            onScroll();\n        }\n\n        current.addEventListener('scroll', onScroll);\n        current.addEventListener('resize', onScroll);\n        return () => {\n            current.removeEventListener('scroll', onScroll);\n            current.removeEventListener('resize', onScroll);\n        };\n    }, [ref, callback, scrollTriggerMargin]);\n\n    useEffect(() => {\n        if (callback && callbackOnMount) {\n            callback();\n        }\n    }, [callback, callbackOnMount]);\n};\n"],"names":["SCROLL_TRIGGER_MARGIN","useInfiniteScroll","ref","callback","callbackOnMount","scrollTriggerMargin","useEffect","current","undefined","isAtBottom","Boolean","scrollHeight","scrollTop","clientHeight","onScroll","e","addEventListener","removeEventListener"],"mappings":";;AASA;AACA,MAAMA,qBAAqB,GAAG,CAAC,CAAA;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,iBAAwC,GAAGA,CACpDC,GAAG,EACHC,QAAQ,EACRC,eAAe,GAAG,KAAK,EACvBC,mBAAmB,GAAGL,qBAAqB,KAC1C;AACDM,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAAA;AAAQ,KAAC,GAAGL,GAAG,CAAA;AACvB,IAAA,IAAI,CAACC,QAAQ,IAAI,CAACI,OAAO,EAAE;AACvB,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMC,UAAU,GAAGA,MACfC,OAAO,CACHH,OAAO,IAAIA,OAAO,CAACI,YAAY,IAAIJ,OAAO,CAACK,SAAS,GAAGL,OAAO,CAACM,YAAY,CAAC,IAAIR,mBACpF,CAAC,CAAA;IAEL,MAAMS,QAAQ,GAAIC,CAAS,IAAW;MAClC,IAAIN,UAAU,EAAE,EAAE;QACdN,QAAQ,CAACY,CAAC,CAAC,CAAA;AACf,OAAA;KACH,CAAA;IAED,IAAIN,UAAU,EAAE,EAAE;AACdK,MAAAA,QAAQ,EAAE,CAAA;AACd,KAAA;AAEAP,IAAAA,OAAO,CAACS,gBAAgB,CAAC,QAAQ,EAAEF,QAAQ,CAAC,CAAA;AAC5CP,IAAAA,OAAO,CAACS,gBAAgB,CAAC,QAAQ,EAAEF,QAAQ,CAAC,CAAA;AAC5C,IAAA,OAAO,MAAM;AACTP,MAAAA,OAAO,CAACU,mBAAmB,CAAC,QAAQ,EAAEH,QAAQ,CAAC,CAAA;AAC/CP,MAAAA,OAAO,CAACU,mBAAmB,CAAC,QAAQ,EAAEH,QAAQ,CAAC,CAAA;KAClD,CAAA;GACJ,EAAE,CAACZ,GAAG,EAAEC,QAAQ,EAAEE,mBAAmB,CAAC,CAAC,CAAA;AAExCC,EAAAA,SAAS,CAAC,MAAM;IACZ,IAAIH,QAAQ,IAAIC,eAAe,EAAE;AAC7BD,MAAAA,QAAQ,EAAE,CAAA;AACd,KAAA;AACJ,GAAC,EAAE,CAACA,QAAQ,EAAEC,eAAe,CAAC,CAAC,CAAA;AACnC;;;;"}

package/_internal/dbe906f1.js

@@ -0,0 +1,179 @@
+import React__default, { useState } from 'react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useMergeRefs } from './27df0cb6.js';
+import { useImageLoad } from './7af4a428.js';
+import { useFocusPointStyle } from './b4018f8d.js';
+import { useTheme } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { RawClickable } from './a6dc95cd.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDisableStateProps } from './ef982c3d.js';
+import { mdiImageBroken } from './1060c47e.js';
+import { Theme, AspectRatio, Size } from '@lumx/core/js/constants';
+import { Icon } from './595d0e66.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Thumbnail';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  fallback: mdiImageBroken,
+  loading: 'lazy'
+};
+
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Thumbnail = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps,
+    disabledStateProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    align,
+    alt,
+    aspectRatio = AspectRatio.original,
+    badge,
+    className,
+    crossOrigin,
+    fallback = DEFAULT_PROPS.fallback,
+    fillHeight,
+    // `focusPoint` needs to be here to remove it from `forwardedProps`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusPoint,
+    image,
+    imgProps,
+    imgRef: propImgRef,
+    isLoading: isLoadingProp,
+    objectFit,
+    loading = DEFAULT_PROPS.loading,
+    loadingPlaceholderImageRef,
+    size,
+    theme = defaultTheme,
+    variant,
+    linkProps,
+    linkAs,
+    ...forwardedProps
+  } = otherProps;
+  const [imgElement, setImgElement] = useState();
+
+  // Image loading state.
+  const loadingState = useImageLoad(image, imgElement);
+  const isLoaded = loadingState === 'isLoaded';
+  const isLoading = isLoadingProp || loadingState === 'isLoading';
+  const hasError = loadingState === 'hasError';
+
+  // Focus point.
+  const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
+  const hasIconErrorFallback = hasError && typeof fallback === 'string';
+  const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+  const imageErrorStyle = {};
+  if (hasIconErrorFallback) {
+    // Keep the image layout on icon fallback.
+    imageErrorStyle.visibility = 'hidden';
+  } else if (hasCustomErrorFallback) {
+    // Remove the image on custom fallback.
+    imageErrorStyle.display = 'none';
+  }
+  const isLink = Boolean(linkProps?.href || linkAs);
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+  const Wrapper = isClickable ? RawClickable : 'div';
+  const wrapperProps = {
+    ...forwardedProps
+  };
+  if (isClickable) {
+    Object.assign(wrapperProps, {
+      as: linkAs || (linkProps?.href ? 'a' : 'button')
+    }, disabledStateProps);
+    if (isLink) {
+      Object.assign(wrapperProps, linkProps);
+    } else {
+      wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+    }
+  }
+
+  // If we have a loading placeholder image that is really loaded (complete)
+  const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || undefined;
+
+  // Set loading placeholder image as background
+  const loadingStyle = loadingPlaceholderImage ? {
+    backgroundImage: `url(${loadingPlaceholderImage.src})`
+  } : undefined;
+  return /*#__PURE__*/jsxs(Wrapper, {
+    ...wrapperProps,
+    ref: ref,
+    className: classNames(linkProps?.className, className, handleBasicClasses({
+      align,
+      aspectRatio,
+      prefix: CLASSNAME,
+      size,
+      theme,
+      variant,
+      isClickable,
+      hasError,
+      hasIconErrorFallback,
+      hasCustomErrorFallback,
+      isLoading,
+      objectFit,
+      hasBadge: !!badge
+    }), fillHeight && `${CLASSNAME}--fill-height`),
+    children: [/*#__PURE__*/jsxs("span", {
+      className: `${CLASSNAME}__background`,
+      children: [/*#__PURE__*/jsx("img", {
+        // Use placeholder image size
+        width: loadingPlaceholderImage?.naturalWidth,
+        height: loadingPlaceholderImage?.naturalHeight,
+        ...imgProps,
+        style: {
+          // Reserve space while loading (when possible)
+          width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
+          ...imgProps?.style,
+          ...imageErrorStyle,
+          ...focusPointStyle,
+          ...loadingStyle
+        },
+        ref: useMergeRefs(setImgElement, propImgRef),
+        className: classNames(handleBasicClasses({
+          prefix: `${CLASSNAME}__image`,
+          isLoading,
+          hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
+        }), imgProps?.className),
+        crossOrigin: crossOrigin,
+        src: image,
+        alt: alt,
+        loading: loading
+      }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
+        className: `${CLASSNAME}__fallback`,
+        children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
+          icon: fallback,
+          size: Size.xxs,
+          theme: theme
+        }) : fallback
+      })]
+    }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
+      className: classNames(`${CLASSNAME}__badge`, badge.props.className)
+    })]
+  });
+});
+Thumbnail.displayName = COMPONENT_NAME;
+Thumbnail.className = CLASSNAME;
+Thumbnail.defaultProps = DEFAULT_PROPS;
+
+export { Thumbnail };
+//# sourceMappingURL=dbe906f1.js.map

package/_internal/dbe906f1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dbe906f1.js","sources":["../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps, HasTheme {\n    /** Alignment of the thumbnail in it's parent (requires flex parent). */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Badge. */\n    badge?: ReactElement | Falsy;\n    /** Image cross origin resource policy. */\n    crossOrigin?: ImgHTMLProps['crossOrigin'];\n    /** Fallback icon (SVG path) or react node when image fails to load. */\n    fallback?: string | ReactNode;\n    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n    fillHeight?: boolean;\n    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n    focusPoint?: FocusPoint;\n    /** Image URL. */\n    image: string;\n    /** Props to inject into the native <img> element. */\n    imgProps?: ImgHTMLProps;\n    /** Reference to the native <img> element. */\n    imgRef?: Ref<HTMLImageElement>;\n    /** Set to true to force the display of the loading skeleton. */\n    isLoading?: boolean;\n    /** Set how the image should fit when its aspect ratio is constrained */\n    objectFit?: ThumbnailObjectFit;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** Ref of an existing placeholder image to display while loading. */\n    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Variant of the component. */\n    variant?: ThumbnailVariant;\n    /** Props to pass to the link wrapping the 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}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\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<ThumbnailProps> = {\n    fallback: mdiImageBroken,\n    loading: 'lazy',\n};\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback = DEFAULT_PROPS.fallback,\n        fillHeight,\n        // `focusPoint` needs to be here to remove it from `forwardedProps`.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        focusPoint,\n        image,\n        imgProps,\n        imgRef: propImgRef,\n        isLoading: isLoadingProp,\n        objectFit,\n        loading = DEFAULT_PROPS.loading,\n        loadingPlaceholderImageRef,\n        size,\n        theme = defaultTheme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = otherProps;\n    const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgElement);\n    const isLoaded = loadingState === 'isLoaded';\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    // Focus point.\n    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n    const hasIconErrorFallback = hasError && typeof fallback === 'string';\n    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n    const imageErrorStyle: CSSProperties = {};\n    if (hasIconErrorFallback) {\n        // Keep the image layout on icon fallback.\n        imageErrorStyle.visibility = 'hidden';\n    } else if (hasCustomErrorFallback) {\n        // Remove the image on custom fallback.\n        imageErrorStyle.display = 'none';\n    }\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n    const Wrapper: any = isClickable ? RawClickable : 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isClickable) {\n        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n        if (isLink) {\n            Object.assign(wrapperProps, linkProps);\n        } else {\n            wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n        }\n    }\n\n    // If we have a loading placeholder image that is really loaded (complete)\n    const loadingPlaceholderImage =\n        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n        undefined;\n\n    // Set loading placeholder image as background\n    const loadingStyle = loadingPlaceholderImage\n        ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n        : undefined;\n\n    return (\n        <Wrapper\n            {...wrapperProps}\n            ref={ref}\n            className={classNames(\n                linkProps?.className,\n                className,\n                handleBasicClasses({\n                    align,\n                    aspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isClickable,\n                    hasError,\n                    hasIconErrorFallback,\n                    hasCustomErrorFallback,\n                    isLoading,\n                    objectFit,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <span className={`${CLASSNAME}__background`}>\n                <img\n                    // Use placeholder image size\n                    width={loadingPlaceholderImage?.naturalWidth}\n                    height={loadingPlaceholderImage?.naturalHeight}\n                    {...imgProps}\n                    style={{\n                        // Reserve space while loading (when possible)\n                        width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        ...focusPointStyle,\n                        ...loadingStyle,\n                    }}\n                    ref={useMergeRefs(setImgElement, propImgRef)}\n                    className={classNames(\n                        handleBasicClasses({\n                            prefix: `${CLASSNAME}__image`,\n                            isLoading,\n                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n                        }),\n                        imgProps?.className,\n                    )}\n                    crossOrigin={crossOrigin}\n                    src={image}\n                    alt={alt}\n                    loading={loading}\n                />\n                {!isLoading && hasError && (\n                    <span className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </span>\n                )}\n            </span>\n            {badge &&\n                React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n        </Wrapper>\n    );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","aspectRatio","AspectRatio","original","badge","className","crossOrigin","fillHeight","focusPoint","image","imgProps","imgRef","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","useState","loadingState","useImageLoad","isLoaded","hasError","focusPointStyle","useFocusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","visibility","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","complete","undefined","loadingStyle","backgroundImage","src","_jsxs","classNames","handleBasicClasses","prefix","hasBadge","children","_jsx","width","naturalWidth","height","naturalHeight","style","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/_internal/de52a4b9.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { detectHorizontalSwipe } from '@lumx/core/js/utils';
+
+const isTouchDevice = () => 'ontouchstart' in window;
+
+/**
+ * Listen swipe to navigate left and right.
+ */
+function useSwipeNavigate(element, onNext, onPrevious) {
+  useEffect(() => {
+    if (!element || !isTouchDevice()) return undefined;
+    return detectHorizontalSwipe(element, swipe => {
+      const callback = swipe === 'right' ? onPrevious : onNext;
+      callback?.();
+    });
+  }, [onPrevious, onNext, element]);
+}
+
+export { useSwipeNavigate };
+//# sourceMappingURL=de52a4b9.js.map

package/_internal/de52a4b9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de52a4b9.js","sources":["../../src/components/slideshow/useSwipeNavigate.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { detectHorizontalSwipe } from '@lumx/core/js/utils';\n\nconst isTouchDevice = () => 'ontouchstart' in window;\n\n/**\n * Listen swipe to navigate left and right.\n */\nexport function useSwipeNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {\n    useEffect(() => {\n        if (!element || !isTouchDevice()) return undefined;\n\n        return detectHorizontalSwipe(element, (swipe) => {\n            const callback = swipe === 'right' ? onPrevious : onNext;\n            callback?.();\n        });\n    }, [onPrevious, onNext, element]);\n}\n"],"names":["isTouchDevice","window","useSwipeNavigate","element","onNext","onPrevious","useEffect","undefined","detectHorizontalSwipe","swipe","callback"],"mappings":";;;AAGA,MAAMA,aAAa,GAAGA,MAAM,cAAc,IAAIC,MAAM,CAAA;;AAEpD;AACA;AACA;AACO,SAASC,gBAAgBA,CAACC,OAA4B,EAAEC,MAAmB,EAAEC,UAAuB,EAAQ;AAC/GC,EAAAA,SAAS,CAAC,MAAM;IACZ,IAAI,CAACH,OAAO,IAAI,CAACH,aAAa,EAAE,EAAE,OAAOO,SAAS,CAAA;AAElD,IAAA,OAAOC,qBAAqB,CAACL,OAAO,EAAGM,KAAK,IAAK;MAC7C,MAAMC,QAAQ,GAAGD,KAAK,KAAK,OAAO,GAAGJ,UAAU,GAAGD,MAAM,CAAA;AACxDM,MAAAA,QAAQ,IAAI,CAAA;AAChB,KAAC,CAAC,CAAA;GACL,EAAE,CAACL,UAAU,EAAED,MAAM,EAAED,OAAO,CAAC,CAAC,CAAA;AACrC;;;;"}

package/_internal/df688aab.js

@@ -0,0 +1,121 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mdiArrowUp } from './78a9c3cd.js';
+import { mdiArrowDown } from './a32628a1.js';
+import { Icon } from './595d0e66.js';
+import { Size } from '@lumx/core/js/constants';
+
+const ThOrder = {
+  asc: 'asc',
+  desc: 'desc'
+};
+/**
+ * Table cell variants.
+ */
+const TableCellVariant = {
+  body: 'body',
+  head: 'head'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TableCell';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  variant: TableCellVariant.body
+};
+
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableCell = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    icon,
+    isSortable,
+    onHeaderClick,
+    sortOrder,
+    variant = DEFAULT_PROPS.variant,
+    ...forwardedProps
+  } = props;
+
+  // Use button if clickable
+  const Wrapper = onHeaderClick ? 'button' : 'div';
+  const wrapperProps = Wrapper === 'button' ? {
+    type: 'button',
+    onClick: onHeaderClick
+  } : undefined;
+
+  // ARIA sort
+  let ariaSort;
+  if (isSortable) {
+    ariaSort = 'none';
+    if (sortOrder === ThOrder.asc) ariaSort = 'ascending';
+    if (sortOrder === ThOrder.desc) ariaSort = 'descending';
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
+      ref: ref,
+      ...forwardedProps,
+      className: classNames(handleBasicClasses({
+        prefix: CLASSNAME,
+        isSortable,
+        isSorted: isSortable && !!sortOrder
+      }), className, `${CLASSNAME}--head`),
+      "aria-sort": ariaSort,
+      children: /*#__PURE__*/jsxs(Wrapper, {
+        className: `${CLASSNAME}-wrapper`,
+        ...wrapperProps,
+        children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME}-icon`,
+          icon: icon,
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME}-icon`,
+          icon: mdiArrowUp,
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME}-icon`,
+          icon: mdiArrowDown,
+          size: Size.xxs
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}-content`,
+          children: children
+        })]
+      })
+    }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
+      ...forwardedProps,
+      className: classNames(className, CLASSNAME, `${CLASSNAME}--body`),
+      children: /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}-content`,
+        children: children
+      })
+    })]
+  });
+});
+TableCell.displayName = COMPONENT_NAME;
+TableCell.className = CLASSNAME;
+TableCell.defaultProps = DEFAULT_PROPS;
+
+export { TableCell, TableCellVariant, ThOrder };
+//# sourceMappingURL=df688aab.js.map