@activecollab/components 1.0.7 → 1.0.8

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,222 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
+import React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
+import { Checkbox } from "../Checkbox";
+import { RadioButton } from "../RadioButton";
+import { Autocomplete } from "../Autocomplete";
+import { Tooltip } from "../Tooltip";
+import { Menu } from "../Menu/Menu";
+import classNames from "classnames";
+import useForkRef from "../../utils/useForkRef";
+import { StyledSelectForm, StyledSelectInput } from "./Styles";
+import { OptionContent } from "./OptionContent/OptionContent";
+export var Select = function Select(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "single" : _ref$type,
+      mode = _ref.mode,
+      target = _ref.target,
+      options = _ref.options,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? [] : _ref$selected,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "bottom-start" : _ref$position,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {
+    return null;
+  } : _ref$onChange,
+      actionIcon = _ref.actionIcon,
+      actionLabel = _ref.actionLabel,
+      placeholder = _ref.placeholder,
+      _ref$emptyAction = _ref.emptyAction,
+      emptyAction = _ref$emptyAction === void 0 ? function () {
+    return null;
+  } : _ref$emptyAction,
+      _ref$disableSearch = _ref.disableSearch,
+      disableSearch = _ref$disableSearch === void 0 ? false : _ref$disableSearch,
+      forceCloseMenu = _ref.forceCloseMenu,
+      selectClassName = _ref.selectClassName,
+      _ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
+      keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
+      onSelectOpen = _ref.onSelectOpen,
+      onSelectClose = _ref.onSelectClose,
+      prop = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useState = useState(),
+      childNode = _useState[0],
+      setChildNode = _useState[1];
+
+  var elementRef = useRef(null);
+  var handleRef = useForkRef(setChildNode, elementRef);
+  var Tag = !target ? "div" : Menu;
+  var formRef = useRef(null);
+
+  var _useState2 = useState(false),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function isGroup(item) {
+    return item.options !== undefined;
+  }
+
+  var selectedOptions = useMemo(function () {
+    return selected instanceof Array ? selected : [selected];
+  }, [selected]);
+  var selectOptions = useMemo(function () {
+    if (!options) {
+      return [];
+    }
+
+    return options;
+  }, [options]);
+  var allOptionValues = useMemo(function () {
+    return selectOptions.reduce(function (acc, option) {
+      if (!isGroup(option)) {
+        return [].concat(acc, [option.id]);
+      }
+
+      var allGroupOptions = option.options.map(function (option) {
+        return option.id;
+      });
+      return [].concat(acc, allGroupOptions);
+    }, []);
+  }, [selectOptions]);
+  var isAllOptionsChecked = useMemo(function () {
+    return allOptionValues.every(function (option) {
+      return selectedOptions.includes(option);
+    });
+  }, [allOptionValues, selectedOptions]);
+  useEffect(function () {
+    open && (childNode == null ? void 0 : childNode.focus());
+  }, [childNode, open]);
+  var handleChange = useCallback(function (selectedValue) {
+    if (selectedValue !== null) {
+      if (type === "single") {
+        if (forceCloseMenu) {
+          setOpen(false);
+        }
+
+        return onChange(selectedValue);
+      } // multiple
+
+
+      var value = function value() {
+        if (selectedValue instanceof Array) {
+          if (selectedValue.every(function (v) {
+            return selectedOptions.includes(v);
+          })) {
+            return selectedOptions.filter(function (v) {
+              return !selectedValue.includes(v);
+            });
+          }
+
+          return selectedValue.concat(selectedOptions);
+        }
+
+        if (selectedOptions.includes(selectedValue)) {
+          return selectedOptions.filter(function (option) {
+            return option !== selectedValue;
+          });
+        }
+
+        return [].concat(selectedOptions, [selectedValue]);
+      };
+
+      return onChange(value());
+    }
+  }, [onChange, type, forceCloseMenu, selectedOptions]);
+  var onClose = useCallback(function () {
+    setOpen(false);
+
+    if (onSelectClose) {
+      onSelectClose();
+    }
+  }, [onSelectClose]);
+  var onOpen = useCallback(function () {
+    setOpen(true);
+
+    if (onSelectOpen) {
+      onSelectOpen();
+    }
+  }, [onSelectOpen]);
+  var props = useMemo(function () {
+    if (target) {
+      return {
+        menuClassName: classNames("c-select", selectClassName),
+        onClose: onClose,
+        onOpen: onOpen,
+        target: target,
+        mode: mode,
+        open: open,
+        position: position
+      };
+    }
+
+    return {
+      className: classNames("c-select", selectClassName)
+    };
+  }, [target, selectClassName, onClose, onOpen, mode, open, position]);
+  var handleEmptyAction = useCallback(function (value) {
+    var _formRef$current;
+
+    emptyAction(value);
+
+    if (forceCloseMenu) {
+      setOpen(false);
+    }
+
+    (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.reset();
+  }, [emptyAction, forceCloseMenu]);
+  var handleDefaultOptionChange = useCallback(function () {
+    if (type === "multiple") {
+      if (selectedOptions.length === allOptionValues.length) {
+        onChange([]);
+      } else {
+        onChange(allOptionValues);
+      }
+    } else {
+      onChange("");
+
+      if (forceCloseMenu) {
+        setOpen(false);
+      }
+    }
+  }, [onChange, type, forceCloseMenu, selectedOptions.length, allOptionValues]);
+  var handleRenderOption = useCallback(function (option, props) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
+      imageUrl: option.image,
+      color: option.color,
+      textColor: option.textColor,
+      name: option.name
+    }), option.id === null ? type === "multiple" ? /*#__PURE__*/React.createElement(Checkbox, _extends({
+      checked: isAllOptionsChecked
+    }, props)) : /*#__PURE__*/React.createElement(RadioButton, _extends({
+      checked: selectedOptions.length < 1 || !selectedOptions[0]
+    }, props)) : type === "multiple" ? /*#__PURE__*/React.createElement(Checkbox, props) : /*#__PURE__*/React.createElement(RadioButton, props));
+  }, [isAllOptionsChecked, selectedOptions, type]);
+  return /*#__PURE__*/React.createElement(Tag, props, /*#__PURE__*/React.createElement("div", null, !disableSearch ? /*#__PURE__*/React.createElement(StyledSelectForm, {
+    ref: formRef
+  }, /*#__PURE__*/React.createElement(StyledSelectInput, {
+    ref: handleRef,
+    autoFocus: true,
+    placeholder: placeholder
+  }), actionIcon && actionLabel && /*#__PURE__*/React.createElement(Tooltip, {
+    popperTooltipStyle: {
+      zIndex: 1301
+    },
+    title: actionLabel
+  }, /*#__PURE__*/React.createElement("div", null, actionIcon)), actionIcon && !actionLabel && actionIcon) : null, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
+    inputEl: childNode,
+    handleEmptyAction: handleEmptyAction,
+    selected: selected,
+    handleChange: handleChange,
+    renderOption: handleRenderOption,
+    options: options,
+    handleDefaultOptionChange: handleDefaultOptionChange,
+    type: type,
+    preselectDefaultValue: type === "single",
+    keepSameOptionsOrder: keepSameOptionsOrder
+  }))));
+};
+Select.displayName = "Select";
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"names":["React","useCallback","useState","useMemo","useEffect","useRef","Checkbox","RadioButton","Autocomplete","Tooltip","Menu","classNames","useForkRef","StyledSelectForm","StyledSelectInput","OptionContent","Select","type","mode","target","options","selected","position","onChange","actionIcon","actionLabel","placeholder","emptyAction","disableSearch","forceCloseMenu","selectClassName","keepSameOptionsOrder","onSelectOpen","onSelectClose","prop","childNode","setChildNode","elementRef","handleRef","Tag","formRef","open","setOpen","isGroup","item","undefined","selectedOptions","Array","selectOptions","allOptionValues","reduce","acc","option","id","allGroupOptions","map","isAllOptionsChecked","every","includes","focus","handleChange","selectedValue","value","v","filter","concat","onClose","onOpen","props","menuClassName","className","handleEmptyAction","current","reset","handleDefaultOptionChange","length","handleRenderOption","image","color","textColor","name","zIndex","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  ReactElement,\n  useMemo,\n  useEffect,\n  useRef,\n  Ref,\n} from \"react\";\nimport { Checkbox } from \"../Checkbox\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Menu } from \"../Menu/Menu\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { IOptionGroupProps } from \"../Select/OptionGroup\";\nimport classNames from \"classnames\";\nimport { Placement } from \"@popperjs/core\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { StyledSelectForm, StyledSelectInput } from \"./Styles\";\nimport { OptionContent } from \"./OptionContent/OptionContent\";\n\ninterface ElementWithRef<T> extends ReactElement {\n  ref?: Ref<T>;\n}\n\ninterface ISelectProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** Menu width mode */\n  mode?: \"normal\" | \"wider\" | \"tiny\";\n  /** Set select target element */\n  target?: ElementWithRef<Element>;\n  /** Set selected items */\n  selected?: (string | number)[] | string | number;\n  /** Set Select position */\n  position?: Placement;\n  /** onChange callback */\n  onChange?: (e: (string | number)[] | string | number) => void;\n  /** Set action icon in select */\n  actionIcon?: ReactElement;\n  /** Set label for action icon */\n  actionLabel?: string;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** Function that triggers when empty is clicked */\n  emptyAction?: (e: string | undefined) => void;\n  /** Removes input from Select */\n  disableSearch?: boolean;\n  /** Close menu on select */\n  forceCloseMenu?: boolean;\n  /** Set select classNames */\n  selectClassName?: string;\n  /** Should the order stay the same after choosing an option */\n  keepSameOptionsOrder?: boolean;\n  /** Callback called when the Select menu is opened */\n  onSelectOpen?: () => void;\n  /** Callback called when the Select menu is closed */\n  onSelectClose?: () => void;\n}\n\nexport const Select: FC<ISelectProps & IAutocompleteProps> = ({\n  type = \"single\",\n  mode,\n  target,\n  options,\n  selected = [],\n  position = \"bottom-start\",\n  onChange = (): null => null,\n  actionIcon,\n  actionLabel,\n  placeholder,\n  emptyAction = (): null => null,\n  disableSearch = false,\n  forceCloseMenu,\n  selectClassName,\n  keepSameOptionsOrder = false,\n  onSelectOpen,\n  onSelectClose,\n  ...prop\n}) => {\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const Tag = !target ? \"div\" : Menu;\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const [open, setOpen] = useState(false);\n\n  function isGroup(\n    item: IOptionGroupProps | IOptionItemProps\n  ): item is IOptionGroupProps {\n    return (item as IOptionGroupProps).options !== undefined;\n  }\n\n  const selectedOptions = useMemo(\n    () => (selected instanceof Array ? selected : [selected]),\n    [selected]\n  );\n\n  const selectOptions = useMemo(() => {\n    if (!options) {\n      return [];\n    }\n    return options;\n  }, [options]);\n\n  const allOptionValues = useMemo(() => {\n    return selectOptions.reduce(\n      (\n        acc: (string | number)[],\n        option: IOptionGroupProps | IOptionItemProps\n      ) => {\n        if (!isGroup(option)) {\n          return [...acc, option.id];\n        }\n        const allGroupOptions = option.options.map((option) => option.id);\n        return [...acc, ...allGroupOptions];\n      },\n      []\n    );\n  }, [selectOptions]);\n\n  const isAllOptionsChecked = useMemo(\n    () => allOptionValues.every((option) => selectedOptions.includes(option)),\n    [allOptionValues, selectedOptions]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n  }, [childNode, open]);\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue !== null) {\n        if (type === \"single\") {\n          if (forceCloseMenu) {\n            setOpen(false);\n          }\n          return onChange(selectedValue);\n        }\n        // multiple\n        const value = (): (string | number)[] => {\n          if (selectedValue instanceof Array) {\n            if (selectedValue.every((v) => selectedOptions.includes(v))) {\n              return selectedOptions.filter((v) => !selectedValue.includes(v));\n            }\n            return selectedValue.concat(selectedOptions);\n          }\n          if (selectedOptions.includes(selectedValue)) {\n            return selectedOptions.filter((option) => option !== selectedValue);\n          }\n          return [...selectedOptions, selectedValue];\n        };\n        return onChange(value());\n      }\n    },\n    [onChange, type, forceCloseMenu, selectedOptions]\n  );\n\n  const onClose = useCallback(() => {\n    setOpen(false);\n    if (onSelectClose) {\n      onSelectClose();\n    }\n  }, [onSelectClose]);\n\n  const onOpen = useCallback(() => {\n    setOpen(true);\n    if (onSelectOpen) {\n      onSelectOpen();\n    }\n  }, [onSelectOpen]);\n\n  const props = useMemo(() => {\n    if (target) {\n      return {\n        menuClassName: classNames(\"c-select\", selectClassName),\n        onClose,\n        onOpen,\n        target,\n        mode,\n        open,\n        position,\n      };\n    }\n    return { className: classNames(\"c-select\", selectClassName) };\n  }, [target, selectClassName, onClose, onOpen, mode, open, position]);\n\n  const handleEmptyAction = useCallback(\n    (value) => {\n      emptyAction(value);\n      if (forceCloseMenu) {\n        setOpen(false);\n      }\n      formRef.current?.reset();\n    },\n    [emptyAction, forceCloseMenu]\n  );\n\n  const handleDefaultOptionChange = useCallback(() => {\n    if (type === \"multiple\") {\n      if (selectedOptions.length === allOptionValues.length) {\n        onChange([]);\n      } else {\n        onChange(allOptionValues);\n      }\n    } else {\n      onChange(\"\");\n      if (forceCloseMenu) {\n        setOpen(false);\n      }\n    }\n  }, [onChange, type, forceCloseMenu, selectedOptions.length, allOptionValues]);\n\n  const handleRenderOption = useCallback(\n    (option, props) => {\n      return (\n        <>\n          <OptionContent\n            imageUrl={option.image}\n            color={option.color}\n            textColor={option.textColor}\n            name={option.name}\n          />\n          {option.id === null ? (\n            type === \"multiple\" ? (\n              <Checkbox checked={isAllOptionsChecked} {...props} />\n            ) : (\n              <RadioButton\n                checked={selectedOptions.length < 1 || !selectedOptions[0]}\n                {...props}\n              />\n            )\n          ) : type === \"multiple\" ? (\n            <Checkbox {...props} />\n          ) : (\n            <RadioButton {...props} />\n          )}\n        </>\n      );\n    },\n    [isAllOptionsChecked, selectedOptions, type]\n  );\n\n  return (\n    <Tag {...props}>\n      <div>\n        {!disableSearch ? (\n          <StyledSelectForm ref={formRef}>\n            <StyledSelectInput\n              ref={handleRef}\n              autoFocus\n              placeholder={placeholder}\n            />\n            {actionIcon && actionLabel && (\n              <Tooltip\n                popperTooltipStyle={{ zIndex: 1301 }}\n                title={actionLabel}\n              >\n                <div>{actionIcon}</div>\n              </Tooltip>\n            )}\n            {actionIcon && !actionLabel && actionIcon}\n          </StyledSelectForm>\n        ) : null}\n        <Autocomplete\n          {...prop}\n          inputEl={childNode}\n          handleEmptyAction={handleEmptyAction}\n          selected={selected}\n          handleChange={handleChange}\n          renderOption={handleRenderOption}\n          options={options}\n          handleDefaultOptionChange={handleDefaultOptionChange}\n          type={type}\n          preselectDefaultValue={type === \"single\"}\n          keepSameOptionsOrder={keepSameOptionsOrder}\n        />\n      </div>\n    </Tag>\n  );\n};\n\nSelect.displayName = \"Select\";\n"],"file":"Select.js"}

