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

package/components/dataTabs/DataTabHeader.js

@@ -1,10 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-const DataTabHeader = (props) => {
-    const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
-    const [isHovering, setIsHovering] = useState(false);
-    const tabClassNames = classNames('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
-    return (_jsxs("li", { className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [title, _jsx("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }, tabKey));
+import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { useState as T } from "react";
+import H from "classnames";
+const $ = (o) => {
+  const {
+    tabKey: s,
+    title: i,
+    isActive: a,
+    isFirstTab: l,
+    isLastTab: m,
+    onSelectTab: c,
+    tabFirstChildClassName: n,
+    tabLastChildClassName: b,
+    tabClassName: N,
+    tabHoverClassName: C,
+    tabActiveClassName: v,
+    arrowClassName: d,
+    className: e
+  } = o, [t, r] = T(!1), u = H(
+    "DataTab",
+    "tab",
+    l && n,
+    m && b,
+    !t && !a && N,
+    t && !a && C,
+    a && `active ${v}`,
+    !a && "cursor-pointer",
+    e && e
+  );
+  return /* @__PURE__ */ f(
+    "li",
+    {
+      className: u,
+      onClick: c,
+      "data-tabkey": s,
+      onMouseEnter: () => r(!0),
+      onMouseLeave: () => r(!1),
+      children: [
+        i,
+        /* @__PURE__ */ p("div", { className: `arrow ${d} ${a ? "in" : ""}` })
+      ]
+    },
+    s
+  );
 };
-export default DataTabHeader;
+export {
+  $ as default
+};
+//# sourceMappingURL=DataTabHeader.js.map

package/components/dataTabs/DataTabHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTabHeader.js","sources":["../../../src/components/dataTabs/DataTabHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\n\nexport type DataTabHeaderProps = {\n    isActive?: boolean;\n    tabKey: string;\n    title: React.ReactNode;\n    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;\n    isFirstTab?: boolean;\n    isLastTab?: boolean;\n    tabFirstChildClassName?: string;\n    tabLastChildClassName?: string;\n    tabClassName?: string;\n    tabHoverClassName?: string;\n    tabActiveClassName?: string;\n    arrowClassName?: string;\n    className?: string;\n};\n\nconst DataTabHeader = (props: DataTabHeaderProps) => {\n    const {\n        tabKey,\n        title,\n        isActive,\n        isFirstTab,\n        isLastTab,\n        onSelectTab,\n        tabFirstChildClassName,\n        tabLastChildClassName,\n        tabClassName,\n        tabHoverClassName,\n        tabActiveClassName,\n        arrowClassName,\n        className,\n    } = props;\n\n    const [isHovering, setIsHovering] = useState(false);\n\n    const tabClassNames = classNames(\n        'DataTab',\n        'tab',\n        isFirstTab && tabFirstChildClassName,\n        isLastTab && tabLastChildClassName,\n        !isHovering && !isActive && tabClassName,\n        isHovering && !isActive && tabHoverClassName,\n        isActive && `active ${tabActiveClassName}`,\n        !isActive && 'cursor-pointer',\n        className && className\n    );\n\n    return (\n        <li\n            key={tabKey}\n            className={tabClassNames}\n            onClick={onSelectTab}\n            data-tabkey={tabKey}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n        >\n            {title}\n            <div className={`arrow ${arrowClassName} ${isActive ? 'in' : ''}`} />\n        </li>\n    );\n};\n\nexport default DataTabHeader;\n"],"names":["DataTabHeader","props","tabKey","title","isActive","isFirstTab","isLastTab","onSelectTab","tabFirstChildClassName","tabLastChildClassName","tabClassName","tabHoverClassName","tabActiveClassName","arrowClassName","className","isHovering","setIsHovering","useState","tabClassNames","classNames","jsxs","jsx"],"mappings":";;;AAoBA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAb,GAEE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACAd,KAAcG;AAAA,IACdF,KAAaG;AAAA,IACb,CAACM,KAAc,CAACX,KAAYM;AAAA,IAC5BK,KAAc,CAACX,KAAYO;AAAA,IAC3BP,KAAY,UAAUQ,CAAkB;AAAA,IACxC,CAACR,KAAY;AAAA,IACbU,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAWF;AAAA,MACX,SAASX;AAAA,MACT,eAAaL;AAAA,MACb,cAAc,MAAMc,EAAc,EAAI;AAAA,MACtC,cAAc,MAAMA,EAAc,EAAK;AAAA,MAEtC,UAAA;AAAA,QAAAb;AAAA,QACD,gBAAAkB,EAAC,SAAI,WAAW,SAASR,CAAc,IAAIT,IAAW,OAAO,EAAE,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAR9DF;AAAA,EAAA;AAWjB;"}

package/components/dataTabs/DataTabs.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren } from 'react';
 export type DataTabsProps = {
     /**
      * Sets key and id.

package/components/dataTabs/DataTabs.js

@@ -1,48 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { AnimatePresence } from 'motion/react';
-import DataTabHeader from "./DataTabHeader.js";
-const getFirstTabKey = (children) => {
-    const [firstItem] = children;
-    return firstItem?.props.tabKey;
-};
-const DataTabs = (props) => {
-    const { activeKey = '', bordered = true, className: wrapperClassName, commonTabContent, disableTransition = false, arrowClassName = 'bg-highlight-dark border-color-transparent', onSelectTab = () => { }, tabActiveClassName = 'bg-highlight-dark text-color-white', tabClassName = '', tabContentClassName = '', tabFirstChildClassName = '', tabHoverClassName = 'bg-highlight-decent text-color-darkest', tabLastChildClassName = '', tabsWrapperClassName = '', vertical = false, children, ...remainingProps } = props;
-    const [internalActiveKey, setInternalActiveKey] = useState(activeKey || getFirstTabKey(React.Children.toArray(children)));
-    // Update internal activeKey when props change
-    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);
-    if (activeKey !== previousActiveKey) {
-        activeKey && setInternalActiveKey(activeKey);
-        setPreviousActiveKey(activeKey);
-    }
-    const handleSelectTab = (event) => {
-        onSelectTab(event.currentTarget?.getAttribute('data-tabkey'));
-    };
-    const wrapperClassNames = classNames('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
-    const enrichChildren = () => {
-        if (disableTransition) {
-            return React.Children.map(children, child => {
-                if (!child) {
-                    return null;
-                }
-                return React.cloneElement(child, {
-                    active: child.props.tabKey === internalActiveKey,
-                    disableTransition,
-                });
-            });
+import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import r, { useState as m } from "react";
+import E from "classnames";
+import { AnimatePresence as H } from "motion/react";
+import I from "./DataTabHeader.js";
+const W = (i) => {
+  const [a] = i;
+  return a?.props.tabKey;
+}, G = (i) => {
+  const {
+    activeKey: a = "",
+    bordered: d = !0,
+    className: p,
+    commonTabContent: c,
+    disableTransition: l = !1,
+    arrowClassName: h = "bg-highlight-dark border-color-transparent",
+    onSelectTab: C = () => {
+    },
+    tabActiveClassName: u = "bg-highlight-dark text-color-white",
+    tabClassName: v = "",
+    tabContentClassName: N = "",
+    tabFirstChildClassName: T = "",
+    tabHoverClassName: f = "bg-highlight-decent text-color-darkest",
+    tabLastChildClassName: g = "",
+    tabsWrapperClassName: y = "",
+    vertical: A = !1,
+    children: s,
+    ...K
+  } = i, [o, D] = m(
+    a || W(r.Children.toArray(s))
+  ), [w, x] = m(a);
+  a !== w && (a && D(a), x(a));
+  const k = (t) => {
+    C(t.currentTarget?.getAttribute("data-tabkey"));
+  }, S = E(
+    "DataTabsContainer",
+    d && "DataTab-bordered",
+    p,
+    A ? "DataTabs-vertical" : "DataTabs-horizontal"
+  ), F = () => {
+    if (l)
+      return r.Children.map(s, (e) => e ? r.cloneElement(e, {
+        active: e.props.tabKey === o,
+        disableTransition: l
+      }) : null);
+    const t = r.Children.toArray(s).filter((e) => e.props.tabKey === o).map((e) => r.cloneElement(e, { active: !0, disableTransition: l }));
+    return /* @__PURE__ */ n(H, { initial: !1, mode: "wait", children: t });
+  };
+  return /* @__PURE__ */ j("div", { ...K, className: S, children: [
+    /* @__PURE__ */ n("div", { className: `DataTabsWrapper ${y}`, children: /* @__PURE__ */ n("ul", { className: "DataTabs", role: "tabList", children: r.Children.map(s, (t, e) => {
+      if (!t)
+        return null;
+      const { tabKey: b, title: L, className: P } = t.props;
+      return /* @__PURE__ */ n(
+        I,
+        {
+          isActive: b === o,
+          tabKey: b,
+          title: L,
+          onSelectTab: k,
+          isFirstTab: e === 0,
+          isLastTab: !!(s?.length - 1),
+          tabFirstChildClassName: T,
+          tabLastChildClassName: g,
+          tabActiveClassName: u,
+          tabClassName: v,
+          tabHoverClassName: f,
+          arrowClassName: h,
+          className: P
         }
-        const enhancedChildren = React.Children.toArray(children)
-            .filter(child => child.props.tabKey === internalActiveKey)
-            .map(child => React.cloneElement(child, { active: true, disableTransition }));
-        return (_jsx(AnimatePresence, { initial: false, mode: 'wait', children: enhancedChildren }));
-    };
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: _jsx("ul", { className: 'DataTabs', role: 'tabList', children: React.Children.map(children, (child, index) => {
-                        if (!child) {
-                            return null;
-                        }
-                        const { tabKey, title, className } = child.props;
-                        return (_jsx(DataTabHeader, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!(children?.length - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
-                    }) }) }), _jsx("div", { className: `tab-content ${tabContentClassName}`, role: 'tabpanel', children: commonTabContent ? commonTabContent : enrichChildren() })] }));
+      );
+    }) }) }),
+    /* @__PURE__ */ n("div", { className: `tab-content ${N}`, role: "tabpanel", children: c || F() })
+  ] });
+};
+export {
+  G as default
 };
-export default DataTabs;
+//# sourceMappingURL=DataTabs.js.map

package/components/dataTabs/DataTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence } from 'motion/react';\n\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":"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"}

