@elliemae/ds-form 2.2.2-rc.1 → 2.3.0-alpha.10

package/dist/esm/SearchBox/withSearchable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SearchBox/withSearchable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from '@elliemae/ds-utilities';\n\nconst withSearchable = (WrappedComponent) => {\n  class Searchable extends Component {\n    debouncedSearch = debounce(this.handleSearch, 200);\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        value: props.value,\n      };\n      this.handleSearch = this.handleSearch.bind(this);\n      this.handleKeyUp = this.handleKeyUp.bind(this);\n      this.handleChange = this.handleChange.bind(this);\n      this.buttonRef = React.createRef();\n    }\n\n    static getDerivedStateFromProps(nextProps, { prevPropValue }) {\n      if (nextProps.value !== prevPropValue) {\n        return {\n          value: nextProps.value,\n          prevPropValue: nextProps.value,\n        };\n      }\n      return null;\n    }\n\n    handleKeyUp(e) {\n      const { onKeyUp, searchOnEnter } = this.props;\n      const { key } = e;\n      if (searchOnEnter && key === 'Enter') {\n        this.handleSearch();\n      }\n      onKeyUp(e);\n    }\n\n    handleSearch() {\n      const { onSearch, property, clearOnSearch, searchOnEnter } = this.props;\n      const { value } = this.state;\n\n      if (clearOnSearch) this.setState({ value: '' });\n      if (searchOnEnter && !value) return;\n      onSearch({\n        query: { [property]: value },\n        property,\n        value,\n      });\n    }\n\n    handleChange({ target }) {\n      const { value } = target;\n      const { searchOnEnter, onChange } = this.props;\n      onChange(value);\n      this.setState({ value }, () => {\n        if (!searchOnEnter) this.debouncedSearch();\n      });\n    }\n\n    render() {\n      const { value } = this.state;\n      const { containerProps, ...rest } = this.props;\n\n      return (\n        <WrappedComponent\n          {...rest}\n          buttonRef={this.buttonRef}\n          containerProps={containerProps}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onSearch={this.handleSearch}\n          value={value}\n        />\n      );\n    }\n  }\n\n  Searchable.defaultProps = {\n    onChange: () => null,\n    onSearch: () => null,\n    onKeyUp: () => null,\n    property: 'all',\n    searchOnEnter: true,\n    clearOnSearch: false,\n    containerProps: {},\n  };\n\n  Searchable.propTypes = {\n    containerProps: PropTypes.shape({}),\n    onChange: PropTypes.func,\n    onSearch: PropTypes.func,\n    onKeyUp: PropTypes.func,\n    property: PropTypes.string,\n    searchOnEnter: PropTypes.bool,\n    clearOnSearch: PropTypes.bool,\n    value: PropTypes.string,\n  };\n\n  return Searchable;\n};\n\nexport default withSearchable;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC,qBAAqB;AAC3C,2BAAyB,UAAU;AAAA,IAGjC,YAAY,OAAO;AACjB,YAAM;AAHR,6BAAkB,SAAS,KAAK,cAAc;AAI5C,WAAK,QAAQ;AAAA,QACX,OAAO,MAAM;AAAA;AAEf,WAAK,eAAe,KAAK,aAAa,KAAK;AAC3C,WAAK,cAAc,KAAK,YAAY,KAAK;AACzC,WAAK,eAAe,KAAK,aAAa,KAAK;AAC3C,WAAK,YAAY,OAAM;AAAA;AAAA,WAGlB,yBAAyB,WAAW,EAAE,iBAAiB;AAC5D,UAAI,UAAU,UAAU,eAAe;AACrC,eAAO;AAAA,UACL,OAAO,UAAU;AAAA,UACjB,eAAe,UAAU;AAAA;AAAA;AAG7B,aAAO;AAAA;AAAA,IAGT,YAAY,GAAG;AACb,YAAM,EAAE,SAAS,kBAAkB,KAAK;AACxC,YAAM,EAAE,QAAQ;AAChB,UAAI,iBAAiB,QAAQ,SAAS;AACpC,aAAK;AAAA;AAEP,cAAQ;AAAA;AAAA,IAGV,eAAe;AACb,YAAM,EAAE,UAAU,UAAU,eAAe,kBAAkB,KAAK;AAClE,YAAM,EAAE,UAAU,KAAK;AAEvB,UAAI;AAAe,aAAK,SAAS,EAAE,OAAO;AAC1C,UAAI,iBAAiB,CAAC;AAAO;AAC7B,eAAS;AAAA,QACP,OAAO,GAAG,WAAW;AAAA,QACrB;AAAA,QACA;AAAA;AAAA;AAAA,IAIJ,aAAa,EAAE,UAAU;AACvB,YAAM,EAAE,UAAU;AAClB,YAAM,EAAE,eAAe,aAAa,KAAK;AACzC,eAAS;AACT,WAAK,SAAS,EAAE,SAAS,MAAM;AAC7B,YAAI,CAAC;AAAe,eAAK;AAAA;AAAA;AAAA,IAI7B,SAAS;AACP,YAAM,EAAE,UAAU,KAAK;AACvB,YAAM,EAAE,mBAAmB,SAAS,KAAK;AAEzC,aACE,qCAAC,kBAAD;AAAA,WACM;AAAA,QACJ,WAAW,KAAK;AAAA,QAChB;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,QACd,UAAU,KAAK;AAAA,QACf;AAAA;AAAA;AAAA;AAMR,aAAW,eAAe;AAAA,IACxB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,SAAS,MAAM;AAAA,IACf,UAAU;AAAA,IACV,eAAe;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA;AAGlB,aAAW,YAAY;AAAA,IACrB,gBAAgB,UAAU,MAAM;AAAA,IAChC,UAAU,UAAU;AAAA,IACpB,UAAU,UAAU;AAAA,IACpB,SAAS,UAAU;AAAA,IACnB,UAAU,UAAU;AAAA,IACpB,eAAe,UAAU;AAAA,IACzB,eAAe,UAAU;AAAA,IACzB,OAAO,UAAU;AAAA;AAGnB,SAAO;AAAA;AAGT,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/esm/TextBox/DSTextBox.js

