@gympass/yoga 7.87.1 → 7.88.0

package/esm/Datepicker/web/Datepicker.js

@@ -1,259 +1,347 @@
-var _excluded = ["_disabled", "inputFilled"],
-    _excluded2 = ["fullWidth", "type", "placeholder", "startDate", "endDate", "onSelectSingle", "disabled", "onSelectRange", "customOnSelectRange", "disablePastDates", "disableFutureDates", "disablePastFrom", "disableFutureFrom", "error", "onOpen", "displayEndDateOnly"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { Booking, BookingFilled } from '@gympass/yoga-icons';
-import { Text } from '@gympass/yoga';
-import styled, { css } from 'styled-components';
-import { bool, oneOf, func, instanceOf, string } from 'prop-types';
-import { format } from 'date-fns';
-import { theme } from '../../Theme';
-import Calendar from './Calendar';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
-  return props.fullWidth ? '100%' : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), theme.components.input.width);
-});
-
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { Booking, BookingFilled } from "@gympass/yoga-icons";
+import styled, { css } from "styled-components";
+import { bool, oneOf, func, instanceOf, string } from "prop-types";
+import { format } from "date-fns";
+import { Text } from "../..";
+import { theme } from "../../Theme";
+import Calendar from "./Calendar";
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: ${(props) => props.fullWidth ? "100%" : css`
+          ${theme.components.input.width}px
+        `};
+`;
+const getSelectorBorderColor = (open, error, disabled, inputFilled, colors) => {
   if (error) {
     return colors.feedback.attention[1];
   }
-
   if (disabled) {
     return colors.elements.backgroundAndDisabled;
   }
-
   if (open || inputFilled) {
     return colors.secondary;
   }
-
   return colors.elements.lineAndBorders;
 };
-
-var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var open = _ref.open,
-      error = _ref.error,
-      disabled = _ref.disabled,
-      inputFilled = _ref.inputFilled,
-      _ref$theme$yoga = _ref.theme.yoga,
-      components = _ref$theme$yoga.components,
-      colors = _ref$theme$yoga.colors,
-      spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
-});
-var Input = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var disabled = _ref2.disabled,
-      colors = _ref2.theme.yoga.colors;
-  return "\n    width: 100%;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: " + (!disabled ? colors.text.primary : colors.text.disabled) + "\n  ";
-});
-var InputPlaceholder = styled(Text.Small)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var disabled = _ref3.disabled,
-      colors = _ref3.theme.yoga.colors;
-  return "\n    color: " + (!disabled ? colors.text.secondary : colors.text.disabled) + "\n  ";
-});
-var TButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: flex-end;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background-color: transparent;\n  cursor: pointer;\n"])));
-var Panel = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
-  var _ref4$theme$yoga = _ref4.theme.yoga,
-      components = _ref4$theme$yoga.components,
-      colors = _ref4$theme$yoga.colors,
-      radii = _ref4$theme$yoga.radii,
-      borders = _ref4$theme$yoga.borders,
-      spacing = _ref4$theme$yoga.spacing;
-  return "\n    position: absolute;\n    background-color: " + colors.white + ";\n    border: " + borders.small + "px solid " + colors.elements.lineAndBorders + ";\n    z-index: 1;\n    width: " + components.input.width + "px;\n    left: 0;\n    border-radius: " + radii.regular + "px;\n    margin-top: " + spacing.xxsmall + "px;\n  ";
-});
-var CalendarIcon = styled(function (_ref5) {
-  var _disabled = _ref5._disabled,
-      inputFilled = _ref5.inputFilled,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
-
-  return !inputFilled ? /*#__PURE__*/React.createElement(Booking, _extends({
-    width: 20,
-    height: 20
-  }, props)) : /*#__PURE__*/React.createElement(BookingFilled, _extends({
-    width: 20,
-    height: 20
-  }, props));
-})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var disabled = _ref6.disabled,
-      _ref6$theme$yoga = _ref6.theme.yoga,
-      colors = _ref6$theme$yoga.colors,
-      spacing = _ref6$theme$yoga.spacing;
-  return "\n    fill: " + (disabled ? colors.text.disabled : colors.text.primary) + ";\n    margin-right: " + spacing.xxsmall + "px;\n  ";
-});
-var ErrorWrapper = styled(Text.Small)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
-  var _ref7$theme$yoga = _ref7.theme.yoga,
-      colors = _ref7$theme$yoga.colors,
-      components = _ref7$theme$yoga.components;
-  return "\n    margin-top: " + components.input.helper.margin.top + "px;\n    font-size: " + components.input.helper.font.size + "px;\n    color: " + colors.feedback.attention[1] + ";\n    position: absolute;\n  ";
-});
-export var toUTC = function toUTC(date) {
+const Selector = styled.div`
+  ${({
+  open,
+  error,
+  disabled,
+  inputFilled,
+  theme: {
+    yoga: { components, colors, spacing }
+  }
+}) => `
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    height: ${components.input.height}px;
+    width: 100%;
+    padding: ${spacing.small}px;
+    background-color: ${colors.white};
+    border-radius: ${components.input.border.radius}px;
+    border-width: ${components.input.border.width}px;
+    border-style: solid;
+    border-color: ${getSelectorBorderColor(
+  open,
+  error,
+  disabled,
+  inputFilled,
+  colors
+)};
+    &:hover {
+      border-color: ${colors.secondary};
+    }
+  `}
+`;
+const Input = styled(Text.Small)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors }
+  }
+}) => `
+    width: 100%;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: ${!disabled ? colors.text.primary : colors.text.disabled}
+  `}
+`;
+const InputPlaceholder = styled(Text.Small)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors }
+  }
+}) => `
+    color: ${!disabled ? colors.text.secondary : colors.text.disabled}
+  `}
+`;
+const TButton = styled.button`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+const Panel = styled.div`
+  ${({
+  theme: {
+    yoga: { components, colors, radii, borders, spacing }
+  }
+}) => `
+    position: absolute;
+    background-color: ${colors.white};
+    border: ${borders.small}px solid ${colors.elements.lineAndBorders};
+    z-index: 1;
+    width: ${components.input.width}px;
+    left: 0;
+    border-radius: ${radii.regular}px;
+    margin-top: ${spacing.xxsmall}px;
+  `}
+`;
+const CalendarIcon = styled(
+  (_a) => {
+    var _b = _a, { _disabled, inputFilled } = _b, props = __objRest(_b, ["_disabled", "inputFilled"]);
+    return !inputFilled ? /* @__PURE__ */ jsx(Booking, __spreadValues({ width: 20, height: 20 }, props)) : /* @__PURE__ */ jsx(BookingFilled, __spreadValues({ width: 20, height: 20 }, props));
+  }
+)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors, spacing }
+  }
+}) => `
+    fill: ${disabled ? colors.text.disabled : colors.text.primary};
+    margin-right: ${spacing.xxsmall}px;
+  `}
+`;
+const ErrorWrapper = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: { colors, components }
+  }
+}) => `
+    margin-top: ${components.input.helper.margin.top}px;
+    font-size: ${components.input.helper.font.size}px;
+    color: ${colors.feedback.attention[1]};
+    position: absolute;
+  `}
+`;
+const toUTC = (date) => {
   return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
-
-function Datepicker(_ref8) {
-  var fullWidth = _ref8.fullWidth,
-      type = _ref8.type,
-      placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
-      onSelectSingle = _ref8.onSelectSingle,
-      disabled = _ref8.disabled,
-      onSelectRange = _ref8.onSelectRange,
-      customOnSelectRange = _ref8.customOnSelectRange,
-      disablePastDates = _ref8.disablePastDates,
-      disableFutureDates = _ref8.disableFutureDates,
-      disablePastFrom = _ref8.disablePastFrom,
-      disableFutureFrom = _ref8.disableFutureFrom,
-      error = _ref8.error,
-      onOpen = _ref8.onOpen,
-      displayEndDateOnly = _ref8.displayEndDateOnly,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
-
-  var _useState = useState(),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = useState(startDate),
-      startDateLocal = _useState2[0],
-      setStartDateLocal = _useState2[1];
-
-  var _useState3 = useState(endDate),
-      endDateLocal = _useState3[0],
-      setEndDateLocal = _useState3[1];
-
-  var ref = useRef(null);
-
-  var _useState4 = useState(false),
-      inputFilled = _useState4[0],
-      setInputFilled = _useState4[1];
-
-  var triggerOnOpen = useCallback(function () {
-    if (onOpen) onOpen(open === 'true');
+function Datepicker(_c) {
+  var _d = _c, {
+    fullWidth,
+    type,
+    placeholder,
+    startDate,
+    endDate,
+    onSelectSingle,
+    disabled,
+    onSelectRange,
+    customOnSelectRange,
+    disablePastDates,
+    disableFutureDates,
+    disablePastFrom,
+    disableFutureFrom,
+    error,
+    onOpen,
+    displayEndDateOnly
+  } = _d, props = __objRest(_d, [
+    "fullWidth",
+    "type",
+    "placeholder",
+    "startDate",
+    "endDate",
+    "onSelectSingle",
+    "disabled",
+    "onSelectRange",
+    "customOnSelectRange",
+    "disablePastDates",
+    "disableFutureDates",
+    "disablePastFrom",
+    "disableFutureFrom",
+    "error",
+    "onOpen",
+    "displayEndDateOnly"
+  ]);
+  const [open, setOpen] = useState();
+  const [startDateLocal, setStartDateLocal] = useState(startDate);
+  const [endDateLocal, setEndDateLocal] = useState(endDate);
+  const ref = useRef(null);
+  const [inputFilled, setInputFilled] = useState(false);
+  const triggerOnOpen = useCallback(() => {
+    if (onOpen)
+      onOpen(open === "true");
   }, [open]);
-
-  var onBlur = function onBlur() {
+  const onBlur = () => {
     setOpen(false.toString());
     triggerOnOpen();
   };
-
-  var checkInputFilled = function checkInputFilled() {
-    if (type === 'range') {
-      if (!customOnSelectRange) setInputFilled(!!(startDateLocal && endDateLocal));else {
+  const checkInputFilled = () => {
+    if (type === "range") {
+      if (!customOnSelectRange)
+        setInputFilled(!!(startDateLocal && endDateLocal));
+      else {
         setInputFilled(startDateLocal && endDateLocal);
       }
     } else {
       setInputFilled(startDate);
     }
   };
-
-  useEffect(function () {
+  useEffect(() => {
     checkInputFilled();
   }, [startDate, startDateLocal, endDateLocal]);
-  useEffect(function () {
+  useEffect(() => {
     setStartDateLocal(startDate);
     setEndDateLocal(endDate);
-
-    if (type === 'single' && startDate) {
+    if (type === "single" && startDate) {
       setOpen(false.toString());
     }
-
-    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
-    if (displayEndDateOnly && !endDate) setInputFilled(false);
+    if ((startDate || endDate) && onSelectRange)
+      onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate)
+      setInputFilled(false);
   }, [startDate, endDate, type]);
-
-  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
+  const onDateSingleSelect = (startLocal) => {
     onSelectSingle(startLocal);
   };
-
-  useEffect(function () {
-    if (open === 'true') ref.current.focus();
+  useEffect(() => {
+    if (open === "true")
+      ref.current.focus();
   }, [open]);
-
-  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
+  const onDateRangeSelect = (selectedDate) => {
     if (customOnSelectRange) {
       customOnSelectRange(selectedDate);
       return;
     }
-
-    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+    const onSelectRangeCallback = (start, end) => {
       if (onSelectRange) {
         onSelectRange(start, end);
       }
     };
-
     if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
       setStartDateLocal(selectedDate);
-      if (endDateLocal) setEndDateLocal(undefined);
-      onSelectRangeCallback(selectedDate, undefined);
+      if (endDateLocal)
+        setEndDateLocal(void 0);
+      onSelectRangeCallback(selectedDate, void 0);
     } else {
       setEndDateLocal(selectedDate);
       onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
-
-  var renderInput = function renderInput(start, end) {
+  const renderInput = (start, end) => {
     if (!start && !end || displayEndDateOnly && !end) {
-      return /*#__PURE__*/React.createElement(InputPlaceholder, {
-        disabled: disabled
-      }, placeholder != null ? placeholder : "Select Date");
+      return /* @__PURE__ */ jsx(InputPlaceholder, { disabled, children: placeholder != null ? placeholder : `Select Date` });
     }
-
-    var dateFormat = 'MMM d, yyyy';
-    if (displayEndDateOnly) return /*#__PURE__*/React.createElement(Input, {
-      disabled: disabled
-    }, end && format(toUTC(end), dateFormat));
-    return start && /*#__PURE__*/React.createElement(Input, {
-      disabled: disabled
-    }, format(toUTC(start), dateFormat), end && " - " + format(toUTC(end), dateFormat));
+    const dateFormat = "MMM d, yyyy";
+    if (displayEndDateOnly)
+      return /* @__PURE__ */ jsx(Input, { disabled, children: end && format(toUTC(end), dateFormat) });
+    return start && /* @__PURE__ */ jsxs(Input, { disabled, children: [
+      format(toUTC(start), dateFormat),
+      end && ` - ${format(toUTC(end), dateFormat)}`
+    ] });
   };
-
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    fullWidth: fullWidth,
-    tabIndex: "0"
-  }, props), /*#__PURE__*/React.createElement(Selector, {
-    open: open === 'true',
-    disabled: disabled,
-    error: error,
-    inputFilled: inputFilled
-  }, renderInput(type === 'range' && !customOnSelectRange ? startDateLocal : startDate, type === 'range' && !customOnSelectRange ? endDateLocal : endDate), /*#__PURE__*/React.createElement(TButton, {
-    onClick: function onClick() {
-      if (!disabled) {
-        setOpen((open !== 'true').toString());
+  return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
+    /* @__PURE__ */ jsxs(
+      Selector,
+      {
+        open: open === "true",
+        disabled,
+        error,
+        inputFilled,
+        children: [
+          renderInput(
+            type === "range" && !customOnSelectRange ? startDateLocal : startDate,
+            type === "range" && !customOnSelectRange ? endDateLocal : endDate
+          ),
+          /* @__PURE__ */ jsx(
+            TButton,
+            {
+              onClick: () => {
+                if (!disabled) {
+                  setOpen((open !== "true").toString());
+                }
+                triggerOnOpen();
+              },
+              children: /* @__PURE__ */ jsx(CalendarIcon, { disabled, inputFilled })
+            }
+          )
+        ]
       }
-
-      triggerOnOpen();
-    }
-  }, /*#__PURE__*/React.createElement(CalendarIcon, {
-    disabled: disabled,
-    inputFilled: inputFilled
-  }))), error && /*#__PURE__*/React.createElement(ErrorWrapper, null, error), open === 'true' && /*#__PURE__*/React.createElement(Panel, {
-    tabIndex: -1,
-    ref: ref,
-    onBlur: onBlur
-  }, /*#__PURE__*/React.createElement(Calendar, {
-    type: type,
-    startDate: startDateLocal,
-    endDate: endDateLocal,
-    onSelectSingle: onDateSingleSelect,
-    onSelectRange: onDateRangeSelect,
-    disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates,
-    disablePastFrom: disablePastFrom,
-    disableFutureFrom: disableFutureFrom
-  })));
+    ),
+    error && /* @__PURE__ */ jsx(ErrorWrapper, { children: error }),
+    open === "true" && /* @__PURE__ */ jsx(Panel, { tabIndex: -1, ref, onBlur, children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        type,
+        startDate: startDateLocal,
+        endDate: endDateLocal,
+        onSelectSingle: onDateSingleSelect,
+        onSelectRange: onDateRangeSelect,
+        disablePastDates,
+        disableFutureDates,
+        disablePastFrom,
+        disableFutureFrom
+      }
+    ) })
+  ] }));
 }
-
 Datepicker.propTypes = {
   fullWidth: bool,
-  type: oneOf(['single', 'range']).isRequired,
+  type: oneOf(["single", "range"]).isRequired,
   placeholder: string,
   startDate: instanceOf(Date),
   endDate: instanceOf(Date),
@@ -271,19 +359,23 @@ Datepicker.propTypes = {
 };
 Datepicker.defaultProps = {
   fullWidth: false,
-  placeholder: undefined,
-  startDate: undefined,
-  endDate: undefined,
+  placeholder: void 0,
+  startDate: void 0,
+  endDate: void 0,
   disabled: false,
-  onSelectSingle: undefined,
-  onSelectRange: undefined,
-  customOnSelectRange: undefined,
+  onSelectSingle: void 0,
+  onSelectRange: void 0,
+  customOnSelectRange: void 0,
   disablePastDates: false,
   disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-  error: undefined,
-  onOpen: undefined,
+  disablePastFrom: void 0,
+  disableFutureFrom: void 0,
+  error: void 0,
+  onOpen: void 0,
   displayEndDateOnly: false
 };
-export default Datepicker;
+var Datepicker_default = Datepicker;
+export {
+  Datepicker_default as default,
+  toUTC
+};