@elliemae/ds-time-picker 3.0.0-next.40 → 3.0.0-next.44

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.
@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
35
35
  var import_react = __toESM(require("react"));
36
36
  var import_react_desc = require("react-desc");
37
37
  var import_moment = __toESM(require("moment"));
38
- var import_TimePickerImpl = require("./TimePickerImpl");
38
+ var import_TimePickerImpl = __toESM(require("./TimePickerImpl"));
39
39
  const DSTimePicker = ({
40
40
  containerProps = {},
41
41
  innerRef,
@@ -55,7 +55,7 @@ const DSTimePicker = ({
55
55
  placement = "bottom",
56
56
  disabledTimes,
57
57
  minutesInterval = 1
58
- }) => /* @__PURE__ */ import_react.default.createElement(import_TimePickerImpl.TimePickerImpl, {
58
+ }) => /* @__PURE__ */ import_react.default.createElement(import_TimePickerImpl.default, {
59
59
  ref: innerRef,
60
60
  "aria-label": ariaLabel,
61
61
  className,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSTimePicker.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport Moment from 'moment';\nimport { TimePickerImpl } from './TimePickerImpl';\n\nconst DSTimePicker = ({\n containerProps = {},\n innerRef,\n className = '',\n disabled = false,\n value = '',\n format,\n style = {},\n onChange = () => null,\n onOpen = () => null,\n isOpen = undefined,\n clearable = false,\n hasHeader = true,\n hasHeaderDisplay = false,\n 'aria-label': ariaLabel,\n zIndex = 'auto',\n placement = 'bottom',\n disabledTimes,\n minutesInterval = 1,\n}) => (\n <TimePickerImpl\n ref={innerRef}\n aria-label={ariaLabel}\n className={className}\n clearable={clearable}\n containerProps={containerProps}\n disabled={disabled}\n format={format}\n hasHeader={hasHeader}\n hasHeaderDisplay={hasHeaderDisplay}\n isOpen={isOpen}\n onChange={onChange}\n onOpen={onOpen}\n placement={placement}\n style={style}\n value={value}\n zIndex={zIndex}\n minutesInterval={minutesInterval}\n disabledTimes={disabledTimes}\n />\n);\n\nDSTimePicker.defaultProps = {\n format: 'hh:mm:ss A',\n};\n\nconst props = {\n /** a11y label */\n 'aria-label': PropTypes.string.description('a11y label'),\n /** inject props to time picker wrapper */\n containerProps: PropTypes.object.description(\n 'inject props to time picker wrapper',\n ),\n /** Whether the time picker is disabled or not */\n disabled: PropTypes.bool.description(\n 'Whether the time picker is disabled or not',\n ),\n /** Time picker value */\n value: PropTypes.instanceOf(Moment).description('Time picker value'),\n /** Time format (hh:mm:ss, H:m:s) */\n format: PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),\n /** toggle header style */\n hasHeader: PropTypes.bool.description('toggle header style'),\n /** toggle header display */\n hasHeaderDisplay: PropTypes.bool.description('toggle header display'),\n /** Handler when time picker value changes */\n onChange: PropTypes.func.description(\n 'Handler when time picker value changes',\n ),\n /** Handler when the time picker menu opens */\n onOpen: PropTypes.func.description('Handler when the time picker menu opens'),\n /** Whether the time picker menu is opened or not */\n isOpen: PropTypes.bool.description(\n 'Whether the time picker menu is opened or not',\n ),\n /** ref for time picker input */\n innerRef: PropTypes.func.description('ref for time picker input'),\n /** Enable to clear the time picker value */\n clearable: PropTypes.bool.description(\n 'Enable to clear the time picker value',\n ),\n /** class for time picker */\n className: PropTypes.string.description('class for time picker'),\n /** style object */\n style: PropTypes.object.description('style object'),\n /** z index for menu */\n zIndex: PropTypes.number.description('z index for menu'),\n /** DSPopper placement */\n placement: PropTypes.string.description('DSPopper placement'),\n /** disabled time */\n disabledTimes: PropTypes.object.description('disabled time'),\n /** steps for the picker */\n minutesInterval: PropTypes.number.description('steps for the picker'),\n};\n\nDSTimePicker.propTypes = props;\nconst DSTimePickerWithSchema = describe(DSTimePicker);\nDSTimePickerWithSchema.propTypes = props;\n\nexport { DSTimePicker, DSTimePickerWithSchema };\nexport default DSTimePicker;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,oBAAmB;AACnB,4BAA+B;AAE/B,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,MAElB,mDAAC;AAAA,EACC,KAAK;AAAA,EACL,cAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAGF,aAAa,eAAe;AAAA,EAC1B,QAAQ;AACV;AAEA,MAAM,QAAQ;AAAA,EAEZ,cAAc,4BAAU,OAAO,YAAY,YAAY;AAAA,EAEvD,gBAAgB,4BAAU,OAAO,YAC/B,qCACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YACvB,4CACF;AAAA,EAEA,OAAO,4BAAU,WAAW,qBAAM,EAAE,YAAY,mBAAmB;AAAA,EAEnE,QAAQ,4BAAU,OAAO,YAAY,+BAA+B;AAAA,EAEpE,WAAW,4BAAU,KAAK,YAAY,qBAAqB;AAAA,EAE3D,kBAAkB,4BAAU,KAAK,YAAY,uBAAuB;AAAA,EAEpE,UAAU,4BAAU,KAAK,YACvB,wCACF;AAAA,EAEA,QAAQ,4BAAU,KAAK,YAAY,yCAAyC;AAAA,EAE5E,QAAQ,4BAAU,KAAK,YACrB,+CACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YAAY,2BAA2B;AAAA,EAEhE,WAAW,4BAAU,KAAK,YACxB,uCACF;AAAA,EAEA,WAAW,4BAAU,OAAO,YAAY,uBAAuB;AAAA,EAE/D,OAAO,4BAAU,OAAO,YAAY,cAAc;AAAA,EAElD,QAAQ,4BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEvD,WAAW,4BAAU,OAAO,YAAY,oBAAoB;AAAA,EAE5D,eAAe,4BAAU,OAAO,YAAY,eAAe;AAAA,EAE3D,iBAAiB,4BAAU,OAAO,YAAY,sBAAsB;AACtE;AAEA,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport Moment from 'moment';\nimport TimePickerImpl from './TimePickerImpl';\n\nconst DSTimePicker = ({\n containerProps = {},\n innerRef,\n className = '',\n disabled = false,\n value = '',\n format,\n style = {},\n onChange = () => null,\n onOpen = () => null,\n isOpen = undefined,\n clearable = false,\n hasHeader = true,\n hasHeaderDisplay = false,\n 'aria-label': ariaLabel,\n zIndex = 'auto',\n placement = 'bottom',\n disabledTimes,\n minutesInterval = 1,\n}) => (\n <TimePickerImpl\n ref={innerRef}\n aria-label={ariaLabel}\n className={className}\n clearable={clearable}\n containerProps={containerProps}\n disabled={disabled}\n format={format}\n hasHeader={hasHeader}\n hasHeaderDisplay={hasHeaderDisplay}\n isOpen={isOpen}\n onChange={onChange}\n onOpen={onOpen}\n placement={placement}\n style={style}\n value={value}\n zIndex={zIndex}\n minutesInterval={minutesInterval}\n disabledTimes={disabledTimes}\n />\n);\n\nDSTimePicker.defaultProps = {\n format: 'hh:mm:ss A',\n};\n\nconst props = {\n /** a11y label */\n 'aria-label': PropTypes.string.description('a11y label'),\n /** inject props to time picker wrapper */\n containerProps: PropTypes.object.description(\n 'inject props to time picker wrapper',\n ),\n /** Whether the time picker is disabled or not */\n disabled: PropTypes.bool.description(\n 'Whether the time picker is disabled or not',\n ),\n /** Time picker value */\n value: PropTypes.instanceOf(Moment).description('Time picker value'),\n /** Time format (hh:mm:ss, H:m:s) */\n format: PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),\n /** toggle header style */\n hasHeader: PropTypes.bool.description('toggle header style'),\n /** toggle header display */\n hasHeaderDisplay: PropTypes.bool.description('toggle header display'),\n /** Handler when time picker value changes */\n onChange: PropTypes.func.description(\n 'Handler when time picker value changes',\n ),\n /** Handler when the time picker menu opens */\n onOpen: PropTypes.func.description('Handler when the time picker menu opens'),\n /** Whether the time picker menu is opened or not */\n isOpen: PropTypes.bool.description(\n 'Whether the time picker menu is opened or not',\n ),\n /** ref for time picker input */\n innerRef: PropTypes.func.description('ref for time picker input'),\n /** Enable to clear the time picker value */\n clearable: PropTypes.bool.description(\n 'Enable to clear the time picker value',\n ),\n /** class for time picker */\n className: PropTypes.string.description('class for time picker'),\n /** style object */\n style: PropTypes.object.description('style object'),\n /** z index for menu */\n zIndex: PropTypes.number.description('z index for menu'),\n /** DSPopper placement */\n placement: PropTypes.string.description('DSPopper placement'),\n /** disabled time */\n disabledTimes: PropTypes.object.description('disabled time'),\n /** steps for the picker */\n minutesInterval: PropTypes.number.description('steps for the picker'),\n};\n\nDSTimePicker.propTypes = props;\nconst DSTimePickerWithSchema = describe(DSTimePicker);\nDSTimePickerWithSchema.propTypes = props;\n\nexport { DSTimePicker, DSTimePickerWithSchema };\nexport default DSTimePicker;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,oBAAmB;AACnB,4BAA2B;AAE3B,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,MAElB,mDAAC;AAAA,EACC,KAAK;AAAA,EACL,cAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAGF,aAAa,eAAe;AAAA,EAC1B,QAAQ;AACV;AAEA,MAAM,QAAQ;AAAA,EAEZ,cAAc,4BAAU,OAAO,YAAY,YAAY;AAAA,EAEvD,gBAAgB,4BAAU,OAAO,YAC/B,qCACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YACvB,4CACF;AAAA,EAEA,OAAO,4BAAU,WAAW,qBAAM,EAAE,YAAY,mBAAmB;AAAA,EAEnE,QAAQ,4BAAU,OAAO,YAAY,+BAA+B;AAAA,EAEpE,WAAW,4BAAU,KAAK,YAAY,qBAAqB;AAAA,EAE3D,kBAAkB,4BAAU,KAAK,YAAY,uBAAuB;AAAA,EAEpE,UAAU,4BAAU,KAAK,YACvB,wCACF;AAAA,EAEA,QAAQ,4BAAU,KAAK,YAAY,yCAAyC;AAAA,EAE5E,QAAQ,4BAAU,KAAK,YACrB,+CACF;AAAA,EAEA,UAAU,4BAAU,KAAK,YAAY,2BAA2B;AAAA,EAEhE,WAAW,4BAAU,KAAK,YACxB,uCACF;AAAA,EAEA,WAAW,4BAAU,OAAO,YAAY,uBAAuB;AAAA,EAE/D,OAAO,4BAAU,OAAO,YAAY,cAAc;AAAA,EAElD,QAAQ,4BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEvD,WAAW,4BAAU,OAAO,YAAY,oBAAoB;AAAA,EAE5D,eAAe,4BAAU,OAAO,YAAY,eAAe;AAAA,EAE3D,iBAAiB,4BAAU,OAAO,YAAY,sBAAsB;AACtE;AAEA,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
6
6
  "names": []
7
7
  }
@@ -47,13 +47,13 @@ __export(DSTimePickerMenu_exports, {
47
47
  var React = __toESM(require("react"));
48
48
  var import_react = __toESM(require("react"));
49
49
  var import_styled_components = __toESM(require("styled-components"));
50
- var import_TimePickerMenu = require("./TimePickerMenu");
50
+ var import_TimePickerMenu = __toESM(require("./TimePickerMenu"));
51
51
  const DSTimePickerMenuWrapper = import_styled_components.default.div`
52
52
  display: flex;
53
53
  height: 18.6rem;
54
54
  `;
55
55
  function DSTimePickerMenu(props) {
56
- return /* @__PURE__ */ import_react.default.createElement(DSTimePickerMenuWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_TimePickerMenu.TimePickerMenu, __spreadValues({}, props)));
56
+ return /* @__PURE__ */ import_react.default.createElement(DSTimePickerMenuWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_TimePickerMenu.default, __spreadValues({}, props)));
57
57
  }
58
58
  var DSTimePickerMenu_default = DSTimePickerMenu;
59
59
  module.exports = __toCommonJS(DSTimePickerMenu_exports);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSTimePickerMenu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { TimePickerMenu } from './TimePickerMenu';\n\nconst DSTimePickerMenuWrapper = styled.div`\n display: flex;\n height: 18.6rem;\n`;\nfunction DSTimePickerMenu(props) {\n return (\n <DSTimePickerMenuWrapper>\n <TimePickerMenu {...props} />\n </DSTimePickerMenuWrapper>\n );\n}\nexport { DSTimePickerMenu };\nexport default DSTimePickerMenu;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,4BAA+B;AAE/B,MAAM,0BAA0B,iCAAO;AAAA;AAAA;AAAA;AAIvC,0BAA0B,OAAO;AAC/B,SACE,mDAAC,+BACC,mDAAC,yDAAmB,MAAO,CAC7B;AAEJ;AAEA,IAAO,2BAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport TimePickerMenu from './TimePickerMenu';\n\nconst DSTimePickerMenuWrapper = styled.div`\n display: flex;\n height: 18.6rem;\n`;\nfunction DSTimePickerMenu(props) {\n return (\n <DSTimePickerMenuWrapper>\n <TimePickerMenu {...props} />\n </DSTimePickerMenuWrapper>\n );\n}\nexport { DSTimePickerMenu };\nexport default DSTimePickerMenu;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,4BAA2B;AAE3B,MAAM,0BAA0B,iCAAO;AAAA;AAAA;AAAA;AAIvC,0BAA0B,OAAO;AAC/B,SACE,mDAAC,+BACC,mDAAC,kDAAmB,MAAO,CAC7B;AAEJ;AAEA,IAAO,2BAAQ;",
6
6
  "names": []
7
7
  }