@@ -0,0 +1,86 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { DSInput } from "../Input";
+const DSTextBox = ({
+  containerProps = {},
+  autoFocus = false,
+  disabled = false,
+  maxLength = 255,
+  minLength = 0,
+  fluidWidth = false,
+  placeholder,
+  value = "",
+  hasError = false,
+  readOnly = false,
+  innerRef = null,
+  type = "text",
+  min = void 0,
+  max = void 0,
+  clearable = false,
+  leftComponent = null,
+  rightComponent = null,
+  required = false,
+  variant,
+  disableTooltip,
+  id,
+  ...otherProps
+}) => /* @__PURE__ */ React2.createElement(DSInput, {
+  ...otherProps,
+  "aria-label": !id ? otherProps["aria-label"] || "Text Box" : void 0,
+  "aria-describedby": otherProps["aria-describedby"] || `${id}_feedback_message`,
+  autoFocus,
+  clearable,
+  containerProps,
+  disabled,
+  fluidWidth,
+  hasError,
+  innerRef,
+  leftComponent,
+  max,
+  maxLength,
+  min,
+  minLength,
+  placeholder,
+  readOnly,
+  required,
+  rightComponent,
+  role: "textbox",
+  type,
+  value,
+  variant,
+  disableTooltip,
+  id
+});
+const props = {
+  containerProps: PropTypes.shape({}).description("inject props at textbox wrapper"),
+  autoFocus: PropTypes.bool.description("Whether the text box uses auto focus or not"),
+  disabled: PropTypes.bool.description("Whether the text box is disabled or not"),
+  maxLength: PropTypes.number.description("Max length for the text box"),
+  minLength: PropTypes.number.description("Min length for the text box"),
+  fluidWidth: PropTypes.bool.description("Make the content of the text box fit the container or not"),
+  placeholder: PropTypes.string.description("Placeholder for the text box"),
+  value: PropTypes.string.description("Default value once the component is initialized"),
+  hasError: PropTypes.bool.description("Whether the text box has error or not"),
+  readOnly: PropTypes.bool.description("Whether the text box is read only or not"),
+  min: PropTypes.number.description("html min prop for input"),
+  max: PropTypes.number.description("html max prop for input"),
+  clearable: PropTypes.bool.description("Whether the text box is clearable or not"),
+  leftComponent: PropTypes.element.description("Component to be added at the left side of the text box"),
+  rightComponent: PropTypes.element.description("Component to be added at the right side of the text box"),
+  required: PropTypes.bool.description("Whether the text box is required or not"),
+  variant: PropTypes.string.description("variant-default','variant-focus','variant-active','variant-disabled'"),
+  type: PropTypes.string.description("html input type"),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("internal ref"),
+  disableTooltip: PropTypes.bool.description("Whether to show a tooltip or not when text does not fit").defaultValue(true)
+};
+DSTextBox.propTypes = props;
+const DSTextBoxWithSchema = describe(DSTextBox);
+DSTextBoxWithSchema.propTypes = props;
+var DSTextBox_default = DSTextBox;
+export {
+  DSTextBox,
+  DSTextBoxWithSchema,
+  DSTextBox_default as default
+};
+//# sourceMappingURL=DSTextBox.js.map

