@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

package/components/feedback/FeedbackReactions.js

@@ -1,25 +1,114 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { motion } from 'framer-motion';
-import useHover from '../../hooks/useHover';
-const FeedbackReactions = (props) => {
-    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
-    const hasLabels = !!labelUp || !!labelDown;
-    const wrapperClassName = classNames(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassName, children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _jsx(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { useRef as C } from "react";
+import u from "classnames";
+import { motion as y } from "motion/react";
+import v from "../../hooks/useHover.js";
+const z = (m) => {
+  const {
+    headline: x,
+    animated: s,
+    labelUp: t,
+    labelDown: a,
+    labelPosition: r = "bottom",
+    size: e = "md",
+    colorFillUp: p = "",
+    colorFillDown: d = "",
+    colorHoverUp: h = "primary",
+    colorHoverDown: i = "primary",
+    onVoteUp: o = () => {
+    },
+    onVoteDown: b = () => {
+    },
+    itemClassName: n,
+    ...c
+  } = m, g = u(
+    !!t || !!a ? "display-grid grid-cols-2" : "display-flex",
+    "gap-15",
+    "padding-top-5",
+    "user-select-none"
+  );
+  return /* @__PURE__ */ f("div", { ...c, className: g, children: [
+    /* @__PURE__ */ l(
+      N,
+      {
+        size: e,
+        fillColor: d,
+        hoverColor: i,
+        animated: s,
+        iconName: "thumbs-down",
+        text: a,
+        labelPosition: r,
+        onClick: b,
+        className: n
+      }
+    ),
+    /* @__PURE__ */ l(
+      N,
+      {
+        size: e,
+        fillColor: p,
+        hoverColor: h,
+        animated: s,
+        iconName: "thumbs-up",
+        text: t,
+        labelPosition: r,
+        onClick: o,
+        className: n
+      }
+    )
+  ] });
+}, N = (m) => {
+  const {
+    size: x,
+    text: s,
+    iconName: t,
+    onClick: a,
+    fillColor: r,
+    hoverColor: e,
+    animated: p = !1,
+    labelPosition: d = "bottom",
+    className: h
+  } = m, i = C(null), o = v(i), b = u(
+    x === "sm" ? "width-40" : "width-50",
+    "aspect-ratio-1",
+    "border rounded-circle",
+    r ? `bg-${r} text-color-white` : "bg-lightest",
+    o ? `border-color-${e} text-color-${e}` : "border-color-lightest",
+    "display-grid place-items-center",
+    "text-size-14"
+  ), n = u(
+    "display-flex",
+    "gap-10",
+    d === "bottom" ? "flex-column" : "",
+    "align-items-center",
+    "text-center",
+    "cursor-pointer",
+    h
+  ), c = t.includes("up");
+  return /* @__PURE__ */ f("div", { ref: i, className: n, onClick: a, children: [
+    /* @__PURE__ */ l("div", { className: b, children: /* @__PURE__ */ l(
+      y.span,
+      {
+        initial: { y: 0, rotate: 0 },
+        animate: p && o ? { y: [0, c ? -3 : 3, 0], rotate: [0, c ? -10 : 10, 0] } : { y: 0 },
+        transition: {
+          duration: 0.6,
+          repeat: o ? Number.POSITIVE_INFINITY : 0,
+          repeatType: "loop"
+        },
+        className: `rioglyph rioglyph-${t} text-size-200pct`
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: `text-wrap-balance line-height-125rel text-medium ${o ? `text-color-${e}` : "text-color-darker"}`,
+        children: s
+      }
+    )
+  ] });
 };
-const FeedbackItem = (props) => {
-    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
-    const ref = useRef(null);
-    const isHover = useHover(ref);
-    const iconClasses = classNames(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
-    const wrapperClassName = classNames('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
-    const isUp = iconName.includes('up');
-    return (_jsxs("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [_jsx("div", { className: iconClasses, children: _jsx(motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
-                        duration: 0.6,
-                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
-                        repeatType: 'loop',
-                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), _jsx("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
+export {
+  z as default
 };
-export default FeedbackReactions;
+//# sourceMappingURL=FeedbackReactions.js.map

package/components/feedback/FeedbackReactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\n\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":";;;;;AAuFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,UAAAC,IAAW,MAAM;AAAA,IAAC;AAAA,IAClB,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAIEe,IAAmBC;AAAA,IAFP,CAAC,CAACb,KAAW,CAAC,CAACC,IAGjB,6BAA6B;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,SACI,gBAAAa,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAChC,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAAb;AAAA,QACA,WAAWE;AAAA,QACX,YAAYE;AAAA,QACZ,UAAAR;AAAA,QACA,UAAS;AAAA,QACT,MAAME;AAAA,QACN,eAAAC;AAAA,QACA,SAASO;AAAA,QACT,WAAWC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEf,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAAb;AAAA,QACA,WAAWC;AAAA,QACX,YAAYE;AAAA,QACZ,UAAAP;AAAA,QACA,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,eAAAE;AAAA,QACA,SAASM;AAAA,QACT,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACJ;AAER,GAcMM,IAAe,CAACnB,MAA6B;AAC/C,QAAM;AAAA,IACF,MAAAM;AAAA,IACA,MAAAc;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAtB,IAAW;AAAA,IACX,eAAAG,IAAgB;AAAA,IAChB,WAAAoB;AAAA,EAAA,IACAzB,GAEE0B,IAAMC,EAAuB,IAAI,GACjCC,IAAUC,EAASH,CAAG,GAEtBI,IAAcd;AAAA,IAChBV,MAAS,OAAO,aAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACAiB,IAAY,MAAMA,CAAS,sBAAsB;AAAA,IACjDK,IAAU,gBAAgBJ,CAAU,eAAeA,CAAU,KAAK;AAAA,IAClE;AAAA,IACA;AAAA,EAAA,GAGET,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACAX,MAAkB,WAAW,gBAAgB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACAoB;AAAA,EAAA,GAGEM,IAAOV,EAAS,SAAS,IAAI;AAEnC,SACI,gBAAAJ,EAAC,OAAA,EAAI,KAAAS,GAAU,WAAWX,GAAkB,SAAAO,GACxC,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWY,GACZ,UAAA,gBAAAZ;AAAA,MAACc,EAAO;AAAA,MAAP;AAAA,QACG,SAAS,EAAE,GAAG,GAAG,QAAQ,EAAA;AAAA,QACzB,SACI9B,KAAY0B,IAAU,EAAE,GAAG,CAAC,GAAGG,IAAO,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAGA,IAAO,MAAM,IAAI,CAAC,EAAA,IAAM,EAAE,GAAG,EAAA;AAAA,QAE/F,YAAY;AAAA,UACR,UAAU;AAAA,UACV,QAAQH,IAAU,OAAO,oBAAoB;AAAA,UAC7C,YAAY;AAAA,QAAA;AAAA,QAEhB,WAAW,qBAAqBP,CAAQ;AAAA,MAAA;AAAA,IAAA,GAEhD;AAAA,IACA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,oDAAoDU,IAAU,cAAcJ,CAAU,KAAK,mBAAmB;AAAA,QAExH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;"}

package/components/filepicker/FilePicker.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { FileRejection } from 'react-dropzone';
 type FilePickerRenderProps = {
     isDragActive: boolean;
 };
@@ -31,7 +32,7 @@ export type FilePickerProps = {
     /**
      * Function called after one or multiple files have been picked.
      */
-    onPick?: (files: FileList | null) => void;
+    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;
     /**
      * Additional classes for the select button.
      *
@@ -55,7 +56,7 @@ export type FilePickerProps = {
     /**
      * Pass a custom dropzone element as function receiving some render props.
      */
-    children?: ({ isDragActive }: FilePickerRenderProps) => any;
+    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;
 };
 declare const FilePicker: {
     (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/filepicker/FilePicker.js

@@ -1,35 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import Dropzone from 'react-dropzone';
-import noop from 'lodash/noop';
-import Button from '../button/Button';
-const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, fullHeight = false, children, ...remainingProps } = props;
-    const dropzoneRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const isFull = displayMode === 'full';
-    const showButton = isFull || displayMode === 'button';
-    const showDropzone = isFull || displayMode === 'dropzone';
-    const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
-        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
-        const files = hasImagesType
-            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
-            : acceptedFiles;
-        onPick(files, rejectedFiles);
-    }, [onPick, accept]);
-    const handleClick = () => dropzoneRef.current?.open();
-    useEffect(() => {
-        // Set height to dropzones inner presentation div where there is no other access to this DOM element.
-        // This comes in handy, when the dropzone should have 100 % height so it can grow.
-        if (wrapperRef.current && fullHeight) {
-            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');
-        }
-    }, [fullHeight, wrapperRef.current]);
-    return (_jsxs("div", { ref: wrapperRef, className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
-                    return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
-                } })] }));
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { useRef as h, useCallback as j, useEffect as y } from "react";
+import E from "react-dropzone";
+import { noop as I } from "es-toolkit/compat";
+import v from "../button/Button.js";
+const l = (D) => {
+  const {
+    displayMode: n = "button",
+    multiple: b = !0,
+    label: O = "Select files",
+    maxSize: P,
+    onPick: i = I,
+    className: k = "",
+    accept: e,
+    fullHeight: a = !1,
+    children: p,
+    ...g
+  } = D, u = h(null), t = h(null), m = n === "full", L = m || n === "button", z = m || n === "dropzone", R = j(
+    (o, s) => {
+      const _ = e && Object.keys(e).some((r) => r.startsWith("image")) ? o.map((r) => Object.assign(r, { preview: URL.createObjectURL(r) })) : o;
+      i(_, s);
+    },
+    [i, e]
+  ), S = () => u.current?.open();
+  return y(() => {
+    t.current && a && t.current.querySelector(".FilePicker > div")?.setAttribute("class", "height-100pct");
+  }, [a, t.current]), /* @__PURE__ */ d("div", { ref: t, className: "FilePicker", children: [
+    L && /* @__PURE__ */ c(v, { onClick: S, className: k, children: O }),
+    /* @__PURE__ */ c(
+      E,
+      {
+        ...g,
+        onDrop: R,
+        accept: e,
+        multiple: b,
+        maxSize: P,
+        ref: u,
+        children: ({ getRootProps: o, getInputProps: s, isDragActive: f }) => /* @__PURE__ */ d("div", { ...o(), children: [
+          /* @__PURE__ */ c("input", { ...s() }),
+          z && p && p({ isDragActive: f })
+        ] })
+      }
+    )
+  ] });
 };
-FilePicker.DISPLAY_MODE_BUTTON = 'button';
-FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
-FilePicker.DISPLAY_MODE_FULL = 'full';
-export default FilePicker;
+l.DISPLAY_MODE_BUTTON = "button";
+l.DISPLAY_MODE_DROPZONE = "dropzone";
+l.DISPLAY_MODE_FULL = "full";
+export {
+  l as default
+};
+//# sourceMappingURL=FilePicker.js.map

package/components/filepicker/FilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     *\n     * @default ''\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                    return (\n                        <div {...getRootProps()}>\n                            <input {...getInputProps()} />\n                            {showDropzone && children && children({ isDragActive })}\n                        </div>\n                    );\n                }}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAwEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,QAEzB,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,GAC1D;AAAA,MAER;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}

package/components/formLabel/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, type ComponentProps } from 'react';
+import { default as React, PropsWithChildren, ComponentProps } from 'react';
 export type FormLabelProps = ComponentProps<'label'> & {
     /**
      * Additional supporting text displayed next to the label.

package/components/formLabel/FormLabel.js

@@ -1,37 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-import { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-const FormLabel = (props) => {
-    const { className = '', children, supportingText, ...remainingProps } = props;
-    const elementRef = useRef(null);
-    const [parentSize, setParentSize] = useState(null);
-    const isLabel = 'htmlFor' in remainingProps;
-    useEffect(() => {
-        if (!elementRef.current) {
-            return;
-        }
-        const parent = elementRef.current.parentElement;
-        if (!parent) {
-            return;
-        }
-        if (parent.classList.contains('form-group-lg')) {
-            setParentSize('lg');
-        }
-        else if (parent.classList.contains('form-group-sm')) {
-            setParentSize('sm');
-        }
-    }, []);
-    const supportingTextClasses = classNames('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
-    if (isLabel && remainingProps.htmlFor) {
-        const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
-        return (
-        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        _jsxs("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
-    }
-    const classes = classNames('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useRef as d, useState as g, useEffect as b } from "react";
+import a from "classnames";
+const w = (f) => {
+  const { className: l = "", children: o, supportingText: e, ...n } = f, i = d(null), [t, c] = g(null), u = "htmlFor" in n;
+  b(() => {
+    if (!i.current)
+      return;
+    const s = i.current.parentElement;
+    s && (s.classList.contains("form-group-lg") ? c("lg") : s.classList.contains("form-group-sm") && c("sm"));
+  }, []);
+  const m = a(
+    "text-color-gray",
+    typeof e == "string" && "text-italic",
+    t === "sm" && "text-size-10",
+    t === "lg" && "text-size-14",
+    !t && "text-size-12"
+  );
+  if (u && n.htmlFor) {
+    const s = a(
+      !e && "display-inline-block",
+      e && "display-inline-flex flex-wrap justify-content-between width-100pct",
+      l
+    );
     return (
+      // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
+      /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
+        /* @__PURE__ */ r("span", { children: o }),
+        e && /* @__PURE__ */ r("span", { className: m, children: e })
+      ] })
+    );
+  }
+  const x = a(
+    "text-color-dark",
+    "max-width-100pct",
+    t === "sm" && "text-size-10",
+    t === "lg" && "text-size-14",
+    !t && "text-size-12",
+    !e && "display-inline-block",
+    e && "display-inline-flex flex-wrap justify-content-between width-100pct",
+    !l.includes("margin-bottom") && "margin-bottom-5",
+    l
+  );
+  return (
     // @ts-ignore
-    _jsxs("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
+    /* @__PURE__ */ p("div", { ref: i, ...n, className: x, children: [
+      o,
+      e && /* @__PURE__ */ r("span", { className: m, children: e })
+    ] })
+  );
 };