package/dist/esm/components/Select/Styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { Input } from "../Input/Input";
+export var StyledSelectForm = styled.form.withConfig({
+  displayName: "Styles__StyledSelectForm",
+  componentId: "sc-gfxqpu-0"
+})(["margin:12px 12px 0 12px;display:flex;*{margin:auto 0;}"]);
+StyledSelectForm.displayName = "StyledSelectForm";
+export var StyledSelectInput = styled(Input).withConfig({
+  displayName: "Styles__StyledSelectInput",
+  componentId: "sc-gfxqpu-1"
+})(["width:100%;border-radius:4px;"]);
+StyledSelectInput.displayName = "StyledSelectInput";
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/Select/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Select/Styles.ts"],"names":["styled","Input","StyledSelectForm","form","displayName","StyledSelectInput"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA,OAAO,IAAMC,gBAAgB,GAAGF,MAAM,CAACG,IAAV;AAAA;AAAA;AAAA,8DAAtB;AASPD,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,iBAAiB,GAAGL,MAAM,CAACC,KAAD,CAAT;AAAA;AAAA;AAAA,qCAAvB;AAKPI,iBAAiB,CAACD,WAAlB,GAAgC,mBAAhC","sourcesContent":["import styled from \"styled-components\";\nimport { Input } from \"../Input/Input\";\n\nexport const StyledSelectForm = styled.form`\n  margin: 12px 12px 0 12px;\n  display: flex;\n\n  * {\n    margin: auto 0;\n  }\n`;\n\nStyledSelectForm.displayName = \"StyledSelectForm\";\n\nexport const StyledSelectInput = styled(Input)`\n  width: 100%;\n  border-radius: 4px;\n`;\n\nStyledSelectInput.displayName = \"StyledSelectInput\";\n"],"file":"Styles.js"}