package/dist/esm/TextBox/DSTextBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TextBox/DSTextBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSInput } from '../Input';\n\nconst DSTextBox = ({\n  containerProps = {},\n  autoFocus = false,\n  disabled = false,\n  maxLength = 255,\n  minLength = 0,\n  fluidWidth = false,\n  placeholder,\n  value = '',\n  hasError = false,\n  readOnly = false,\n  innerRef = null,\n  type = 'text',\n  min = undefined,\n  max = undefined,\n  clearable = false,\n  leftComponent = null,\n  rightComponent = null,\n  required = false,\n  variant,\n  disableTooltip,\n  id,\n  ...otherProps\n}) => (\n  <DSInput\n    {...otherProps}\n    aria-label={!id ? otherProps['aria-label'] || 'Text Box' : undefined}\n    aria-describedby={otherProps['aria-describedby'] || `${id}_feedback_message`}\n    autoFocus={autoFocus}\n    clearable={clearable}\n    containerProps={containerProps}\n    disabled={disabled}\n    fluidWidth={fluidWidth}\n    hasError={hasError}\n    innerRef={innerRef}\n    leftComponent={leftComponent}\n    max={max}\n    maxLength={maxLength}\n    min={min}\n    minLength={minLength}\n    placeholder={placeholder}\n    readOnly={readOnly}\n    required={required}\n    rightComponent={rightComponent}\n    role=\"textbox\"\n    type={type}\n    value={value}\n    variant={variant}\n    disableTooltip={disableTooltip}\n    id={id}\n  />\n);\n\nconst props = {\n  /** inject props at textbox wrapper */\n  containerProps: PropTypes.shape({}).description('inject props at textbox wrapper'),\n  /**\n   * Whether the text box uses auto focus or not\n   */\n  autoFocus: PropTypes.bool.description('Whether the text box uses auto focus or not'),\n  /**\n   * Whether the text box is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the text box is disabled or not'),\n  /**\n   * Max length for the text box\n   */\n  maxLength: PropTypes.number.description('Max length for the text box'),\n  /**\n   * Min length for the text box\n   */\n  minLength: PropTypes.number.description('Min length for the text box'),\n  /**\n   * Make the content of the text box fit the container or not\n   */\n  fluidWidth: PropTypes.bool.description('Make the content of the text box fit the container or not'),\n  /**\n   * Placeholder for the text box\n   */\n  placeholder: PropTypes.string.description('Placeholder for the text box'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description('Default value once the component is initialized'),\n  /**\n   * Whether the text box has error or not\n   */\n  hasError: PropTypes.bool.description('Whether the text box has error or not'),\n  /**\n   * Whether the text box is read only or not\n   */\n  readOnly: PropTypes.bool.description('Whether the text box is read only or not'),\n  /** html min prop for input */\n  min: PropTypes.number.description('html min prop for input'),\n  /** html max prop for input */\n  max: PropTypes.number.description('html max prop for input'),\n  /**\n   * Whether the text box is clearable or not\n   */\n  clearable: PropTypes.bool.description('Whether the text box is clearable or not'),\n  /**\n   * Component to be added at the left side of the text box\n   */\n  leftComponent: PropTypes.element.description('Component to be added at the left side of the text box'),\n  /**\n   * Component to be added at the right side of the text box\n   */\n  rightComponent: PropTypes.element.description('Component to be added at the right side of the text box'),\n  /**\n   * Whether the text box is required or not\n   */\n  required: PropTypes.bool.description('Whether the text box is required or not'),\n  /**\n   * [\n   *  'variant-default',\n   *  'variant-focus',\n   *  'variant-active',\n   *  'variant-disabled',\n   * ]\n   */\n  variant: PropTypes.string.description(\"variant-default','variant-focus','variant-active','variant-disabled'\"),\n  /** html input type */\n  type: PropTypes.string.description('html input type'),\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('internal ref'),\n  /** disableTooltip */\n  disableTooltip: PropTypes.bool\n    .description('Whether to show a tooltip or not when text does not fit')\n    .defaultValue(true),\n};\n\nDSTextBox.propTypes = props;\n\nconst DSTextBoxWithSchema = describe(DSTextBox);\n\nDSTextBoxWithSchema.propTypes = props;\n\nexport default DSTextBox;\nexport { DSTextBoxWithSchema, DSTextBox };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MAEH,qCAAC,SAAD;AAAA,KACM;AAAA,EACJ,cAAY,CAAC,KAAK,WAAW,iBAAiB,aAAa;AAAA,EAC3D,oBAAkB,WAAW,uBAAuB,GAAG;AAAA,EACvD;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,EACA,MAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAIJ,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAIhD,WAAW,UAAU,KAAK,YAAY;AAAA,EAItC,UAAU,UAAU,KAAK,YAAY;AAAA,EAIrC,WAAW,UAAU,OAAO,YAAY;AAAA,EAIxC,WAAW,UAAU,OAAO,YAAY;AAAA,EAIxC,YAAY,UAAU,KAAK,YAAY;AAAA,EAIvC,aAAa,UAAU,OAAO,YAAY;AAAA,EAI1C,OAAO,UAAU,OAAO,YAAY;AAAA,EAIpC,UAAU,UAAU,KAAK,YAAY;AAAA,EAIrC,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,KAAK,UAAU,OAAO,YAAY;AAAA,EAElC,KAAK,UAAU,OAAO,YAAY;AAAA,EAIlC,WAAW,UAAU,KAAK,YAAY;AAAA,EAItC,eAAe,UAAU,QAAQ,YAAY;AAAA,EAI7C,gBAAgB,UAAU,QAAQ,YAAY;AAAA,EAI9C,UAAU,UAAU,KAAK,YAAY;AAAA,EASrC,SAAS,UAAU,OAAO,YAAY;AAAA,EAEtC,MAAM,UAAU,OAAO,YAAY;AAAA,EAEnC,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAAY;AAAA,EAE9E,gBAAgB,UAAU,KACvB,YAAY,2DACZ,aAAa;AAAA;AAGlB,UAAU,YAAY;AAEtB,MAAM,sBAAsB,SAAS;AAErC,oBAAoB,YAAY;AAEhC,IAAO,oBAAQ;",
+  "names": []
+}