-export default FormLabel;
+export {
+  w as default
+};
+//# sourceMappingURL=FormLabel.js.map

package/components/formLabel/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../../../src/components/formLabel/FormLabel.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ComponentProps, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nexport type FormLabelProps = ComponentProps<'label'> & {\n    /**\n     * Additional supporting text displayed next to the label.\n     */\n    supportingText?: string | React.ReactElement;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst FormLabel = (props: PropsWithChildren<FormLabelProps>) => {\n    const { className = '', children, supportingText, ...remainingProps } = props;\n\n    const elementRef = useRef<HTMLDivElement | HTMLLabelElement>(null);\n\n    const [parentSize, setParentSize] = useState<'lg' | 'sm' | null>(null);\n\n    const isLabel = 'htmlFor' in remainingProps;\n\n    useEffect(() => {\n        if (!elementRef.current) {\n            return;\n        }\n\n        const parent = elementRef.current.parentElement;\n        if (!parent) {\n            return;\n        }\n\n        if (parent.classList.contains('form-group-lg')) {\n            setParentSize('lg');\n        } else if (parent.classList.contains('form-group-sm')) {\n            setParentSize('sm');\n        }\n    }, []);\n\n    const supportingTextClasses = classNames(\n        'text-color-gray',\n        typeof supportingText === 'string' && 'text-italic',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12'\n    );\n\n    if (isLabel && remainingProps.htmlFor) {\n        const labelClasses = classNames(\n            !supportingText && 'display-inline-block',\n            supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n            className\n        );\n\n        return (\n            // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>\n            <label ref={elementRef as React.RefObject<HTMLLabelElement>} {...remainingProps} className={labelClasses}>\n                <span>{children}</span>\n                {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n            </label>\n        );\n    }\n\n    const classes = classNames(\n        'text-color-dark',\n        'max-width-100pct',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12',\n        !supportingText && 'display-inline-block',\n        supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n        !className.includes('margin-bottom') && 'margin-bottom-5',\n        className\n    );\n\n    return (\n        // @ts-ignore\n        <div ref={elementRef} {...remainingProps} className={classes}>\n            {children}\n            {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n        </div>\n    );\n};\n\nexport default FormLabel;\n"],"names":["FormLabel","props","className","children","supportingText","remainingProps","elementRef","useRef","parentSize","setParentSize","useState","isLabel","useEffect","parent","supportingTextClasses","classNames","labelClasses","jsx","classes"],"mappings":";;;AAeA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,gBAAAC,GAAgB,GAAGC,MAAmBJ,GAElEK,IAAaC,EAA0C,IAAI,GAE3D,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI,GAE/DC,IAAU,aAAaN;AAE7B,EAAAO,EAAU,MAAM;AACZ,QAAI,CAACN,EAAW;AACZ;AAGJ,UAAMO,IAASP,EAAW,QAAQ;AAClC,IAAKO,MAIDA,EAAO,UAAU,SAAS,eAAe,IACzCJ,EAAc,IAAI,IACXI,EAAO,UAAU,SAAS,eAAe,KAChDJ,EAAc,IAAI;AAAA,EAE1B,GAAG,CAAA,CAAE;AAEL,QAAMK,IAAwBC;AAAA,IAC1B;AAAA,IACA,OAAOX,KAAmB,YAAY;AAAA,IACtCI,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,EAAA;AAGnB,MAAIG,KAAWN,EAAe,SAAS;AACnC,UAAMW,IAAeD;AAAA,MACjB,CAACX,KAAkB;AAAA,MACnBA,KAAkB;AAAA,MAClBF;AAAA,IAAA;AAGJ;AAAA;AAAA,wBAEK,SAAA,EAAM,KAAKI,GAAkD,GAAGD,GAAgB,WAAWW,GACxF,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAM,UAAAd,GAAS;AAAA,QACfC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,MAAA,EAAA,CAC/E;AAAA;AAAA,EAER;AAEA,QAAMc,IAAUH;AAAA,IACZ;AAAA,IACA;AAAA,IACAP,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,IACf,CAACJ,KAAkB;AAAA,IACnBA,KAAkB;AAAA,IAClB,CAACF,EAAU,SAAS,eAAe,KAAK;AAAA,IACxCA;AAAA,EAAA;AAGJ;AAAA;AAAA,sBAEK,OAAA,EAAI,KAAKI,GAAa,GAAGD,GAAgB,WAAWa,GAChD,UAAA;AAAA,MAAAf;AAAA,MACAC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,EAAA,CAC/E;AAAA;AAER;"}

package/components/formLabel/LabeledElement.d.ts

@@ -1,5 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
-import { type FormLabelProps } from './FormLabel';
+import { default as React, PropsWithChildren } from 'react';
+import { FormLabelProps } from './FormLabel';
 export type LabeledElementProps = {
     /**
      * The text to display for the label.

package/components/formLabel/LabeledElement.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import FormLabel from './FormLabel';
-const LabeledElement = (props) => {
-    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;
-    // Extract and handle the `className` prop separately for the label
-    const { className: labelClassName, ...otherLabelProps } = labelProps;
-    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');
-    return (_jsxs("div", { ...remainingProps, className: classNames('LabeledElement display-flex flex-column', className), children: [_jsx(FormLabel, { htmlFor: htmlFor, ...otherLabelProps, className: combinedLabelClassName, children: label }), children] }));
+import { jsxs as d, jsx as p } from "react/jsx-runtime";
+import e from "classnames";
+import f from "./FormLabel.js";
+const L = (l) => {
+  const { label: a, htmlFor: s, labelProps: m = {}, noGap: o = !1, className: r = "", children: n, ...t } = l, { className: c, ...i } = m, b = e(c, o && "margin-bottom-0");
+  return /* @__PURE__ */ d("div", { ...t, className: e("LabeledElement display-flex flex-column", r), children: [
+    /* @__PURE__ */ p(f, { htmlFor: s, ...i, className: b, children: a }),
+    n
+  ] });
 };
-export default LabeledElement;
+export {
+  L as default
+};
+//# sourceMappingURL=LabeledElement.js.map

package/components/formLabel/LabeledElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledElement.js","sources":["../../../src/components/formLabel/LabeledElement.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport FormLabel, { type FormLabelProps } from './FormLabel';\n\nexport type LabeledElementProps = {\n    /**\n     * The text to display for the label.\n     */\n    label: string | React.ReactElement;\n\n    /**\n     * Optional ID of the element associated with the label.\n     */\n    htmlFor?: string;\n\n    /**\n     * Additional props for the FormLabel, excluding children and htmlFor.\n     */\n    labelProps?: Omit<FormLabelProps, 'children'>;\n\n    /**\n     * If true, removes the bottom margin from the label.\n     *\n     * @default false\n     */\n    noGap?: boolean;\n\n    /**\n     * Additional classes for styling the wrapper.\n     */\n    className?: string;\n};\n\nconst LabeledElement = (props: PropsWithChildren<LabeledElementProps>) => {\n    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;\n\n    // Extract and handle the `className` prop separately for the label\n    const { className: labelClassName, ...otherLabelProps } = labelProps;\n    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');\n\n    return (\n        <div {...remainingProps} className={classNames('LabeledElement display-flex flex-column', className)}>\n            <FormLabel htmlFor={htmlFor} {...otherLabelProps} className={combinedLabelClassName}>\n                {label}\n            </FormLabel>\n            {children}\n        </div>\n    );\n};\n\nexport default LabeledElement;\n"],"names":["LabeledElement","props","label","htmlFor","labelProps","noGap","className","children","remainingProps","labelClassName","otherLabelProps","combinedLabelClassName","classNames","jsxs","jsx","FormLabel"],"mappings":";;;AAmCA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,YAAAC,IAAa,CAAA,GAAI,OAAAC,IAAQ,IAAO,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBP,GAGlG,EAAE,WAAWQ,GAAgB,GAAGC,MAAoBN,GACpDO,IAAyBC,EAAWH,GAAgBJ,KAAS,iBAAiB;AAEpF,SACI,gBAAAQ,EAAC,SAAK,GAAGL,GAAgB,WAAWI,EAAW,2CAA2CN,CAAS,GAC/F,UAAA;AAAA,IAAA,gBAAAQ,EAACC,KAAU,SAAAZ,GAAmB,GAAGO,GAAiB,WAAWC,GACxD,UAAAT,GACL;AAAA,IACCK;AAAA,EAAA,GACL;AAER;"}

package/components/groupedItemList/GroupedItemList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SortDirectionType } from '../../SortUtils';
 export type Group = {
     groupKey: string;

package/components/groupedItemList/GroupedItemList.js

@@ -1,74 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import { naturalSortByProperty, sortByProperty } from '../../SortUtils';
-/**
- * A React component that groups and renders a list of items based on a specified property.
- * The component can be customized to render dividers and list items in different styles.
- *
- * @param {GroupedItemListProps} props - The props for the component.
- * @returns {JSX.Element} The grouped and rendered list component.
- */
-const GroupedItemList = (props) => {
-    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
-    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
-    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
-    listElementClassName, dividerElementClassName, className, } = props;
-    // Default group sorting function or specific function provided
-    const groupSortFn = groupSortFunction
-        ? groupSortFunction
-        : (groups) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);
-    // Default item sorting within groups or specific function provided
-    const itemSortFn = itemSortFunction
-        ? itemSortFunction
-        : (itemsToSort) => sortByProperty(itemsToSort, groupBy, itemSortOrder);
-    // Determine the grouping function based on the type of groupBy
-    // const getGroupKey = (item: T): string => {
-    //     if (typeof groupBy === 'string') {
-    //         if (groupBy === 'name') {
-    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
-    //         }
-    //         return (item as any)[groupBy]?.toString() ?? '';
-    //     } else if (typeof groupBy === 'function') {
-    //         return groupBy(item);
-    //     }
-    //     throw new Error('Please define a "groupBy" property as a string or function.');
-    // };
-    const getGroupKey = typeof groupBy === 'function'
-        ? groupBy
-        : (item) => item[groupBy]?.[0]?.toUpperCase() ?? '';
-    // Group items by the specified property
-    // const allGroups = useMemo(
-    //     () =>
-    //         items.reduce<Record<string, T[]>>((acc, item) => {
-    //             const groupKey = getGroupKey(item);
-    //             if (!acc[groupKey]) {
-    //                 acc[groupKey] = [];
-    //             }
-    //             acc[groupKey].push(item);
-    //             return acc;
-    //         }, {}),
-    //     [items, getGroupKey]
-    // );
-    // Group items by the specified property
-    const groupedItems = useMemo(() => {
-        // Explicitly typing the accumulator as Record<string, T[]>
-        const groups = items.reduce((acc, item) => {
-            const groupKey = getGroupKey(item);
-            if (!acc[groupKey]) {
-                acc[groupKey] = [];
-            }
-            acc[groupKey].push(item);
-            return acc;
-        }, {});
-        return Object.keys(groups).map(groupKey => ({
-            groupKey,
-            items: groups[groupKey],
-        }));
-    }, [items, getGroupKey]);
-    // Assign the specified list element ('div' or 'ul')
-    const ListElement = listElement;
-    // Sort groups using the provided sort function
-    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
-    return (_jsx("div", { className: `grouped-item-list ${className ?? ''}`, children: sortedGroups.map(group => (_jsxs(React.Fragment, { children: [_jsx("div", { className: `group-divider ${dividerElementClassName ?? ''}`, children: renderDivider ? renderDivider(group.groupKey) : group.groupKey }), _jsx(ListElement, { className: listElementClassName, children: itemSortFn(group.items).map(item => renderItem ? (renderItem(item)) : (_jsx(React.Fragment, { children: _jsx("div", { className: 'item-name', children: item.name }) }, item.id ?? crypto.randomUUID()))) })] }, group.groupKey))) }));
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import y, { useMemo as g } from "react";
+import { naturalSortByProperty as B, sortByProperty as C } from "../../utils/SortUtils.js";
+const D = (f) => {
+  const {
+    items: n,
+    groupBy: o = "name",
+    groupSortOrder: h = "asc",
+    // Default to ascending order if not specified
+    groupSortFunction: m,
+    itemSortFunction: i,
+    itemSortOrder: v = "asc",
+    // Default to ascending order if not specified
+    renderDivider: a,
+    renderItem: d,
+    listElement: N = "div",
+    // Default to 'div' if not specified
+    listElementClassName: S,
+    dividerElementClassName: F,
+    className: K
+  } = f, p = m || ((e) => B(e, "groupKey", h)), E = i || ((e) => C(e, o, v)), c = typeof o == "function" ? o : (e) => e[o]?.[0]?.toUpperCase() ?? "", u = g(() => {
+    const e = n.reduce(
+      (r, l) => {
+        const s = c(l);
+        return r[s] || (r[s] = []), r[s].push(l), r;
+      },
+      {}
+    );
+    return Object.keys(e).map((r) => ({
+      groupKey: r,
+      items: e[r]
+    }));
+  }, [n, c]), I = N, j = g(() => p(u), [u, p]);
+  return /* @__PURE__ */ t("div", { className: `grouped-item-list ${K ?? ""}`, children: j.map((e) => /* @__PURE__ */ x(y.Fragment, { children: [
+    /* @__PURE__ */ t("div", { className: `group-divider ${F ?? ""}`, children: a ? a(e.groupKey) : e.groupKey }),
+    /* @__PURE__ */ t(I, { className: S, children: E(e.items).map(
+      (r) => d ? d(r) : /* @__PURE__ */ t(y.Fragment, { children: /* @__PURE__ */ t("div", { className: "item-name", children: r.name }) }, r.id ?? crypto.randomUUID())
+    ) })
+  ] }, e.groupKey)) });
 };
-export default GroupedItemList;
+export {
+  D as default
+};
+//# sourceMappingURL=GroupedItemList.js.map

package/components/groupedItemList/GroupedItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedItemList.js","sources":["../../../src/components/groupedItemList/GroupedItemList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { naturalSortByProperty, sortByProperty, type SortDirectionType } from '../../SortUtils';\n\nexport type Group = {\n    groupKey: string;\n    items: any[];\n};\n\nexport type GroupedItemListProps<T> = {\n    /**\n     * The list of items to be grouped and rendered.\n     *\n     * By default, the component assumes an item object containing an 'id' and 'name' property\n     * plus some other attributes.\n     */\n    items: T[];\n\n    /**\n     * The property of the items to group by as a string, or a custom group function.\n     * Defaults to 'name' if not provided.\n     *\n     * @default 'name'\n     */\n    groupBy?: keyof T | ((item: T) => string);\n\n    /**\n     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.\n     * @default 'asc'.\n     */\n    groupSortOrder?: SortDirectionType;\n\n    /**\n     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.\n     * @default 'asc'.\n     */\n    itemSortOrder?: SortDirectionType;\n\n    /**\n     * Sorting function for the groups.\n     */\n    groupSortFunction?: (groups: Group[]) => Group[];\n\n    /**\n     * Sorting function for the items within each group.\n     */\n    itemSortFunction?: (items: T[]) => T[];\n\n    /**\n     * A custom render function for the group divider.\n     * Receives the group key (e.g., letter or date) as a parameter.\n     */\n    renderDivider?: (groupKey: string) => React.ReactNode;\n\n    /**\n     * A custom render function for individual list items.\n     * Receives an item as a parameter.\n     */\n    renderItem?: (item: T) => React.ReactNode;\n\n    /**\n     * Specifies the HTML element to use for the list inside each group.\n     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.\n     */\n    listElement?: 'div' | 'ul';\n\n    /**\n     * Optional class name for the list element inside each group.\n     * Applied to the `div` or `ul` wrapping the items.\n     */\n    listElementClassName?: string;\n\n    /**\n     * Optional class name for the divider element in each group.\n     * Applied to the `div` wrapping each group divider.\n     */\n    dividerElementClassName?: string;\n\n    /**\n     * Optional class name for the outer wrapper element.\n     * Applied to the outer `div` wrapping the entire component.\n     */\n    className?: string;\n};\n\n/**\n * A React component that groups and renders a list of items based on a specified property.\n * The component can be customized to render dividers and list items in different styles.\n *\n * @param {GroupedItemListProps} props - The props for the component.\n * @returns {JSX.Element} The grouped and rendered list component.\n */\nconst GroupedItemList = <T,>(props: GroupedItemListProps<T>) => {\n    const {\n        items,\n        groupBy = 'name',\n        groupSortOrder = 'asc', // Default to ascending order if not specified\n        groupSortFunction,\n        itemSortFunction,\n        itemSortOrder = 'asc', // Default to ascending order if not specified\n        renderDivider,\n        renderItem,\n        listElement = 'div', // Default to 'div' if not specified\n        listElementClassName,\n        dividerElementClassName,\n        className,\n    } = props;\n\n    // Default group sorting function or specific function provided\n    const groupSortFn = groupSortFunction\n        ? groupSortFunction\n        : (groups: Group[]) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);\n\n    // Default item sorting within groups or specific function provided\n    const itemSortFn = itemSortFunction\n        ? itemSortFunction\n        : (itemsToSort: T[]) => sortByProperty(itemsToSort, groupBy as keyof T, itemSortOrder);\n\n    // Determine the grouping function based on the type of groupBy\n    // const getGroupKey = (item: T): string => {\n    //     if (typeof groupBy === 'string') {\n    //         if (groupBy === 'name') {\n    //             return (item as any).name?.[0]?.toUpperCase() ?? '';\n    //         }\n    //         return (item as any)[groupBy]?.toString() ?? '';\n    //     } else if (typeof groupBy === 'function') {\n    //         return groupBy(item);\n    //     }\n    //     throw new Error('Please define a \"groupBy\" property as a string or function.');\n    // };\n\n    const getGroupKey =\n        typeof groupBy === 'function'\n            ? groupBy\n            : (item: T) => ((item as any)[groupBy] as string)?.[0]?.toUpperCase() ?? '';\n\n    // Group items by the specified property\n    // const allGroups = useMemo(\n    //     () =>\n    //         items.reduce<Record<string, T[]>>((acc, item) => {\n    //             const groupKey = getGroupKey(item);\n    //             if (!acc[groupKey]) {\n    //                 acc[groupKey] = [];\n    //             }\n    //             acc[groupKey].push(item);\n    //             return acc;\n    //         }, {}),\n    //     [items, getGroupKey]\n    // );\n\n    // Group items by the specified property\n    const groupedItems = useMemo(() => {\n        // Explicitly typing the accumulator as Record<string, T[]>\n        const groups: Record<string, T[]> = items.reduce(\n            (acc: Record<string, T[]>, item: T) => {\n                const groupKey = getGroupKey(item);\n                if (!acc[groupKey]) {\n                    acc[groupKey] = [];\n                }\n                acc[groupKey].push(item);\n                return acc;\n            },\n            {} as Record<string, T[]>\n        );\n\n        return Object.keys(groups).map(groupKey => ({\n            groupKey,\n            items: groups[groupKey],\n        }));\n    }, [items, getGroupKey]);\n\n    // Assign the specified list element ('div' or 'ul')\n    const ListElement = listElement;\n\n    // Sort groups using the provided sort function\n    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);\n\n    return (\n        <div className={`grouped-item-list ${className ?? ''}`}>\n            {sortedGroups.map(group => (\n                <React.Fragment key={group.groupKey}>\n                    <div className={`group-divider ${dividerElementClassName ?? ''}`}>\n                        {renderDivider ? renderDivider(group.groupKey) : group.groupKey}\n                    </div>\n                    <ListElement className={listElementClassName}>\n                        {itemSortFn(group.items).map(item =>\n                            renderItem ? (\n                                renderItem(item)\n                            ) : (\n                                <React.Fragment key={(item as any).id ?? crypto.randomUUID()}>\n                                    <div className='item-name'>{(item as any).name}</div>\n                                </React.Fragment>\n                            )\n                        )}\n                    </ListElement>\n                </React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default GroupedItemList;\n"],"names":["GroupedItemList","props","items","groupBy","groupSortOrder","groupSortFunction","itemSortFunction","itemSortOrder","renderDivider","renderItem","listElement","listElementClassName","dividerElementClassName","className","groupSortFn","groups","naturalSortByProperty","itemSortFn","itemsToSort","sortByProperty","getGroupKey","item","groupedItems","useMemo","acc","groupKey","ListElement","sortedGroups","jsx","group","jsxs","React"],"mappings":";;;AA4FA,MAAMA,IAAkB,CAAKC,MAAmC;AAC5D,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,gBAAAC,IAAiB;AAAA;AAAA,IACjB,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC,IAAc;AAAA;AAAA,IACd,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAZ,GAGEa,IAAcT,MAEd,CAACU,MAAoBC,EAAsBD,GAAQ,YAAYX,CAAc,IAG7Ea,IAAaX,MAEb,CAACY,MAAqBC,EAAeD,GAAaf,GAAoBI,CAAa,IAenFa,IACF,OAAOjB,KAAY,aACbA,IACA,CAACkB,MAAcA,EAAalB,CAAO,IAAe,CAAC,GAAG,iBAAiB,IAiB3EmB,IAAeC,EAAQ,MAAM;AAE/B,UAAMR,IAA8Bb,EAAM;AAAA,MACtC,CAACsB,GAA0BH,MAAY;AACnC,cAAMI,IAAWL,EAAYC,CAAI;AACjC,eAAKG,EAAIC,CAAQ,MACbD,EAAIC,CAAQ,IAAI,CAAA,IAEpBD,EAAIC,CAAQ,EAAE,KAAKJ,CAAI,GAChBG;AAAA,MACX;AAAA,MACA,CAAA;AAAA,IAAC;AAGL,WAAO,OAAO,KAAKT,CAAM,EAAE,IAAI,CAAAU,OAAa;AAAA,MACxC,UAAAA;AAAA,MACA,OAAOV,EAAOU,CAAQ;AAAA,IAAA,EACxB;AAAA,EACN,GAAG,CAACvB,GAAOkB,CAAW,CAAC,GAGjBM,IAAchB,GAGdiB,IAAeJ,EAAQ,MAAMT,EAAYQ,CAAY,GAAG,CAACA,GAAcR,CAAW,CAAC;AAEzF,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAW,qBAAqBf,KAAa,EAAE,IAC/C,UAAAc,EAAa,IAAI,CAAAE,MACd,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAW,iBAAiBhB,KAA2B,EAAE,IACzD,UAAAJ,IAAgBA,EAAcqB,EAAM,QAAQ,IAAIA,EAAM,UAC3D;AAAA,sBACCH,GAAA,EAAY,WAAWf,GACnB,UAAAM,EAAWY,EAAM,KAAK,EAAE;AAAA,MAAI,CAAAR,MACzBZ,IACIA,EAAWY,CAAI,IAEf,gBAAAO,EAACG,EAAM,UAAN,EACG,UAAA,gBAAAH,EAAC,SAAI,WAAU,aAAc,YAAa,KAAA,CAAK,EAAA,GAD7BP,EAAa,MAAM,OAAO,YAEhD;AAAA,IAAA,EAER,CACJ;AAAA,EAAA,EAAA,GAdiBQ,EAAM,QAe3B,CACH,GACL;AAER;"}

package/components/licensePlate/LicensePlate.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type LicensePlateProps = {
     /**
      * The country code.