@elliemae/ds-form 2.0.0-alpha.4 → 2.0.0-alpha.8

package/cjs/Toggle/DSToggleImpl.js

@@ -13,13 +13,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 class DSToggleImpl extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty__default['default'](this, "onDragStart", clientX => {
+    _defineProperty__default["default"](this, "onDragStart", clientX => {
       const {
         startPoint,
         checked,
@@ -41,7 +41,7 @@ class DSToggleImpl extends React.Component {
       else this.setDragOnChange(checked); // set initial position
     });
 
-    _defineProperty__default['default'](this, "onDragStop", e => {
+    _defineProperty__default["default"](this, "onDragStop", e => {
       const {
         checked
       } = this.state; // const { checked: checkedProp, } = this.props
@@ -53,7 +53,7 @@ class DSToggleImpl extends React.Component {
 
     });
 
-    _defineProperty__default['default'](this, "onBlur", e => {
+    _defineProperty__default["default"](this, "onBlur", e => {
       const {
         onBlur,
         id
@@ -61,7 +61,7 @@ class DSToggleImpl extends React.Component {
       if (onBlur) onBlur(e, id);
     });
 
-    _defineProperty__default['default'](this, "onFocus", e => {
+    _defineProperty__default["default"](this, "onFocus", e => {
       const {
         onFocus,
         id
@@ -69,7 +69,7 @@ class DSToggleImpl extends React.Component {
       if (onFocus) onFocus(e, id);
     });
 
-    _defineProperty__default['default'](this, "onChange", e => {
+    _defineProperty__default["default"](this, "onChange", e => {
       const {
         checked
       } = this.state;
@@ -94,24 +94,24 @@ class DSToggleImpl extends React.Component {
       this.setDragOnChange(newCheck); // set new position
     });
 
-    _defineProperty__default['default'](this, "onMouseEnter", () => {
+    _defineProperty__default["default"](this, "onMouseEnter", () => {
       this.setState({
         inside: true
       });
     });
 
-    _defineProperty__default['default'](this, "onMouseLeave", () => {
+    _defineProperty__default["default"](this, "onMouseLeave", () => {
       this.setState({
         inside: false
       });
     });
 
-    _defineProperty__default['default'](this, "onMouseMove", event => {
+    _defineProperty__default["default"](this, "onMouseMove", event => {
       event.preventDefault();
       this.onDragStart(event.clientX);
     });
 
-    _defineProperty__default['default'](this, "onMouseDown", event => {
+    _defineProperty__default["default"](this, "onMouseDown", event => {
       this.onDragStart(event.clientX);
       this.setState({
         startPoint: event.clientX,
@@ -121,28 +121,28 @@ class DSToggleImpl extends React.Component {
       window.addEventListener('mouseup', this.onMouseUp);
     });
 
-    _defineProperty__default['default'](this, "onMouseUp", event => {
+    _defineProperty__default["default"](this, "onMouseUp", event => {
       this.onDragStop(event);
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
     });
 
-    _defineProperty__default['default'](this, "onTouchCancel", () => {
+    _defineProperty__default["default"](this, "onTouchCancel", () => {
       this.setState({
         inside: false
       });
     });
 
-    _defineProperty__default['default'](this, "onTouchEnd", event => {
+    _defineProperty__default["default"](this, "onTouchEnd", event => {
       event.preventDefault();
       this.onDragStop(event);
     });
 
-    _defineProperty__default['default'](this, "onTouchMove", event => {
+    _defineProperty__default["default"](this, "onTouchMove", event => {
       this.onDragStart(event.touches[0].clientX);
     });
 
-    _defineProperty__default['default'](this, "onTouchStart", event => {
+    _defineProperty__default["default"](this, "onTouchStart", event => {
       this.onDragStart(event.touches[0].clientX);
       this.setState({
         startPoint: event.touches[0].clientX,
@@ -161,8 +161,8 @@ class DSToggleImpl extends React.Component {
       circleWidth: null,
       boxWidth: null
     };
-    this.circle = /*#__PURE__*/React__default['default'].createRef();
-    this.box = /*#__PURE__*/React__default['default'].createRef();
+    this.circle = /*#__PURE__*/React__default["default"].createRef();
+    this.box = /*#__PURE__*/React__default["default"].createRef();
   }
 
   componentDidMount() {

package/cjs/Toggle/DSToggleRender.js

@@ -17,7 +17,7 @@ var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const DSToggleRender = ({
   containerProps,
@@ -62,14 +62,14 @@ const DSToggleRender = ({
     size
   });
   const allowChange = disabled || readOnly;
-  let label = checked ? /*#__PURE__*/_jsx__default['default']("div", {
+  let label = checked ? /*#__PURE__*/_jsx__default["default"]("div", {
     className: classNameElement('icon-on')
-  }, void 0, labelOn) : /*#__PURE__*/_jsx__default['default']("div", {
+  }, void 0, labelOn) : /*#__PURE__*/_jsx__default["default"]("div", {
     className: classNameElement('icon-off')
   }, void 0, labelOff);
 
   if (readOnly) {
-    label = /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
+    label = /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
       interactionType: "hover",
       title: "Read Only",
       triggerComponent: label
@@ -82,7 +82,7 @@ const DSToggleRender = ({
     "aria-disabled": disabled,
     defaultChecked: checked,
     defaultValue: value
-  }, onClickHandlerForNonInteractiveElements__default['default'](allowChange ? null : onChange)), {}, {
+  }, onClickHandlerForNonInteractiveElements__default["default"](allowChange ? null : onChange)), {}, {
     ref: containerRef,
     className: `${cssClassName} ${defaultState ? 'default-state-checked' : ''}${hide ? ' ds-form-element-toggle-hide' : ''}`,
     onBlur: onBlur,
@@ -91,7 +91,7 @@ const DSToggleRender = ({
     "aria-checked": checked,
     role: "checkbox",
     tabIndex: 0,
-    children: [/*#__PURE__*/_jsx__default['default']("div", {
+    children: [/*#__PURE__*/_jsx__default["default"]("div", {
       className: classNameBlock('box')
     }, void 0, label), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: handRef,
@@ -106,7 +106,7 @@ const DSToggleRender = ({
       onTouchMove: allowChange ? null : onTouchMove,
       onTouchStart: allowChange ? null : onTouchStart,
       style: _objectSpread(_objectSpread({}, style), dragStyle)
-    }), /*#__PURE__*/_jsx__default['default']("input", {
+    }), /*#__PURE__*/_jsx__default["default"]("input", {
       className: classNameElement('hidden-checkbox'),
       defaultChecked: checked,
       defaultValue: value,

package/cjs/Toggle/index.js

@@ -7,4 +7,4 @@ var DSToggle = require('./DSToggle.js');
 
 
 exports.DSToggleWithSchema = DSToggle.DSToggleWithSchema;
-exports.default = DSToggle['default'];
+exports["default"] = DSToggle["default"];

package/cjs/Toggle/props.js

@@ -13,57 +13,57 @@ const togglePropTypes = {
   /**
    * Set of Properties attached to the main container
    */
-  containerProps: PropTypes__default['default'].shape({}),
+  containerProps: PropTypes__default["default"].shape({}),
 
   /**
    * Whether the toggle has error or not
    */
-  hasError: PropTypes__default['default'].bool,
+  hasError: PropTypes__default["default"].bool,
 
   /**
    * Whether the toggle is read only or not
    */
-  readOnly: PropTypes__default['default'].bool,
+  readOnly: PropTypes__default["default"].bool,
 
   /**
    * Whether the toggle is disabled or not
    */
-  disabled: PropTypes__default['default'].bool,
+  disabled: PropTypes__default["default"].bool,
 
   /**
    * Whether the toggle is checked or not
    */
-  checked: PropTypes__default['default'].bool,
+  checked: PropTypes__default["default"].bool,
 
   /**
    * Allows a function that is triggered once the toggle changes
    */
-  onChange: PropTypes__default['default'].func,
+  onChange: PropTypes__default["default"].func,
 
   /**
    * Label to show when the toggle is ON
    */
-  labelOn: PropTypes__default['default'].string,
+  labelOn: PropTypes__default["default"].string,
 
   /**
    * Label to show when the toggle is OFF
    */
-  labelOff: PropTypes__default['default'].string,
+  labelOff: PropTypes__default["default"].string,
 
   /**
    * Default value once the component is initialized
    */
-  value: PropTypes__default['default'].string,
+  value: PropTypes__default["default"].string,
 
   /**
    * ['s', 'm', 'l']
    */
-  size: PropTypes__default['default'].oneOf(propTypes.dsBasicSizes),
+  size: PropTypes__default["default"].oneOf(propTypes.dsBasicSizes),
 
   /**
    * Input name
    */
-  name: PropTypes__default['default'].string
+  name: PropTypes__default["default"].string
 };
 
 exports.togglePropTypes = togglePropTypes;

package/cjs/index.js

@@ -37,42 +37,38 @@ var options = require('./InputProtected/options.js');
 exports.ComboBoxFreeSolo = ComboBoxFreeSolo;
 exports.DSCheckboxGroup = DSCheckboxGroup.DSCheckboxGroup;
 exports.DSComboBox = Combobox.DSComboBox2;
-exports.DSDateInput = DSDateInput['default'];
+exports.DSDateInput = DSDateInput["default"];
 exports.DSExpandableInput = DSExpandableInput;
 exports.DSFloatingLabelInput = DSFloatingLabelInput;
-exports.DSFormItemLayout = DSFormItemLayout['default'];
-exports.DSInput = DSInput['default'];
-exports.DSInputGroup = DSInputGroup['default'];
-exports.DSLargeInputText = DSLargeInputText['default'];
+exports.DSFormItemLayout = DSFormItemLayout["default"];
+exports.DSInput = DSInput["default"];
+exports.DSInputGroup = DSInputGroup["default"];
+exports.DSLargeInputText = DSLargeInputText["default"];
 exports.DSLargeInputTextWithSchema = DSLargeInputText.DSLargeInputTextWithSchema;
-exports.DSRadio = DSRadio['default'];
+exports.DSRadio = DSRadio["default"];
 exports.DSRadioWithSchema = DSRadio.DSRadioWithSchema;
-exports.DSRadioGroup = DSRadioGroup['default'];
+exports.DSRadioGroup = DSRadioGroup["default"];
 exports.DSRequiredMark = RequiredMark;
 exports.SearchBoxToggle = SearchBoxToggle;
-exports.DSSearchBox = DSSearchBox['default'];
+exports.DSSearchBox = DSSearchBox["default"];
 exports.SearchBoxWithSchema = DSSearchBox.SearchBoxWithSchema;
 exports.DSNavSearchBox = NavSearchBox.NavSearchBox;
 exports.DSNavSearchBoxWithSchema = NavSearchBox.DSNavSearchBoxWithSchema;
-exports.DSTextBox = DSTextBox['default'];
-exports.DSTimeInput = DSTimeInput['default'];
-exports.DSToggle = DSToggle['default'];
+exports.DSTextBox = DSTextBox["default"];
+exports.DSTimeInput = DSTimeInput["default"];
+exports.DSToggle = DSToggle["default"];
 exports.DSToggleWithSchema = DSToggle.DSToggleWithSchema;
-exports.DSInputProtected = DSInputProtected['default'];
+exports.DSInputProtected = DSInputProtected["default"];
 exports.InputProtectedWithSchema = DSInputProtected.InputProtectedWithSchema;
 exports.DSCheckbox = DSCheckbox.DSCheckbox;
 exports.TimeInputImpl = TimeInputImpl;
 Object.defineProperty(exports, 'COMBOBOX_VARIANT', {
   enumerable: true,
-  get: function () {
-    return propTypes.COMBOBOX_VARIANT;
-  }
+  get: function () { return propTypes.COMBOBOX_VARIANT; }
 });
 Object.defineProperty(exports, 'components', {
   enumerable: true,
-  get: function () {
-    return Select.components;
-  }
+  get: function () { return Select.components; }
 });
 exports.FORMITEM_LAYOUT_VARIANTS = variants.FORMITEM_LAYOUT_VARIANTS;
 exports.InputAddonWrapper = InputAddonWrapper;

package/esm/Input/DSInput.js

@@ -43,6 +43,7 @@ const DSInput = _ref => {
 
   return /*#__PURE__*/jsx(InputImpl, _objectSpread(_objectSpread({}, otherProps), {}, {
     "aria-label": otherProps['aria-label'],
+    "aria-describedby": otherProps['aria-describedby'],
     autoFocus: autoFocus,
     className: `${className} ${disabled ? 'input-disabled' : ''}`,
     clearable: clearable,

package/esm/Input/InputImpl.js

@@ -61,7 +61,7 @@ class InputImpl extends Component {
 
       if (this.ref.current) {
         this.setState({
-          isEllipsisOn: this.ref.current.offsetWidth <= this.ref.current.scrollWidth
+          isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
         });
       }
     });
@@ -138,7 +138,7 @@ class InputImpl extends Component {
     this.setWidth();
     window.addEventListener('resize', this.setWidth);
     this.setState({
-      isEllipsisOn: this.ref.current ? this.ref.current.offsetWidth <= this.ref.current.scrollWidth : false
+      isEllipsisOn: this.ref.current ? this.ref.current.offsetWidth < this.ref.current.scrollWidth : false
     });
   }
 
@@ -239,6 +239,7 @@ class InputImpl extends Component {
       'aria-multiline': false,
       'aria-autocomplete': 'none',
       'data-testid': rest['data-testid'],
+      'aria-describedby': rest['aria-describedby'],
       role,
       id,
       innerRef: _ref => {

package/esm/Radio/DSRadio.js

@@ -64,7 +64,7 @@ const DSRadio = _ref => {
       value: value
     })), /*#__PURE__*/jsx("span", {
       ref: otherProps.innerRef,
-      "aria-checked": disabled ? false : checked,
+      "aria-checked": checked,
       "aria-disabled": disabled,
       className: classNameElement('input-button'),
       onKeyDown: e => {

package/esm/SearchBox/DSSearchBox.js

@@ -53,7 +53,9 @@ const DSSearchBox = ({
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
   const PureSearchboxIcon = React.useMemo(() => {
-    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(SearchIcon, {}));
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(SearchIcon, {
+      "aria-label": "Search"
+    }));
 
     let handleOnClick = () => handleSearch(true);
 
@@ -61,7 +63,8 @@ const DSSearchBox = ({
 
     if (shouldShowClearIcon) {
       Icon = /*#__PURE__*/_jsx(CloseXsmall, {
-        color: DSIconColors.PRIMARY
+        color: DSIconColors.PRIMARY,
+        "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }

package/esm/TextBox/DSTextBox.js

@@ -5,7 +5,7 @@ import { PropTypes, describe } from 'react-desc';
 import DSInput from '../Input/DSInput.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip"];
+const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip", "id"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -32,12 +32,14 @@ const DSTextBox = _ref => {
     rightComponent = null,
     required = false,
     variant,
-    disableTooltip
+    disableTooltip,
+    id
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/jsx(DSInput, _objectSpread(_objectSpread({}, otherProps), {}, {
-    "aria-label": otherProps['aria-label'] || 'Text Box',
+    "aria-label": !id ? otherProps['aria-label'] || 'Text Box' : undefined,
+    "aria-describedby": otherProps['aria-describedby'] || `${id}_feedback_message`,
     autoFocus: autoFocus,
     clearable: clearable,
     containerProps: containerProps,
@@ -58,7 +60,8 @@ const DSTextBox = _ref => {
     type: type,
     value: value,
     variant: variant,
-    disableTooltip: disableTooltip
+    disableTooltip: disableTooltip,
+    id: id
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.8",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form",
   "module": "./esm/index.js",
@@ -684,22 +684,22 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.4",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.4",
-    "@elliemae/ds-classnames": "2.0.0-alpha.4",
-    "@elliemae/ds-grid": "2.0.0-alpha.4",
-    "@elliemae/ds-icon": "2.0.0-alpha.4",
-    "@elliemae/ds-icons": "2.0.0-alpha.4",
-    "@elliemae/ds-menu": "2.0.0-alpha.4",
-    "@elliemae/ds-overlay": "2.0.0-alpha.4",
-    "@elliemae/ds-popper": "2.0.0-alpha.4",
-    "@elliemae/ds-separator": "2.0.0-alpha.4",
-    "@elliemae/ds-shared": "2.0.0-alpha.4",
-    "@elliemae/ds-system": "2.0.0-alpha.4",
-    "@elliemae/ds-text-wrapper": "2.0.0-alpha.4",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.4",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.4",
-    "@elliemae/ds-utilities": "2.0.0-alpha.4",
+    "@elliemae/ds-button": "2.0.0-alpha.8",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.8",
+    "@elliemae/ds-classnames": "2.0.0-alpha.8",
+    "@elliemae/ds-grid": "2.0.0-alpha.8",
+    "@elliemae/ds-icon": "2.0.0-alpha.8",
+    "@elliemae/ds-icons": "2.0.0-alpha.8",
+    "@elliemae/ds-menu": "2.0.0-alpha.8",
+    "@elliemae/ds-overlay": "2.0.0-alpha.8",
+    "@elliemae/ds-popper": "2.0.0-alpha.8",
+    "@elliemae/ds-separator": "2.0.0-alpha.8",
+    "@elliemae/ds-shared": "2.0.0-alpha.8",
+    "@elliemae/ds-system": "2.0.0-alpha.8",
+    "@elliemae/ds-text-wrapper": "2.0.0-alpha.8",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.8",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.8",
+    "@elliemae/ds-utilities": "2.0.0-alpha.8",
     "memoize-one": "~5.1.1",
     "moment": "~2.29.1",
     "polished": "~3.6.7",

package/types/FloatingLabelInput/DSFloatingLabelInput.d.ts

@@ -6,7 +6,7 @@ declare const DSFloatingLabelInput: ({ containerProps, arialLabel, innerRef, cla
     className?: string | undefined;
     extraInputProps?: {} | undefined;
     inputComponent?: {
-        ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, ...otherProps }: {
+        ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, id, ...otherProps }: {
             [x: string]: any;
             containerProps?: {} | undefined;
             autoFocus?: boolean | undefined;
@@ -28,6 +28,7 @@ declare const DSFloatingLabelInput: ({ containerProps, arialLabel, innerRef, cla
             required?: boolean | undefined;
             variant: any;
             disableTooltip: any;
+            id: any;
         }): JSX.Element;
         propTypes: {
             containerProps: any;

package/types/FormItem/DSFormItemLayout.d.ts

@@ -88,7 +88,7 @@ declare const DSFormItemLayout: {
         leftLabel: boolean;
         floatingLabel: boolean;
         inputComponent: {
-            ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, ...otherProps }: {
+            ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, id, ...otherProps }: {
                 [x: string]: any;
                 containerProps?: {} | undefined;
                 autoFocus?: boolean | undefined;
@@ -110,6 +110,7 @@ declare const DSFormItemLayout: {
                 required?: boolean | undefined;
                 variant: any;
                 disableTooltip: any;
+                id: any;
             }): JSX.Element;
             propTypes: {
                 containerProps: any;

package/types/FormItem/defaultProps.d.ts

@@ -3,7 +3,7 @@ export declare const defaultProps: {
     leftLabel: boolean;
     floatingLabel: boolean;
     inputComponent: {
-        ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, ...otherProps }: {
+        ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, id, ...otherProps }: {
             [x: string]: any;
             containerProps?: {} | undefined;
             autoFocus?: boolean | undefined;
@@ -25,6 +25,7 @@ export declare const defaultProps: {
             required?: boolean | undefined;
             variant: any;
             disableTooltip: any;
+            id: any;
         }): JSX.Element;
         propTypes: {
             containerProps: any;

package/types/SearchBox/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const SearchBoxTextBox: import("styled-components").StyledComponent<{
-    ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, ...otherProps }: {
+    ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, id, ...otherProps }: {
         [x: string]: any;
         containerProps?: {} | undefined;
         autoFocus?: boolean | undefined;
@@ -22,6 +22,7 @@ export declare const SearchBoxTextBox: import("styled-components").StyledCompone
         required?: boolean | undefined;
         variant: any;
         disableTooltip: any;
+        id: any;
     }): JSX.Element;
     propTypes: {
         containerProps: any;

package/types/TextBox/DSTextBox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const DSTextBox: {
-    ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, ...otherProps }: {
+    ({ containerProps, autoFocus, disabled, maxLength, minLength, fluidWidth, placeholder, value, hasError, readOnly, innerRef, type, min, max, clearable, leftComponent, rightComponent, required, variant, disableTooltip, id, ...otherProps }: {
         [x: string]: any;
         containerProps?: {} | undefined;
         autoFocus?: boolean | undefined;
@@ -22,6 +22,7 @@ declare const DSTextBox: {
         required?: boolean | undefined;
         variant: any;
         disableTooltip: any;
+        id: any;
     }): JSX.Element;
     propTypes: {
         /** inject props at textbox wrapper */