@synerise/ds-date-picker 1.4.1 → 1.4.3

package/dist/Elements/MonthPicker/MonthPicker.js

@@ -1,109 +1,109 @@
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import range from 'lodash.range';
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import { legacyParse } from '@date-fns/upgrade/v2';
-import { fnsAddYears, fnsEndOfMonth, fnsIsAfter, fnsIsBefore, fnsIsSameMonth, fnsSetMonth, fnsStartOfMonth } from '../../fns';
-import fnsFormat from '../../format';
-import GridPicker from '../GridPicker/GridPicker';
-import Navbar from '../Navbar/Navbar';
-import YearPicker from '../YearPicker/YearPicker';
+import { jsx } from "react/jsx-runtime";
+import range from "lodash.range";
+import React from "react";
+import { injectIntl } from "react-intl";
+import { legacyParse } from "@date-fns/upgrade/v2";
+import "date-fns/addDays";
+import "date-fns/addMonths";
+import "date-fns/addSeconds";
+import fnsAddYears from "date-fns/addYears";
+import "date-fns/differenceInSeconds";
+import "date-fns/differenceInYears";
+import "date-fns/endOfDay";
+import fnsEndOfMonth from "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/getSeconds";
+import "date-fns/getYear";
+import fnsIsAfter from "date-fns/isAfter";
+import fnsIsBefore from "date-fns/isBefore";
+import "date-fns/isEqual";
+import "date-fns/isSameDay";
+import fnsIsSameMonth from "date-fns/isSameMonth";
+import "date-fns/isSameYear";
+import "date-fns/setDate";
+import fnsSetMonth from "date-fns/setMonth";
+import "date-fns/setYear";
+import "date-fns/startOfDay";
+import fnsStartOfMonth from "date-fns/startOfMonth";
+import fnsFormat from "../../format.js";
+import GridPicker from "../GridPicker/GridPicker.js";
+import Navbar from "../Navbar/Navbar.js";
+import YearPicker from "../YearPicker/YearPicker.js";
 function getInitialState(props) {
   return {
-    cursor: props.value || new Date(),
+    cursor: props.value || /* @__PURE__ */ new Date(),
     yearMode: false
   };
 }
 function getCells(cursor, min, max, locale) {
-  var minDate = min ? fnsStartOfMonth(min) : fnsSetMonth(cursor, 0);
-  var maxDate = max ? fnsEndOfMonth(max) : fnsSetMonth(cursor, 12);
-  return range(0, 12).map(function (index) {
-    var date = fnsSetMonth(cursor, index);
+  const minDate = min ? fnsStartOfMonth(min) : fnsSetMonth(cursor, 0);
+  const maxDate = max ? fnsEndOfMonth(max) : fnsSetMonth(cursor, 12);
+  return range(0, 12).map((index) => {
+    const date = fnsSetMonth(cursor, index);
     return {
       key: date.toISOString(),
-      text: fnsFormat(date, 'MMM', locale),
+      text: fnsFormat(date, "MMM", locale),
       disabled: fnsIsAfter(date, maxDate) || fnsIsBefore(date, minDate)
     };
   });
 }
-var MonthPicker = /*#__PURE__*/function (_React$PureComponent) {
-  function MonthPicker() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
-    _this.state = getInitialState(_this.props);
-    _this.handleLongPrev = function () {
-      var cursor = _this.state.cursor;
-      _this.setState({
+class MonthPicker extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = getInitialState(this.props);
+    this.handleLongPrev = () => {
+      const {
+        cursor
+      } = this.state;
+      this.setState({
         cursor: fnsAddYears(cursor, -1)
       });
     };
-    _this.handleLongNext = function () {
-      var cursor = _this.state.cursor;
-      _this.setState({
+    this.handleLongNext = () => {
+      const {
+        cursor
+      } = this.state;
+      this.setState({
         cursor: fnsAddYears(cursor, 1)
       });
     };
-    return _this;
   }
-  _inheritsLoose(MonthPicker, _React$PureComponent);
-  var _proto = MonthPicker.prototype;
-  _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
-    var value = this.props.value;
-    if ((prevProps == null ? void 0 : prevProps.value) !== value) {
+  getSnapshotBeforeUpdate(prevProps) {
+    const {
+      value
+    } = this.props;
+    if (prevProps?.value !== value) {
       this.setState(getInitialState(this.props));
     }
     return null;
-  };
-  _proto.render = function render() {
-    var _this2 = this;
-    var _this$state = this.state,
-      cursor = _this$state.cursor,
-      yearMode = _this$state.yearMode;
-    var _this$props = this.props,
-      min = _this$props.min,
-      max = _this$props.max,
-      value = _this$props.value,
-      intl = _this$props.intl,
-      onChange = _this$props.onChange;
-    var cells = getCells(cursor, min, max, intl == null ? void 0 : intl.locale);
-    var valueCell = value ? cells.find(function (cell) {
-      return fnsIsSameMonth(value, legacyParse(cell.key));
-    }) : null;
-    var selectedKey = valueCell ? valueCell.key : null;
+  }
+  render() {
+    const {
+      cursor,
+      yearMode
+    } = this.state;
+    const {
+      min,
+      max,
+      value,
+      intl,
+      onChange
+    } = this.props;
+    const cells = getCells(cursor, min, max, intl?.locale);
+    const valueCell = value ? cells.find((cell) => fnsIsSameMonth(value, legacyParse(cell.key))) : null;
+    const selectedKey = valueCell ? valueCell.key : null;
     if (yearMode) {
-      return /*#__PURE__*/React.createElement(YearPicker, {
-        value: cursor,
-        onChange: function onChange(changedDate) {
-          return _this2.setState({
-            cursor: changedDate,
-            yearMode: false
-          });
-        }
-      });
+      return /* @__PURE__ */ jsx(YearPicker, { value: cursor, onChange: (changedDate) => this.setState({
+        cursor: changedDate,
+        yearMode: false
+      }) });
     }
-    return [/*#__PURE__*/React.createElement(Navbar, {
-      onTitleClick: function onTitleClick() {
-        return _this2.setState({
-          yearMode: true
-        });
-      },
-      title: fnsFormat(cursor, 'yyyy'),
-      onLongPrev: this.handleLongPrev,
-      onLongNext: this.handleLongNext,
-      key: "head"
-    }), /*#__PURE__*/React.createElement(GridPicker, {
-      selectedKey: selectedKey,
-      cells: cells,
-      onCellClick: function onCellClick(isoDate) {
-        return onChange(new Date(isoDate));
-      },
-      key: "body"
-    })];
-  };
-  return MonthPicker;
-}(React.PureComponent);
-export default injectIntl(MonthPicker);
+    return [/* @__PURE__ */ jsx(Navbar, { onTitleClick: () => this.setState({
+      yearMode: true
+    }), title: fnsFormat(cursor, "yyyy"), onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"), /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: (isoDate) => onChange(new Date(isoDate)) }, "body")];
+  }
+}
+const MonthPicker$1 = injectIntl(MonthPicker);
+export {
+  MonthPicker$1 as default
+};

package/dist/Elements/MonthPicker/MonthPicker.types.d.ts

@@ -1,4 +1,4 @@
-import { type IntlShape } from 'react-intl';
+import { IntlShape } from 'react-intl';
 export type MonthPickerProps = {
     min?: Date;
     max?: Date;

package/dist/Elements/MonthPicker/MonthPicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Elements/Navbar/Navbar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type NavbarProps } from './Navbar.types';
+import { default as React } from 'react';
+import { NavbarProps } from './Navbar.types';
 declare const Navbar: React.FC<NavbarProps>;
 export default Navbar;

package/dist/Elements/Navbar/Navbar.js

@@ -1,70 +1,32 @@
-import React from 'react';
-import { v4 as uuid } from 'uuid';
-import Icon, { AngleLeftS, AngleRightS, DoubleAngleLeftS, DoubleAngleRightS } from '@synerise/ds-icon';
-import * as S from './Navbar.styles';
-var Navbar = function Navbar(props) {
-  var title = props.title,
-    onTitleClick = props.onTitleClick,
-    hidePrev = props.hidePrev,
-    hideNext = props.hideNext,
-    onLongPrev = props.onLongPrev,
-    onLongNext = props.onLongNext,
-    onShortPrev = props.onShortPrev,
-    onShortNext = props.onShortNext,
-    inactivePrev = props.inactivePrev,
-    inactiveNext = props.inactiveNext;
-  return /*#__PURE__*/React.createElement(S.Container, {
-    className: "ds-date-picker-nav"
-  }, /*#__PURE__*/React.createElement(S.ArrowContainer, null, onLongPrev && !hidePrev ? /*#__PURE__*/React.createElement(S.NavButton, {
-    "data-testid": "datapicker-long-prev",
-    disabled: inactivePrev,
-    key: uuid(),
-    mode: "single-icon",
-    role: "button",
-    type: "ghost",
-    onClick: onLongPrev
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(DoubleAngleLeftS, null)
-  })) : /*#__PURE__*/React.createElement(S.ArrowPlaceholder, {
-    className: "arrow-placeholder long-prev"
-  }), onShortPrev && !hidePrev ? /*#__PURE__*/React.createElement(S.NavButton, {
-    "data-testid": "datapicker-short-prev",
-    disabled: inactivePrev,
-    key: uuid(),
-    mode: "single-icon",
-    role: "button",
-    type: "ghost",
-    onClick: onShortPrev
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleLeftS, null)
-  })) : /*#__PURE__*/React.createElement(S.ArrowPlaceholder, {
-    className: "arrow-placeholder short-prev"
-  })), /*#__PURE__*/React.createElement(S.Text, null, onTitleClick ? /*#__PURE__*/React.createElement(S.Link, {
-    onClick: onTitleClick
-  }, title) : title), /*#__PURE__*/React.createElement(S.ArrowContainer, null, onShortNext && !hideNext ? /*#__PURE__*/React.createElement(S.NavButton, {
-    "data-testid": "datapicker-short-next",
-    disabled: inactiveNext,
-    key: uuid(),
-    mode: "single-icon",
-    role: "button",
-    type: "ghost",
-    onClick: onShortNext
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleRightS, null)
-  })) : /*#__PURE__*/React.createElement(S.ArrowPlaceholder, {
-    className: "arrow-placeholder short-next"
-  }), onLongNext && !hideNext ? /*#__PURE__*/React.createElement(S.NavButton, {
-    "data-testid": "datapicker-long-next",
-    disabled: inactiveNext,
-    key: uuid(),
-    mode: "single-icon",
-    role: "button",
-    type: "ghost",
-    onClick: onLongNext
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(DoubleAngleRightS, null)
-  })) : /*#__PURE__*/React.createElement(S.ArrowPlaceholder, {
-    className: "arrow-placeholder long-next"
-  })));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { v4 } from "uuid";
+import Icon, { DoubleAngleLeftS, AngleLeftS, AngleRightS, DoubleAngleRightS } from "@synerise/ds-icon";
+import { Container, ArrowContainer, NavButton, ArrowPlaceholder, Text, Link } from "./Navbar.styles.js";
+const Navbar = (props) => {
+  const {
+    title,
+    onTitleClick,
+    hidePrev,
+    hideNext,
+    onLongPrev,
+    onLongNext,
+    onShortPrev,
+    onShortNext,
+    inactivePrev,
+    inactiveNext
+  } = props;
+  return /* @__PURE__ */ jsxs(Container, { className: "ds-date-picker-nav", children: [
+    /* @__PURE__ */ jsxs(ArrowContainer, { children: [
+      onLongPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onLongPrev, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DoubleAngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-prev" }),
+      onShortPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onShortPrev, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-prev" })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { children: onTitleClick ? /* @__PURE__ */ jsx(Link, { onClick: onTitleClick, children: title }) : title }),
+    /* @__PURE__ */ jsxs(ArrowContainer, { children: [
+      onShortNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onShortNext, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-next" }),
+      onLongNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onLongNext, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DoubleAngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-next" })
+    ] })
+  ] });
+};
+export {
+  Navbar as default
 };
-export default Navbar;

package/dist/Elements/Navbar/Navbar.styles.d.ts

@@ -1,7 +1,7 @@
-import { type StyledButton } from '@synerise/ds-button';
+import { StyledButton } from '@synerise/ds-button';
 export declare const NavButton: StyledButton;
-export declare const ArrowPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Link: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ArrowPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ArrowContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Text: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Link: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/Elements/Navbar/Navbar.styles.js

@@ -1,34 +1,34 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var NavButton = styled(Button).withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const NavButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "Navbarstyles__NavButton",
   componentId: "sc-105m0p0-0"
-})([".ds-icon > svg{fill:", ";}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var ArrowPlaceholder = styled.div.withConfig({
+})([".ds-icon > svg{fill:", ";}"], (props) => props.theme.palette["grey-600"]);
+const ArrowPlaceholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Navbarstyles__ArrowPlaceholder",
   componentId: "sc-105m0p0-1"
 })(["width:32px;height:32px;"]);
-export var ArrowContainer = styled.div.withConfig({
+const ArrowContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Navbarstyles__ArrowContainer",
   componentId: "sc-105m0p0-2"
 })(["display:flex;align-items:center;"]);
-export var Text = styled.div.withConfig({
+const Text = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Navbarstyles__Text",
   componentId: "sc-105m0p0-3"
 })(["flex:1;text-align:center;font-weight:500;font-size:13px;"]);
-export var Container = styled.div.withConfig({
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Navbarstyles__Container",
   componentId: "sc-105m0p0-4"
-})(["display:flex;align-items:center;padding:0 24px;border-bottom:1px solid ", ";", ":first-of-type{", ",", "{margin-right:8px;}}", ":last-of-type{", ",", "{margin-left:8px;}}"], function (props) {
-  return props.theme.palette['grey-200'];
-}, ArrowContainer, NavButton, ArrowPlaceholder, ArrowContainer, NavButton, ArrowPlaceholder);
-export var Link = styled.span.withConfig({
+})(["display:flex;align-items:center;padding:0 24px;border-bottom:1px solid ", ";", ":first-of-type{", ",", "{margin-right:8px;}}", ":last-of-type{", ",", "{margin-left:8px;}}"], (props) => props.theme.palette["grey-200"], ArrowContainer, NavButton, ArrowPlaceholder, ArrowContainer, NavButton, ArrowPlaceholder);
+const Link = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Navbarstyles__Link",
   componentId: "sc-105m0p0-5"
-})(["cursor:pointer;transition:0.3s;&:hover{color:", ";}&:active{color:", ";}"], function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
+})(["cursor:pointer;transition:0.3s;&:hover{color:", ";}&:active{color:", ";}"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"]);
+export {
+  ArrowContainer,
+  ArrowPlaceholder,
+  Container,
+  Link,
+  NavButton,
+  Text
+};

package/dist/Elements/Navbar/Navbar.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type NavbarProps = {
     title?: React.ReactNode | React.ReactText;
     hidePrev?: boolean;

package/dist/Elements/Navbar/Navbar.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Elements/PickerInput/PickerInput.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-declare const PickerInput: React.ForwardRefExoticComponent<Pick<import("@synerise/ds-input").InputProps, "autoResize"> & {
+import { default as React } from 'react';
+declare const PickerInput: React.ForwardRefExoticComponent<Pick<import('@synerise/ds-input').InputProps, "autoResize"> & {
     autoFocus?: boolean;
-    size?: import("antd/lib/button").ButtonSize;
+    size?: import('antd/lib/button').ButtonSize;
     format?: string;
-    valueFormatOptions?: import("@synerise/ds-core").DateToFormatOptions;
+    valueFormatOptions?: import('@synerise/ds-core').DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;
     value?: Date | string;
@@ -20,6 +20,6 @@ declare const PickerInput: React.ForwardRefExoticComponent<Pick<import("@syneris
     errorText?: React.ReactNode;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    triggerHTMLAttributes?: React.HTMLAttributes<HTMLDivElement> & import("@synerise/ds-utils").DataAttributes;
+    triggerHTMLAttributes?: React.HTMLAttributes<HTMLDivElement> & import('@synerise/ds-utils').DataAttributes;
 } & React.RefAttributes<HTMLDivElement>>;
 export default PickerInput;

package/dist/Elements/PickerInput/PickerInput.js

@@ -1,99 +1,75 @@
-var _excluded = ["disabled", "readOnly", "value", "format", "valueFormatOptions", "onChange", "showTime", "onClear", "onClick", "clearTooltip", "highlight", "prefixel", "suffixel", "allowClear", "triggerHTMLAttributes"],
-  _excluded2 = ["className"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { legacyParse } from '@date-fns/upgrade/v2';
-import { getDefaultDataTimeOptions, useDataFormat, useTheme } from '@synerise/ds-core';
-import Icon, { CalendarM, Close3S } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import format from '../../format';
-import * as S from './PickerInput.styles';
-var PickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    value = _ref.value,
-    dateFormat = _ref.format,
-    valueFormatOptions = _ref.valueFormatOptions,
-    onChange = _ref.onChange,
-    showTime = _ref.showTime,
-    onClear = _ref.onClear,
-    onClick = _ref.onClick,
-    clearTooltip = _ref.clearTooltip,
-    highlight = _ref.highlight,
-    prefixel = _ref.prefixel,
-    suffixel = _ref.suffixel,
-    allowClear = _ref.allowClear,
-    triggerHTMLAttributes = _ref.triggerHTMLAttributes,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useDataFormat = useDataFormat(),
-    formatValue = _useDataFormat.formatValue;
-  var theme = useTheme();
-  var _useState = useState(false),
-    hovered = _useState[0],
-    setHovered = _useState[1];
-  var getText = useCallback(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo } from "react";
+import { legacyParse } from "@date-fns/upgrade/v2";
+import { useDataFormat, useTheme, getDefaultDataTimeOptions } from "@synerise/ds-core";
+import Icon, { Close3S, CalendarM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import fnsFormat from "../../format.js";
+import { ClearIconWrapper, DefaultIconWrapper, PickerInputWrapper, Prefixel, Container, Input, Suffixel } from "./PickerInput.styles.js";
+const PickerInput = forwardRef(({
+  disabled,
+  readOnly,
+  value,
+  format: dateFormat,
+  valueFormatOptions,
+  onChange,
+  showTime,
+  onClear,
+  onClick,
+  clearTooltip,
+  highlight,
+  prefixel,
+  suffixel,
+  allowClear,
+  triggerHTMLAttributes,
+  ...rest
+}, ref) => {
+  const {
+    formatValue
+  } = useDataFormat();
+  const theme = useTheme();
+  const [hovered, setHovered] = useState(false);
+  const getText = useCallback(() => {
     if (!value) {
-      return '';
+      return "";
     }
     if (dateFormat) {
-      return format(legacyParse(value), dateFormat);
+      return fnsFormat(legacyParse(value), dateFormat);
     }
-    if (typeof value === 'string') {
-      return format(legacyParse(value), dateFormat || showTime ? 'MMM d, yyyy, HH:mm' : 'MMM d, yyyy');
+    if (typeof value === "string") {
+      return fnsFormat(legacyParse(value), dateFormat || showTime ? "MMM d, yyyy, HH:mm" : "MMM d, yyyy");
     }
-    return formatValue(value, _extends({}, getDefaultDataTimeOptions(showTime), valueFormatOptions));
+    return formatValue(value, {
+      ...getDefaultDataTimeOptions(showTime),
+      ...valueFormatOptions
+    });
   }, [value, dateFormat, showTime, formatValue, valueFormatOptions]);
-  var handleApply = useCallback(function (date) {
+  const handleApply = useCallback((date) => {
     if (!onChange) {
       return;
     }
     onChange(date, getText());
   }, [onChange, getText]);
-  var handleIconClick = useCallback(function (event) {
+  const handleIconClick = useCallback((event) => {
     event.stopPropagation();
     onClear && onClear();
     handleApply(null);
   }, [onClear, handleApply]);
-  var handleInputClick = useCallback(function (event) {
+  const handleInputClick = useCallback((event) => {
     event.stopPropagation();
     onClick && onClick();
   }, [onClick]);
-  var iconInput = useMemo(function () {
-    return (hovered || highlight) && allowClear && !readOnly && !!value ? /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-      title: clearTooltip
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(Close3S, null),
-      onClick: handleIconClick
-    }))) : /*#__PURE__*/React.createElement(S.DefaultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(CalendarM, null),
-      color: theme.palette['grey-400']
-    }));
-  }, [hovered, highlight, allowClear, readOnly, value, theme, clearTooltip, handleIconClick]);
-  var _ref2 = triggerHTMLAttributes != null ? triggerHTMLAttributes : {},
-    className = _ref2.className,
-    restAttributes = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(S.PickerInputWrapper, _extends({
-    ref: ref,
-    prefixel: !!prefixel,
-    suffixel: !!suffixel,
-    className: "ds-date-input " + (className || '')
-  }, restAttributes), !!prefixel && /*#__PURE__*/React.createElement(S.Prefixel, null, prefixel), /*#__PURE__*/React.createElement(S.Container, {
-    onMouseEnter: !disabled ? function () {
-      return setHovered(true);
-    } : undefined,
-    onMouseLeave: !disabled ? function () {
-      return setHovered(false);
-    } : undefined,
-    onClick: !disabled ? handleInputClick : undefined
-  }, /*#__PURE__*/React.createElement(S.Input, _extends({
-    active: !!highlight,
-    resetMargin: true,
-    type: "text",
-    value: getText(),
-    icon1: iconInput,
-    readOnly: readOnly,
-    disabled: disabled
-  }, rest))), !!suffixel && /*#__PURE__*/React.createElement(S.Suffixel, null, suffixel));
+  const iconInput = useMemo(() => (hovered || highlight) && allowClear && !readOnly && !!value ? /* @__PURE__ */ jsx(ClearIconWrapper, { children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3S, {}), onClick: handleIconClick }) }) }) : /* @__PURE__ */ jsx(DefaultIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CalendarM, {}), color: theme.palette["grey-400"] }) }), [hovered, highlight, allowClear, readOnly, value, theme, clearTooltip, handleIconClick]);
+  const {
+    className,
+    ...restAttributes
+  } = triggerHTMLAttributes ?? {};
+  return /* @__PURE__ */ jsxs(PickerInputWrapper, { ref, prefixel: !!prefixel, suffixel: !!suffixel, className: `ds-date-input ${className || ""}`, ...restAttributes, children: [
+    !!prefixel && /* @__PURE__ */ jsx(Prefixel, { children: prefixel }),
+    /* @__PURE__ */ jsx(Container, { onMouseEnter: !disabled ? () => setHovered(true) : void 0, onMouseLeave: !disabled ? () => setHovered(false) : void 0, onClick: !disabled ? handleInputClick : void 0, children: /* @__PURE__ */ jsx(Input, { active: !!highlight, resetMargin: true, type: "text", value: getText(), icon1: iconInput, readOnly, disabled, ...rest }) }),
+    !!suffixel && /* @__PURE__ */ jsx(Suffixel, { children: suffixel })
+  ] });
 });
-export default PickerInput;
+export {
+  PickerInput as default
+};

package/dist/Elements/PickerInput/PickerInput.styles.d.ts

@@ -1,14 +1,14 @@
-import { type ThemeProps } from '@synerise/ds-core';
-import { type StyledInput } from '@synerise/ds-input';
-export declare const Prefixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-export declare const Suffixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
+import { ThemeProps } from '@synerise/ds-core';
+import { StyledInput } from '@synerise/ds-input';
+export declare const Prefixel: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const Suffixel: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
 export declare const Input: StyledInput<{
     active: boolean;
 }>;
-export declare const PickerInputWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const PickerInputWrapper: import('styled-components').StyledComponent<"div", any, {
     prefixel: boolean;
     suffixel: boolean;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DefaultIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ClearIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DefaultIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;