package/dist/esm/components/Select/index.js

@@ -0,0 +1,4 @@
+export * from "./Select";
+export * from "./Option";
+export * from "./OptionGroup";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,eAAd","sourcesContent":["export * from \"./Select\";\nexport * from \"./Option\";\nexport * from \"./OptionGroup\";\n"],"file":"index.js"}

package/dist/esm/components/SelectDate/DatePickerForm.js

@@ -0,0 +1,86 @@
+import React, { useCallback } from "react";
+import MomentLocaleUtils from "react-day-picker/moment";
+import { Button } from "../Button/Button";
+import CancelCrossIcon from "../Icons/collection/CancelCross";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { StyledButtonClose, StyledButtonCloseColored, StyledButtonSave, StyledSelectDateButtons, StyledSelectDateDatePicker, StyledSelectDateFooter } from "./Styles";
+export var DatePickerForm = function DatePickerForm(_ref) {
+  var mode = _ref.mode,
+      _ref$saveButtonText = _ref.saveButtonText,
+      saveButtonText = _ref$saveButtonText === void 0 ? "Save" : _ref$saveButtonText,
+      _ref$cancelButtonText = _ref.cancelButtonText,
+      cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
+      _ref$clearButtonText = _ref.clearButtonText,
+      clearButtonText = _ref$clearButtonText === void 0 ? "Clear" : _ref$clearButtonText,
+      onSave = _ref.onSave,
+      onCancel = _ref.onCancel,
+      onClear = _ref.onClear,
+      _ref$dateRequired = _ref.dateRequired,
+      dateRequired = _ref$dateRequired === void 0 ? false : _ref$dateRequired,
+      _ref$firstDayOfWeek = _ref.firstDayOfWeek,
+      firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
+      selectedDays = _ref.selectedDays,
+      _ref$selectionMode = _ref.selectionMode,
+      selectionMode = _ref$selectionMode === void 0 ? "custom" : _ref$selectionMode,
+      onChange = _ref.onChange,
+      onDayClick = _ref.onDayClick,
+      onMonthChange = _ref.onMonthChange,
+      month = _ref.month,
+      _ref$disabledSaveButt = _ref.disabledSaveButton,
+      disabledSaveButton = _ref$disabledSaveButt === void 0 ? false : _ref$disabledSaveButt,
+      modifiers = _ref.modifiers,
+      renderDay = _ref.renderDay;
+  var handleOnKeyDown = useCallback(function (e) {
+    if (e.key === "Enter" && typeof onSave === "function") {
+      onSave();
+    } else if ((e.key === "Esc" || e.key === "Escape") && typeof onCancel === "function") {
+      onCancel(e);
+    }
+  }, [onSave, onCancel]);
+  return /*#__PURE__*/React.createElement("div", {
+    onKeyDown: handleOnKeyDown,
+    tabIndex: -1,
+    className: "date-picker-form"
+  }, /*#__PURE__*/React.createElement(StyledSelectDateDatePicker, {
+    month: month,
+    onMonthChange: onMonthChange,
+    onChange: onChange,
+    onDayClick: onDayClick,
+    selectedDays: selectedDays,
+    selectionMode: selectionMode,
+    dateRequired: dateRequired,
+    firstDayOfWeek: firstDayOfWeek,
+    modifiers: modifiers,
+    renderDay: renderDay,
+    localeUtils: MomentLocaleUtils
+  }), mode === "atomic" || !dateRequired ? /*#__PURE__*/React.createElement(StyledSelectDateFooter, {
+    className: "date-picker-footer",
+    $mode: mode
+  }, mode === "atomic" ? /*#__PURE__*/React.createElement(StyledSelectDateButtons, {
+    className: "date-picker-buttons"
+  }, /*#__PURE__*/React.createElement(StyledButtonSave, {
+    size: "small",
+    variant: "primary",
+    onClick: onSave,
+    disabled: disabledSaveButton
+  }, saveButtonText), /*#__PURE__*/React.createElement(Tooltip, {
+    title: cancelButtonText,
+    popperTooltipStyle: {
+      zIndex: 1301
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "text gray",
+    onClick: onCancel
+  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null))), !dateRequired ? /*#__PURE__*/React.createElement(StyledButtonClose, {
+    size: "small",
+    onClick: onClear,
+    variant: "text gray"
+  }, clearButtonText) : null) : !dateRequired && /*#__PURE__*/React.createElement(StyledButtonCloseColored, {
+    size: "small",
+    onClick: onClear,
+    variant: "text colored"
+  }, clearButtonText)) : null);
+};
+DatePickerForm.displayName = "DatePickerForm";
+//# sourceMappingURL=DatePickerForm.js.map