package/components/datepicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import type { Moment } from 'moment';
-import Datetime, { type DatetimepickerProps } from 'react-datetime';
+import { default as React } from 'react';
+import { Moment } from 'moment';
+import { default as Datetime, DatetimepickerProps } from 'react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
     /**
      * An id used for the internal input element.

package/components/datepicker/DatePicker.js

@@ -1,36 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
-import classNames from 'classnames';
-import Datetime from 'react-datetime';
-import { noop } from 'es-toolkit/function';
-const DEFAULT_LOCALE = 'en-GB';
-const DEFAULT_MIN_WIDTH = 0;
-const DatePicker = forwardRef((props, ref) => {
-    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className, ...remainingProp } = props;
-    const [hasError, setHasError] = useState(false);
-    const validateDate = (dateToValidate) => {
-        // If the entered date complies with the defined dateFormat, the Datetime component
-        // returns a moment object, otherwise the return value is a string.
-        // Note, using a isValid() function from moment or the Date object itself will result in
-        // different outcome in various browsers.
-        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults
-        // to "01/01/2001" whereas in Firefox it is an invalid date.
-        // The solution is to compare the entered value to the date format which is done by React Datetime.
-        const isDateObject = typeof dateToValidate === 'object';
-        return dateValidation ? dateValidation(dateToValidate) : isDateObject;
-    };
-    const handleChange = (date) => {
-        const isValid = mandatory ? validateDate(date) : true;
-        setHasError(!isValid);
-        onChange(date, isValid);
-    };
-    const classes = classNames('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
-    // This way we can expose the "id" as top level prop and not as part of the inputProps which
-    // makes the use of the id much more convenient
-    const enhancedInputProps = { id, ...inputProps };
-    return (_jsx(Datetime
-    // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
-    // ref={ref}
-    , { ...remainingProp, locale: locale, clearableInput: clearableInput, closeOnSelect: closeOnSelect, onChange: handleChange, minWidth: minWidth, inputProps: enhancedInputProps, className: classes }));
+import { jsx as C } from "react/jsx-runtime";
+import { forwardRef as I, useState as L } from "react";
+import N from "classnames";
+import O from "react-datetime";
+import { noop as A } from "es-toolkit/function";
+const _ = "en-GB", k = 0, T = I((a, x) => {
+  const {
+    id: s,
+    dropup: n = !1,
+    alignRight: c = !1,
+    locale: i = _,
+    minWidth: p = k,
+    onChange: l = A,
+    mandatory: m = !0,
+    dateValidation: r,
+    clearableInput: f = !1,
+    closeOnSelect: u = !0,
+    inputProps: d,
+    className: o,
+    ...h
+  } = a, [g, D] = L(!1), P = (e) => r ? r(e) : typeof e == "object", E = (e) => {
+    const t = m ? P(e) : !0;
+    D(!t), l(e, t);
+  }, b = N(
+    "DatePicker",
+    "form-group",
+    g && "has-error",
+    n && "dropup",
+    c && "align-right",
+    o && o
+  ), j = { id: s, ...d };
+  return /* @__PURE__ */ C(
+    O,
+    {
+      ...h,
+      locale: i,
+      clearableInput: f,
+      closeOnSelect: u,
+      onChange: E,
+      minWidth: p,
+      inputProps: j,
+      className: b
+    }
+  );
 });
-export default DatePicker;
+export {
+  T as default
+};
+//# sourceMappingURL=DatePicker.js.map

package/components/datepicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport type { Moment } from 'moment';\nimport Datetime, { type DatetimepickerProps } from 'react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx","Datetime"],"mappings":";;;;;AAOA,MAAMA,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAQ;AAC3D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MAGI,GAAGb;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}

package/components/datepicker/DateRangePicker.d.ts

@@ -1,3 +1,6 @@
+import { Component } from 'react';
+import { default as moment } from 'moment';
+import { default as PropTypes } from 'prop-types';
 declare const _default: any;
 export default _default;
 export { DateRangePicker as DateRangePickerPure };
@@ -116,8 +119,6 @@ declare namespace DateRangePicker {
     export { propTypes };
     export { defaultProps };
 }
-import { Component } from 'react';
-import moment from 'moment';
 declare namespace propTypes {
     let startValue: PropTypes.Requireable<object>;
     let endValue: PropTypes.Requireable<object>;
@@ -210,4 +211,3 @@ declare namespace defaultProps {
     export function onClear_1(): undefined;
     export { onClear_1 as onClear };
 }
-import PropTypes from 'prop-types';