@elliemae/ds-mobile 3.4.0-rc.2 → 3.4.1-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,11 +37,15 @@ const useMakeMutable = (referenceVar) => {
37
37
  }, [referenceVar]);
38
38
  return mutable;
39
39
  };
40
- function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }) {
40
+ function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }, onIntersectionCb = (entry) => {
41
+ }) {
42
+ const mutableIntersectionCb = useMakeMutable(onIntersectionCb);
41
43
  const [entry, setEntry] = (0, import_react.useState)();
42
44
  const frozen = entry?.isIntersecting && freezeOnceVisible;
43
45
  const updateEntry = ([newEntry]) => {
44
46
  setEntry(newEntry);
47
+ if (newEntry.isIntersecting)
48
+ mutableIntersectionCb.current(newEntry);
45
49
  };
46
50
  (0, import_react.useEffect)(() => {
47
51
  const node = elementRef?.current;
@@ -59,18 +63,18 @@ function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootM
59
63
  const InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }) => {
60
64
  const [viewportHeight, setViewportHeight] = (0, import_react.useState)(height);
61
65
  const baselineRef = (0, import_react.useRef)(null);
62
- const entry = useIntersectionObserver(baselineRef, {
66
+ const mutableIsFetching = useMakeMutable(isFetching);
67
+ const mutableFetchData = useMakeMutable(fetchData);
68
+ const onIntersectionCb = import_react.default.useCallback(() => {
69
+ if (hasMoreItems && !mutableIsFetching.current) {
70
+ mutableFetchData.current();
71
+ }
72
+ }, [hasMoreItems, mutableFetchData, mutableIsFetching]);
73
+ useIntersectionObserver(baselineRef, {
63
74
  root: null,
64
75
  rootMargin: "0px",
65
76
  threshold: 0.1
66
- });
67
- const isIntersecting = !!entry?.isIntersecting;
68
- const mutableIsFetching = useMakeMutable(isFetching);
69
- (0, import_react.useEffect)(() => {
70
- if (hasMoreItems && isIntersecting && !mutableIsFetching.current) {
71
- fetchData();
72
- }
73
- }, [fetchData, isIntersecting, hasMoreItems, mutableIsFetching]);
77
+ }, onIntersectionCb);
74
78
  const handleResize = (0, import_react.useCallback)(() => {
75
79
  setViewportHeight(window.innerHeight);
76
80
  }, []);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/InfiniteLoader/Infiniteloader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useEffect, useRef, useCallback, useState, type RefObject, type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n isFetching: boolean;\n hasMoreItems?: boolean;\n fetchData: () => void;\n children: React.ReactNode;\n height?: number | string;\n}\ntype UseMakeMutable<T = unknown> = (referenceVar: T) => React.MutableRefObject<T>;\nconst useMakeMutable: UseMakeMutable = (referenceVar) => {\n const mutable = useRef(referenceVar);\n useEffect(() => {\n mutable.current = referenceVar;\n }, [referenceVar]);\n return mutable;\n};\n\ninterface Args extends IntersectionObserverInit {\n freezeOnceVisible?: boolean;\n}\n\nfunction useIntersectionObserver(\n elementRef: RefObject<Element>,\n { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args,\n): IntersectionObserverEntry | undefined {\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const frozen = entry?.isIntersecting && freezeOnceVisible;\n\n const updateEntry = ([newEntry]: IntersectionObserverEntry[]): void => {\n setEntry(newEntry);\n };\n\n useEffect(() => {\n const node = elementRef?.current; // DOM Ref\n const hasIOSupport = !!window.IntersectionObserver;\n\n if (!hasIOSupport || frozen || !node) return () => {};\n\n const observerParams = { threshold, root, rootMargin };\n const observer = new IntersectionObserver(updateEntry, observerParams);\n\n observer.observe(node);\n\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);\n\n return entry;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }: Props) => {\n const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n\n const baselineRef = useRef<HTMLDivElement | null>(null);\n const entry = useIntersectionObserver(baselineRef, {\n root: null,\n rootMargin: '0px',\n threshold: 0.1,\n });\n const isIntersecting = !!entry?.isIntersecting;\n const mutableIsFetching = useMakeMutable(isFetching);\n\n useEffect(() => {\n if (hasMoreItems && isIntersecting && !mutableIsFetching.current) {\n fetchData();\n }\n // we only want to redefine the callback when \"fetchData\" changes\n // we don't need to redefine if isFetching changes, so we use \"mutableIsFetching\"\n }, [fetchData, isIntersecting, hasMoreItems, mutableIsFetching]);\n\n const handleResize = useCallback(() => {\n setViewportHeight(window.innerHeight);\n }, []);\n\n useEffect(() => {\n if (!height) {\n window.addEventListener('resize', handleResize);\n handleResize();\n }\n return () => {\n if (!height) window.removeEventListener('resize', handleResize);\n };\n }, [handleResize, height]);\n\n return (\n <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n {children}\n <div ref={baselineRef} style={{ height: 1 }} />\n </Grid>\n <Loader isOpen={isFetching} />\n </Grid>\n );\n};\n\nconst listProps = {\n isFetching: PropTypes.bool.description('toggle loading state'),\n hasMoreItems: PropTypes.bool\n .description('wheter or not you have more items that need to be loaded')\n .defaultValue(true),\n fetchData: PropTypes.func.description('callback to fetch new items'),\n children: PropTypes.element.description('row items for infinite loader'),\n height: PropTypes.number.description('infinite loader list height'),\n} as WeakValidationMap<unknown>;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwG;AACxG,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AAUvB,MAAM,iBAAiC,CAAC,iBAAiB;AACvD,QAAM,UAAU,yBAAO,YAAY;AACnC,8BAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;AAMA,iCACE,YACA,EAAE,YAAY,GAAG,OAAO,MAAM,aAAa,MAAM,oBAAoB,SAC9B;AACvC,QAAM,CAAC,OAAO,YAAY,2BAAoC;AAE9D,QAAM,SAAS,OAAO,kBAAkB;AAExC,QAAM,cAAc,CAAC,CAAC,cAAiD;AACrE,aAAS,QAAQ;AAAA,EACnB;AAEA,8BAAU,MAAM;AACd,UAAM,OAAO,YAAY;AACzB,UAAM,eAAe,CAAC,CAAC,OAAO;AAE9B,QAAI,CAAC,gBAAgB,UAAU,CAAC;AAAM,aAAO,MAAM;AAAA,MAAC;AAEpD,UAAM,iBAAiB,EAAE,WAAW,MAAM,WAAW;AACrD,UAAM,WAAW,IAAI,qBAAqB,aAAa,cAAc;AAErE,aAAS,QAAQ,IAAI;AAErB,WAAO,MAAM,SAAS,WAAW;AAAA,EAEnC,GAAG,CAAC,YAAY,KAAK,UAAU,SAAS,GAAG,MAAM,YAAY,MAAM,CAAC;AAEpE,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,QAAQ,eAAe,WAAkB;AAClG,QAAM,CAAC,gBAAgB,qBAAqB,2BAAsC,MAAM;AAExF,QAAM,cAAc,yBAA8B,IAAI;AACtD,QAAM,QAAQ,wBAAwB,aAAa;AAAA,IACjD,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,CAAC;AACD,QAAM,iBAAiB,CAAC,CAAC,OAAO;AAChC,QAAM,oBAAoB,eAAe,UAAU;AAEnD,8BAAU,MAAM;AACd,QAAI,gBAAgB,kBAAkB,CAAC,kBAAkB,SAAS;AAChE,gBAAU;AAAA,IACZ;AAAA,EAGF,GAAG,CAAC,WAAW,gBAAgB,cAAc,iBAAiB,CAAC;AAE/D,QAAM,eAAe,8BAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,cAAc,8BAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,8BAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
4
+ "sourcesContent": ["import React, { useEffect, useRef, useCallback, useState, type RefObject, type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n isFetching: boolean;\n hasMoreItems?: boolean;\n fetchData: () => void;\n children: React.ReactNode;\n height?: number | string;\n}\n\nconst useMakeMutable = <T,>(referenceVar: T): React.MutableRefObject<T> => {\n const mutable = useRef(referenceVar);\n useEffect(() => {\n mutable.current = referenceVar;\n }, [referenceVar]);\n return mutable;\n};\n\ninterface Args extends IntersectionObserverInit {\n freezeOnceVisible?: boolean;\n}\n\nfunction useIntersectionObserver(\n elementRef: RefObject<Element>,\n { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args,\n // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n onIntersectionCb = (entry: IntersectionObserverEntry): void => {},\n): IntersectionObserverEntry | undefined {\n const mutableIntersectionCb = useMakeMutable(onIntersectionCb);\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const frozen = entry?.isIntersecting && freezeOnceVisible;\n\n const updateEntry = ([newEntry]: IntersectionObserverEntry[]): void => {\n setEntry(newEntry);\n if (newEntry.isIntersecting) mutableIntersectionCb.current(newEntry);\n };\n\n useEffect(() => {\n const node = elementRef?.current; // DOM Ref\n const hasIOSupport = !!window.IntersectionObserver;\n\n if (!hasIOSupport || frozen || !node) return () => {};\n\n const observerParams = { threshold, root, rootMargin };\n const observer = new IntersectionObserver(updateEntry, observerParams);\n\n observer.observe(node);\n\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);\n\n return entry;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }: Props) => {\n const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n\n const baselineRef = useRef<HTMLDivElement | null>(null);\n const mutableIsFetching = useMakeMutable(isFetching);\n const mutableFetchData = useMakeMutable(fetchData);\n const onIntersectionCb = React.useCallback(() => {\n if (hasMoreItems && !mutableIsFetching.current) {\n mutableFetchData.current();\n }\n }, [hasMoreItems, mutableFetchData, mutableIsFetching]);\n useIntersectionObserver(\n baselineRef,\n {\n root: null,\n rootMargin: '0px',\n threshold: 0.1,\n },\n onIntersectionCb,\n );\n\n const handleResize = useCallback(() => {\n setViewportHeight(window.innerHeight);\n }, []);\n\n useEffect(() => {\n if (!height) {\n window.addEventListener('resize', handleResize);\n handleResize();\n }\n return () => {\n if (!height) window.removeEventListener('resize', handleResize);\n };\n }, [handleResize, height]);\n\n return (\n <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n {children}\n <div ref={baselineRef} style={{ height: 1 }} />\n </Grid>\n <Loader isOpen={isFetching} />\n </Grid>\n );\n};\n\nconst listProps = {\n isFetching: PropTypes.bool.description('toggle loading state'),\n hasMoreItems: PropTypes.bool\n .description('wheter or not you have more items that need to be loaded')\n .defaultValue(true),\n fetchData: PropTypes.func.description('callback to fetch new items'),\n children: PropTypes.element.description('row items for infinite loader'),\n height: PropTypes.number.description('infinite loader list height'),\n} as WeakValidationMap<unknown>;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -30,7 +30,6 @@ var import_react = __toESM(require("react"));
30
30
  var import_ds_utilities = require("@elliemae/ds-utilities");
31
31
  var import_ds_grid = require("@elliemae/ds-grid");
32
32
  var import_ds_system = require("@elliemae/ds-system");
33
- var import_ds_system2 = require("@elliemae/ds-system");
34
33
  var import_ds_shared = require("@elliemae/ds-shared");
35
34
  var import_ds_form = require("@elliemae/ds-form");
36
35
  var import_ds_icons = require("@elliemae/ds-icons");
@@ -63,7 +62,7 @@ const PropWrap = (0, import_ds_system.styled)((props2) => /* @__PURE__ */ import
63
62
  const Title = import_ds_system.styled.span`
64
63
  font-size: 16px;
65
64
  color: ${(props2) => props2.theme.colors.brand["600"]};
66
- ${(0, import_ds_system2.truncate)()}
65
+ ${(0, import_ds_system.truncate)()}
67
66
  `;
68
67
  const Label = import_ds_system.styled.span`
69
68
  font-size: 13px;
@@ -76,6 +75,7 @@ const DSMobileContextMenuItem = ({
76
75
  label,
77
76
  title,
78
77
  leftProp,
78
+ rightAddon,
79
79
  isGroup,
80
80
  isMulti,
81
81
  singleSelect,
@@ -102,6 +102,9 @@ const DSMobileContextMenuItem = ({
102
102
  leftAddon = /* @__PURE__ */ import_react.default.createElement(CheckMark, {
103
103
  "data-testid": "leftAddon-checkmark"
104
104
  });
105
+ const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
106
+ if (rightAddon)
107
+ cols.push("40px");
105
108
  return /* @__PURE__ */ import_react.default.createElement(Wrap, {
106
109
  "data-testid": "ds-contextmenu-item",
107
110
  onClick: (e) => {
@@ -109,7 +112,7 @@ const DSMobileContextMenuItem = ({
109
112
  context.onChange(value, e, { value, label, title });
110
113
  onClick(e);
111
114
  },
112
- cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"]
115
+ cols
113
116
  }, (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ import_react.default.createElement(PropWrap, {
114
117
  "data-testid": "left-addon",
115
118
  isMulti,
@@ -128,7 +131,11 @@ const DSMobileContextMenuItem = ({
128
131
  alignItems: !label ? "center" : void 0
129
132
  }, /* @__PURE__ */ import_react.default.createElement(Title, {
130
133
  "data-testid": "contextMenuItem-title"
131
- }, title))));
134
+ }, title))), rightAddon ? /* @__PURE__ */ import_react.default.createElement(PropWrap, {
135
+ "data-testid": "right-addon",
136
+ alignItems: "center",
137
+ justifyContent: "center"
138
+ }, rightAddon) : null);
132
139
  }
133
140
  });
134
141
  const props = {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/MobileContextMenu/MobileContextMenuItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto']\n }\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,0BAAoC;AACpC,qBAAqB;AACrB,uBAAiC;AACjC,uBAA0B;AAC1B,qBAA2B;AAC3B,sBAA0B;AAC1B,6BAAkC;AAElC,MAAM,OAAO,6BAAO,CAAC,WAAU,mDAAC;AAAA,EAAmB,GAAG;AAAA,CAAO,CAAE;AAAA;AAAA;AAI/D,MAAM,WAAW,6BAAO,CAAC,WAAU,mDAAC;AAAA,EAAM,GAAG;AAAA,CAAO,CAAE;AAAA,IAClD,CAAC,WAAU;AACX,MAAI,CAAC,OAAM,SAAS;AAClB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT;AACA,SAAO;AACT;AAAA;AAGF,MAAM,QAAQ,wBAAO;AAAA;AAAA,WAEV,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,IAC3C,+BAAS;AAAA;AAGb,MAAM,QAAQ,wBAAO;AAAA;AAAA,WAEV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,YAAY,6BAAO,yBAAS;AAAA,UACxB,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA;AAa9C,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,MAEA,mDAAC;AAAA,EACC,QAAQ,CAAC,YAAY;AACnB,UAAM,EAAE,gBAAgB;AACxB,QAAI,mBAAmB,eAAe,KAAK,CAAC,MAAM,QAAQ,WAAW;AACrE,QAAI;AAAS,yBAAmB,OAAO,gBAAgB;AAEvD,QAAI,gBAAgB;AACpB,QAAI,WAAW,CAAC;AAAc,sBAAgB;AAE9C,QAAI,YAAY,YAAY;AAC5B,QAAI;AAAS,kBAAY,mDAAC;AAAA,QAAW,SAAS;AAAA,QAAY,eAAY;AAAA,OAAqB;AAC3F,QAAI;AAAc,kBAAY,mDAAC;AAAA,QAAU,eAAY;AAAA,OAAsB;AAE3E,UAAM,OACH,gBAAgB,oBAAsB,aAAa,CAAC,gBAAiB,UAAU,CAAC,QAAQ,MAAM,IAAI,CAAC,MAAM;AAC5G,QAAI;AAAY,WAAK,KAAK,MAAM;AAChC,WACE,mDAAC;AAAA,MACC,eAAY;AAAA,MACZ,SAAS,CAAC,MAAM;AACd,YAAI,gBAAgB;AAAS,kBAAQ,SAAS,OAAO,GAAG,EAAE,OAAO,OAAO,MAAM,CAAC;AAC/E,gBAAQ,CAAC;AAAA,MACX;AAAA,MACA;AAAA,OAEG,iBAAgB,oBAAqB,WAAW,cACjD,mDAAC;AAAA,MAAS,eAAY;AAAA,MAAa;AAAA,MAAkB,YAAW;AAAA,MAAS,gBAAe;AAAA,MAAS,IAAG;AAAA,OACjG,iBAAiB,SACpB,GAEF,mDAAC;AAAA,MAAK,QAAO;AAAA,MAAO,IAAG;AAAA,MAAK,IAAI,CAAC,aAAa,UAAU,SAAS;AAAA,OAC9D,SACC,mDAAC;AAAA,MAAK,YAAW;AAAA,OACf,mDAAC;AAAA,MAAM,eAAY;AAAA,OAAyB,KAAM,CACpD,GAEF,mDAAC;AAAA,MAAK,YAAY,CAAC,QAAQ,WAAW;AAAA,OACpC,mDAAC;AAAA,MAAM,eAAY;AAAA,OAAyB,KAAM,CACpD,CACF,GACC,aACC,mDAAC;AAAA,MAAS,eAAY;AAAA,MAAc,YAAW;AAAA,MAAS,gBAAe;AAAA,OACpE,UACH,IACE,IACN;AAAA,EAEJ;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,OAAO;AAAA,EAE3C,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,8BAAU,QAAQ,YAAY,EAAE;AAAA,EAE1C,SAAS,8BAAU,KAAK,YAAY,cAAc;AAAA,EAElD,cAAc,8BAAU,KAAK,YAAY,EAAE;AAAA,EAE3C,SAAS,8BAAU,KAAK,YAAY,EAAE;AAAA,EAEtC,SAAS,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,OAAO,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,YAAY,8BAAU,KAAK,YAAY,gBAAgB;AACzD;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,oCAAoC,kCAAS,uBAAuB;AAE1E,kCAAkC,YAAY;",
6
6
  "names": []
7
7
  }
@@ -30,20 +30,24 @@ var import_react = __toESM(require("react"));
30
30
  var import_prop_types = __toESM(require("prop-types"));
31
31
  var import_ds_system = require("@elliemae/ds-system");
32
32
  var import_ds_grid = require("@elliemae/ds-grid");
33
- var import_ds_system2 = require("@elliemae/ds-system");
34
33
  var import_FullPageContainer = require("../FullPageContainer");
35
34
  const PageTitleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
36
35
  min-height: 44px;
37
36
  `;
38
- const DSMobilePageList = (0, import_ds_system2.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
39
- const rows = ["auto", (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83), 1];
37
+ const DSMobilePageList = (0, import_ds_system.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
38
+ const rows = [];
40
39
  if (header)
41
- rows.unshift((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
40
+ rows.push((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
41
+ if (pageTitle)
42
+ rows.push("auto");
43
+ if (filterBar)
44
+ rows.push((0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83));
45
+ rows.push(1);
42
46
  if (footer)
43
47
  rows.push("56px");
44
48
  return /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainer, {
45
49
  rows
46
- }, header && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, header), /* @__PURE__ */ import_react.default.createElement(PageTitleWrapper, null, pageTitle), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, filterBar), /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainerScroll, null, body), footer && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, footer));
50
+ }, header ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, header) : null, pageTitle ? /* @__PURE__ */ import_react.default.createElement(PageTitleWrapper, null, pageTitle) : null, filterBar ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, filterBar) : null, /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainerScroll, null, body), footer && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, footer));
47
51
  });