package/dist/esm/components/SelectDate/DatePickerForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SelectDate/DatePickerForm.tsx"],"names":["React","useCallback","MomentLocaleUtils","Button","CancelCrossIcon","Tooltip","StyledButtonClose","StyledButtonCloseColored","StyledButtonSave","StyledSelectDateButtons","StyledSelectDateDatePicker","StyledSelectDateFooter","DatePickerForm","mode","saveButtonText","cancelButtonText","clearButtonText","onSave","onCancel","onClear","dateRequired","firstDayOfWeek","selectedDays","selectionMode","onChange","onDayClick","onMonthChange","month","disabledSaveButton","modifiers","renderDay","handleOnKeyDown","e","key","zIndex","displayName"],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, MouseEvent, useCallback } from \"react\";\nimport { RangeModifier, Modifiers, DayModifiers } from \"react-day-picker\";\nimport MomentLocaleUtils from \"react-day-picker/moment\";\nimport { Button } from \"../Button/Button\";\nimport CancelCrossIcon from \"../Icons/collection/CancelCross\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport {\n  StyledButtonClose,\n  StyledButtonCloseColored,\n  StyledButtonSave,\n  StyledSelectDateButtons,\n  StyledSelectDateDatePicker,\n  StyledSelectDateFooter,\n} from \"./Styles\";\n\ninterface IDatePickerForm {\n  mode: \"instant\" | \"atomic\";\n  saveButtonText?: string;\n  cancelButtonText?: string;\n  clearButtonText?: string;\n  onSave?: () => void;\n  onCancel?: (event: MouseEvent<HTMLElement>) => void;\n  onClear?: () => void;\n  onChange?: (dates?: { from: Date; to: Date }) => void;\n  /** Called when day is clicked */\n  onDayClick?: (day: Date, modifiers: DayModifiers) => void;\n  /** Set selected day or days */\n  selectedDays?: RangeModifier;\n  /** Modifiers */\n  modifiers?: Partial<Modifiers>;\n  /** Render day callback */\n  renderDay?: (date: Date, modifiers: DayModifiers) => ReactNode;\n  /** Set selection range */\n  selectionMode?: string;\n  /** Set is date required */\n  dateRequired?: boolean;\n  /** Set first day of week */\n  firstDayOfWeek?: number;\n  /** on month change callback */\n  onMonthChange?: (month: Date) => void;\n  /** Selected month */\n  month: Date;\n  disabledSaveButton?: boolean;\n}\n\nexport const DatePickerForm: FC<IDatePickerForm> = ({\n  mode,\n  saveButtonText = \"Save\",\n  cancelButtonText = \"Cancel\",\n  clearButtonText = \"Clear\",\n  onSave,\n  onCancel,\n  onClear,\n  dateRequired = false,\n  firstDayOfWeek = 0,\n  selectedDays,\n  selectionMode = \"custom\",\n  onChange,\n  onDayClick,\n  onMonthChange,\n  month,\n  disabledSaveButton = false,\n  modifiers,\n  renderDay,\n}) => {\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Enter\" && typeof onSave === \"function\") {\n        onSave();\n      } else if (\n        (e.key === \"Esc\" || e.key === \"Escape\") &&\n        typeof onCancel === \"function\"\n      ) {\n        onCancel(e);\n      }\n    },\n    [onSave, onCancel]\n  );\n\n  return (\n    <div onKeyDown={handleOnKeyDown} tabIndex={-1} className=\"date-picker-form\">\n      <StyledSelectDateDatePicker\n        month={month}\n        onMonthChange={onMonthChange}\n        onChange={onChange}\n        onDayClick={onDayClick}\n        selectedDays={selectedDays}\n        selectionMode={selectionMode}\n        dateRequired={dateRequired}\n        firstDayOfWeek={firstDayOfWeek}\n        modifiers={modifiers}\n        renderDay={renderDay}\n        localeUtils={MomentLocaleUtils}\n      />\n      {mode === \"atomic\" || !dateRequired ? (\n        <StyledSelectDateFooter className=\"date-picker-footer\" $mode={mode}>\n          {mode === \"atomic\" ? (\n            <StyledSelectDateButtons className=\"date-picker-buttons\">\n              <StyledButtonSave\n                size=\"small\"\n                variant=\"primary\"\n                onClick={onSave}\n                disabled={disabledSaveButton}\n              >\n                {saveButtonText}\n              </StyledButtonSave>\n              <Tooltip\n                title={cancelButtonText}\n                popperTooltipStyle={{ zIndex: 1301 }}\n              >\n                <Button size=\"small\" variant=\"text gray\" onClick={onCancel}>\n                  <CancelCrossIcon />\n                </Button>\n              </Tooltip>\n              {!dateRequired ? (\n                <StyledButtonClose\n                  size=\"small\"\n                  onClick={onClear}\n                  variant=\"text gray\"\n                >\n                  {clearButtonText}\n                </StyledButtonClose>\n              ) : null}\n            </StyledSelectDateButtons>\n          ) : (\n            !dateRequired && (\n              <StyledButtonCloseColored\n                size=\"small\"\n                onClick={onClear}\n                variant=\"text colored\"\n              >\n                {clearButtonText}\n              </StyledButtonCloseColored>\n            )\n          )}\n        </StyledSelectDateFooter>\n      ) : null}\n    </div>\n  );\n};\n\nDatePickerForm.displayName = \"DatePickerForm\";\n"],"file":"DatePickerForm.js"}