package/dist/esm/TextBox/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DSTextBoxWithSchema, DSTextBox, default as default2 } from "./DSTextBox";
+export {
+  DSTextBox,
+  DSTextBoxWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/TextBox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TextBox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSTextBoxWithSchema, DSTextBox, default } from './DSTextBox';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/TimeInput/DSTimeInput.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { DSInput } from "../Input";
+import { TimeInputImpl } from "./TimeInputImpl";
+const DSTimeInput = ({
+  containerProps = {},
+  innerRef,
+  className = "",
+  style = {},
+  onChange = () => null,
+  format,
+  value = "",
+  clearable = false,
+  disabled = false,
+  ariaLabel = "Time input"
+}) => /* @__PURE__ */ React2.createElement(DSInput, {
+  className,
+  clearable,
+  containerProps,
+  customInputType: ({ onChange: inputOnChange, ...restInputProps }) => /* @__PURE__ */ React2.createElement(TimeInputImpl, {
+    "aria-label": ariaLabel,
+    disabled,
+    format,
+    onChange: (time) => inputOnChange(time),
+    ...restInputProps,
+    style
+  }),
+  disabled,
+  innerRef,
+  isShowElipsisActive: false,
+  onChange,
+  onClear: () => onChange(null),
+  value
+});
+DSTimeInput.defaultProps = {
+  format: "hh:mm:ss",
+  disabled: false,
+  clearable: true
+};
+const props = {
+  containerProps: PropTypes.object.description("Injected props to wrapper element of component"),
+  onChange: PropTypes.func.description("Allows a function that is triggered once the time input changes"),
+  "aria-label": PropTypes.string.description("a11y aria label"),
+  style: PropTypes.object.description("style object for time input wrapper"),
+  innerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any })
+  ]).description("inner ref for time input wrapper"),
+  className: PropTypes.string.description("class for time input"),
+  format: PropTypes.string.description("Valid time format"),
+  value: PropTypes.string.description("Default value once the component is initialized"),
+  clearable: PropTypes.bool.description("Whether the time input is clearable or not"),
+  disabled: PropTypes.bool.description("Whether the time input is disabled or not"),
+  ariaLabel: PropTypes.string.description("Aria label")
+};
+DSTimeInput.propTypes = props;
+const DSTimeInputWithSchema = describe(DSTimeInput);
+DSTimeInputWithSchema.propTypes = props;
+var DSTimeInput_default = DSTimeInput;
+export {
+  DSTimeInput,
+  DSTimeInputWithSchema,
+  TimeInputImpl,
+  DSTimeInput_default as default
+};
+//# sourceMappingURL=DSTimeInput.js.map