48
52
  DSMobilePageList.propTypes = {
49
53
  header: import_prop_types.default.element,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/PageList/PageList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n if (footer) rows.push('56px');\n return (\n <DSFullPageContainer rows={rows}>\n {header && <Grid>{header}</Grid>}\n <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n <Grid>{filterBar}</Grid>\n <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n {footer && <Grid>{footer}</Grid>}\n </DSFullPageContainer>\n );\n },\n);\n\nDSMobilePageList.propTypes = {\n header: PropTypes.element,\n pageTitle: PropTypes.element,\n filterBar: PropTypes.element,\n body: PropTypes.element,\n footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAAwD;AACxD,+BAA+D;AAE/D,MAAM,mBAAmB,6BAAO,mBAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,iCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,0BAAG,KAAK,gDAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,gDAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC,wBAAkB,SAAU,GAC7B,mDAAC,2BAAM,SAAU,GACjB,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
4
+ "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled, op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n min-height: 44px;\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst DSMobilePageList = withTheme(\n ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n const rows = [];\n if (header) rows.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n if (pageTitle) rows.push('auto');\n if (filterBar) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83));\n rows.push(1);\n if (footer) rows.push('56px');\n return (\n <DSFullPageContainer rows={rows}>\n {header ? <Grid>{header}</Grid> : null}\n {pageTitle ? <PageTitleWrapper>{pageTitle}</PageTitleWrapper> : null}\n {filterBar ? <Grid>{filterBar}</Grid> : null}\n <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n {footer && <Grid>{footer}</Grid>}\n </DSFullPageContainer>\n );\n },\n);\n\nDSMobilePageList.propTypes = {\n header: PropTypes.element,\n pageTitle: PropTypes.element,\n filterBar: PropTypes.element,\n body: PropTypes.element,\n footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAgE;AAChE,qBAAqB;AACrB,+BAA+D;AAE/D,MAAM,mBAAmB,6BAAO,mBAAI;AAAA;AAAA;AAKpC,MAAM,mBAAmB,gCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC;AACd,MAAI;AAAQ,SAAK,KAAK,+CAAyB,MAAM,MAAM,GAAG,CAAC;AAC/D,MAAI;AAAW,SAAK,KAAK,MAAM;AAC/B,MAAI;AAAW,SAAK,KAAK,yBAAG,KAAK,+CAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,CAAC;AAChF,OAAK,KAAK,CAAC;AACX,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,SAAS,mDAAC,2BAAM,MAAO,IAAU,MACjC,YAAY,mDAAC,wBAAkB,SAAU,IAAsB,MAC/D,YAAY,mDAAC,2BAAM,SAAU,IAAU,MACxC,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
6
6
  "names": []
7
7
  }
