@elliemae/ds-datagrids 3.16.0-next.1 → 3.16.0-next.11

package/dist/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -38,7 +38,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = require("@elliemae/ds-button");
 var import_moment = __toESM(require("moment"));
 var import_ds_classnames = require("@elliemae/ds-classnames");
-var import_defaultDateFormat = require("./defaultDateFormat");
+var import_defaultDateFormat = require("./defaultDateFormat.js");
 const blockname = "date-range";
 const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockname, "wrapper");
 const Header = (0, import_ds_classnames.aggregatedClasses)("div")(blockname, "header");
@@ -106,7 +106,7 @@ const formatRangeDate = ({ startDate, endDate }, format = import_defaultDateForm
     return `${endDate.format(format)}`;
   return `${startDate.format(format)} - ${endDate.format(format)}`;
 };
-function DateRangeFilterMenu({
+const DateRangeFilterMenu = ({
   column,
   className,
   isMenuOpened = false,
@@ -116,51 +116,49 @@ function DateRangeFilterMenu({
   dateFormatter = formatRangeDate,
   showHeader = true,
   menuProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_popper.DSPopper,
-    {
-      contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        DateRangePickerContainer,
-        {
-          minimumNights: 0,
-          onChange: ({ startDate, endDate }) => {
-            startDate.startOf("day");
-            endDate.endOf("day");
-            onAddFilter(
-              {
-                group: column.property,
-                label: column.label,
-                value: dateFormatter({ startDate, endDate }),
-                type: "date",
-                filterParams: { start: startDate, end: endDate },
-                transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT),
-                operator: "range"
-              },
-              column
-            );
-            onOpenMenu(false);
-          },
-          showHeader
-        }
-      ) }),
-      isOpen: isMenuOpened,
-      onOpen: onOpenMenu,
-      placement,
-      showArrow: false,
-      triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_button.DSButton,
-        {
-          buttonType: "text",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
-          onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
-          size: "s"
-        }
-      ),
-      zIndex: menuProps.zIndex
-    }
-  );
-}
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_ds_popper.DSPopper,
+  {
+    contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DateRangePickerContainer,
+      {
+        minimumNights: 0,
+        onChange: ({ startDate, endDate }) => {
+          startDate.startOf("day");
+          endDate.endOf("day");
+          onAddFilter(
+            {
+              group: column.property,
+              label: column.label,
+              value: dateFormatter({ startDate, endDate }),
+              type: "date",
+              filterParams: { start: startDate, end: endDate },
+              transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT),
+              operator: "range"
+            },
+            column
+          );
+          onOpenMenu(false);
+        },
+        showHeader
+      }
+    ) }),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement,
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_button.DSButton,
+      {
+        buttonType: "text",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
+        onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+        size: "s"
+      }
+    ),
+    zIndex: menuProps.zIndex
+  }
+);
 DateRangeFilterMenu.propTypes = {
   column: import_prop_types.default.any,
   className: import_prop_types.default.string,

package/dist/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat';\n\nconst blockname = 'date-range';\nconst Wrapper = aggregatedClasses('div')(blockname, 'wrapper');\nconst Header = aggregatedClasses('div')(blockname, 'header');\n\n// const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);\n\nconst DateRangePickerContainer = ({ onChange = () => null, showHeader }) => {\n  const [startDate, setStartDate] = useState('');\n  const [endDate, setEndDate] = useState('');\n\n  // For some reason it worked like this\n  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);\n\n  useEffect(() => {\n    const startMoment = moment(startDate);\n    const endMoment = moment(endDate);\n    if (\n      lastChangeWasPicker &&\n      startDate &&\n      !startDate.includes('_') &&\n      endDate &&\n      !endDate.includes('_') &&\n      endMoment.diff(startMoment) >= 0\n    ) {\n      onChange({ startDate: startMoment, endDate: endMoment });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, lastChangeWasPicker]);\n\n  return (\n    <Wrapper\n      data-testid=\"date-range__wrapper\"\n      onKeyDown={(e) => e.code === 'Enter' && setLastChangeWasPicker(true)}\n      style={{ backgroundColor: 'white', boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)', width: '261px' }}\n    >\n      {showHeader && (\n        <Header style={{ padding: '8px', display: 'flex', justifyContent: 'center' }}>\n          <DSControlledDateRangePicker\n            fromDate={startDate}\n            onFromDateChange={(_start) => {\n              setStartDate(_start);\n              setLastChangeWasPicker(false);\n            }}\n            toDate={endDate}\n            onToDateChange={(_end) => {\n              setEndDate(_end);\n              setLastChangeWasPicker(false);\n            }}\n            type=\"date-range-inputs\"\n          />\n        </Header>\n      )}\n      <DSControlledDateRangePicker\n        fromDate={startDate}\n        onFromDateChange={(_start) => {\n          setStartDate(_start);\n          setLastChangeWasPicker(true);\n        }}\n        toDate={endDate}\n        onToDateChange={(_end) => {\n          setEndDate(_end);\n          setLastChangeWasPicker(true);\n        }}\n        type=\"date-range-picker-controller-only\"\n      />\n    </Wrapper>\n  );\n};\n\nDateRangePickerContainer.propTypes = {\n  onChange: PropTypes.func,\n  showHeader: PropTypes.bool,\n};\n\nconst formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) => {\n  const sameDay = startDate.isSame(endDate, 'day');\n  if (sameDay) return `${endDate.format(format)}`;\n  return `${startDate.format(format)} - ${endDate.format(format)}`;\n};\n\nfunction DateRangeFilterMenu({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  placement = Position.BOTTOM_END,\n  onAddFilter = () => null,\n  dateFormatter = formatRangeDate,\n  showHeader = true,\n  menuProps,\n}) {\n  return (\n    <DSPopper\n      contentComponent={\n        <div className={className}>\n          <DateRangePickerContainer\n            minimumNights={0}\n            onChange={({ startDate, endDate }) => {\n              startDate.startOf('day');\n              endDate.endOf('day');\n              onAddFilter(\n                {\n                  group: column.property,\n                  label: column.label,\n                  value: dateFormatter({ startDate, endDate }),\n                  type: 'date', // todo: create constants for filter types\n                  filterParams: { start: startDate, end: endDate },\n                  transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                  operator: 'range',\n                },\n                column,\n              );\n              onOpenMenu(false);\n            }}\n            showHeader={showHeader}\n          />\n        </div>\n      }\n      isOpen={isMenuOpened}\n      onOpen={onOpenMenu}\n      placement={placement}\n      showArrow={false}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<DatePicker2 />}\n          onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n          size=\"s\"\n        />\n      }\n      zIndex={menuProps.zIndex}\n    />\n  );\n}\n\nDateRangeFilterMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  showHeader: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { DateRangeFilterMenu };\nexport default DateRangeFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';\n\nconst blockname = 'date-range';\nconst Wrapper = aggregatedClasses('div')(blockname, 'wrapper');\nconst Header = aggregatedClasses('div')(blockname, 'header');\n\n// const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);\n\nconst DateRangePickerContainer = ({ onChange = () => null, showHeader }) => {\n  const [startDate, setStartDate] = useState('');\n  const [endDate, setEndDate] = useState('');\n\n  // For some reason it worked like this\n  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);\n\n  useEffect(() => {\n    const startMoment = moment(startDate);\n    const endMoment = moment(endDate);\n    if (\n      lastChangeWasPicker &&\n      startDate &&\n      !startDate.includes('_') &&\n      endDate &&\n      !endDate.includes('_') &&\n      endMoment.diff(startMoment) >= 0\n    ) {\n      onChange({ startDate: startMoment, endDate: endMoment });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, lastChangeWasPicker]);\n\n  return (\n    <Wrapper\n      data-testid=\"date-range__wrapper\"\n      onKeyDown={(e) => e.code === 'Enter' && setLastChangeWasPicker(true)}\n      style={{ backgroundColor: 'white', boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)', width: '261px' }}\n    >\n      {showHeader && (\n        <Header style={{ padding: '8px', display: 'flex', justifyContent: 'center' }}>\n          <DSControlledDateRangePicker\n            fromDate={startDate}\n            onFromDateChange={(_start) => {\n              setStartDate(_start);\n              setLastChangeWasPicker(false);\n            }}\n            toDate={endDate}\n            onToDateChange={(_end) => {\n              setEndDate(_end);\n              setLastChangeWasPicker(false);\n            }}\n            type=\"date-range-inputs\"\n          />\n        </Header>\n      )}\n      <DSControlledDateRangePicker\n        fromDate={startDate}\n        onFromDateChange={(_start) => {\n          setStartDate(_start);\n          setLastChangeWasPicker(true);\n        }}\n        toDate={endDate}\n        onToDateChange={(_end) => {\n          setEndDate(_end);\n          setLastChangeWasPicker(true);\n        }}\n        type=\"date-range-picker-controller-only\"\n      />\n    </Wrapper>\n  );\n};\n\nDateRangePickerContainer.propTypes = {\n  onChange: PropTypes.func,\n  showHeader: PropTypes.bool,\n};\n\nconst formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) => {\n  const sameDay = startDate.isSame(endDate, 'day');\n  if (sameDay) return `${endDate.format(format)}`;\n  return `${startDate.format(format)} - ${endDate.format(format)}`;\n};\n\nconst DateRangeFilterMenu = ({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  placement = Position.BOTTOM_END,\n  onAddFilter = () => null,\n  dateFormatter = formatRangeDate,\n  showHeader = true,\n  menuProps,\n}) => (\n  <DSPopper\n    contentComponent={\n      <div className={className}>\n        <DateRangePickerContainer\n          minimumNights={0}\n          onChange={({ startDate, endDate }) => {\n            startDate.startOf('day');\n            endDate.endOf('day');\n            onAddFilter(\n              {\n                group: column.property,\n                label: column.label,\n                value: dateFormatter({ startDate, endDate }),\n                type: 'date', // todo: create constants for filter types\n                filterParams: { start: startDate, end: endDate },\n                transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                operator: 'range',\n              },\n              column,\n            );\n            onOpenMenu(false);\n          }}\n          showHeader={showHeader}\n        />\n      </div>\n    }\n    isOpen={isMenuOpened}\n    onOpen={onOpenMenu}\n    placement={placement}\n    showArrow={false}\n    triggerComponent={\n      <DSButton\n        buttonType=\"text\"\n        icon={<DatePicker2 />}\n        onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n        size=\"s\"\n      />\n    }\n    zIndex={menuProps.zIndex}\n  />\n);\n\nDateRangeFilterMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  showHeader: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { DateRangeFilterMenu };\nexport default DateRangeFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["moment", "PropTypes", "Position"]
 }

package/dist/cjs/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js

@@ -38,7 +38,7 @@ var import_ds_popper = require("@elliemae/ds-popper");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = require("@elliemae/ds-button");
 var import_moment = __toESM(require("moment"));
-var import_defaultDateFormat = require("./defaultDateFormat");
+var import_defaultDateFormat = require("./defaultDateFormat.js");
 const SingleDatePickerContainer = ({ onChange = () => null, showHeader }) => {
   const [date, setDate] = (0, import_react.useState)("");
   const handleDateChange = (0, import_react.useCallback)(
@@ -59,7 +59,7 @@ SingleDatePickerContainer.propTypes = {
   showHeader: import_prop_types.default.bool
 };
 const formatDate = (date, format = import_defaultDateFormat.DEFAULT_DATE_FORMAT) => date.format(format);
-function SingleDateFilterMenu({
+const SingleDateFilterMenu = ({
   column,
   className,
   isMenuOpened = false,
@@ -69,53 +69,51 @@ function SingleDateFilterMenu({
   dateFormatter = formatDate,
   showHeader = false,
   menuProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_popper.DSPopper,
-    {
-      contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-testid": "date-single__wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        SingleDatePickerContainer,
-        {
-          minimumNights: 0,
-          onChange: (date) => {
-            const t = date.clone();
-            onAddFilter(
-              {
-                group: column.property,
-                label: column.label,
-                value: dateFormatter(date, column.dateFormat),
-                type: "date",
-                operator: "range",
-                filterParams: {
-                  start: date.startOf("day"),
-                  end: t.endOf("day")
-                },
-                transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT)
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_ds_popper.DSPopper,
+  {
+    contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-testid": "date-single__wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SingleDatePickerContainer,
+      {
+        minimumNights: 0,
+        onChange: (date) => {
+          const t = date.clone();
+          onAddFilter(
+            {
+              group: column.property,
+              label: column.label,
+              value: dateFormatter(date, column.dateFormat),
+              type: "date",
+              operator: "range",
+              filterParams: {
+                start: date.startOf("day"),
+                end: t.endOf("day")
               },
-              column
-            );
-            onOpenMenu(false);
-          },
-          showHeader
-        }
-      ) }),
-      isOpen: isMenuOpened,
-      onOpen: onOpenMenu,
-      placement,
-      showArrow: false,
-      triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_button.DSButton,
-        {
-          buttonType: "text",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
-          onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
-          size: "s"
-        }
-      ),
-      zIndex: menuProps.zIndex
-    }
-  );
-}
+              transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT)
+            },
+            column
+          );
+          onOpenMenu(false);
+        },
+        showHeader
+      }
+    ) }),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement,
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_button.DSButton,
+      {
+        buttonType: "text",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
+        onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+        size: "s"
+      }
+    ),
+    zIndex: menuProps.zIndex
+  }
+);
 SingleDateFilterMenu.propTypes = {
   column: import_prop_types.default.any,
   className: import_prop_types.default.string,

package/dist/cjs/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport moment from 'moment';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat';\n\nconst SingleDatePickerContainer = ({ onChange = () => null, showHeader }) => {\n  const [date, setDate] = useState('');\n\n  const handleDateChange = useCallback(\n    (data) => {\n      if (!data.includes('_')) onChange(moment(data));\n      setDate(data);\n    },\n    [onChange],\n  );\n\n  return (\n    <div style={{ boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)' }}>\n      {showHeader && (\n        <Grid p=\"xxs\">\n          <DSControlledDateTimePicker date={date} onDateChange={handleDateChange} type=\"date-inputs\" isClearable />\n        </Grid>\n      )}\n      <DSControlledDateTimePicker date={date} onDateChange={handleDateChange} type=\"date-picker-controller-only\" />\n    </div>\n  );\n};\n\nSingleDatePickerContainer.propTypes = {\n  onChange: PropTypes.func,\n  showHeader: PropTypes.bool,\n};\n\nconst formatDate = (date, format = DEFAULT_DATE_FORMAT) => date.format(format);\n\nfunction SingleDateFilterMenu({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  placement = Position.BOTTOM_END,\n  onAddFilter = () => null,\n  dateFormatter = formatDate,\n  showHeader = false,\n  menuProps,\n}) {\n  return (\n    <DSPopper\n      contentComponent={\n        <div className={className} data-testid=\"date-single__wrapper\">\n          <SingleDatePickerContainer\n            minimumNights={0}\n            onChange={(date) => {\n              const t = date.clone();\n              onAddFilter(\n                {\n                  group: column.property,\n                  label: column.label,\n                  value: dateFormatter(date, column.dateFormat),\n                  type: 'date',\n                  operator: 'range',\n                  filterParams: {\n                    start: date.startOf('day'),\n                    end: t.endOf('day'),\n                  },\n                  transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                },\n                column,\n              );\n              onOpenMenu(false);\n            }}\n            showHeader={showHeader}\n          />\n        </div>\n      }\n      isOpen={isMenuOpened}\n      onOpen={onOpenMenu}\n      placement={placement}\n      showArrow={false}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<DatePicker2 />}\n          onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n          size=\"s\"\n        />\n      }\n      zIndex={menuProps.zIndex}\n    />\n  );\n}\n\nSingleDateFilterMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  showHeader: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { SingleDateFilterMenu };\nexport default SingleDateFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport moment from 'moment';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';\n\nconst SingleDatePickerContainer = ({ onChange = () => null, showHeader }) => {\n  const [date, setDate] = useState('');\n\n  const handleDateChange = useCallback(\n    (data) => {\n      if (!data.includes('_')) onChange(moment(data));\n      setDate(data);\n    },\n    [onChange],\n  );\n\n  return (\n    <div style={{ boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)' }}>\n      {showHeader && (\n        <Grid p=\"xxs\">\n          <DSControlledDateTimePicker date={date} onDateChange={handleDateChange} type=\"date-inputs\" isClearable />\n        </Grid>\n      )}\n      <DSControlledDateTimePicker date={date} onDateChange={handleDateChange} type=\"date-picker-controller-only\" />\n    </div>\n  );\n};\n\nSingleDatePickerContainer.propTypes = {\n  onChange: PropTypes.func,\n  showHeader: PropTypes.bool,\n};\n\nconst formatDate = (date, format = DEFAULT_DATE_FORMAT) => date.format(format);\n\nconst SingleDateFilterMenu = ({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  placement = Position.BOTTOM_END,\n  onAddFilter = () => null,\n  dateFormatter = formatDate,\n  showHeader = false,\n  menuProps,\n}) => (\n  <DSPopper\n    contentComponent={\n      <div className={className} data-testid=\"date-single__wrapper\">\n        <SingleDatePickerContainer\n          minimumNights={0}\n          onChange={(date) => {\n            const t = date.clone();\n            onAddFilter(\n              {\n                group: column.property,\n                label: column.label,\n                value: dateFormatter(date, column.dateFormat),\n                type: 'date',\n                operator: 'range',\n                filterParams: {\n                  start: date.startOf('day'),\n                  end: t.endOf('day'),\n                },\n                transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n              },\n              column,\n            );\n            onOpenMenu(false);\n          }}\n          showHeader={showHeader}\n        />\n      </div>\n    }\n    isOpen={isMenuOpened}\n    onOpen={onOpenMenu}\n    placement={placement}\n    showArrow={false}\n    triggerComponent={\n      <DSButton\n        buttonType=\"text\"\n        icon={<DatePicker2 />}\n        onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n        size=\"s\"\n      />\n    }\n    zIndex={menuProps.zIndex}\n  />\n);\n\nSingleDateFilterMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  showHeader: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { SingleDateFilterMenu };\nexport default SingleDateFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAA6C;AAC7C,wBAAsB;AACtB,qBAAqB;AACrB,gCAA2C;AAC3C,uBAAsD;AACtD,sBAA4B;AAC5B,uBAAyB;AACzB,oBAAmB;AACnB,+BAAoC;AAEpC,MAAM,4BAA4B,CAAC,EAAE,WAAW,MAAM,MAAM,WAAW,MAAM;AAC3E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,EAAE;AAEnC,QAAM,uBAAmB;AAAA,IACvB,CAAC,SAAS;AACR,UAAI,CAAC,KAAK,SAAS,GAAG;AAAG,qBAAS,cAAAA,SAAO,IAAI,CAAC;AAC9C,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,WAAW,gCAAgC,GACtD;AAAA,kBACC,4CAAC,uBAAK,GAAE,OACN,sDAAC,wDAA2B,MAAY,cAAc,kBAAkB,MAAK,eAAc,aAAW,MAAC,GACzG;AAAA,IAEF,4CAAC,wDAA2B,MAAY,cAAc,kBAAkB,MAAK,+BAA8B;AAAA,KAC7G;AAEJ;AAEA,0BAA0B,YAAY;AAAA,EACpC,UAAU,kBAAAC,QAAU;AAAA,EACpB,YAAY,kBAAAA,QAAU;AACxB;AAEA,MAAM,aAAa,CAAC,MAAM,SAAS,iDAAwB,KAAK,OAAO,MAAM;AAE7E,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,aAAa,MAAM;AAAA,EACnB,YAAY,iBAAAC,gBAAS;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,kBACE,4CAAC,SAAI,WAAsB,eAAY,wBACrC;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,UAAU,CAAC,SAAS;AAClB,gBAAM,IAAI,KAAK,MAAM;AACrB;AAAA,YACE;AAAA,cACE,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,OAAO,cAAc,MAAM,OAAO,UAAU;AAAA,cAC5C,MAAM;AAAA,cACN,UAAU;AAAA,cACV,cAAc;AAAA,gBACZ,OAAO,KAAK,QAAQ,KAAK;AAAA,gBACzB,KAAK,EAAE,MAAM,KAAK;AAAA,cACpB;AAAA,cACA,mBAAmB,CAAC,cAAU,cAAAF,SAAO,OAAO,OAAO,cAAc,4CAAmB;AAAA,YACtF;AAAA,YACA;AAAA,UACF;AACA,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,IAEF,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,kBACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,MAAM,4CAAC,+BAAY;AAAA,QACnB,SAAS,MAAO,CAAC,eAAe,WAAW,IAAI,IAAI,WAAW,KAAK;AAAA,QACnE,MAAK;AAAA;AAAA,IACP;AAAA,IAEF,QAAQ,UAAU;AAAA;AACpB;AAGF,qBAAqB,YAAY;AAAA,EAC/B,QAAQ,kBAAAC,QAAU;AAAA,EAClB,WAAW,kBAAAA,QAAU;AAAA,EACrB,cAAc,kBAAAA,QAAU;AAAA,EACxB,YAAY,kBAAAA,QAAU;AAAA,EACtB,WAAW,kBAAAA,QAAU;AAAA,EACrB,aAAa,kBAAAA,QAAU;AAAA,EACvB,eAAe,kBAAAA,QAAU;AAAA,EACzB,YAAY,kBAAAA,QAAU;AAAA,EACtB,WAAW,kBAAAA,QAAU;AACvB;AAGA,IAAO,+BAAQ;",
   "names": ["moment", "PropTypes", "Position"]
 }

package/dist/cjs/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js

@@ -39,7 +39,7 @@ var import_ds_button = require("@elliemae/ds-button");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_moment = __toESM(require("moment"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_defaultDateFormat = require("./defaultDateFormat");
+var import_defaultDateFormat = require("./defaultDateFormat.js");
 const StyledGridWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   .notCurrentMonth {
     opacity: ${(props) => props.enableOutsideDays ? "1" : "0"};
@@ -159,7 +159,7 @@ const formatRangeDate = ({ startDate, endDate }, format = import_defaultDateForm
     return `${endDate.format(format)}`;
   return `${startDate.format(format)} - ${endDate.format(format)}`;
 };
-function SingleRangeSwitcherMenu({
+const SingleRangeSwitcherMenu = ({
   column,
   className,
   isMenuOpened = false,
@@ -169,50 +169,48 @@ function SingleRangeSwitcherMenu({
   dateFormatter = formatRangeDate,
   enableOutsideDays = true,
   menuProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_popper.DSPopper,
-    {
-      contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        SingleRangeSwitcherContainer,
-        {
-          enableOutsideDays,
-          onChange: ({ startDate, endDate }) => {
-            startDate.startOf("day");
-            endDate.endOf("day");
-            onAddFilter(
-              {
-                group: column.property,
-                label: column.label,
-                value: dateFormatter({ startDate, endDate }, column.format),
-                type: "date",
-                filterParams: { start: startDate, end: endDate },
-                transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT),
-                operator: "range"
-              },
-              column
-            );
-            onOpenMenu(false);
-          }
-        }
-      ) }),
-      isOpen: isMenuOpened,
-      onOpen: onOpenMenu,
-      placement,
-      showArrow: false,
-      triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_button.DSButton,
-        {
-          buttonType: "text",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
-          onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
-          size: "s"
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_ds_popper.DSPopper,
+  {
+    contentComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SingleRangeSwitcherContainer,
+      {
+        enableOutsideDays,
+        onChange: ({ startDate, endDate }) => {
+          startDate.startOf("day");
+          endDate.endOf("day");
+          onAddFilter(
+            {
+              group: column.property,
+              label: column.label,
+              value: dateFormatter({ startDate, endDate }, column.format),
+              type: "date",
+              filterParams: { start: startDate, end: endDate },
+              transformRowValue: (value) => (0, import_moment.default)(value, column.dateFormat || import_defaultDateFormat.DEFAULT_DATE_FORMAT),
+              operator: "range"
+            },
+            column
+          );
+          onOpenMenu(false);
         }
-      ),
-      zIndex: menuProps.zIndex
-    }
-  );
-}
+      }
+    ) }),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement,
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_button.DSButton,
+      {
+        buttonType: "text",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
+        onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+        size: "s"
+      }
+    ),
+    zIndex: menuProps.zIndex
+  }
+);
 SingleRangeSwitcherMenu.propTypes = {
   column: import_prop_types.default.any,
   className: import_prop_types.default.string,

package/dist/cjs/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  DSControlledDateTimePicker,\n  DSControlledDateRangePicker,\n  DSControlledCheckbox,\n} from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\nimport moment from 'moment';\nimport { styled } from '@elliemae/ds-system';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat';\n\nconst StyledGridWrapper = styled(Grid)`\n  .notCurrentMonth {\n    opacity: ${(props) => (props.enableOutsideDays ? '1' : '0')};\n    pointer-events: ${(props) => (props.enableOutsideDays ? 'auto' : 'none')};\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function\nconst noop = (...args) => {};\n\nconst SingleRangeSwitcherContainer = ({ onChange = noop, enableOutsideDays }) => {\n  const [startDate, setStartDate] = useState('');\n  const [endDate, setEndDate] = useState('');\n\n  // For some reason it worked like this\n  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);\n\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    const startMoment = moment(startDate);\n    const endMoment = moment(endDate);\n    if (\n      lastChangeWasPicker &&\n      startDate &&\n      !startDate.includes('_') &&\n      endDate &&\n      !endDate.includes('_') &&\n      endMoment.diff(startMoment) >= 0\n    ) {\n      onChange({ startDate: startMoment, endDate: endMoment });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, lastChangeWasPicker]);\n\n  return (\n    <StyledGridWrapper\n      data-testid=\"date-single-range__wrapper\"\n      style={{\n        backgroundColor: 'white',\n        boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',\n        width: '261px',\n        display: 'grid',\n        justifyContent: 'center',\n      }}\n      cols={['100%']}\n      enableOutsideDays={enableOutsideDays}\n      onKeyDown={(e) => e.code === 'Enter' && setLastChangeWasPicker(true)}\n    >\n      <Grid gutter=\"xxs\" alignItems=\"center\" p=\"xxs\">\n        <DSControlledCheckbox\n          checked={isDateRange}\n          name=\"Date range\"\n          label=\"Range\"\n          id=\"date-range-switcher-id-internal\"\n          onChange={() => {\n            setIsDateRange(!isDateRange);\n            setStartDate('');\n            setEndDate('');\n          }}\n        />\n        <div style={{ width: 'fit-content' }}>\n          {isDateRange ? (\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={(_start) => {\n                setStartDate(_start);\n                setLastChangeWasPicker(false);\n              }}\n              toDate={endDate}\n              onToDateChange={(_end) => {\n                setEndDate(_end);\n                setLastChangeWasPicker(false);\n              }}\n              type=\"date-range-inputs\"\n            />\n          ) : (\n            <DSControlledDateTimePicker\n              date={startDate}\n              onDateChange={(_date) => {\n                setLastChangeWasPicker(false);\n                setStartDate(_date);\n                setEndDate(_date);\n              }}\n              type=\"date-inputs\"\n            />\n          )}\n        </div>\n      </Grid>\n      <Grid>\n        {isDateRange ? (\n          <DSControlledDateRangePicker\n            fromDate={startDate}\n            onFromDateChange={(_start) => {\n              setStartDate(_start);\n              setLastChangeWasPicker(true);\n            }}\n            toDate={endDate}\n            onToDateChange={(_end) => {\n              setEndDate(_end);\n              setLastChangeWasPicker(true);\n            }}\n            type=\"date-range-picker-controller-only\"\n          />\n        ) : (\n          <DSControlledDateTimePicker\n            date={startDate}\n            onDateChange={(_date) => {\n              setLastChangeWasPicker(true);\n              setStartDate(_date);\n              setEndDate(_date);\n            }}\n            type=\"date-picker-controller-only\"\n          />\n        )}\n      </Grid>\n    </StyledGridWrapper>\n  );\n};\n\nSingleRangeSwitcherContainer.propTypes = {\n  onChange: PropTypes.func,\n  enableOutsideDays: PropTypes.bool,\n};\n\nconst formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) => {\n  const sameDay = startDate.isSame(endDate, 'day');\n  if (sameDay) return `${endDate.format(format)}`;\n  return `${startDate.format(format)} - ${endDate.format(format)}`;\n};\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nfunction SingleRangeSwitcherMenu({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = noop,\n  placement = Position.BOTTOM_END,\n  onAddFilter = noop,\n  dateFormatter = formatRangeDate,\n  enableOutsideDays = true,\n  menuProps,\n}): JSX.Element {\n  return (\n    <DSPopper\n      contentComponent={\n        <div className={className}>\n          <SingleRangeSwitcherContainer\n            enableOutsideDays={enableOutsideDays}\n            onChange={({ startDate, endDate }) => {\n              startDate.startOf('day');\n              endDate.endOf('day');\n              onAddFilter(\n                {\n                  group: column.property,\n                  label: column.label,\n                  value: dateFormatter({ startDate, endDate }, column.format),\n                  type: 'date', // todo: create constants for filter types\n                  filterParams: { start: startDate, end: endDate },\n                  transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                  operator: 'range',\n                },\n                column,\n              );\n              onOpenMenu(false);\n            }}\n          />\n        </div>\n      }\n      isOpen={isMenuOpened}\n      onOpen={onOpenMenu}\n      placement={placement}\n      showArrow={false}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<DatePicker2 />}\n          onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n          size=\"s\"\n        />\n      }\n      zIndex={menuProps.zIndex}\n    />\n  );\n}\n\nSingleRangeSwitcherMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  enableOutsideDays: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { SingleRangeSwitcherMenu };\nexport default SingleRangeSwitcherMenu;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  DSControlledDateTimePicker,\n  DSControlledDateRangePicker,\n  DSControlledCheckbox,\n} from '@elliemae/ds-controlled-form';\nimport { DSPopper, PopperPositions as Position } from '@elliemae/ds-popper';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\nimport moment from 'moment';\nimport { styled } from '@elliemae/ds-system';\nimport { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';\n\nconst StyledGridWrapper = styled(Grid)`\n  .notCurrentMonth {\n    opacity: ${(props) => (props.enableOutsideDays ? '1' : '0')};\n    pointer-events: ${(props) => (props.enableOutsideDays ? 'auto' : 'none')};\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function\nconst noop = (...args) => {};\n\nconst SingleRangeSwitcherContainer = ({ onChange = noop, enableOutsideDays }) => {\n  const [startDate, setStartDate] = useState('');\n  const [endDate, setEndDate] = useState('');\n\n  // For some reason it worked like this\n  const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);\n\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    const startMoment = moment(startDate);\n    const endMoment = moment(endDate);\n    if (\n      lastChangeWasPicker &&\n      startDate &&\n      !startDate.includes('_') &&\n      endDate &&\n      !endDate.includes('_') &&\n      endMoment.diff(startMoment) >= 0\n    ) {\n      onChange({ startDate: startMoment, endDate: endMoment });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, lastChangeWasPicker]);\n\n  return (\n    <StyledGridWrapper\n      data-testid=\"date-single-range__wrapper\"\n      style={{\n        backgroundColor: 'white',\n        boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',\n        width: '261px',\n        display: 'grid',\n        justifyContent: 'center',\n      }}\n      cols={['100%']}\n      enableOutsideDays={enableOutsideDays}\n      onKeyDown={(e) => e.code === 'Enter' && setLastChangeWasPicker(true)}\n    >\n      <Grid gutter=\"xxs\" alignItems=\"center\" p=\"xxs\">\n        <DSControlledCheckbox\n          checked={isDateRange}\n          name=\"Date range\"\n          label=\"Range\"\n          id=\"date-range-switcher-id-internal\"\n          onChange={() => {\n            setIsDateRange(!isDateRange);\n            setStartDate('');\n            setEndDate('');\n          }}\n        />\n        <div style={{ width: 'fit-content' }}>\n          {isDateRange ? (\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={(_start) => {\n                setStartDate(_start);\n                setLastChangeWasPicker(false);\n              }}\n              toDate={endDate}\n              onToDateChange={(_end) => {\n                setEndDate(_end);\n                setLastChangeWasPicker(false);\n              }}\n              type=\"date-range-inputs\"\n            />\n          ) : (\n            <DSControlledDateTimePicker\n              date={startDate}\n              onDateChange={(_date) => {\n                setLastChangeWasPicker(false);\n                setStartDate(_date);\n                setEndDate(_date);\n              }}\n              type=\"date-inputs\"\n            />\n          )}\n        </div>\n      </Grid>\n      <Grid>\n        {isDateRange ? (\n          <DSControlledDateRangePicker\n            fromDate={startDate}\n            onFromDateChange={(_start) => {\n              setStartDate(_start);\n              setLastChangeWasPicker(true);\n            }}\n            toDate={endDate}\n            onToDateChange={(_end) => {\n              setEndDate(_end);\n              setLastChangeWasPicker(true);\n            }}\n            type=\"date-range-picker-controller-only\"\n          />\n        ) : (\n          <DSControlledDateTimePicker\n            date={startDate}\n            onDateChange={(_date) => {\n              setLastChangeWasPicker(true);\n              setStartDate(_date);\n              setEndDate(_date);\n            }}\n            type=\"date-picker-controller-only\"\n          />\n        )}\n      </Grid>\n    </StyledGridWrapper>\n  );\n};\n\nSingleRangeSwitcherContainer.propTypes = {\n  onChange: PropTypes.func,\n  enableOutsideDays: PropTypes.bool,\n};\n\nconst formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) => {\n  const sameDay = startDate.isSame(endDate, 'day');\n  if (sameDay) return `${endDate.format(format)}`;\n  return `${startDate.format(format)} - ${endDate.format(format)}`;\n};\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst SingleRangeSwitcherMenu = ({\n  column,\n  className,\n  isMenuOpened = false,\n  onOpenMenu = noop,\n  placement = Position.BOTTOM_END,\n  onAddFilter = noop,\n  dateFormatter = formatRangeDate,\n  enableOutsideDays = true,\n  menuProps,\n}): JSX.Element => (\n  <DSPopper\n    contentComponent={\n      <div className={className}>\n        <SingleRangeSwitcherContainer\n          enableOutsideDays={enableOutsideDays}\n          onChange={({ startDate, endDate }) => {\n            startDate.startOf('day');\n            endDate.endOf('day');\n            onAddFilter(\n              {\n                group: column.property,\n                label: column.label,\n                value: dateFormatter({ startDate, endDate }, column.format),\n                type: 'date', // todo: create constants for filter types\n                filterParams: { start: startDate, end: endDate },\n                transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),\n                operator: 'range',\n              },\n              column,\n            );\n            onOpenMenu(false);\n          }}\n        />\n      </div>\n    }\n    isOpen={isMenuOpened}\n    onOpen={onOpenMenu}\n    placement={placement}\n    showArrow={false}\n    triggerComponent={\n      <DSButton\n        buttonType=\"text\"\n        icon={<DatePicker2 />}\n        onClick={() => (!isMenuOpened ? onOpenMenu(true) : onOpenMenu(false))}\n        size=\"s\"\n      />\n    }\n    zIndex={menuProps.zIndex}\n  />\n);\n\nSingleRangeSwitcherMenu.propTypes = {\n  column: PropTypes.any,\n  className: PropTypes.string,\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  placement: PropTypes.string,\n  onAddFilter: PropTypes.func,\n  dateFormatter: PropTypes.any,\n  enableOutsideDays: PropTypes.bool,\n  menuProps: PropTypes.any,\n};\n\nexport { SingleRangeSwitcherMenu };\nexport default SingleRangeSwitcherMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["moment", "PropTypes", "Position"]
 }

package/dist/cjs/plugins/filterable/components/filterable-menus/TextFilterMenu.js

@@ -38,7 +38,7 @@ var import_ds_button = require("@elliemae/ds-button");
 var import_ds_popper = require("@elliemae/ds-popper");
 var import_ds_menu = require("@elliemae/ds-menu");
 var import_ds_icons = require("@elliemae/ds-icons");
-function TextFilterMenu({
+const TextFilterMenu = ({
   column,
   menuStyle = {},
   className,
@@ -52,7 +52,7 @@ function TextFilterMenu({
   onRemoveFilter = () => null,
   maxOptions = 10,
   isMulti = false
-}) {
+}) => {
   const { options, ...otherMenuProps } = menuProps;
   const generateOption = (option, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu.Menu.ItemCheckbox, { label: option.label, name: option.id }, idx);
   const renderOptions = (arr) => arr.map(generateOption);
@@ -159,7 +159,7 @@ function TextFilterMenu({
       )
     }
   );
-}
+};
 TextFilterMenu.propTypes = {
   column: import_prop_types.default.any,
   menuStyle: import_prop_types.default.shape({}),

package/dist/cjs/plugins/filterable/components/filterable-menus/TextFilterMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/TextFilterMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { compact } from 'lodash';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DSButton } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\nimport { Menu, MenuCombobox } from '@elliemae/ds-menu';\nimport { SearchSmall } from '@elliemae/ds-icons';\n\nfunction TextFilterMenu({\n  column,\n  menuStyle = {},\n  className,\n  filters = [],\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  onClose = () => null,\n  placement = Position.BOTTOM_END,\n  menuProps = {},\n  onAddFilter = () => null,\n  onRemoveFilter = () => null,\n  maxOptions = 10,\n  isMulti = false,\n}) {\n  const { options, ...otherMenuProps } = menuProps;\n\n  const generateOption = (option, idx) => <Menu.ItemCheckbox key={idx} label={option.label} name={option.id} />;\n\n  const renderOptions = (arr) => arr.map(generateOption);\n\n  const filtersForColumn = filters.filter((f) => f.group === column.property);\n\n  const initialSelectedOptions = filtersForColumn.map((f) => f.value);\n\n  const [selected, setSelected] = useState(initialSelectedOptions);\n\n  React.useEffect(() => {\n    const filtersForColumn2 = filters.filter((f) => f.group === column.property);\n    setSelected(filtersForColumn2.map((f) => f.value));\n  }, [filters]);\n\n  const filterGroup = column.searchBy || column.property;\n\n  const onCloseMulti = () => {\n    let nextFilters = [...filters];\n    const shouldRemove = [];\n    // if selected doesn't includes item, then we have to remove the filter\n    // but given that we are maintaining state here and updating the grid state\n    // is not implemented on useFilterableState, we have to do this in 2 traverses\n    // as doing it in one gives trouble when removing and adding at the same time.\n    initialSelectedOptions.forEach((item) => {\n      if (!selected.includes(item)) {\n        nextFilters = nextFilters.filter((filter) => !(filter.group === filterGroup && filter.value === item));\n        shouldRemove.push({ group: filterGroup, pill: { value: item } });\n      }\n    });\n    shouldRemove.forEach((removedFilter) => {\n      onRemoveFilter({\n        ...removedFilter,\n        nextFilters,\n      });\n    });\n    selected.forEach((item) => {\n      // if initialSelectedOptions includes item, then we do nothing\n      if (!initialSelectedOptions.includes(item)) {\n        onAddFilter(\n          {\n            group: filterGroup,\n            label: column.label,\n            value: item,\n            operator: column?.filter?.operator || 'contains',\n            transformRowValue: column.valueTransformation,\n          },\n          column,\n        );\n      }\n    });\n    onClose();\n  };\n\n  return (\n    <DSDropdownMenu\n      closeMenuOnItemSelection\n      contentStyle={menuStyle}\n      customMenu={\n        isMulti ? (\n          <Menu containerProps={{ id: 'text-filter-menu-multiple' }} className=\"dg-multiple-filter\" visible>\n            <Menu.SelectionGroup\n              active={selected}\n              onSelect={(newValues) => {\n                setSelected(newValues);\n              }}\n              focusOnOpen\n              multi\n              searchable\n            >\n              {renderOptions(options)}\n            </Menu.SelectionGroup>\n          </Menu>\n        ) : (\n          <MenuCombobox\n            {...otherMenuProps}\n            className={className}\n            dropdownFilterOptions={{\n              ...column.dropdownFilterOptions,\n              maxOptions,\n            }}\n            maxWidth={column.filterMenuMaxWidth}\n            minWidth={column.filterMenuMinWidth}\n            onSelectMenuItem={(selectedValue) => {\n              if (selectedValue) {\n                onAddFilter(\n                  {\n                    group: column.searchBy || column.property,\n                    label: column.label,\n                    value: selectedValue,\n                    operator: column?.filter?.operator || 'contains',\n                    transformRowValue: column.valueTransformation,\n                  },\n                  column,\n                );\n                onOpenMenu(false);\n              }\n            }}\n          />\n        )\n      }\n      isOpen={isMenuOpened}\n      maxWidth={column.filterMenuMaxWidth}\n      menuProps={menuProps}\n      minWidth={column.filterMenuMinWidth}\n      onOpenMenu={onOpenMenu}\n      onClose={isMulti ? onCloseMulti : onClose}\n      options={compact(options)}\n      placement={placement}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<SearchSmall />}\n          onClick={() => (isMenuOpened ? onOpenMenu(false) : onOpenMenu(true))}\n          size=\"s\"\n        />\n      }\n    />\n  );\n}\n\nTextFilterMenu.propTypes = {\n  column: PropTypes.any,\n  menuStyle: PropTypes.shape({}),\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(PropTypes.shape({})),\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  onClose: PropTypes.func,\n  placement: PropTypes.string,\n  menuProps: PropTypes.shape({}),\n  onAddFilter: PropTypes.func,\n  onRemoveFilter: PropTypes.func,\n  maxOptions: PropTypes.number,\n  isMulti: PropTypes.bool,\n};\n\nexport { TextFilterMenu };\nexport default TextFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { compact } from 'lodash';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DSButton } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\nimport { Menu, MenuCombobox } from '@elliemae/ds-menu';\nimport { SearchSmall } from '@elliemae/ds-icons';\n\nconst TextFilterMenu = ({\n  column,\n  menuStyle = {},\n  className,\n  filters = [],\n  isMenuOpened = false,\n  onOpenMenu = () => null,\n  onClose = () => null,\n  placement = Position.BOTTOM_END,\n  menuProps = {},\n  onAddFilter = () => null,\n  onRemoveFilter = () => null,\n  maxOptions = 10,\n  isMulti = false,\n}) => {\n  const { options, ...otherMenuProps } = menuProps;\n\n  const generateOption = (option, idx) => <Menu.ItemCheckbox key={idx} label={option.label} name={option.id} />;\n\n  const renderOptions = (arr) => arr.map(generateOption);\n\n  const filtersForColumn = filters.filter((f) => f.group === column.property);\n\n  const initialSelectedOptions = filtersForColumn.map((f) => f.value);\n\n  const [selected, setSelected] = useState(initialSelectedOptions);\n\n  React.useEffect(() => {\n    const filtersForColumn2 = filters.filter((f) => f.group === column.property);\n    setSelected(filtersForColumn2.map((f) => f.value));\n  }, [filters]);\n\n  const filterGroup = column.searchBy || column.property;\n\n  const onCloseMulti = () => {\n    let nextFilters = [...filters];\n    const shouldRemove = [];\n    // if selected doesn't includes item, then we have to remove the filter\n    // but given that we are maintaining state here and updating the grid state\n    // is not implemented on useFilterableState, we have to do this in 2 traverses\n    // as doing it in one gives trouble when removing and adding at the same time.\n    initialSelectedOptions.forEach((item) => {\n      if (!selected.includes(item)) {\n        nextFilters = nextFilters.filter((filter) => !(filter.group === filterGroup && filter.value === item));\n        shouldRemove.push({ group: filterGroup, pill: { value: item } });\n      }\n    });\n    shouldRemove.forEach((removedFilter) => {\n      onRemoveFilter({\n        ...removedFilter,\n        nextFilters,\n      });\n    });\n    selected.forEach((item) => {\n      // if initialSelectedOptions includes item, then we do nothing\n      if (!initialSelectedOptions.includes(item)) {\n        onAddFilter(\n          {\n            group: filterGroup,\n            label: column.label,\n            value: item,\n            operator: column?.filter?.operator || 'contains',\n            transformRowValue: column.valueTransformation,\n          },\n          column,\n        );\n      }\n    });\n    onClose();\n  };\n\n  return (\n    <DSDropdownMenu\n      closeMenuOnItemSelection\n      contentStyle={menuStyle}\n      customMenu={\n        isMulti ? (\n          <Menu containerProps={{ id: 'text-filter-menu-multiple' }} className=\"dg-multiple-filter\" visible>\n            <Menu.SelectionGroup\n              active={selected}\n              onSelect={(newValues) => {\n                setSelected(newValues);\n              }}\n              focusOnOpen\n              multi\n              searchable\n            >\n              {renderOptions(options)}\n            </Menu.SelectionGroup>\n          </Menu>\n        ) : (\n          <MenuCombobox\n            {...otherMenuProps}\n            className={className}\n            dropdownFilterOptions={{\n              ...column.dropdownFilterOptions,\n              maxOptions,\n            }}\n            maxWidth={column.filterMenuMaxWidth}\n            minWidth={column.filterMenuMinWidth}\n            onSelectMenuItem={(selectedValue) => {\n              if (selectedValue) {\n                onAddFilter(\n                  {\n                    group: column.searchBy || column.property,\n                    label: column.label,\n                    value: selectedValue,\n                    operator: column?.filter?.operator || 'contains',\n                    transformRowValue: column.valueTransformation,\n                  },\n                  column,\n                );\n                onOpenMenu(false);\n              }\n            }}\n          />\n        )\n      }\n      isOpen={isMenuOpened}\n      maxWidth={column.filterMenuMaxWidth}\n      menuProps={menuProps}\n      minWidth={column.filterMenuMinWidth}\n      onOpenMenu={onOpenMenu}\n      onClose={isMulti ? onCloseMulti : onClose}\n      options={compact(options)}\n      placement={placement}\n      triggerComponent={\n        <DSButton\n          buttonType=\"text\"\n          icon={<SearchSmall />}\n          onClick={() => (isMenuOpened ? onOpenMenu(false) : onOpenMenu(true))}\n          size=\"s\"\n        />\n      }\n    />\n  );\n};\n\nTextFilterMenu.propTypes = {\n  column: PropTypes.any,\n  menuStyle: PropTypes.shape({}),\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(PropTypes.shape({})),\n  isMenuOpened: PropTypes.bool,\n  onOpenMenu: PropTypes.func,\n  onClose: PropTypes.func,\n  placement: PropTypes.string,\n  menuProps: PropTypes.shape({}),\n  onAddFilter: PropTypes.func,\n  onRemoveFilter: PropTypes.func,\n  maxOptions: PropTypes.number,\n  isMulti: PropTypes.bool,\n};\n\nexport { TextFilterMenu };\nexport default TextFilterMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["Position", "React", "PropTypes"]
 }

package/dist/cjs/plugins/filterable/components/filterable-menus/getFilterMenuByType.js

@@ -29,18 +29,16 @@ __export(getFilterMenuByType_exports, {
 });
 module.exports = __toCommonJS(getFilterMenuByType_exports);
 var React = __toESM(require("react"));
-var import_DateRangeFilterMenu = require("./DateRangeFilterMenu");
-var import_SingleDateFilterMenu = require("./SingleDateFilterMenu");
-var import_SingleRangeSwitcherMenu = require("./SingleRangeSwitcherMenu");
-var import_TextFilterMenu = require("./TextFilterMenu");
+var import_DateRangeFilterMenu = require("./DateRangeFilterMenu.js");
+var import_SingleDateFilterMenu = require("./SingleDateFilterMenu.js");
+var import_SingleRangeSwitcherMenu = require("./SingleRangeSwitcherMenu.js");
+var import_TextFilterMenu = require("./TextFilterMenu.js");
 const ComponentTypes = {
   "date-range": import_DateRangeFilterMenu.DateRangeFilterMenu,
   "single-date": import_SingleDateFilterMenu.SingleDateFilterMenu,
   "date-switcher": import_SingleRangeSwitcherMenu.SingleRangeSwitcherMenu,
   string: import_TextFilterMenu.TextFilterMenu
 };
-const getFilterMenuByType = (type) => {
-  return ComponentTypes[type] || ComponentTypes.string;
-};
+const getFilterMenuByType = (type) => ComponentTypes[type] || ComponentTypes.string;
 var getFilterMenuByType_default = getFilterMenuByType;
 //# sourceMappingURL=getFilterMenuByType.js.map

package/dist/cjs/plugins/filterable/components/filterable-menus/getFilterMenuByType.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugins/filterable/components/filterable-menus/getFilterMenuByType.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DateRangeFilterMenu } from './DateRangeFilterMenu';\nimport { SingleDateFilterMenu } from './SingleDateFilterMenu'; // implement\nimport { SingleRangeSwitcherMenu } from './SingleRangeSwitcherMenu'; // implement\nimport { TextFilterMenu } from './TextFilterMenu';\n\nconst ComponentTypes = {\n  'date-range': DateRangeFilterMenu,\n  'single-date': SingleDateFilterMenu,\n  'date-switcher': SingleRangeSwitcherMenu,\n  string: TextFilterMenu,\n};\n\nexport const getFilterMenuByType = (type) => {\n  return ComponentTypes[type] || ComponentTypes.string;\n};\n\nexport default getFilterMenuByType;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAoC;AACpC,kCAAqC;AACrC,qCAAwC;AACxC,4BAA+B;AAE/B,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,QAAQ;AACV;AAEO,MAAM,sBAAsB,CAAC,SAAS;AAC3C,SAAO,eAAe,SAAS,eAAe;AAChD;AAEA,IAAO,8BAAQ;",
+  "sourcesContent": ["import { DateRangeFilterMenu } from './DateRangeFilterMenu.js';\nimport { SingleDateFilterMenu } from './SingleDateFilterMenu.js'; // implement\nimport { SingleRangeSwitcherMenu } from './SingleRangeSwitcherMenu.js'; // implement\nimport { TextFilterMenu } from './TextFilterMenu.js';\n\nconst ComponentTypes = {\n  'date-range': DateRangeFilterMenu,\n  'single-date': SingleDateFilterMenu,\n  'date-switcher': SingleRangeSwitcherMenu,\n  string: TextFilterMenu,\n};\n\nexport const getFilterMenuByType = (type) => ComponentTypes[type] || ComponentTypes.string;\n\nexport default getFilterMenuByType;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAoC;AACpC,kCAAqC;AACrC,qCAAwC;AACxC,4BAA+B;AAE/B,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,QAAQ;AACV;AAEO,MAAM,sBAAsB,CAAC,SAAS,eAAe,SAAS,eAAe;AAEpF,IAAO,8BAAQ;",
   "names": []
 }