package/dist/esm/TimeInput/DSTimeInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/DSTimeInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSInput } from '../Input';\nimport { TimeInputImpl } from './TimeInputImpl';\n\nconst DSTimeInput = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  style = {},\n  onChange = () => null,\n  format,\n  value = '',\n  clearable = false,\n  disabled = false,\n  ariaLabel = 'Time input',\n}) => (\n  <DSInput\n    className={className}\n    clearable={clearable}\n    containerProps={containerProps}\n    customInputType={({ onChange: inputOnChange, ...restInputProps }) => (\n      <TimeInputImpl\n        aria-label={ariaLabel}\n        disabled={disabled}\n        format={format}\n        onChange={(time) => inputOnChange(time)}\n        {...restInputProps}\n        style={style}\n      />\n    )}\n    disabled={disabled}\n    innerRef={innerRef}\n    isShowElipsisActive={false}\n    onChange={onChange}\n    onClear={() => onChange(null)}\n    value={value}\n  />\n);\n\nDSTimeInput.defaultProps = {\n  format: 'hh:mm:ss',\n  disabled: false,\n  clearable: true,\n};\n\nconst props = {\n  /** Injected props to wrapper element of component */\n  containerProps: PropTypes.object.description(\n    'Injected props to wrapper element of component',\n  ),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func.description(\n    'Allows a function that is triggered once the time input changes',\n  ),\n  /** a11y aria label */\n  'aria-label': PropTypes.string.description('a11y aria label'),\n  /** style object for time input wrapper */\n  style: PropTypes.object.description('style object for time input wrapper'),\n  /** inner ref for time inpot wrapper */\n  innerRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.any }),\n  ]).description('inner ref for time input wrapper'),\n  /** class for time input */\n  className: PropTypes.string.description('class for time input'),\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string.description('Valid time format'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description(\n    'Default value once the component is initialized',\n  ),\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool.description(\n    'Whether the time input is clearable or not',\n  ),\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool.description(\n    'Whether the time input is disabled or not',\n  ),\n  /**\n   * Aria label\n   */\n  ariaLabel: PropTypes.string.description('Aria label'),\n};\n\nDSTimeInput.propTypes = props;\n\nconst DSTimeInputWithSchema = describe(DSTimeInput);\nDSTimeInputWithSchema.propTypes = props;\n\nexport { TimeInputImpl, DSTimeInputWithSchema, DSTimeInput };\n\nexport default DSTimeInput;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,MAEZ,qCAAC,SAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,CAAC,EAAE,UAAU,kBAAkB,qBAC9C,qCAAC,eAAD;AAAA,IACE,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC,SAAS,cAAc;AAAA,OAC9B;AAAA,IACJ;AAAA;AAAA,EAGJ;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,SAAS,MAAM,SAAS;AAAA,EACxB;AAAA;AAIJ,YAAY,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA;AAGb,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAKF,UAAU,UAAU,KAAK,YACvB;AAAA,EAGF,cAAc,UAAU,OAAO,YAAY;AAAA,EAE3C,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU,MAAM,EAAE,SAAS,UAAU;AAAA,KACpC,YAAY;AAAA,EAEf,WAAW,UAAU,OAAO,YAAY;AAAA,EAIxC,QAAQ,UAAU,OAAO,YAAY;AAAA,EAIrC,OAAO,UAAU,OAAO,YACtB;AAAA,EAKF,WAAW,UAAU,KAAK,YACxB;AAAA,EAKF,UAAU,UAAU,KAAK,YACvB;AAAA,EAKF,WAAW,UAAU,OAAO,YAAY;AAAA;AAG1C,YAAY,YAAY;AAExB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
+  "names": []
+}

package/dist/esm/TimeInput/TimeInputImpl.js

@@ -0,0 +1,64 @@
+import * as React from "react";
+import React2, { useRef, useMemo } from "react";
+import PropTypes from "prop-types";
+import { getVisibleTimeByFormat } from "@elliemae/ds-utilities";
+import memoizeOne from "memoize-one";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { TimeInputs } from "./TimeInputs";
+const blockName = "input-time";
+const InputTimeContainer = aggregatedClasses("div")(blockName);
+const TimeInputImpl = ({
+  format,
+  innerRef,
+  onChange,
+  className,
+  value,
+  disabled,
+  clearable,
+  "arial-label": ariaLabel
+}) => {
+  const getVisibleTimeInputs = memoizeOne((formatValue) => getVisibleTimeByFormat(formatValue));
+  let inputsContainer = useRef();
+  const handleFocus = (e) => {
+    if (!e.target.type) {
+      inputsContainer.querySelector("input").focus();
+    }
+  };
+  const visibleInputs = useMemo(() => getVisibleTimeInputs(format));
+  return /* @__PURE__ */ React2.createElement(InputTimeContainer, {
+    className,
+    disabled,
+    innerRef,
+    onClick: handleFocus
+  }, /* @__PURE__ */ React2.createElement(TimeInputs, {
+    "aria-label": ariaLabel,
+    clearable,
+    disabled,
+    format,
+    innerRef: (node) => {
+      inputsContainer = node;
+    },
+    onChange,
+    time: value,
+    ...visibleInputs
+  }));
+};
+TimeInputImpl.propTypes = {
+  containerProps: PropTypes.shape({}),
+  innerRef: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  onChange: PropTypes.func,
+  format: PropTypes.string,
+  value: PropTypes.string,
+  clearable: PropTypes.bool,
+  disabled: PropTypes.bool,
+  "aria-label": PropTypes.bool,
+  "arial-label": PropTypes.bool
+};
+var TimeInputImpl_default = TimeInputImpl;
+export {
+  TimeInputImpl,
+  TimeInputImpl_default as default
+};
+//# sourceMappingURL=TimeInputImpl.js.map