@@ -10,11 +10,15 @@ const useMakeMutable = (referenceVar) => {
10
10
  }, [referenceVar]);
11
11
  return mutable;
12
12
  };
13
- function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }) {
13
+ function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }, onIntersectionCb = (entry) => {
14
+ }) {
15
+ const mutableIntersectionCb = useMakeMutable(onIntersectionCb);
14
16
  const [entry, setEntry] = useState();
15
17
  const frozen = entry?.isIntersecting && freezeOnceVisible;
16
18
  const updateEntry = ([newEntry]) => {
17
19
  setEntry(newEntry);
20
+ if (newEntry.isIntersecting)
21
+ mutableIntersectionCb.current(newEntry);
18
22
  };
19
23
  useEffect(() => {
20
24
  const node = elementRef?.current;
@@ -32,18 +36,18 @@ function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootM
32
36
  const InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }) => {
33
37
  const [viewportHeight, setViewportHeight] = useState(height);
34
38
  const baselineRef = useRef(null);
35
- const entry = useIntersectionObserver(baselineRef, {
39
+ const mutableIsFetching = useMakeMutable(isFetching);
40
+ const mutableFetchData = useMakeMutable(fetchData);
41
+ const onIntersectionCb = React2.useCallback(() => {
42
+ if (hasMoreItems && !mutableIsFetching.current) {
43
+ mutableFetchData.current();
44
+ }
45
+ }, [hasMoreItems, mutableFetchData, mutableIsFetching]);
46
+ useIntersectionObserver(baselineRef, {
36
47
  root: null,
37
48
  rootMargin: "0px",
38
49
  threshold: 0.1
39
- });
40
- const isIntersecting = !!entry?.isIntersecting;
41
- const mutableIsFetching = useMakeMutable(isFetching);
42
- useEffect(() => {
43
- if (hasMoreItems && isIntersecting && !mutableIsFetching.current) {
44
- fetchData();
45
- }
46
- }, [fetchData, isIntersecting, hasMoreItems, mutableIsFetching]);
50
+ }, onIntersectionCb);
47
51
  const handleResize = useCallback(() => {
48
52
  setViewportHeight(window.innerHeight);
49
53
  }, []);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Infiniteloader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState, type RefObject, type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n isFetching: boolean;\n hasMoreItems?: boolean;\n fetchData: () => void;\n children: React.ReactNode;\n height?: number | string;\n}\ntype UseMakeMutable<T = unknown> = (referenceVar: T) => React.MutableRefObject<T>;\nconst useMakeMutable: UseMakeMutable = (referenceVar) => {\n const mutable = useRef(referenceVar);\n useEffect(() => {\n mutable.current = referenceVar;\n }, [referenceVar]);\n return mutable;\n};\n\ninterface Args extends IntersectionObserverInit {\n freezeOnceVisible?: boolean;\n}\n\nfunction useIntersectionObserver(\n elementRef: RefObject<Element>,\n { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args,\n): IntersectionObserverEntry | undefined {\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const frozen = entry?.isIntersecting && freezeOnceVisible;\n\n const updateEntry = ([newEntry]: IntersectionObserverEntry[]): void => {\n setEntry(newEntry);\n };\n\n useEffect(() => {\n const node = elementRef?.current; // DOM Ref\n const hasIOSupport = !!window.IntersectionObserver;\n\n if (!hasIOSupport || frozen || !node) return () => {};\n\n const observerParams = { threshold, root, rootMargin };\n const observer = new IntersectionObserver(updateEntry, observerParams);\n\n observer.observe(node);\n\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);\n\n return entry;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }: Props) => {\n const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n\n const baselineRef = useRef<HTMLDivElement | null>(null);\n const entry = useIntersectionObserver(baselineRef, {\n root: null,\n rootMargin: '0px',\n threshold: 0.1,\n });\n const isIntersecting = !!entry?.isIntersecting;\n const mutableIsFetching = useMakeMutable(isFetching);\n\n useEffect(() => {\n if (hasMoreItems && isIntersecting && !mutableIsFetching.current) {\n fetchData();\n }\n // we only want to redefine the callback when \"fetchData\" changes\n // we don't need to redefine if isFetching changes, so we use \"mutableIsFetching\"\n }, [fetchData, isIntersecting, hasMoreItems, mutableIsFetching]);\n\n const handleResize = useCallback(() => {\n setViewportHeight(window.innerHeight);\n }, []);\n\n useEffect(() => {\n if (!height) {\n window.addEventListener('resize', handleResize);\n handleResize();\n }\n return () => {\n if (!height) window.removeEventListener('resize', handleResize);\n };\n }, [handleResize, height]);\n\n return (\n <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n {children}\n <div ref={baselineRef} style={{ height: 1 }} />\n </Grid>\n <Loader isOpen={isFetching} />\n </Grid>\n );\n};\n\nconst listProps = {\n isFetching: PropTypes.bool.description('toggle loading state'),\n hasMoreItems: PropTypes.bool\n .description('wheter or not you have more items that need to be loaded')\n .defaultValue(true),\n fetchData: PropTypes.func.description('callback to fetch new items'),\n children: PropTypes.element.description('row items for infinite loader'),\n height: PropTypes.number.description('infinite loader list height'),\n} as WeakValidationMap<unknown>;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAUA,MAAM,iBAAiC,CAAC,iBAAiB;AACvD,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;AAMA,iCACE,YACA,EAAE,YAAY,GAAG,OAAO,MAAM,aAAa,MAAM,oBAAoB,SAC9B;AACvC,QAAM,CAAC,OAAO,YAAY,SAAoC;AAE9D,QAAM,SAAS,OAAO,kBAAkB;AAExC,QAAM,cAAc,CAAC,CAAC,cAAiD;AACrE,aAAS,QAAQ;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,UAAM,OAAO,YAAY;AACzB,UAAM,eAAe,CAAC,CAAC,OAAO;AAE9B,QAAI,CAAC,gBAAgB,UAAU,CAAC;AAAM,aAAO,MAAM;AAAA,MAAC;AAEpD,UAAM,iBAAiB,EAAE,WAAW,MAAM,WAAW;AACrD,UAAM,WAAW,IAAI,qBAAqB,aAAa,cAAc;AAErE,aAAS,QAAQ,IAAI;AAErB,WAAO,MAAM,SAAS,WAAW;AAAA,EAEnC,GAAG,CAAC,YAAY,KAAK,UAAU,SAAS,GAAG,MAAM,YAAY,MAAM,CAAC;AAEpE,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,QAAQ,eAAe,WAAkB;AAClG,QAAM,CAAC,gBAAgB,qBAAqB,SAAsC,MAAM;AAExF,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,QAAQ,wBAAwB,aAAa;AAAA,IACjD,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,CAAC;AACD,QAAM,iBAAiB,CAAC,CAAC,OAAO;AAChC,QAAM,oBAAoB,eAAe,UAAU;AAEnD,YAAU,MAAM;AACd,QAAI,gBAAgB,kBAAkB,CAAC,kBAAkB,SAAS;AAChE,gBAAU;AAAA,IACZ;AAAA,EAGF,GAAG,CAAC,WAAW,gBAAgB,cAAc,iBAAiB,CAAC;AAE/D,QAAM,eAAe,YAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,cAAc,UAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,UAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState, type RefObject, type WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n isFetching: boolean;\n hasMoreItems?: boolean;\n fetchData: () => void;\n children: React.ReactNode;\n height?: number | string;\n}\n\nconst useMakeMutable = <T,>(referenceVar: T): React.MutableRefObject<T> => {\n const mutable = useRef(referenceVar);\n useEffect(() => {\n mutable.current = referenceVar;\n }, [referenceVar]);\n return mutable;\n};\n\ninterface Args extends IntersectionObserverInit {\n freezeOnceVisible?: boolean;\n}\n\nfunction useIntersectionObserver(\n elementRef: RefObject<Element>,\n { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args,\n // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n onIntersectionCb = (entry: IntersectionObserverEntry): void => {},\n): IntersectionObserverEntry | undefined {\n const mutableIntersectionCb = useMakeMutable(onIntersectionCb);\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const frozen = entry?.isIntersecting && freezeOnceVisible;\n\n const updateEntry = ([newEntry]: IntersectionObserverEntry[]): void => {\n setEntry(newEntry);\n if (newEntry.isIntersecting) mutableIntersectionCb.current(newEntry);\n };\n\n useEffect(() => {\n const node = elementRef?.current; // DOM Ref\n const hasIOSupport = !!window.IntersectionObserver;\n\n if (!hasIOSupport || frozen || !node) return () => {};\n\n const observerParams = { threshold, root, rootMargin };\n const observer = new IntersectionObserver(updateEntry, observerParams);\n\n observer.observe(node);\n\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);\n\n return entry;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height, hasMoreItems = true }: Props) => {\n const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n\n const baselineRef = useRef<HTMLDivElement | null>(null);\n const mutableIsFetching = useMakeMutable(isFetching);\n const mutableFetchData = useMakeMutable(fetchData);\n const onIntersectionCb = React.useCallback(() => {\n if (hasMoreItems && !mutableIsFetching.current) {\n mutableFetchData.current();\n }\n }, [hasMoreItems, mutableFetchData, mutableIsFetching]);\n useIntersectionObserver(\n baselineRef,\n {\n root: null,\n rootMargin: '0px',\n threshold: 0.1,\n },\n onIntersectionCb,\n );\n\n const handleResize = useCallback(() => {\n setViewportHeight(window.innerHeight);\n }, []);\n\n useEffect(() => {\n if (!height) {\n window.addEventListener('resize', handleResize);\n handleResize();\n }\n return () => {\n if (!height) window.removeEventListener('resize', handleResize);\n };\n }, [handleResize, height]);\n\n return (\n <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n {children}\n <div ref={baselineRef} style={{ height: 1 }} />\n </Grid>\n <Loader isOpen={isFetching} />\n </Grid>\n );\n};\n\nconst listProps = {\n isFetching: PropTypes.bool.description('toggle loading state'),\n hasMoreItems: PropTypes.bool\n .description('wheter or not you have more items that need to be loaded')\n .defaultValue(true),\n fetchData: PropTypes.func.description('callback to fetch new items'),\n children: PropTypes.element.description('row items for infinite loader'),\n height: PropTypes.number.description('infinite loader list height'),\n} as WeakValidationMap<unknown>;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAUA,MAAM,iBAAiB,CAAK,iBAA+C;AACzE,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;AAMA,iCACE,YACA,EAAE,YAAY,GAAG,OAAO,MAAM,aAAa,MAAM,oBAAoB,SAErE,mBAAmB,CAAC,UAA2C;AAAC,GACzB;AACvC,QAAM,wBAAwB,eAAe,gBAAgB;AAC7D,QAAM,CAAC,OAAO,YAAY,SAAoC;AAE9D,QAAM,SAAS,OAAO,kBAAkB;AAExC,QAAM,cAAc,CAAC,CAAC,cAAiD;AACrE,aAAS,QAAQ;AACjB,QAAI,SAAS;AAAgB,4BAAsB,QAAQ,QAAQ;AAAA,EACrE;AAEA,YAAU,MAAM;AACd,UAAM,OAAO,YAAY;AACzB,UAAM,eAAe,CAAC,CAAC,OAAO;AAE9B,QAAI,CAAC,gBAAgB,UAAU,CAAC;AAAM,aAAO,MAAM;AAAA,MAAC;AAEpD,UAAM,iBAAiB,EAAE,WAAW,MAAM,WAAW;AACrD,UAAM,WAAW,IAAI,qBAAqB,aAAa,cAAc;AAErE,aAAS,QAAQ,IAAI;AAErB,WAAO,MAAM,SAAS,WAAW;AAAA,EAEnC,GAAG,CAAC,YAAY,KAAK,UAAU,SAAS,GAAG,MAAM,YAAY,MAAM,CAAC;AAEpE,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,QAAQ,eAAe,WAAkB;AAClG,QAAM,CAAC,gBAAgB,qBAAqB,SAAsC,MAAM;AAExF,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,oBAAoB,eAAe,UAAU;AACnD,QAAM,mBAAmB,eAAe,SAAS;AACjD,QAAM,mBAAmB,OAAM,YAAY,MAAM;AAC/C,QAAI,gBAAgB,CAAC,kBAAkB,SAAS;AAC9C,uBAAiB,QAAQ;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,cAAc,kBAAkB,iBAAiB,CAAC;AACtD,0BACE,aACA;AAAA,IACE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,GACA,gBACF;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,cAAc,UAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,UAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -2,8 +2,7 @@ import * as React from "react";
2
2
  import React2 from "react";
3
3
  import { PropTypes, describe } from "@elliemae/ds-utilities";
4
4
  import { Grid } from "@elliemae/ds-grid";
5
- import { styled } from "@elliemae/ds-system";
6
- import { truncate } from "@elliemae/ds-system";
5
+ import { styled, truncate } from "@elliemae/ds-system";
7
6
  import { GroupItem } from "@elliemae/ds-shared";
8
7
  import { DSCheckbox } from "@elliemae/ds-form";
9
8
  import { Checkmark } from "@elliemae/ds-icons";
@@ -49,6 +48,7 @@ const DSMobileContextMenuItem = ({
49
48
  label,
50
49
  title,
51
50
  leftProp,
51
+ rightAddon,
52
52
  isGroup,
53
53
  isMulti,
54
54
  singleSelect,
@@ -75,6 +75,9 @@ const DSMobileContextMenuItem = ({
75
75
  leftAddon = /* @__PURE__ */ React2.createElement(CheckMark, {
76
76
  "data-testid": "leftAddon-checkmark"
77
77
  });
78
+ const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
79
+ if (rightAddon)
80
+ cols.push("40px");
78
81
  return /* @__PURE__ */ React2.createElement(Wrap, {
79
82
  "data-testid": "ds-contextmenu-item",
80
83
  onClick: (e) => {
@@ -82,7 +85,7 @@ const DSMobileContextMenuItem = ({
82
85
  context.onChange(value, e, { value, label, title });
83
86
  onClick(e);
84
87
  },
85
- cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"]
88
+ cols
86
89
  }, (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ React2.createElement(PropWrap, {
87
90
  "data-testid": "left-addon",
88
91
  isMulti,
@@ -101,7 +104,11 @@ const DSMobileContextMenuItem = ({
101
104
  alignItems: !label ? "center" : void 0
102
105
  }, /* @__PURE__ */ React2.createElement(Title, {
103
106
  "data-testid": "contextMenuItem-title"
104
- }, title))));
107
+ }, title))), rightAddon ? /* @__PURE__ */ React2.createElement(PropWrap, {
108
+ "data-testid": "right-addon",
109
+ alignItems: "center",
110
+ justifyContent: "center"
111
+ }, rightAddon) : null);
105
112
  }
106
113
  });
107
114
  const props = {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuItem.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto']\n }\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,22 +1,26 @@
1
1
  import * as React from "react";
2
2
  import React2 from "react";
3
3
  import PropTypes from "prop-types";
4
- import { styled } from "@elliemae/ds-system";
4
+ import { styled, op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
5
5
  import { Grid } from "@elliemae/ds-grid";
6
- import { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
7
6
  import { DSFullPageContainer, DSFullPageContainerScroll } from "../FullPageContainer";
8
7
  const PageTitleWrapper = styled(Grid)`
9
8
  min-height: 44px;
10
9
  `;
11
10
  const DSMobilePageList = withTheme(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
12
- const rows = ["auto", op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];
11
+ const rows = [];
13
12
  if (header)
14
- rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));
13
+ rows.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));
14
+ if (pageTitle)
15
+ rows.push("auto");
16
+ if (filterBar)
17
+ rows.push(op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83));
18
+ rows.push(1);
15
19
  if (footer)
16
20
  rows.push("56px");
17
21
  return /* @__PURE__ */ React2.createElement(DSFullPageContainer, {
18
22
  rows
19
- }, header && /* @__PURE__ */ React2.createElement(Grid, null, header), /* @__PURE__ */ React2.createElement(PageTitleWrapper, null, pageTitle), /* @__PURE__ */ React2.createElement(Grid, null, filterBar), /* @__PURE__ */ React2.createElement(DSFullPageContainerScroll, null, body), footer && /* @__PURE__ */ React2.createElement(Grid, null, footer));
23
+ }, header ? /* @__PURE__ */ React2.createElement(Grid, null, header) : null, pageTitle ? /* @__PURE__ */ React2.createElement(PageTitleWrapper, null, pageTitle) : null, filterBar ? /* @__PURE__ */ React2.createElement(Grid, null, filterBar) : null, /* @__PURE__ */ React2.createElement(DSFullPageContainerScroll, null, body), footer && /* @__PURE__ */ React2.createElement(Grid, null, footer));
20
24
  });