@@ -91,46 +91,6 @@ class PickerPanel extends import_react.Component {
91
91
  this.scrollHandler.updatePosition(listYPosition);
92
92
  return listYPosition;
93
93
  });
94
- this.handleKeyDown = (e) => {
95
- const { activeIndex } = this.state;
96
- const { options } = this.props;
97
- const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
98
- const [lastColumn] = restColumns.slice(-1);
99
- const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
100
- const focusedElement = document.activeElement;
101
- switch (e.key) {
102
- case "Home":
103
- this.moveTo(0);
104
- break;
105
- case "End":
106
- this.moveTo(options.length - 1);
107
- break;
108
- case "ArrowUp":
109
- this.moveTo(activeIndex - 1);
110
- break;
111
- case "ArrowDown":
112
- this.moveTo(activeIndex + 1);
113
- break;
114
- case "Tab": {
115
- e.preventDefault();
116
- if (prev && focusedElement === lastColumn) {
117
- prev.focus();
118
- } else if (focusedElement === lastColumn) {
119
- firstColumn.focus();
120
- } else {
121
- const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
122
- restColumns[position + 1].focus();
123
- }
124
- break;
125
- }
126
- default:
127
- break;
128
- }
129
- };
130
- this.renderHeader = () => {
131
- const { header } = this.props;
132
- return /* @__PURE__ */ import_react.default.createElement(PickerHeader, null, header);
133
- };
134
94
  this.pickerListContainerRef = import_react.default.createRef();