package/dist/esm/TimeInput/TimeInputImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/TimeInputImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { TimeInputs } from './TimeInputs';\n\nconst blockName = 'input-time';\n\nconst InputTimeContainer = aggregatedClasses('div')(blockName);\n\nconst TimeInputImpl = ({\n  format,\n  innerRef,\n  onChange,\n  className,\n  value,\n  disabled,\n  clearable,\n  'arial-label': ariaLabel,\n}) => {\n  const getVisibleTimeInputs = memoizeOne((formatValue) =>\n    getVisibleTimeByFormat(formatValue),\n  );\n  let inputsContainer = useRef();\n\n  const handleFocus = (e) => {\n    if (!e.target.type) {\n      inputsContainer.querySelector('input').focus();\n    }\n  };\n\n  const visibleInputs = useMemo(() => getVisibleTimeInputs(format));\n\n  return (\n    <InputTimeContainer\n      className={className}\n      disabled={disabled}\n      innerRef={innerRef}\n      onClick={handleFocus}\n    >\n      <TimeInputs\n        aria-label={ariaLabel}\n        clearable={clearable}\n        disabled={disabled}\n        format={format}\n        innerRef={(node) => {\n          inputsContainer = node;\n        }}\n        onChange={onChange}\n        time={value}\n        {...visibleInputs}\n      />\n    </InputTimeContainer>\n  );\n};\n\nTimeInputImpl.propTypes = {\n  containerProps: PropTypes.shape({}),\n  /**\n   * Inner reference to the input\n   */\n  innerRef: PropTypes.any,\n  /**\n   * Classes to add to the container\n   */\n  className: PropTypes.string,\n  /**\n   * Styles to add to the container\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func,\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string,\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string,\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool,\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Aria label to add to the container\n   */\n  'aria-label': PropTypes.bool,\n  'arial-label': PropTypes.bool,\n};\n\nexport { TimeInputImpl };\nexport default TimeInputImpl;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,qBAAqB,kBAAkB,OAAO;AAEpD,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,MACX;AACJ,QAAM,uBAAuB,WAAW,CAAC,gBACvC,uBAAuB;AAEzB,MAAI,kBAAkB;AAEtB,QAAM,cAAc,CAAC,MAAM;AACzB,QAAI,CAAC,EAAE,OAAO,MAAM;AAClB,sBAAgB,cAAc,SAAS;AAAA;AAAA;AAI3C,QAAM,gBAAgB,QAAQ,MAAM,qBAAqB;AAEzD,SACE,qCAAC,oBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,KAET,qCAAC,YAAD;AAAA,IACE,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC,SAAS;AAClB,wBAAkB;AAAA;AAAA,IAEpB;AAAA,IACA,MAAM;AAAA,OACF;AAAA;AAAA;AAMZ,cAAc,YAAY;AAAA,EACxB,gBAAgB,UAAU,MAAM;AAAA,EAIhC,UAAU,UAAU;AAAA,EAIpB,WAAW,UAAU;AAAA,EAIrB,OAAO,UAAU,MAAM;AAAA,EAIvB,UAAU,UAAU;AAAA,EAIpB,QAAQ,UAAU;AAAA,EAIlB,OAAO,UAAU;AAAA,EAIjB,WAAW,UAAU;AAAA,EAIrB,UAAU,UAAU;AAAA,EAIpB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAAA;AAI3B,IAAO,wBAAQ;",
+  "names": []
+}

package/dist/esm/TimeInput/TimeInputs.js