21
25
  DSMobilePageList.propTypes = {
22
26
  header: PropTypes.element,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageList/PageList.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n if (footer) rows.push('56px');\n return (\n <DSFullPageContainer rows={rows}>\n {header && <Grid>{header}</Grid>}\n <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n <Grid>{filterBar}</Grid>\n <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n {footer && <Grid>{footer}</Grid>}\n </DSFullPageContainer>\n );\n },\n);\n\nDSMobilePageList.propTypes = {\n header: PropTypes.element,\n pageTitle: PropTypes.element,\n filterBar: PropTypes.element,\n body: PropTypes.element,\n footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,UACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,GAAG,KAAK,yBAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,yBAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,qCAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,qCAAC,YAAM,MAAO,GACzB,qCAAC,wBAAkB,SAAU,GAC7B,qCAAC,YAAM,SAAU,GACjB,qCAAC,iCAA2B,IAAK,GAChC,UAAU,qCAAC,YAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,aAAa;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled, op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n min-height: 44px;\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst DSMobilePageList = withTheme(\n ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n const rows = [];\n if (header) rows.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n if (pageTitle) rows.push('auto');\n if (filterBar) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83));\n rows.push(1);\n if (footer) rows.push('56px');\n return (\n <DSFullPageContainer rows={rows}>\n {header ? <Grid>{header}</Grid> : null}\n {pageTitle ? <PageTitleWrapper>{pageTitle}</PageTitleWrapper> : null}\n {filterBar ? <Grid>{filterBar}</Grid> : null}\n <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n {footer && <Grid>{footer}</Grid>}\n </DSFullPageContainer>\n );\n },\n);\n\nDSMobilePageList.propTypes = {\n header: PropTypes.element,\n pageTitle: PropTypes.element,\n filterBar: PropTypes.element,\n body: PropTypes.element,\n footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAKpC,MAAM,mBAAmB,UACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC;AACd,MAAI;AAAQ,SAAK,KAAK,yBAAyB,MAAM,MAAM,GAAG,CAAC;AAC/D,MAAI;AAAW,SAAK,KAAK,MAAM;AAC/B,MAAI;AAAW,SAAK,KAAK,GAAG,KAAK,yBAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,CAAC;AAChF,OAAK,KAAK,CAAC;AACX,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,qCAAC;AAAA,IAAoB;AAAA,KAClB,SAAS,qCAAC,YAAM,MAAO,IAAU,MACjC,YAAY,qCAAC,wBAAkB,SAAU,IAAsB,MAC/D,YAAY,qCAAC,YAAM,SAAU,IAAU,MACxC,qCAAC,iCAA2B,IAAK,GAChC,UAAU,qCAAC,YAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,aAAa;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "3.4.0-rc.2",
3
+ "version": "3.4.1-rc.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "files": [
@@ -435,21 +435,21 @@
435
435
  "typeSafety": false
436
436
  },
