@sap-ux/ui-components 1.14.0 → 1.14.1

package/dist/components/UICreateSelect/UICreateSelect.js

@@ -1,173 +1,173 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UICreateSelect = void 0;
-const react_1 = __importDefault(require("react"));
-const react_select_1 = require("react-select");
-const creatable_1 = __importDefault(require("react-select/creatable"));
-const UIIcon_1 = require("../UIIcon");
-const UILoader_1 = require("../UILoader");
-const UIContextualMenu_1 = require("../UIContextualMenu");
-require("./UICreateSelect.scss");
-const UIInput_1 = require("../UIInput");
-/**
- * Return a custom dropdown indicator component to be used in the select component.
- *
- * @param {DropdownIndicatorProps<UICreateSelectOptionEntry>} props
- * @returns {JSX.Element}
- */
-const DropdownIndicator = (props) => {
-    return (react_1.default.createElement(react_select_1.components.DropdownIndicator, { ...props },
-        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-dropdown", iconName: "ArrowDown" })));
-};
-/**
- * Return a custom clear indicator component to be used in the select component.
- *
- * @param {ClearIndicatorProps<UICreateSelectOptionEntry, true>} props
- * @returns {JSX.Element}
- */
-const ClearIndicator = (props) => {
-    return (react_1.default.createElement(react_select_1.components.ClearIndicator, { ...props },
-        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-clear", iconName: "Clear" })));
-};
-/**
- * Return a custom loading indicator component to be used in the select component.
- *
- * @param {LoadingIndicatorProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} _props
- * @returns {JSX.Element}
- */
-const LoadingIndicator = (_props) => {
-    return (react_1.default.createElement("div", { className: "ui-create-select-indicator-loading" },
-        react_1.default.createElement(UILoader_1.UILoader, { className: "uiLoaderXSmall", labelPosition: "right" })));
-};
-/**
- * Return a custom option component to be used in the select component.
- *
- * @param {OptionProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} props
- * @returns {JSX.Element}
- */
-const Option = (props) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        !props?.data?.__isNew__ && (react_1.default.createElement(react_select_1.components.Option, { ...props },
-            react_1.default.createElement(UIContextualMenu_1.UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
-        props?.data?.__isNew__ && react_1.default.createElement(react_select_1.components.Option, { ...props })));
-};
-const getBackgroundColor = (state) => {
-    let backgroundColor = 'transparent';
-    if (state.isSelected) {
-        backgroundColor =
-            'var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-quickInputList-focusBackground))';
-    }
-    if (state.isFocused && !state.isSelected) {
-        backgroundColor = 'var(--vscode-list-hoverBackground)';
-    }
-    return backgroundColor;
-};
-/**
- * Return a UICreateSelect component.
- *
- * @param {CreatableProps} props to be passed to the component.
- * @returns {JSX.Element}
- */
-const UICreateSelect = (props) => {
-    const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
-    return (react_1.default.createElement(creatable_1.default, { ...props, ref: props.creatableRef, className: "ui-create-select", classNamePrefix: "ui-create-select", openMenuOnFocus: false, createOptionPosition: "first", allowCreateWhileLoading: true, formatOptionLabel: (option) => option.label, formatCreateLabel: formatCreateLabel, components: { ClearIndicator, DropdownIndicator, LoadingIndicator, Option }, unstyled: true, styles: {
-            control: (baseStyles, state) => ({
-                ...baseStyles,
-                background: 'var(--vscode-input-background)',
-                height: '26px',
-                maxHeight: '26px',
-                minHeight: '26px',
-                padding: '0px 0px 0px 8px;',
-                boxShadow: 'none',
-                boxSizing: 'border-box',
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                borderColor: state.isFocused ? 'var(--vscode-focusBorder)' : 'var(--vscode-editorWidget-border)',
-                color: 'var(--vscode-input-foreground)',
-                borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
-                '&:hover': {
-                    borderColor: 'var(--vscode-focusBorder)'
-                }
-            }),
-            input: (baseStyles, _state) => ({
-                ...baseStyles,
-                color: 'var(--vscode-input-foreground)',
-                background: 'transparent',
-                fontFamily: 'var(--vscode-font-family)',
-                fontSize: '13px',
-                fontWeight: 'normal',
-                minHeight: 'unset',
-                padding: '1px 0px 1px 1px',
-                outline: 0
-            }),
-            menu: (baseStyles, _state) => ({
-                ...baseStyles,
-                background: 'var(--vscode-menu-background, var(--vscode-input-background))',
-                border: '1px solid var(--vscode-focusBorder)',
-                boxSizing: 'border-box',
-                margin: '0px',
-                borderRadius: 0
-            }),
-            option: (baseStyles, state) => ({
-                ...baseStyles,
-                fontFamily: 'var(--vscode-font-family)',
-                fontWeight: 'var(--vscode-font-weight)',
-                minHeight: '22px',
-                height: '22px',
-                lineHeight: '22px',
-                color: state.isSelected
-                    ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
-                    : 'var(--vscode-editorSuggestWidget-foreground)',
-                backgroundColor: getBackgroundColor(state),
-                letterSpacing: 'normal',
-                border: '0',
-                padding: '0px 8px',
-                fontSize: '13px',
-                '&:hover': {
-                    backgroundColor: !state.isSelected
-                        ? 'var(--vscode-list-hoverBackground)'
-                        : getBackgroundColor(state),
-                    color: state.isSelected
-                        ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
-                        : 'var(--vscode-editorSuggestWidget-foreground)',
-                    cursor: 'pointer'
-                }
-            }),
-            placeholder: (baseStyles, _state) => ({
-                ...baseStyles,
-                fontSize: '13px',
-                fontWeight: 'normal',
-                fontFamily: 'var(--vscode-font-family)',
-                color: 'var(--vscode-input-placeholderForeground)'
-            }),
-            singleValue: (baseStyles, _state) => ({
-                ...baseStyles,
-                color: 'var(--vscode-input-foreground)',
-                background: 'transparent',
-                fontFamily: 'var(--vscode-font-family)',
-                fontSize: '13px',
-                fontWeight: 'normal',
-                minHeight: 'unset',
-                padding: '1px 0px 1px 1px',
-                outline: 0
-            }),
-            valueContainer: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
-            indicatorsContainer: (baseStyles, _state) => ({
-                ...baseStyles,
-                padding: '0px 5px 0px 0px',
-                cursor: 'pointer'
-            }),
-            indicatorSeparator: (baseStyles, _state) => ({ ...baseStyles, display: 'none' }),
-            dropdownIndicator: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
-            clearIndicator: (baseStyles, _state) => ({
-                ...baseStyles,
-                padding: '0px',
-                cursor: 'pointer'
-            })
-        } }));
-};
-exports.UICreateSelect = UICreateSelect;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UICreateSelect = void 0;
+const react_1 = __importDefault(require("react"));
+const react_select_1 = require("react-select");
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const UIIcon_1 = require("../UIIcon");
+const UILoader_1 = require("../UILoader");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+require("./UICreateSelect.scss");
+const UIInput_1 = require("../UIInput");
+/**
+ * Return a custom dropdown indicator component to be used in the select component.
+ *
+ * @param {DropdownIndicatorProps<UICreateSelectOptionEntry>} props
+ * @returns {JSX.Element}
+ */
+const DropdownIndicator = (props) => {
+    return (react_1.default.createElement(react_select_1.components.DropdownIndicator, { ...props },
+        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-dropdown", iconName: "ArrowDown" })));
+};
+/**
+ * Return a custom clear indicator component to be used in the select component.
+ *
+ * @param {ClearIndicatorProps<UICreateSelectOptionEntry, true>} props
+ * @returns {JSX.Element}
+ */
+const ClearIndicator = (props) => {
+    return (react_1.default.createElement(react_select_1.components.ClearIndicator, { ...props },
+        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-clear", iconName: "Clear" })));
+};
+/**
+ * Return a custom loading indicator component to be used in the select component.
+ *
+ * @param {LoadingIndicatorProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} _props
+ * @returns {JSX.Element}
+ */
+const LoadingIndicator = (_props) => {
+    return (react_1.default.createElement("div", { className: "ui-create-select-indicator-loading" },
+        react_1.default.createElement(UILoader_1.UILoader, { className: "uiLoaderXSmall", labelPosition: "right" })));
+};
+/**
+ * Return a custom option component to be used in the select component.
+ *
+ * @param {OptionProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} props
+ * @returns {JSX.Element}
+ */
+const Option = (props) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !props?.data?.__isNew__ && (react_1.default.createElement(react_select_1.components.Option, { ...props },
+            react_1.default.createElement(UIContextualMenu_1.UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
+        props?.data?.__isNew__ && react_1.default.createElement(react_select_1.components.Option, { ...props })));
+};
+const getBackgroundColor = (state) => {
+    let backgroundColor = 'transparent';
+    if (state.isSelected) {
+        backgroundColor =
+            'var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-quickInputList-focusBackground))';
+    }
+    if (state.isFocused && !state.isSelected) {
+        backgroundColor = 'var(--vscode-list-hoverBackground)';
+    }
+    return backgroundColor;
+};
+/**
+ * Return a UICreateSelect component.
+ *
+ * @param {CreatableProps} props to be passed to the component.
+ * @returns {JSX.Element}
+ */
+const UICreateSelect = (props) => {
+    const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
+    return (react_1.default.createElement(creatable_1.default, { ...props, ref: props.creatableRef, className: "ui-create-select", classNamePrefix: "ui-create-select", openMenuOnFocus: false, createOptionPosition: "first", allowCreateWhileLoading: true, formatOptionLabel: (option) => option.label, formatCreateLabel: formatCreateLabel, components: { ClearIndicator, DropdownIndicator, LoadingIndicator, Option }, unstyled: true, styles: {
+            control: (baseStyles, state) => ({
+                ...baseStyles,
+                background: 'var(--vscode-input-background)',
+                height: '26px',
+                maxHeight: '26px',
+                minHeight: '26px',
+                padding: '0px 0px 0px 8px;',
+                boxShadow: 'none',
+                boxSizing: 'border-box',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: state.isFocused ? 'var(--vscode-focusBorder)' : 'var(--vscode-editorWidget-border)',
+                color: 'var(--vscode-input-foreground)',
+                borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
+                '&:hover': {
+                    borderColor: 'var(--vscode-focusBorder)'
+                }
+            }),
+            input: (baseStyles, _state) => ({
+                ...baseStyles,
+                color: 'var(--vscode-input-foreground)',
+                background: 'transparent',
+                fontFamily: 'var(--vscode-font-family)',
+                fontSize: '13px',
+                fontWeight: 'normal',
+                minHeight: 'unset',
+                padding: '1px 0px 1px 1px',
+                outline: 0
+            }),
+            menu: (baseStyles, _state) => ({
+                ...baseStyles,
+                background: 'var(--vscode-menu-background, var(--vscode-input-background))',
+                border: '1px solid var(--vscode-focusBorder)',
+                boxSizing: 'border-box',
+                margin: '0px',
+                borderRadius: 0
+            }),
+            option: (baseStyles, state) => ({
+                ...baseStyles,
+                fontFamily: 'var(--vscode-font-family)',
+                fontWeight: 'var(--vscode-font-weight)',
+                minHeight: '22px',
+                height: '22px',
+                lineHeight: '22px',
+                color: state.isSelected
+                    ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
+                    : 'var(--vscode-editorSuggestWidget-foreground)',
+                backgroundColor: getBackgroundColor(state),
+                letterSpacing: 'normal',
+                border: '0',
+                padding: '0px 8px',
+                fontSize: '13px',
+                '&:hover': {
+                    backgroundColor: !state.isSelected
+                        ? 'var(--vscode-list-hoverBackground)'
+                        : getBackgroundColor(state),
+                    color: state.isSelected
+                        ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
+                        : 'var(--vscode-editorSuggestWidget-foreground)',
+                    cursor: 'pointer'
+                }
+            }),
+            placeholder: (baseStyles, _state) => ({
+                ...baseStyles,
+                fontSize: '13px',
+                fontWeight: 'normal',
+                fontFamily: 'var(--vscode-font-family)',
+                color: 'var(--vscode-input-placeholderForeground)'
+            }),
+            singleValue: (baseStyles, _state) => ({
+                ...baseStyles,
+                color: 'var(--vscode-input-foreground)',
+                background: 'transparent',
+                fontFamily: 'var(--vscode-font-family)',
+                fontSize: '13px',
+                fontWeight: 'normal',
+                minHeight: 'unset',
+                padding: '1px 0px 1px 1px',
+                outline: 0
+            }),
+            valueContainer: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
+            indicatorsContainer: (baseStyles, _state) => ({
+                ...baseStyles,
+                padding: '0px 5px 0px 0px',
+                cursor: 'pointer'
+            }),
+            indicatorSeparator: (baseStyles, _state) => ({ ...baseStyles, display: 'none' }),
+            dropdownIndicator: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
+            clearIndicator: (baseStyles, _state) => ({
+                ...baseStyles,
+                padding: '0px',
+                cursor: 'pointer'
+            })
+        } }));
+};
+exports.UICreateSelect = UICreateSelect;
 //# sourceMappingURL=UICreateSelect.js.map

package/dist/components/UICreateSelect/index.d.ts

@@ -1,2 +1,2 @@
-export * from './UICreateSelect';
+export * from './UICreateSelect';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/UICreateSelect/index.js

@@ -1,18 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./UICreateSelect"), exports);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UICreateSelect"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/UIDatePicker/UIDatePicker.d.ts

@@ -1,50 +1,50 @@
-import React from 'react';
-import type { ITextField } from '../UIInput';
-import './UIDatePicker.scss';
-export type UIDatePickerProps = {
-    componentRef?: React.RefObject<ITextField>;
-    errorMessage?: string | JSX.Element;
-    defaultValue?: string;
-    dateOnly?: boolean;
-    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    onClick?: (event: React.MouseEvent) => void;
-};
-/**
- * UIDatePicker component.
- *
- * @exports
- * @class {UIDatePicker}
- * @extends {React.Component<UIDatePickerProps>}
- */
-export declare class UIDatePicker extends React.Component<UIDatePickerProps> {
-    state: {
-        value: string;
-    };
-    private readonly dateRegex;
-    private readonly dateTimeRegex;
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIDatePickerProps} props
-     */
-    constructor(props: UIDatePickerProps);
-    /**
-     * On input change event.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     * @param {string} newValue
-     */
-    private onInputChange;
-    /**
-     * On Date picker change.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     */
-    private onPickerChange;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { ITextField } from '../UIInput';
+import './UIDatePicker.scss';
+export type UIDatePickerProps = {
+    componentRef?: React.RefObject<ITextField>;
+    errorMessage?: string | JSX.Element;
+    defaultValue?: string;
+    dateOnly?: boolean;
+    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent) => void;
+};
+/**
+ * UIDatePicker component.
+ *
+ * @exports
+ * @class {UIDatePicker}
+ * @extends {React.Component<UIDatePickerProps>}
+ */
+export declare class UIDatePicker extends React.Component<UIDatePickerProps> {
+    state: {
+        value: string;
+    };
+    private readonly dateRegex;
+    private readonly dateTimeRegex;
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIDatePickerProps} props
+     */
+    constructor(props: UIDatePickerProps);
+    /**
+     * On input change event.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     * @param {string} newValue
+     */
+    private onInputChange;
+    /**
+     * On Date picker change.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     */
+    private onPickerChange;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIDatePicker.d.ts.map

package/dist/components/UIDatePicker/UIDatePicker.js

@@ -1,73 +1,73 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIDatePicker = void 0;
-const react_1 = __importDefault(require("react"));
-const UIInput_1 = require("../UIInput");
-const UIIcon_1 = require("../UIIcon");
-const Icons_1 = require("../Icons");
-require("./UIDatePicker.scss");
-/**
- * UIDatePicker component.
- *
- * @exports
- * @class {UIDatePicker}
- * @extends {React.Component<UIDatePickerProps>}
- */
-class UIDatePicker extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIDatePickerProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: ''
-        };
-        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
-        this.state.value = props.defaultValue || '';
-        this.onInputChange = this.onInputChange.bind(this);
-        this.onPickerChange = this.onPickerChange.bind(this);
-    }
-    /**
-     * On input change event.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     * @param {string} newValue
-     */
-    onInputChange(e, newValue = '') {
-        newValue = newValue.trim();
-        this.props.onChange?.(e, newValue);
-        this.setState({ value: newValue });
-    }
-    /**
-     * On Date picker change.
-     *
-     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
-     */
-    onPickerChange(e) {
-        let newValue = e.target.value;
-        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
-            newValue = `${e.target.value}:00`;
-        }
-        this.props.onChange?.(e, newValue);
-        this.setState({ value: newValue });
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
-        return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
-            react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
-            react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
-                react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
-                react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
-    }
-}
-exports.UIDatePicker = UIDatePicker;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIDatePicker = void 0;
+const react_1 = __importDefault(require("react"));
+const UIInput_1 = require("../UIInput");
+const UIIcon_1 = require("../UIIcon");
+const Icons_1 = require("../Icons");
+require("./UIDatePicker.scss");
+/**
+ * UIDatePicker component.
+ *
+ * @exports
+ * @class {UIDatePicker}
+ * @extends {React.Component<UIDatePickerProps>}
+ */
+class UIDatePicker extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIDatePickerProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: ''
+        };
+        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
+        this.state.value = props.defaultValue || '';
+        this.onInputChange = this.onInputChange.bind(this);
+        this.onPickerChange = this.onPickerChange.bind(this);
+    }
+    /**
+     * On input change event.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     * @param {string} newValue
+     */
+    onInputChange(e, newValue = '') {
+        newValue = newValue.trim();
+        this.props.onChange?.(e, newValue);
+        this.setState({ value: newValue });
+    }
+    /**
+     * On Date picker change.
+     *
+     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
+     */
+    onPickerChange(e) {
+        let newValue = e.target.value;
+        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
+            newValue = `${e.target.value}:00`;
+        }
+        this.props.onChange?.(e, newValue);
+        this.setState({ value: newValue });
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
+        return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
+            react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
+            react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
+                react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
+                react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
+    }
+}
+exports.UIDatePicker = UIDatePicker;
 //# sourceMappingURL=UIDatePicker.js.map

package/dist/components/UIDatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './UIDatePicker';
+export * from './UIDatePicker';
 //# sourceMappingURL=index.d.ts.map