@@ -0,0 +1,339 @@
+import * as React from "react";
+import React2, { useEffect, useState } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import moment from "moment";
+import {
+  commonInputProps,
+  formatHour,
+  formatMinutes,
+  formatSeconds,
+  formatMeridiem,
+  getValidTimeNumber,
+  setNativeValue,
+  parseTimeNumberFromText,
+  focusNextInput,
+  focusPreviousInput,
+  getTimeValuesFromTime,
+  isArrowIncrementDecrement,
+  shouldFocusNextInput,
+  placeholderFormat
+} from "./utils";
+import {
+  AM,
+  PM,
+  ARROW_UP,
+  ARROW_DOWN,
+  BACKSPACE,
+  ESCAPE,
+  HOME,
+  HOUR_RANGE_12,
+  HOUR_RANGE_24,
+  GENERAL_TIME_RANGE,
+  END,
+  PLACEHOLDER_TIME,
+  SHIFT
+} from "@elliemae/ds-shared/constants";
+const blockName = "input-times-group";
+const InputTimesGroup = aggregatedClasses("div")(blockName);
+const TimeInput = aggregatedClasses("input")(blockName, "input");
+const Divider = aggregatedClasses("span")(blockName, "divider", ({ value }) => ({
+  value
+}));
+const TimeDivider = ({ content = ":", value = "" }) => /* @__PURE__ */ React2.createElement(Divider, {
+  value: !!value
+}, content);
+const TimeInputs = ({
+  time,
+  format,
+  use12Hours,
+  step = 1,
+  showHours,
+  showMinutes,
+  showSeconds,
+  onChange,
+  disabled,
+  innerRef,
+  clearable,
+  "arial-label": ariaLabel,
+  "aria-label": ariaLabel2
+}) => {
+  const [meridiem, setMeridiem] = useState("");
+  const [hours, setHours] = useState("");
+  const [minutes, setMinutes] = useState("");
+  const [hasInputValue, setHasInputValue] = useState(false);
+  const [seconds, setSeconds] = useState("");
+  const [currentKey, setCurrentKey] = useState("");
+  const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);
+  const [lastTypedNumber, setLastTypedNumber] = useState(null);
+  const inputRefs = {
+    hours: null,
+    minutes: null,
+    seconds: null,
+    meridiem: null
+  };
+  useEffect(() => {
+    if (time && moment(time).isValid()) {
+      const timeValues = getTimeValuesFromTime(time, format, use12Hours);
+      setMeridiem(timeValues.meridiem);
+      setHours(timeValues.hours);
+      setMinutes(timeValues.minutes);
+      setSeconds(timeValues.seconds);
+    } else {
+      setMeridiem("");
+      setHours("");
+      setMinutes("");
+      setSeconds("");
+    }
+  }, [time, format, use12Hours]);
+  useEffect(() => {
+    const selectedTime = time || moment();
+    if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {
+      if (showHours && hours)
+        selectedTime.hours(hours);
+      if (showMinutes && minutes)
+        selectedTime.minutes(minutes);
+      if (showSeconds && seconds)
+        selectedTime.seconds(seconds);
+      if (use12Hours && meridiem) {
+        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
+        selectedTime.hour(nextHours);
+      }
+      onChange(selectedTime);
+      setHasInputBeenTriggered(false);
+    }
+  }, [hours, minutes, seconds, meridiem]);
+  const focusNextInputIfNeeded = (currentEl, max, number) => {
+    if (shouldFocusNextInput(max, number, currentEl.value) && !isArrowIncrementDecrement(currentKey) && !hasInputValue) {
+      focusNextInput(currentEl);
+    }
+  };
+  const getNextTimeValue = (value, incrementing = true) => {
+    const parsedValue = parseTimeNumberFromText(value);
+    return incrementing ? parsedValue + step : parsedValue - step;
+  };
+  const onInputFocus = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.select();
+  };
+  const onClick = (e) => {
+    if (e.target.value) {
+      setHasInputValue(true);
+    }
+  };
+  const onKeyDown = (event, max) => {
+    const { target } = event;
+    const { value } = target;
+    setLastTypedNumber(event.key);
+    switch (event.key) {
+      case ARROW_UP: {
+        event.preventDefault();
+        setCurrentKey(event.key);
+        const incrementedValue = getNextTimeValue(value);
+        setNativeValue(event.target, incrementedValue);
+        break;
+      }
+      case ARROW_DOWN: {
+        event.preventDefault();
+        setCurrentKey(event.key);
+        const decrementedValue = getNextTimeValue(value, false);
+        setNativeValue(event.target, decrementedValue);
+        break;
+      }
+      case BACKSPACE: {
+        event.preventDefault();
+        if (!value) {
+          focusPreviousInput(event.target);
+        } else {
+          setNativeValue(event.target, "");
+        }
+        break;
+      }
+      case ESCAPE: {
+        event.preventDefault();
+        event.target.blur();
+        break;
+      }
+      case HOME: {
+        event.preventDefault();
+        setNativeValue(event.target, String(max));
+        focusNextInput(event.target);
+        break;
+      }
+      case END: {
+        event.preventDefault();
+        setNativeValue(event.target, "00");
+        focusNextInput(event.target);
+        break;
+      }
+      case SHIFT:
+        event.preventDefault();
+        setCurrentKey(event.key);
+        break;
+      default:
+        break;
+    }
+  };
+  const isTimeCompletelySet = () => {
+    let neededValues = [];
+    if (showHours)
+      neededValues = [...neededValues, hours || null];
+    if (showMinutes)
+      neededValues = [...neededValues, minutes || null];
+    if (showSeconds)
+      neededValues = [...neededValues, seconds || null];
+    if (use12Hours)
+      neededValues = [...neededValues, meridiem || null];
+    return !neededValues.some((value) => !value);
+  };
+  const handleSecondsChange = (e) => {
+    const { value } = e.target;
+    const secondsHandled = parseTimeNumberFromText(value);
+    const nextSeconds = getValidTimeNumber(GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);
+    setSeconds(formatSeconds(format, nextSeconds));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
+  };
+  const handleMinutesChange = (e) => {
+    const { value } = e.target;
+    const minutesHandled = parseTimeNumberFromText(value);
+    const nextMinutes = getValidTimeNumber(GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);
+    setMinutes(formatMinutes(format, nextMinutes));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
+  };
+  const handleHoursChange = (e) => {
+    const { value } = e.target;
+    const hour = parseTimeNumberFromText(value);
+    const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
+    const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);
+    setHours(formatHour(format, nextHour));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, hoursRange.max, value);
+  };
+  const handleMeridiemKeyDown = (e) => {
+    if (e.key === ARROW_UP || e.key === "a") {
+      setMeridiem(formatMeridiem(format, AM));
+    } else if (e.key === ARROW_DOWN || e.key === "p") {
+      setMeridiem(formatMeridiem(format, PM));
+    } else if (e.key === SHIFT) {
+      setCurrentKey(e.key);
+    } else if (e.key === BACKSPACE) {
+      setMeridiem("");
+    }
+    setHasInputBeenTriggered(true);
+  };
+  const handleMeridiemBlur = (e) => {
+    const { value } = e.target;
+    if (value !== AM && value !== PM) {
+      setMeridiem("");
+    }
+  };
+  const handleOnBlur = (event) => {
+    const selectedTime = moment();
+    if (clearable && !event.currentTarget.contains(event.relatedTarget)) {
+      if (showHours && hours)
+        selectedTime.hours(hours);
+      if (showMinutes && minutes)
+        selectedTime.minutes(minutes);
+      if (showSeconds && seconds)
+        selectedTime.seconds(seconds);
+      if (use12Hours && meridiem) {
+        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
+        selectedTime.hour(nextHours);
+      }
+      onChange(selectedTime);
+    }
+  };
+  const renderSecondsInput = () => {
+    if (!showSeconds)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
+      key: "seconds-input",
+      "data-testid": "ds-time-input__seconds",
+      "aria-label": ariaLabel || ariaLabel2 || "Seconds Input",
+      disabled,
+      innerRef: (node) => inputRefs.seconds = node,
+      onChange: handleSecondsChange,
+      placeholder: placeholderFormat(PLACEHOLDER_TIME.seconds, format),
+      value: seconds
+    });
+  };
+  const renderMinutesInput = () => {
+    if (!showMinutes)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
+      key: "minutes-input",
+      "data-testid": "ds-time-input__minutes",
+      "aria-label": ariaLabel || ariaLabel2 || "Minutes Input",
+      disabled,
+      innerRef: (node) => inputRefs.minutes = node,
+      onChange: handleMinutesChange,
+      placeholder: placeholderFormat(PLACEHOLDER_TIME.minutes, format),
+      value: minutes
+    });
+  };
+  const renderHoursInput = () => {
+    if (!showHours)
+      return null;
+    const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick),
+      key: "hour-input",
+      "data-testid": "ds-time-input__hours",
+      "aria-label": ariaLabel || ariaLabel2 || "Hours Input",
+      disabled,
+      innerRef: (node) => inputRefs.hours = node,
+      onChange: handleHoursChange,
+      placeholder: placeholderFormat(PLACEHOLDER_TIME.hour, format, use12Hours),
+      value: hours
+    });
+  };
+  const renderMeridiemInput = () => {
+    if (!use12Hours)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps,
+      key: "meridiem-input",
+      "data-testid": "ds-time-input__ampm",
+      "aria-label": ariaLabel || ariaLabel2 || "Meridiem Input",
+      disabled,
+      onBlur: handleMeridiemBlur,
+      onKeyDown: handleMeridiemKeyDown,
+      placeholder: placeholderFormat(PLACEHOLDER_TIME.meridiem, format),
+      value: meridiem
+    });
+  };
+  const renderTimeInputs = () => {
+    const inputs = [
+      renderHoursInput(),
+      renderMinutesInput(),
+      renderSecondsInput()
+    ];
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([
+      index ? /* @__PURE__ */ React2.createElement(TimeDivider, {
+        key: index,
+        content: ":",
+        value: input.props.value
+      }) : null,
+      input
+    ]) : acc, []);
+    return [
+      inputsWithDividers,
+      React2.createElement("span", { key: "span" }),
+      renderMeridiemInput()
+    ];
+  };
+  return /* @__PURE__ */ React2.createElement(InputTimesGroup, {
+    onBlur: handleOnBlur,
+    innerRef
+  }, renderTimeInputs());
+};
+var TimeInputs_default = TimeInputs;
+export {
+  TimeInputs,
+  TimeInputs_default as default
+};
+//# sourceMappingURL=TimeInputs.js.map