437
437
  "dependencies": {
438
- "@elliemae/ds-accordion": "3.4.0-rc.2",
439
- "@elliemae/ds-backdrop": "3.4.0-rc.2",
440
- "@elliemae/ds-button": "3.4.0-rc.2",
441
- "@elliemae/ds-circular-progress-indicator": "3.4.0-rc.2",
442
- "@elliemae/ds-form": "3.4.0-rc.2",
443
- "@elliemae/ds-form-checkbox": "3.4.0-rc.2",
444
- "@elliemae/ds-grid": "3.4.0-rc.2",
445
- "@elliemae/ds-icon": "3.4.0-rc.2",
446
- "@elliemae/ds-icons": "3.4.0-rc.2",
447
- "@elliemae/ds-indeterminate-progress-indicator": "3.4.0-rc.2",
448
- "@elliemae/ds-shared": "3.4.0-rc.2",
449
- "@elliemae/ds-system": "3.4.0-rc.2",
450
- "@elliemae/ds-tabs": "3.4.0-rc.2",
451
- "@elliemae/ds-truncated-expandable-text": "3.4.0-rc.2",
452
- "@elliemae/ds-utilities": "3.4.0-rc.2",
438
+ "@elliemae/ds-accordion": "3.4.1-rc.4",
439
+ "@elliemae/ds-backdrop": "3.4.1-rc.4",
440
+ "@elliemae/ds-button": "3.4.1-rc.4",
441
+ "@elliemae/ds-circular-progress-indicator": "3.4.1-rc.4",
442
+ "@elliemae/ds-form": "3.4.1-rc.4",
443
+ "@elliemae/ds-form-checkbox": "3.4.1-rc.4",
444
+ "@elliemae/ds-grid": "3.4.1-rc.4",
445
+ "@elliemae/ds-icon": "3.4.1-rc.4",
446
+ "@elliemae/ds-icons": "3.4.1-rc.4",
447
+ "@elliemae/ds-indeterminate-progress-indicator": "3.4.1-rc.4",
448
+ "@elliemae/ds-shared": "3.4.1-rc.4",
449
+ "@elliemae/ds-system": "3.4.1-rc.4",
450
+ "@elliemae/ds-tabs": "3.4.1-rc.4",
451
+ "@elliemae/ds-truncated-expandable-text": "3.4.1-rc.4",
452
+ "@elliemae/ds-utilities": "3.4.1-rc.4",
453
453
  "polished": "~3.6.7",
454
454
  "prop-types": "~15.8.1",
455
455
  "react-window": "~1.8.7",