135
95
  this.pickerListRef = import_react.default.createRef();
136
96
  this.pickerItemRef = import_react.default.createRef();
@@ -140,6 +100,15 @@ class PickerPanel extends import_react.Component {
140
100
  activeIndex: 0,
141
101
  prevProps: {}
142
102
  };
103
+ this.getOptionValue = this.getOptionValue.bind(this);
104
+ this.getOptionLabel = this.getOptionLabel.bind(this);
105
+ this.computeSizes = this.computeSizes.bind(this);
106
+ this.handleOptionSelect = this.handleOptionSelect.bind(this);
107
+ this.handleKeyDown = this.handleKeyDown.bind(this);
108
+ this.moveTo = this.moveTo.bind(this);
109
+ this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
110
+ this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
111
+ this.renderHeader = this.renderHeader.bind(this);
143
112
  }
144
113
  componentDidMount() {
145
114
  this.computeSizes();
@@ -200,6 +169,42 @@ class PickerPanel extends import_react.Component {
200
169
  onChange(optionValue, index);
201
170
  });
202
171
  }
172
+ handleKeyDown(e) {
173
+ const { activeIndex } = this.state;
174
+ const { options } = this.props;
175
+ const [firstColumn, ...restColumns] = document.getElementsByClassName("em-ds-time-picker-panel");
176
+ const [lastColumn] = restColumns.slice(-1);
177
+ const [prev] = document.getElementsByClassName("DayPickerNavigation_button");
178
+ const focusedElement = document.activeElement;
179
+ switch (e.key) {
180
+ case "Home":
181
+ this.moveTo(0);
182
+ break;
183
+ case "End":
184
+ this.moveTo(options.length - 1);
185
+ break;
186
+ case "ArrowUp":
187
+ this.moveTo(activeIndex - 1);
188
+ break;
189
+ case "ArrowDown":
190
+ this.moveTo(activeIndex + 1);
191
+ break;
192
+ case "Tab": {
193
+ e.preventDefault();
194
+ if (prev && focusedElement === lastColumn) {
195
+ prev.focus();
196
+ } else if (focusedElement === lastColumn) {
197
+ firstColumn.focus();
198
+ } else {
199
+ const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
200
+ restColumns[position + 1].focus();
201
+ }
202
+ break;
203
+ }
204
+ default:
205
+ break;
206
+ }
207
+ }
203
208
  moveTo(index, scrolling) {
204
209
  const { options } = this.props;
205
210
  const { selectedOption } = this.state;
@@ -225,6 +230,10 @@ class PickerPanel extends import_react.Component {
225
230
  const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
226
231
  this.moveTo(nextPos);
227
232
  }
233
+ renderHeader() {
234
+ const { header } = this.props;
235
+ return /* @__PURE__ */ import_react.default.createElement(PickerHeader, null, header);
236
+ }
228
237
  render() {
229
238
  const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;
230
239
  const { selectedOption, activeIndex, scrolling } = this.state;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PickerPanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable eqeqeq */\n/* eslint-disable react/prop-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { findIndex } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport memoizeOne from 'memoize-one';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { MoveElementOnScroll } from './moveElementOnScroll';\nimport { validateIndex } from './utils';\n\nconst blockName = 'time-picker-panel';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ scrolling }) => ({ scrolling }));\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');\nconst PickerItemList = aggregatedClasses('div')(blockName, 'item-list');\nconst PickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst PickerItemContainer = aggregatedClasses('div')(blockName, 'item', ({ selected, disabled }) => ({\n selected,\n disabled,\n}));\nconst PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');\nconst SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');\nconst ArrowButtonContainer = aggregatedClasses('div')(blockName, 'arrow-container');\n\nconst getOptionIndex = (options, selectedOption, valueProperty = 'value') => {\n const index = options.findIndex((option) => option[valueProperty] === selectedOption);\n return validateIndex(index, options);\n};\n\nconst arrowProps = {\n buttonType: 'text',\n fluidHeight: true,\n fluidWidth: true,\n size: 's',\n};\n\nexport default class PickerPanel extends Component {\n computeContainerTranslation = memoizeOne((index) => {\n const { options, valueProperty } = this.props;\n const { selectedOption, scrolling } = this.state;\n\n const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);\n const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;\n\n if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);\n\n return listYPosition;\n });\n\n constructor(props) {\n super(props);\n this.pickerListContainerRef = React.createRef();\n this.pickerListRef = React.createRef();\n this.pickerItemRef = React.createRef();\n this.selectedOptionRef = React.createRef();\n\n this.state = {\n selectedOption: props.selected,\n activeIndex: 0,\n // eslint-disable-next-line react/no-unused-state\n prevProps: {},\n };\n }\n\n componentDidMount() {\n this.computeSizes();\n const pickerListContainerEl = this.pickerListContainerRef.current;\n const pickerListEl = this.pickerListRef.current;\n\n this.scrollHandler = new MoveElementOnScroll(pickerListEl, {\n container: pickerListContainerEl,\n min: -this.minYListPosition,\n max: this.maxYListPosition,\n onUpdate: (pos, delta) => {\n const { options } = this.props;\n const index =\n options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);\n this.moveTo(index, true);\n },\n onEndScroll: () => {\n this.setState({ scrolling: false });\n },\n });\n this.computeContainerTranslation();\n }\n\n componentWillUnmount() {\n this.scrollHandler.unsubscribe();\n }\n\n static getDerivedStateFromProps(nextProps, { prevProps }) {\n const { selected, valueProperty, options } = nextProps;\n if (selected !== prevProps.selected) {\n return {\n selectedOption: selected,\n activeIndex: getOptionIndex(options, selected, valueProperty),\n prevProps: nextProps,\n };\n }\n return null;\n }\n\n getOptionValue(option) {\n const { valueProperty } = this.props;\n return option[valueProperty];\n }\n\n getOptionLabel(option) {\n const { labelProperty } = this.props;\n return option[labelProperty];\n }\n\n computeSizes() {\n const { options, numberItemsOnScreen } = this.props;\n const { offsetHeight: optionHeight } = this.pickerItemRef.current;\n\n this.optionHeight = optionHeight;\n this.listHeight = this.optionHeight * numberItemsOnScreen;\n\n this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;\n this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));\n }\n\n handleOptionSelect(optionValue, index, scrolling) {\n const { onChange } = this.props;\n this.setState(\n (state) => ({\n ...state,\n scrolling,\n selectedOption: optionValue,\n activeIndex: index,\n }),\n () => {\n onChange(optionValue, index);\n },\n );\n }\n\n // TODO: this needs a refactor from de FocusGroup\n // eslint-disable-next-line max-statements\n handleKeyDown = (e) => {\n const { activeIndex } = this.state;\n const { options } = this.props;\n const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');\n const [lastColumn] = restColumns.slice(-1);\n const [prev] = document.getElementsByClassName('DayPickerNavigation_button');\n const focusedElement = document.activeElement;\n\n switch (e.key) {\n case 'Home':\n this.moveTo(0);\n break;\n case 'End':\n this.moveTo(options.length - 1);\n break;\n case 'ArrowUp':\n this.moveTo(activeIndex - 1);\n break;\n case 'ArrowDown':\n this.moveTo(activeIndex + 1);\n break;\n case 'Tab': {\n e.preventDefault();\n // If it is DateTimePicker, move focus to prev arrow element\n if (prev && focusedElement === lastColumn) {\n prev.focus();\n } else if (focusedElement === lastColumn) {\n firstColumn.focus();\n } else {\n const position = findIndex(restColumns, focusedElement);\n restColumns[position + 1].focus();\n }\n break;\n }\n default:\n break;\n }\n }\n\n moveTo(index, scrolling) {\n const { options } = this.props;\n const { selectedOption } = this.state;\n const validIndex = validateIndex(index, options);\n const option = options[validIndex];\n const optionValue = this.getOptionValue(option);\n if (selectedOption !== optionValue && option.disabled !== true) {\n this.handleOptionSelect(optionValue, validIndex, scrolling);\n }\n // TO-DO: if date disabled, add nextValidOption selection\n }\n\n handleStepMoveUp() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex - arrowStep;\n const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;\n\n const nextValidOption = options.find((op) => !op.disabled);\n this.moveTo(nextPos, true, nextValidOption);\n }\n\n handleStepMoveDown() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex + arrowStep;\n const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;\n this.moveTo(nextPos);\n }\n\n renderHeader = () => {\n const { header } = this.props;\n\n return <PickerHeader>{header}</PickerHeader>;\n };\n\n render() {\n const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;\n const { selectedOption, activeIndex, scrolling } = this.state;\n\n const listYPosition = this.computeContainerTranslation(activeIndex);\n\n return (\n <Wrapper>\n {hasHeader && this.renderHeader()}\n <Container classProps={{ scrolling }} onKeyDown={this.handleKeyDown} tabIndex={0}>\n <PickerSelectedOptionSelected innerRef={this.selectedOptionRef}>\n <SelectedCircle />\n </PickerSelectedOptionSelected>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Up\"\n data-testid={`${type}-chevron-up`}\n disabled={activeIndex <= 0}\n icon={<ChevronSmallUp />}\n onClick={this.handleStepMoveUp}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n <PickerItemListContainer\n innerRef={this.pickerListContainerRef}\n style={{\n height: this.listHeight,\n }}\n >\n <PickerItemList\n data-testid={`${type}-list`}\n innerRef={this.pickerListRef}\n style={{\n transform: `translateY(${listYPosition}px)`,\n }}\n >\n {options.map((option, index) => {\n const value = this.getOptionValue(option);\n const label = this.getOptionLabel(option);\n let valueFormatted;\n if (meridiem === 'AM') valueFormatted = value;\n else if (meridiem === 'PM' && value === 12) valueFormatted = value;\n else if (meridiem === 'PM') valueFormatted = value + 12;\n\n let disabled = false;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (\n (type === 'hour' && valueFormatted >= from?.hour && valueFormatted < to?.hour) ||\n (type === 'minutes' && value >= from?.min && value < to?.min)\n ) {\n disabled = true;\n }\n if (type === 'minutes' && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {\n disabled = false;\n }\n if (label === 'am' && from?.hour == 0 && to?.hour >= 12) {\n disabled = true;\n }\n if (label === 'pm' && to?.hour == 24) {\n disabled = true;\n }\n }\n\n option.disabled = disabled;\n\n return (\n <PickerItemContainer\n key={value}\n classProps={{\n selected: selectedOption ? value === selectedOption : index === 0,\n disabled,\n }}\n innerRef={this.pickerItemRef}\n onClick={() => {\n if (!disabled) this.handleOptionSelect(value, index);\n }}\n >\n {label}\n </PickerItemContainer>\n );\n })}\n </PickerItemList>\n </PickerItemListContainer>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Down\"\n data-testid={`${type}-chevron-down`}\n disabled={activeIndex >= options.length - 1}\n icon={<ChevronSmallDown />}\n onClick={this.handleStepMoveDown}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n </Container>\n </Wrapper>\n );\n }\n}\n\nPickerPanel.defaultProps = {\n valueProperty: 'value',\n labelProperty: 'label',\n numberItemsOnScreen: 5, // this number should be impair\n options: [],\n arrowStep: 1,\n};\n\nexport { PickerPanel };", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable eqeqeq */\n/* eslint-disable react/prop-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { findIndex } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport memoizeOne from 'memoize-one';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { MoveElementOnScroll } from './moveElementOnScroll';\nimport { validateIndex } from './utils';\n\nconst blockName = 'time-picker-panel';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ scrolling }) => ({ scrolling }));\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');\nconst PickerItemList = aggregatedClasses('div')(blockName, 'item-list');\nconst PickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst PickerItemContainer = aggregatedClasses('div')(blockName, 'item', ({ selected, disabled }) => ({\n selected,\n disabled,\n}));\nconst PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');\nconst SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');\nconst ArrowButtonContainer = aggregatedClasses('div')(blockName, 'arrow-container');\n\nconst getOptionIndex = (options, selectedOption, valueProperty = 'value') => {\n const index = options.findIndex((option) => option[valueProperty] === selectedOption);\n return validateIndex(index, options);\n};\n\nconst arrowProps = {\n buttonType: 'text',\n fluidHeight: true,\n fluidWidth: true,\n size: 's',\n};\n\nexport default class PickerPanel extends Component {\n computeContainerTranslation = memoizeOne((index) => {\n const { options, valueProperty } = this.props;\n const { selectedOption, scrolling } = this.state;\n\n const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);\n const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;\n\n if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);\n\n return listYPosition;\n });\n\n constructor(props) {\n super(props);\n this.pickerListContainerRef = React.createRef();\n this.pickerListRef = React.createRef();\n this.pickerItemRef = React.createRef();\n this.selectedOptionRef = React.createRef();\n\n this.state = {\n selectedOption: props.selected,\n activeIndex: 0,\n // eslint-disable-next-line react/no-unused-state\n prevProps: {},\n };\n\n this.getOptionValue = this.getOptionValue.bind(this);\n this.getOptionLabel = this.getOptionLabel.bind(this);\n this.computeSizes = this.computeSizes.bind(this);\n this.handleOptionSelect = this.handleOptionSelect.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.moveTo = this.moveTo.bind(this);\n this.handleStepMoveUp = this.handleStepMoveUp.bind(this);\n this.handleStepMoveDown = this.handleStepMoveDown.bind(this);\n this.renderHeader = this.renderHeader.bind(this);\n }\n\n componentDidMount() {\n this.computeSizes();\n const pickerListContainerEl = this.pickerListContainerRef.current;\n const pickerListEl = this.pickerListRef.current;\n\n this.scrollHandler = new MoveElementOnScroll(pickerListEl, {\n container: pickerListContainerEl,\n min: -this.minYListPosition,\n max: this.maxYListPosition,\n onUpdate: (pos, delta) => {\n const { options } = this.props;\n const index =\n options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);\n this.moveTo(index, true);\n },\n onEndScroll: () => {\n this.setState({ scrolling: false });\n },\n });\n this.computeContainerTranslation();\n }\n\n componentWillUnmount() {\n this.scrollHandler.unsubscribe();\n }\n\n static getDerivedStateFromProps(nextProps, { prevProps }) {\n const { selected, valueProperty, options } = nextProps;\n if (selected !== prevProps.selected) {\n return {\n selectedOption: selected,\n activeIndex: getOptionIndex(options, selected, valueProperty),\n prevProps: nextProps,\n };\n }\n return null;\n }\n\n getOptionValue(option) {\n const { valueProperty } = this.props;\n return option[valueProperty];\n }\n\n getOptionLabel(option) {\n const { labelProperty } = this.props;\n return option[labelProperty];\n }\n\n computeSizes() {\n const { options, numberItemsOnScreen } = this.props;\n const { offsetHeight: optionHeight } = this.pickerItemRef.current;\n\n this.optionHeight = optionHeight;\n this.listHeight = this.optionHeight * numberItemsOnScreen;\n\n this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;\n this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));\n }\n\n handleOptionSelect(optionValue, index, scrolling) {\n const { onChange } = this.props;\n this.setState(\n (state) => ({\n ...state,\n scrolling,\n selectedOption: optionValue,\n activeIndex: index,\n }),\n () => {\n onChange(optionValue, index);\n },\n );\n }\n\n // TODO: this needs a refactor from de FocusGroup\n // eslint-disable-next-line max-statements\n handleKeyDown(e) {\n const { activeIndex } = this.state;\n const { options } = this.props;\n const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');\n const [lastColumn] = restColumns.slice(-1);\n const [prev] = document.getElementsByClassName('DayPickerNavigation_button');\n const focusedElement = document.activeElement;\n\n switch (e.key) {\n case 'Home':\n this.moveTo(0);\n break;\n case 'End':\n this.moveTo(options.length - 1);\n break;\n case 'ArrowUp':\n this.moveTo(activeIndex - 1);\n break;\n case 'ArrowDown':\n this.moveTo(activeIndex + 1);\n break;\n case 'Tab': {\n e.preventDefault();\n // If it is DateTimePicker, move focus to prev arrow element\n if (prev && focusedElement === lastColumn) {\n prev.focus();\n } else if (focusedElement === lastColumn) {\n firstColumn.focus();\n } else {\n const position = findIndex(restColumns, focusedElement);\n restColumns[position + 1].focus();\n }\n break;\n }\n default:\n break;\n }\n }\n\n moveTo(index, scrolling) {\n const { options } = this.props;\n const { selectedOption } = this.state;\n const validIndex = validateIndex(index, options);\n const option = options[validIndex];\n const optionValue = this.getOptionValue(option);\n if (selectedOption !== optionValue && option.disabled !== true) {\n this.handleOptionSelect(optionValue, validIndex, scrolling);\n }\n // TO-DO: if date disabled, add nextValidOption selection\n }\n\n handleStepMoveUp() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex - arrowStep;\n const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;\n\n const nextValidOption = options.find((op) => !op.disabled);\n this.moveTo(nextPos, true, nextValidOption);\n }\n\n handleStepMoveDown() {\n const { activeIndex } = this.state;\n const { arrowStep, options } = this.props;\n const supposedPos = activeIndex + arrowStep;\n const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;\n this.moveTo(nextPos);\n }\n\n renderHeader() {\n const { header } = this.props;\n\n return <PickerHeader>{header}</PickerHeader>;\n }\n\n render() {\n const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;\n const { selectedOption, activeIndex, scrolling } = this.state;\n\n const listYPosition = this.computeContainerTranslation(activeIndex);\n\n return (\n <Wrapper>\n {hasHeader && this.renderHeader()}\n <Container classProps={{ scrolling }} onKeyDown={this.handleKeyDown} tabIndex={0}>\n <PickerSelectedOptionSelected innerRef={this.selectedOptionRef}>\n <SelectedCircle />\n </PickerSelectedOptionSelected>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Up\"\n data-testid={`${type}-chevron-up`}\n disabled={activeIndex <= 0}\n icon={<ChevronSmallUp />}\n onClick={this.handleStepMoveUp}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n <PickerItemListContainer\n innerRef={this.pickerListContainerRef}\n style={{\n height: this.listHeight,\n }}\n >\n <PickerItemList\n data-testid={`${type}-list`}\n innerRef={this.pickerListRef}\n style={{\n transform: `translateY(${listYPosition}px)`,\n }}\n >\n {options.map((option, index) => {\n const value = this.getOptionValue(option);\n const label = this.getOptionLabel(option);\n let valueFormatted;\n if (meridiem === 'AM') valueFormatted = value;\n else if (meridiem === 'PM' && value === 12) valueFormatted = value;\n else if (meridiem === 'PM') valueFormatted = value + 12;\n\n let disabled = false;\n if (disabledTimes) {\n const { from, to } = disabledTimes;\n if (\n (type === 'hour' && valueFormatted >= from?.hour && valueFormatted < to?.hour) ||\n (type === 'minutes' && value >= from?.min && value < to?.min)\n ) {\n disabled = true;\n }\n if (type === 'minutes' && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {\n disabled = false;\n }\n if (label === 'am' && from?.hour == 0 && to?.hour >= 12) {\n disabled = true;\n }\n if (label === 'pm' && to?.hour == 24) {\n disabled = true;\n }\n }\n\n option.disabled = disabled;\n\n return (\n <PickerItemContainer\n key={value}\n classProps={{\n selected: selectedOption ? value === selectedOption : index === 0,\n disabled,\n }}\n innerRef={this.pickerItemRef}\n onClick={() => {\n if (!disabled) this.handleOptionSelect(value, index);\n }}\n >\n {label}\n </PickerItemContainer>\n );\n })}\n </PickerItemList>\n </PickerItemListContainer>\n <ArrowButtonContainer>\n <DSButton\n {...arrowProps}\n aria-label=\"Chevron Down\"\n data-testid={`${type}-chevron-down`}\n disabled={activeIndex >= options.length - 1}\n icon={<ChevronSmallDown />}\n onClick={this.handleStepMoveDown}\n tabIndex={-1}\n />\n </ArrowButtonContainer>\n </Container>\n </Wrapper>\n );\n }\n}\n\nPickerPanel.defaultProps = {\n valueProperty: 'value',\n labelProperty: 'label',\n numberItemsOnScreen: 5, // this number should be impair\n options: [],\n arrowStep: 1,\n};\n\nexport { PickerPanel };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -27,16 +27,15 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
27
27
  })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
28
  var TimePickerDropdown_exports = {};
29
29
  __export(TimePickerDropdown_exports, {
30
- TimePickerDropdown: () => TimePickerDropdown,
31
30
  default: () => TimePickerDropdown_default
32
31
  });
33
32
  var React = __toESM(require("react"));
34
33
  var import_react = __toESM(require("react"));
35
34
  var import_prop_types = __toESM(require("prop-types"));
36
35
  var import_ds_icons = require("@elliemae/ds-icons");
37
- var import_ds_button = require("@elliemae/ds-button");
38
- var import_ds_popper = require("@elliemae/ds-popper");
39
- const TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => /* @__PURE__ */ import_react.default.createElement(import_ds_popper.DSPopper, {
36
+ var import_ds_button = __toESM(require("@elliemae/ds-button"));
37
+ var import_ds_popper = __toESM(require("@elliemae/ds-popper"));
38
+ const TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => /* @__PURE__ */ import_react.default.createElement(import_ds_popper.default, {
40
39
  blockName,
41
40
  placement,
42
41
  contentComponent: menu,
@@ -50,7 +49,7 @@ const TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, z
50
49
  }
51
50
  },
52
51
  showArrow: false,
53
- triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
52
+ triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
54
53
  buttonType: "secondary",
55
54
  disabled,
56
55
  icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.RecentDocuments, null),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TimePickerDropdown.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopper } from '@elliemae/ds-popper';\n\nconst TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => (\n <DSPopper\n blockName={blockName}\n placement={placement}\n contentComponent={menu}\n isOpen={isOpen}\n onOpen={onOpen}\n modifiers={{\n preventOverflow: {\n enabled: true,\n padding: 0,\n boundariesElement: 'window',\n },\n }}\n showArrow={false}\n triggerComponent={\n <DSButton buttonType=\"secondary\" disabled={disabled} icon={<RecentDocuments />} iconSize=\"s\" onClick={onClick} />\n }\n zIndex={zIndex}\n />\n);\n\nTimePickerDropdown.propTypes = {\n onClick: PropTypes.func,\n onOpen: PropTypes.func,\n disabled: PropTypes.bool,\n isOpen: PropTypes.bool,\n menu: PropTypes.element,\n blockName: PropTypes.string,\n placement: PropTypes.string,\n zIndex: PropTypes.number,\n};\n\nexport { TimePickerDropdown };\nexport default TimePickerDropdown;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,sBAAgC;AAChC,uBAAyB;AACzB,uBAAyB;AAEzB,MAAM,qBAAqB,CAAC,EAAE,WAAW,OAAO,SAAS,QAAQ,QAAQ,MAAM,QAAQ,WAAW,gBAChG,mDAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,IACT,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,mBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EACA,WAAW;AAAA,EACX,kBACE,mDAAC;AAAA,IAAS,YAAW;AAAA,IAAY;AAAA,IAAoB,MAAM,mDAAC,qCAAgB;AAAA,IAAI,UAAS;AAAA,IAAI;AAAA,GAAkB;AAAA,EAEjH;AAAA,CACF;AAGF,mBAAmB,YAAY;AAAA,EAC7B,SAAS,0BAAU;AAAA,EACnB,QAAQ,0BAAU;AAAA,EAClB,UAAU,0BAAU;AAAA,EACpB,QAAQ,0BAAU;AAAA,EAClB,MAAM,0BAAU;AAAA,EAChB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,QAAQ,0BAAU;AACpB;AAGA,IAAO,6BAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport DSPopper from '@elliemae/ds-popper';\n\nconst TimePickerDropdown = ({ disabled = false, onClick, onOpen, isOpen, menu, zIndex, blockName, placement }) => (\n <DSPopper\n blockName={blockName}\n placement={placement}\n contentComponent={menu}\n isOpen={isOpen}\n onOpen={onOpen}\n modifiers={{\n preventOverflow: {\n enabled: true,\n padding: 0,\n boundariesElement: 'window',\n },\n }}\n showArrow={false}\n triggerComponent={\n <DSButton buttonType=\"secondary\" disabled={disabled} icon={<RecentDocuments />} iconSize=\"s\" onClick={onClick} />\n }\n zIndex={zIndex}\n />\n);\n\nTimePickerDropdown.propTypes = {\n onClick: PropTypes.func,\n onOpen: PropTypes.func,\n disabled: PropTypes.bool,\n isOpen: PropTypes.bool,\n menu: PropTypes.element,\n blockName: PropTypes.string,\n placement: PropTypes.string,\n zIndex: PropTypes.number,\n};\n\nexport default TimePickerDropdown;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,sBAAgC;AAChC,uBAAqB;AACrB,uBAAqB;AAErB,MAAM,qBAAqB,CAAC,EAAE,WAAW,OAAO,SAAS,QAAQ,QAAQ,MAAM,QAAQ,WAAW,gBAChG,mDAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,IACT,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,mBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EACA,WAAW;AAAA,EACX,kBACE,mDAAC;AAAA,IAAS,YAAW;AAAA,IAAY;AAAA,IAAoB,MAAM,mDAAC,qCAAgB;AAAA,IAAI,UAAS;AAAA,IAAI;AAAA,GAAkB;AAAA,EAEjH;AAAA,CACF;AAGF,mBAAmB,YAAY;AAAA,EAC7B,SAAS,0BAAU;AAAA,EACnB,QAAQ,0BAAU;AAAA,EAClB,UAAU,0BAAU;AAAA,EACpB,QAAQ,0BAAU;AAAA,EAClB,MAAM,0BAAU;AAAA,EAChB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,QAAQ,0BAAU;AACpB;AAEA,IAAO,6BAAQ;",
6
6
  "names": []
7
7
  }
@@ -53,7 +53,6 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
53
53
  })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
54
54
  var TimePickerImpl_exports = {};
55
55
  __export(TimePickerImpl_exports, {
56
- TimePickerImpl: () => TimePickerImpl,
57
56
  default: () => TimePickerImpl_default
58
57
  });
59
58
  var React = __toESM(require("react"));
@@ -64,8 +63,8 @@ var import_memoize_one = __toESM(require("memoize-one"));
64
63
  var import_ds_utilities = require("@elliemae/ds-utilities");
65
64
  var import_ds_classnames = require("@elliemae/ds-classnames");
66
65
  var import_ds_form = require("@elliemae/ds-form");
67
- var import_TimePickerMenu = require("./TimePickerMenu");
68
- var import_TimePickerDropdown = require("./TimePickerDropdown");
66
+ var import_TimePickerMenu = __toESM(require("./TimePickerMenu"));
67
+ var import_TimePickerDropdown = __toESM(require("./TimePickerDropdown"));
69
68
  var import_utils = require("./utils");
70
69
  const blockName = "time-picker";
71
70
  const TimePickerContainer = (0, import_ds_classnames.aggregatedClasses)(import_ds_form.DSInputGroup)(blockName, null, ({ isMenuOpened }) => ({
@@ -150,7 +149,7 @@ const TimePickerImpl = ({
150
149
  className: `${className} variant-${!disabled ? "default" : "disabled"}`,
151
150
  containerProps,
152
151
  disabled,
153
- rightAddon: /* @__PURE__ */ import_react.default.createElement(import_TimePickerDropdown.TimePickerDropdown, {
152
+ rightAddon: /* @__PURE__ */ import_react.default.createElement(import_TimePickerDropdown.default, {
154
153
  blockName: timePickerBlockName,
155
154
  disabled,
156
155
  isOpen: isMenuOpened,
@@ -163,7 +162,7 @@ const TimePickerImpl = ({
163
162
  },
164
163
  menu: /* @__PURE__ */ import_react.default.createElement("div", {
165
164
  ref: timePickerRef
166
- }, /* @__PURE__ */ import_react.default.createElement(import_TimePickerMenu.TimePickerMenu, __spreadValues({
165
+ }, /* @__PURE__ */ import_react.default.createElement(import_TimePickerMenu.default, __spreadValues({
167
166
  disabled,
168
167
  disabledTimes: disabledTimeRange,
169
168
  format,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TimePickerImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-shadow */\nimport React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport memoizeOne from 'memoize-one';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputGroup, TimeInputImpl } from '@elliemae/ds-form';\nimport { TimePickerMenu } from './TimePickerMenu';\nimport { TimePickerDropdown } from './TimePickerDropdown';\nimport { convertTimeString } from './utils';\n\nconst blockName = 'time-picker';\n\nconst TimePickerContainer = aggregatedClasses(DSInputGroup)(blockName, null, ({ isMenuOpened }) => ({\n isMenuOpened,\n}));\n\nconst TimePickerImpl = ({\n value,\n onChange,\n onOpen,\n format,\n disabled,\n hasHeader,\n hasHeaderDisplay,\n className,\n containerProps,\n placement,\n zIndex,\n disabledTimes,\n minutesInterval,\n}) => {\n const [time, setTime] = useState();\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n const [focusedColumn, setFocusedColumn] = useState(null);\n const timePickerRef = useRef();\n useEffect(() => {\n if (moment(value).isValid()) setTime(moment(value));\n else if (value === null) setTime(undefined);\n }, [value]);\n\n useEffect(() => {\n window.addEventListener('click', handleClickOutside, false);\n return () => window.removeEventListener('click', handleClickOutside, false);\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown, false);\n return () => window.removeEventListener('keydown', handleKeyDown, false);\n }, []);\n\n useEffect(() => {\n if (isMenuOpened) handleChangeFocus();\n }, [isMenuOpened]);\n\n const handleClickOutside = () => {\n if (isMenuOpened) setIsMenuOpened(false);\n };\n\n const handleKeyDown = (event) => {\n const { key } = event;\n const menuOpenKeys = ['Escape', ' ', 'Enter'];\n if (menuOpenKeys.includes(key)) setIsMenuOpened(false);\n };\n\n const handleChangeFocus = () => {\n const [firstColumn] = document.getElementsByClassName('em-ds-time-picker-panel');\n if (firstColumn && !focusedColumn) {\n setFocusedColumn(firstColumn);\n firstColumn.focus();\n }\n };\n\n const handlePickerChange = (newTime) => {\n setTime(moment(newTime));\n onChange(moment(newTime));\n };\n\n const handleInputChange = (newTime) => {\n setTime(newTime);\n onChange(newTime);\n };\n\n const handleMenuOpen = (isOpen) => {\n onOpen(isOpen);\n setIsMenuOpened(isOpen);\n if (!isOpen) setFocusedColumn(null);\n };\n\n const getVisibleTimePanels = memoizeOne((format) => getVisibleTimeByFormat(format));\n const timePickerBlockName = convertPropToCssClassName(blockName);\n const visiblePanels = getVisibleTimePanels(format);\n\n const disabledTimeRange = disabledTimes && {\n from: convertTimeString(disabledTimes.from),\n to: convertTimeString(disabledTimes.to),\n };\n\n return (\n <TimePickerContainer\n className={`${className} variant-${!disabled ? 'default' : 'disabled'}`}\n containerProps={containerProps}\n disabled={disabled}\n rightAddon={\n <TimePickerDropdown\n blockName={timePickerBlockName}\n disabled={disabled}\n isOpen={isMenuOpened}\n zIndex={zIndex}\n placement={placement}\n onOpen={handleMenuOpen}\n onClick={(e) => {\n e.preventDefault();\n handleMenuOpen(!isMenuOpened);\n }}\n menu={\n <div ref={timePickerRef}>\n <TimePickerMenu\n disabled={disabled}\n disabledTimes={disabledTimeRange}\n format={format}\n hasHeader={hasHeader}\n hasHeaderDisplay={hasHeaderDisplay}\n onTimeChange={handlePickerChange}\n minutesInterval={minutesInterval}\n time={time}\n {...visiblePanels}\n />\n </div>\n }\n />\n }\n >\n <DSInput\n customInputType={({ onChange: handleChange, ...restInputProps }) => (\n <TimeInputImpl clearable disabled={disabled} format={format} onChange={handleChange} {...restInputProps} />\n )}\n isShowElipsisActive={false}\n disabled={disabled}\n onChange={handleInputChange}\n value={time}\n />\n </TimePickerContainer>\n );\n};\n\nTimePickerImpl.propTypes = {\n value: PropTypes.instanceOf(Date, moment),\n onChange: PropTypes.func,\n onOpen: PropTypes.func,\n format: PropTypes.string,\n disabled: PropTypes.bool,\n hasHeader: PropTypes.bool,\n hasHeaderDisplay: PropTypes.bool,\n className: PropTypes.string,\n containerProps: PropTypes.object,\n placement: PropTypes.string,\n zIndex: PropTypes.number,\n disabledTimes: PropTypes.object,\n minutesInterval: PropTypes.number,\n};\n\nexport { TimePickerImpl };\nexport default TimePickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-shadow */\nimport React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport memoizeOne from 'memoize-one';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputGroup, TimeInputImpl } from '@elliemae/ds-form';\nimport TimePickerMenu from './TimePickerMenu';\nimport TimePickerDropdown from './TimePickerDropdown';\nimport { convertTimeString } from './utils';\n\nconst blockName = 'time-picker';\n\nconst TimePickerContainer = aggregatedClasses(DSInputGroup)(blockName, null, ({ isMenuOpened }) => ({\n isMenuOpened,\n}));\n\nconst TimePickerImpl = ({\n value,\n onChange,\n onOpen,\n format,\n disabled,\n hasHeader,\n hasHeaderDisplay,\n className,\n containerProps,\n placement,\n zIndex,\n disabledTimes,\n minutesInterval,\n}) => {\n const [time, setTime] = useState();\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n const [focusedColumn, setFocusedColumn] = useState(null);\n const timePickerRef = useRef();\n useEffect(() => {\n if (moment(value).isValid()) setTime(moment(value));\n else if (value === null) setTime(undefined);\n }, [value]);\n\n useEffect(() => {\n window.addEventListener('click', handleClickOutside, false);\n return () => window.removeEventListener('click', handleClickOutside, false);\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown, false);\n return () => window.removeEventListener('keydown', handleKeyDown, false);\n }, []);\n\n useEffect(() => {\n if (isMenuOpened) handleChangeFocus();\n }, [isMenuOpened]);\n\n const handleClickOutside = () => {\n if (isMenuOpened) setIsMenuOpened(false);\n };\n\n const handleKeyDown = (event) => {\n const { key } = event;\n const menuOpenKeys = ['Escape', ' ', 'Enter'];\n if (menuOpenKeys.includes(key)) setIsMenuOpened(false);\n };\n\n const handleChangeFocus = () => {\n const [firstColumn] = document.getElementsByClassName('em-ds-time-picker-panel');\n if (firstColumn && !focusedColumn) {\n setFocusedColumn(firstColumn);\n firstColumn.focus();\n }\n };\n\n const handlePickerChange = (newTime) => {\n setTime(moment(newTime));\n onChange(moment(newTime));\n };\n\n const handleInputChange = (newTime) => {\n setTime(newTime);\n onChange(newTime);\n };\n\n const handleMenuOpen = (isOpen) => {\n onOpen(isOpen);\n setIsMenuOpened(isOpen);\n if (!isOpen) setFocusedColumn(null);\n };\n\n const getVisibleTimePanels = memoizeOne((format) => getVisibleTimeByFormat(format));\n const timePickerBlockName = convertPropToCssClassName(blockName);\n const visiblePanels = getVisibleTimePanels(format);\n\n const disabledTimeRange = disabledTimes && {\n from: convertTimeString(disabledTimes.from),\n to: convertTimeString(disabledTimes.to),\n };\n\n return (\n <TimePickerContainer\n className={`${className} variant-${!disabled ? 'default' : 'disabled'}`}\n containerProps={containerProps}\n disabled={disabled}\n rightAddon={\n <TimePickerDropdown\n blockName={timePickerBlockName}\n disabled={disabled}\n isOpen={isMenuOpened}\n zIndex={zIndex}\n placement={placement}\n onOpen={handleMenuOpen}\n onClick={(e) => {\n e.preventDefault();\n handleMenuOpen(!isMenuOpened);\n }}\n menu={\n <div ref={timePickerRef}>\n <TimePickerMenu\n disabled={disabled}\n disabledTimes={disabledTimeRange}\n format={format}\n hasHeader={hasHeader}\n hasHeaderDisplay={hasHeaderDisplay}\n onTimeChange={handlePickerChange}\n minutesInterval={minutesInterval}\n time={time}\n {...visiblePanels}\n />\n </div>\n }\n />\n }\n >\n <DSInput\n customInputType={({ onChange: handleChange, ...restInputProps }) => (\n <TimeInputImpl clearable disabled={disabled} format={format} onChange={handleChange} {...restInputProps} />\n )}\n isShowElipsisActive={false}\n disabled={disabled}\n onChange={handleInputChange}\n value={time}\n />\n </TimePickerContainer>\n );\n};\n\nTimePickerImpl.propTypes = {\n value: PropTypes.instanceOf(Date, moment),\n onChange: PropTypes.func,\n onOpen: PropTypes.func,\n format: PropTypes.string,\n disabled: PropTypes.bool,\n hasHeader: PropTypes.bool,\n hasHeaderDisplay: PropTypes.bool,\n className: PropTypes.string,\n containerProps: PropTypes.object,\n placement: PropTypes.string,\n zIndex: PropTypes.number,\n disabledTimes: PropTypes.object,\n minutesInterval: PropTypes.number,\n};\n\nexport default TimePickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }