@synerise/ds-date-range-picker 1.6.11 → 1.6.12

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.js

@@ -1,55 +1,43 @@
-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); }
-import dayjs from 'dayjs';
-import React, { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { theme, useDataFormat } from '@synerise/ds-core';
-import Icon, { CloseS } from '@synerise/ds-icon';
-import Select from '@synerise/ds-select';
-import Slider from '@synerise/ds-slider';
-import TimePicker from '@synerise/ds-time-picker';
-import { getDisabledTimeOptions } from '../../../../../RangePicker/utils';
-import { FORM_MODES, RANGE_DISPLAY_MODES, RANGE_FORM_INTL_KEYS, SLIDER_MAX, SLIDER_MIN, SLIDER_STEP } from './RangeForm.constants';
-import * as S from './RangeForm.styles';
-import { dateToNumber, numberToDate } from './RangeForm.utils';
-
-// @deprecated, moved to ./RangeForm.constants
-export { FORM_MODES, RANGE_FORM_INTL_KEYS };
-var RangeForm = function RangeForm(_ref) {
-  var onModeChange = _ref.onModeChange,
-    disabled = _ref.disabled,
-    startDate = _ref.startDate,
-    endDate = _ref.endDate,
-    onStartChange = _ref.onStartChange,
-    onEndChange = _ref.onEndChange,
-    onExactHourSelect = _ref.onExactHourSelect,
-    onRangeDelete = _ref.onRangeDelete,
-    _ref$valueSelectionMo = _ref.valueSelectionModes,
-    valueSelectionModes = _ref$valueSelectionMo === void 0 ? [FORM_MODES.RANGE, FORM_MODES.HOUR] : _ref$valueSelectionMo,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? valueSelectionModes[0] : _ref$mode,
-    _ref$rangeDisplayMode = _ref.rangeDisplayMode,
-    rangeDisplayMode = _ref$rangeDisplayMode === void 0 ? RANGE_DISPLAY_MODES.TIMEPICKER : _ref$rangeDisplayMode,
-    isInvertedRange = _ref.isInvertedRange,
-    timePickerProps = _ref.timePickerProps,
-    texts = _ref.texts,
-    valueFormatOptions = _ref.valueFormatOptions,
-    errorTexts = _ref.errorTexts;
-  var _useDataFormat = useDataFormat(),
-    is12HoursClock = _useDataFormat.is12HoursClock;
-  var intl = useIntl();
-  var _useState = useState(startDate),
-    start = _useState[0],
-    setStart = _useState[1];
-  var _useState2 = useState(endDate),
-    end = _useState2[0],
-    setEnd = _useState2[1];
-  var _useState3 = useState(startDate ? dateToNumber(startDate) : SLIDER_MIN),
-    sliderStart = _useState3[0],
-    setSliderStart = _useState3[1];
-  var _useState4 = useState(endDate ? dateToNumber(endDate) : SLIDER_MAX),
-    sliderEnd = _useState4[0],
-    setSliderEnd = _useState4[1];
-  useEffect(function () {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { useDataFormat, theme } from "@synerise/ds-core";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import Select from "@synerise/ds-select";
+import Slider from "@synerise/ds-slider";
+import TimePicker from "@synerise/ds-time-picker";
+import { getDisabledTimeOptions } from "../../../../../RangePicker/utils.js";
+import { SLIDER_MIN, SLIDER_MAX, RANGE_DISPLAY_MODES, FORM_MODES, RANGE_FORM_INTL_KEYS, SLIDER_STEP } from "./RangeForm.constants.js";
+import { Container, Row, RemoveIconWrapper, Separator } from "./RangeForm.styles.js";
+import { dateToNumber, numberToDate } from "./RangeForm.utils.js";
+const RangeForm = ({
+  onModeChange,
+  disabled,
+  startDate,
+  endDate,
+  onStartChange,
+  onEndChange,
+  onExactHourSelect,
+  onRangeDelete,
+  valueSelectionModes = [FORM_MODES.RANGE, FORM_MODES.HOUR],
+  mode = valueSelectionModes[0],
+  rangeDisplayMode = RANGE_DISPLAY_MODES.TIMEPICKER,
+  isInvertedRange,
+  timePickerProps,
+  texts,
+  valueFormatOptions,
+  errorTexts
+}) => {
+  const {
+    is12HoursClock
+  } = useDataFormat();
+  const intl = useIntl();
+  const [start, setStart] = useState(startDate);
+  const [end, setEnd] = useState(endDate);
+  const [sliderStart, setSliderStart] = useState(startDate ? dateToNumber(startDate) : SLIDER_MIN);
+  const [sliderEnd, setSliderEnd] = useState(endDate ? dateToNumber(endDate) : SLIDER_MAX);
+  useEffect(() => {
     if (rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER) {
       setStart(startDate);
       setEnd(endDate);
@@ -58,50 +46,37 @@ var RangeForm = function RangeForm(_ref) {
       setSliderEnd(endDate ? dateToNumber(endDate) : SLIDER_MAX);
     }
   }, [rangeDisplayMode, startDate, endDate]);
-  var getPopupContainer = function getPopupContainer(node) {
-    return node.parentElement !== null ? node.parentElement : document.body;
-  };
-  var errorForFirstItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[0];
-  var errorForSecondItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[1];
-  var singleHourPicker = function singleHourPicker() {
-    return /*#__PURE__*/React.createElement(TimePicker, _extends({
-      errorText: errorForFirstItem,
-      disabled: disabled,
-      clearTooltip: texts.clear,
-      onChange: function onChange(date) {
-        onExactHourSelect(date);
-        setStart(date);
-        setEnd(date);
-      },
-      value: start,
-      dropdownProps: {
-        getPopupContainer: getPopupContainer
-      },
-      use12HourClock: is12HoursClock,
-      valueFormatOptions: valueFormatOptions
-    }, timePickerProps));
-  };
-  var timeFormatByClockMode = is12HoursClock ? 'hh:mm A' : 'HH:mm';
-  var tipFormatter = function tipFormatter(value) {
-    if (value === undefined) {
+  const getPopupContainer = (node) => node.parentElement !== null ? node.parentElement : document.body;
+  const errorForFirstItem = errorTexts?.length && errorTexts[0];
+  const errorForSecondItem = errorTexts?.length && errorTexts[1];
+  const singleHourPicker = () => /* @__PURE__ */ jsx(TimePicker, { errorText: errorForFirstItem, disabled, clearTooltip: texts.clear, onChange: (date) => {
+    onExactHourSelect(date);
+    setStart(date);
+    setEnd(date);
+  }, value: start, dropdownProps: {
+    getPopupContainer
+  }, use12HourClock: is12HoursClock, valueFormatOptions, ...timePickerProps });
+  const timeFormatByClockMode = is12HoursClock ? "hh:mm A" : "HH:mm";
+  const tipFormatter = (value) => {
+    if (value === void 0) {
       return null;
     }
-    var valueAsDate = numberToDate(value, SLIDER_MAX);
+    const valueAsDate = numberToDate(value, SLIDER_MAX);
     return dayjs(valueAsDate).format(timeFormatByClockMode);
   };
-  var renderRangeSlider = function renderRangeSlider() {
-    var handleSliderChange = function handleSliderChange(range) {
+  const renderRangeSlider = () => {
+    const handleSliderChange = (range) => {
       if (range[0] !== sliderStart) {
         setSliderStart(range[0]);
       } else if (range[1] !== sliderEnd) {
         setSliderEnd(range[1]);
       }
     };
-    var handleSliderAfterChange = function handleSliderAfterChange(range) {
-      var currentStartDateAsNumber = startDate ? dateToNumber(startDate) : SLIDER_MIN;
-      var currentEndDateAsNumber = endDate ? dateToNumber(endDate) : SLIDER_MAX;
-      var newStartDate = numberToDate(range[0], SLIDER_MAX, true);
-      var newEndDate = numberToDate(range[1], SLIDER_MAX);
+    const handleSliderAfterChange = (range) => {
+      const currentStartDateAsNumber = startDate ? dateToNumber(startDate) : SLIDER_MIN;
+      const currentEndDateAsNumber = endDate ? dateToNumber(endDate) : SLIDER_MAX;
+      const newStartDate = numberToDate(range[0], SLIDER_MAX, true);
+      const newEndDate = numberToDate(range[1], SLIDER_MAX);
       if (range[0] !== currentStartDateAsNumber) {
         setSliderStart(range[0]);
         onStartChange(newStartDate);
@@ -110,91 +85,48 @@ var RangeForm = function RangeForm(_ref) {
         onEndChange(newEndDate);
       }
     };
-    return /*#__PURE__*/React.createElement(Slider, {
-      range: true,
-      min: SLIDER_MIN,
-      max: SLIDER_MAX,
-      step: SLIDER_STEP,
-      inverted: isInvertedRange,
-      value: [sliderStart, sliderEnd],
-      onAfterChange: handleSliderAfterChange,
-      onChange: handleSliderChange,
-      tipFormatter: tipFormatter
-    });
+    return /* @__PURE__ */ jsx(Slider, { range: true, min: SLIDER_MIN, max: SLIDER_MAX, step: SLIDER_STEP, inverted: isInvertedRange, value: [sliderStart, sliderEnd], onAfterChange: handleSliderAfterChange, onChange: handleSliderChange, tipFormatter });
   };
-  var renderRangePicker = function renderRangePicker() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
-      errorText: errorForFirstItem,
-      disabled: disabled,
-      clearTooltip: texts.clear,
-      onChange: function onChange(date) {
+  const renderRangePicker = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(TimePicker, { errorText: errorForFirstItem, disabled, clearTooltip: texts.clear, onChange: (date) => {
         setStart(date);
         onStartChange(date);
-      },
-      value: start,
-      dropdownProps: {
-        getPopupContainer: getPopupContainer
-      },
-      disabledHours: getDisabledTimeOptions(start || end, 'HOURS', null, end, is12HoursClock),
-      disabledMinutes: getDisabledTimeOptions(start || end, 'MINUTES', null, end, is12HoursClock),
-      disabledSeconds: getDisabledTimeOptions(start || end, 'SECONDS', null, end, is12HoursClock),
-      use12HourClock: is12HoursClock,
-      valueFormatOptions: valueFormatOptions
-    }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
-      errorText: errorForSecondItem,
-      disabled: disabled,
-      clearTooltip: texts.clear,
-      onChange: function onChange(date) {
+      }, value: start, dropdownProps: {
+        getPopupContainer
+      }, disabledHours: getDisabledTimeOptions(start || end, "HOURS", null, end, is12HoursClock), disabledMinutes: getDisabledTimeOptions(start || end, "MINUTES", null, end, is12HoursClock), disabledSeconds: getDisabledTimeOptions(start || end, "SECONDS", null, end, is12HoursClock), use12HourClock: is12HoursClock, valueFormatOptions, ...timePickerProps }),
+      /* @__PURE__ */ jsx(Separator, { children: "-" }),
+      /* @__PURE__ */ jsx(TimePicker, { errorText: errorForSecondItem, disabled, clearTooltip: texts.clear, onChange: (date) => {
         setEnd(date);
         onEndChange(date);
-      },
-      value: end,
-      dropdownProps: {
-        getPopupContainer: getPopupContainer
-      },
-      disabledHours: getDisabledTimeOptions(end || start, 'HOURS', start, null, is12HoursClock),
-      disabledMinutes: getDisabledTimeOptions(end || start, 'MINUTES', start, null, is12HoursClock),
-      disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null, is12HoursClock),
-      use12HourClock: is12HoursClock
-    }, timePickerProps)));
+      }, value: end, dropdownProps: {
+        getPopupContainer
+      }, disabledHours: getDisabledTimeOptions(end || start, "HOURS", start, null, is12HoursClock), disabledMinutes: getDisabledTimeOptions(end || start, "MINUTES", start, null, is12HoursClock), disabledSeconds: getDisabledTimeOptions(end || start, "SECONDS", start, null, is12HoursClock), use12HourClock: is12HoursClock, ...timePickerProps })
+    ] });
   };
-  var renderRangeUI = function renderRangeUI() {
+  const renderRangeUI = () => {
     if (rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER) {
       return renderRangeSlider();
     }
     return renderRangePicker();
   };
-  var getModeLabel = function getModeLabel(modeName) {
+  const getModeLabel = (modeName) => {
     if (texts[modeName.toLocaleLowerCase()]) {
       return texts[modeName.toLocaleLowerCase()];
     }
     return intl.formatMessage(RANGE_FORM_INTL_KEYS[modeName]);
   };
-  var limitModeSelect = function limitModeSelect() {
-    return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
-      value: mode,
-      disabled: disabled,
-      onChange: function onChange(value) {
-        onModeChange(value);
-      },
-      getPopupContainer: getPopupContainer
-    }, valueSelectionModes.map(function (modeName) {
-      return /*#__PURE__*/React.createElement(Select.Option, {
-        key: modeName,
-        value: modeName
-      }, getModeLabel(modeName));
-    })) : null;
-  };
-  return /*#__PURE__*/React.createElement(S.Container, {
-    "data-testid": "range-filter-form"
-  }, /*#__PURE__*/React.createElement(S.Row, {
-    justifyContent: "flex-start",
-    mode: rangeDisplayMode
-  }, rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER && limitModeSelect(), mode === FORM_MODES.HOUR ? singleHourPicker() : renderRangeUI(), !!onRangeDelete && !disabled && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
-    onClick: onRangeDelete
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    color: theme.palette['red-600']
-  }))));
+  const limitModeSelect = () => valueSelectionModes.length > 1 ? /* @__PURE__ */ jsx(Select, { value: mode, disabled, onChange: (value) => {
+    onModeChange(value);
+  }, getPopupContainer, children: valueSelectionModes.map((modeName) => /* @__PURE__ */ jsx(Select.Option, { value: modeName, children: getModeLabel(modeName) }, modeName)) }) : null;
+  return /* @__PURE__ */ jsx(Container, { "data-testid": "range-filter-form", children: /* @__PURE__ */ jsxs(Row, { justifyContent: "flex-start", mode: rangeDisplayMode, children: [
+    rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER && limitModeSelect(),
+    mode === FORM_MODES.HOUR ? singleHourPicker() : renderRangeUI(),
+    !!onRangeDelete && !disabled && /* @__PURE__ */ jsx(RemoveIconWrapper, { onClick: onRangeDelete, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}), color: theme.palette["red-600"] }) })
+  ] }) });
+};
+export {
+  FORM_MODES,
+  RANGE_FORM_INTL_KEYS,
+  RangeForm as default
 };
-export default RangeForm;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.styles.d.ts

@@ -1,8 +1,8 @@
-import type { RangeDisplayMode } from './RangeForm.types';
-export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Row: import("styled-components").StyledComponent<"div", any, {
+import { RangeDisplayMode } from './RangeForm.types';
+export declare const RemoveIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Row: import('styled-components').StyledComponent<"div", any, {
     justifyContent: string;
     mode: RangeDisplayMode;
 }, never>;
-export declare const Separator: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Separator: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.styles.js

@@ -1,23 +1,23 @@
-import styled, { css } from 'styled-components';
-export var RemoveIconWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const RemoveIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangeFormstyles__RemoveIconWrapper",
   componentId: "sc-4k3o5r-0"
 })(["opacity:0;pointer-events:none;transition:opacity 0.15s ease-in-out;margin-left:4px;min-width:32px;height:32px;display:flex;justify-content:center;align-items:center;"]);
-export var Container = styled.div.withConfig({
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangeFormstyles__Container",
   componentId: "sc-4k3o5r-1"
 })(["display:flex;flex-direction:column;cursor:pointer;.ds-select-wrapper{min-width:20%;margin-right:8px;}.ds-time-picker{max-width:220px;width:100%;}&:hover{", "{opacity:1;pointer-events:all;}}"], RemoveIconWrapper);
-export var Row = styled.div.withConfig({
+const Row = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangeFormstyles__Row",
   componentId: "sc-4k3o5r-2"
-})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;", " .ant-slider{width:100%;margin:24px 8px 8px;}.ant-tooltip-inner{white-space:nowrap;}&& .ant-slider-handle:focus,&& .ant-slider-handle:hover{.ant-tooltip-content{background-color:transparent;}.ant-tooltip-inner{color:", ";}}"], function (props) {
-  return props.justifyContent;
-}, function (props) {
-  return props.mode === 'slider' && css(["&{column-gap:8px;margin-top:16px;", "{margin-top:14px;}}"], RemoveIconWrapper);
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var Separator = styled.span.withConfig({
+})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;", " .ant-slider{width:100%;margin:24px 8px 8px;}.ant-tooltip-inner{white-space:nowrap;}&& .ant-slider-handle:focus,&& .ant-slider-handle:hover{.ant-tooltip-content{background-color:transparent;}.ant-tooltip-inner{color:", ";}}"], (props) => props.justifyContent, (props) => props.mode === "slider" && css(["&{column-gap:8px;margin-top:16px;", "{margin-top:14px;}}"], RemoveIconWrapper), (props) => props.theme.palette["grey-600"]);
+const Separator = /* @__PURE__ */ styled.span.withConfig({
   displayName: "RangeFormstyles__Separator",
   componentId: "sc-4k3o5r-3"
-})(["&{line-height:32px;height:32px;margin:0 8px;}"]);
+})(["&{line-height:32px;height:32px;margin:0 8px;}"]);
+export {
+  Container,
+  RemoveIconWrapper,
+  Row,
+  Separator
+};

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
-import { type WithDisabledProp } from '../../../../RangeFilter.types';
-import { type TimeWindowTexts } from '../../TimeWindow.types';
-import { type RangeFormContainerProps } from '../RangeFormContainer.types';
+import { ReactNode } from 'react';
+import { WithDisabledProp } from '../../../../RangeFilter.types';
+import { TimeWindowTexts } from '../../TimeWindow.types';
+import { RangeFormContainerProps } from '../RangeFormContainer.types';
 export type DateLimitMode = 'Hour' | 'Range';
 export type RangeDisplayMode = 'timepicker' | 'slider';
 export type RangeFormProps = {

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.js

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

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.utils.js

@@ -1,18 +1,22 @@
-import dayjs from 'dayjs';
-import endOf from '../../../../../dateUtils/endOf';
-import startOf from '../../../../../dateUtils/startOf';
-export var numberToDate = function numberToDate(number, max, isRangeStart) {
+import dayjs from "dayjs";
+import END_OF from "../../../../../dateUtils/endOf.js";
+import START_OF from "../../../../../dateUtils/startOf.js";
+const numberToDate = (number, max, isRangeStart) => {
   if (number === max) {
-    return dayjs().endOf('day').toDate();
+    return dayjs().endOf("day").toDate();
   }
-  var hours = Math.floor(number);
-  var minutes = 60 * (number % 1);
-  var result = dayjs().hour(hours).minute(minutes).toDate();
-  return isRangeStart ? startOf.MINUTES(result) : endOf.MINUTES(result);
+  const hours = Math.floor(number);
+  const minutes = 60 * (number % 1);
+  const result = dayjs().hour(hours).minute(minutes).toDate();
+  return isRangeStart ? START_OF.MINUTES(result) : END_OF.MINUTES(result);
 };
-export var dateToNumber = function dateToNumber(date) {
-  var integer = date.getHours();
-  var decimal = Math.round(date.getMinutes() / 60 * 4) / 4;
-  var result = integer + decimal;
+const dateToNumber = (date) => {
+  const integer = date.getHours();
+  const decimal = Math.round(date.getMinutes() / 60 * 4) / 4;
+  const result = integer + decimal;
   return result;
-};
+};
+export {
+  dateToNumber,
+  numberToDate
+};

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { RangeFormContainerProps } from './RangeFormContainer.types';
+import { default as React } from 'react';
+import { RangeFormContainerProps } from './RangeFormContainer.types';
 declare const RangeFormContainer: ({ errorTexts, activeDays, disabled, days, dayKeys, getDayValue, getDayLabel, onDayTimeChange, onMultipleDayTimeChange, hideHeader, headerOptions, monthlyFilter, monthlyFilterPeriod, onRangeClear, onRangePaste, onRangeCopy, onRangeDelete, texts, onChange, valueSelectionModes, rangeDisplayMode, onModeChange, timePickerProps, renderSuffix, timeFormat, valueFormatOptions, }: RangeFormContainerProps) => React.JSX.Element;
 export default RangeFormContainer;