@elliemae/ds-pills 2.3.0-next.1 → 2.3.0-next.14

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.
Files changed (10) hide show
  1. package/cjs/components/PillGroup.js +29 -6
  2. package/cjs/components/types/RemovablePill.js +19 -6
  3. package/cjs/props.js +2 -1
  4. package/esm/components/PillGroup.js +28 -6
  5. package/esm/components/types/RemovablePill.js +19 -6
  6. package/esm/props.js +2 -1
  7. package/package.json +15 -15
  8. package/types/components/PillGroup.d.ts +2 -6
  9. package/types/components/styled.d.ts +12 -16
  10. package/types/props.d.ts +1 -0
package/cjs/components/PillGroup.js CHANGED
@@ -3,11 +3,16 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
7
  require('core-js/modules/web.dom-collections.iterator.js');
7
8
  require('core-js/modules/esnext.async-iterator.map.js');
8
9
  require('core-js/modules/esnext.iterator.map.js');
10
+ require('core-js/modules/esnext.async-iterator.filter.js');
11
+ require('core-js/modules/esnext.iterator.constructor.js');
12
+ require('core-js/modules/esnext.iterator.filter.js');
13
+ require('core-js/modules/esnext.async-iterator.for-each.js');
14
+ require('core-js/modules/esnext.iterator.for-each.js');
9
15
  var React = require('react');
10
- var reactDesc = require('react-desc');
11
16
  var uid = require('uid');
12
17
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
18
  var props = require('../props.js');
@@ -17,15 +22,21 @@ var jsxRuntime = require('react/jsx-runtime');
17
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
23
 
19
24
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
25
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
26
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
27
 
28
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
+
30
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
22
31
  const DSPillGroupV2Context = /*#__PURE__*/React.createContext({
23
- onKeyboardRemove: () => null
32
+ onKeyboardRemove: () => null,
33
+ onKeyboardNavigation: () => null
24
34
  });
25
35
 
26
36
  const DSPillGroupV2 = props$1 => {
27
37
  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.DSPillGroupDefaultProps);
28
38
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.DSPillGroupPropTypes);
39
+ const globalAttrs = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
29
40
  const pillGroupUid = React.useMemo(() => "ds-pill-group-".concat(uid.uid()), []);
30
41
  const {
31
42
  children,
@@ -42,21 +53,33 @@ const DSPillGroupV2 = props$1 => {
42
53
  elems[pillIndex + 1].focus();
43
54
  }
44
55
  }, [pillGroupUid]);
56
+ const onKeyboardNavigation = React.useCallback((pillUid, step, e) => {
57
+ const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
58
+ const pillIndex = elems.findIndex(elem => elem.id === pillUid);
59
+
60
+ if (pillIndex >= 0) {
61
+ if (elems[pillIndex + step]) {
62
+ e.stopPropagation();
63
+ elems[pillIndex + step].focus();
64
+ }
65
+ }
66
+ }, [pillGroupUid]);
45
67
  return /*#__PURE__*/_jsx__default["default"](DSPillGroupV2Context.Provider, {
46
68
  value: {
47
- onKeyboardRemove
69
+ onKeyboardRemove,
70
+ onKeyboardNavigation
48
71
  }
49
- }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillGroup, {
72
+ }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillGroup, _objectSpread(_objectSpread({}, globalAttrs), {}, {
50
73
  width: width,
51
74
  id: pillGroupUid,
52
75
  cols: React__default["default"].Children.map(children, () => 'auto'),
53
76
  gutter: "2px",
54
77
  ref: innerRef,
55
78
  children: children
56
- }));
79
+ })));
57
80
  };
58
81
 
59
- const DSPillGroupV2WithSchema = reactDesc.describe(DSPillGroupV2);
82
+ const DSPillGroupV2WithSchema = dsPropsHelpers.describe(DSPillGroupV2);
60
83
  DSPillGroupV2WithSchema.propTypes = props.DSPillGroupPropTypes;
61
84
 
62
85
  exports.DSPillGroupV2 = DSPillGroupV2;
package/cjs/components/types/RemovablePill.js CHANGED
@@ -23,10 +23,12 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
23
23
  labelTruncated,
24
24
  onRemove,
25
25
  innerRef,
26
- ariaLabel
26
+ ariaLabel,
27
+ tabIndex
27
28
  } = _ref;
28
29
  const {
29
- onKeyboardRemove
30
+ onKeyboardRemove,
31
+ onKeyboardNavigation
30
32
  } = React.useContext(PillGroup.DSPillGroupV2Context);
31
33
  const pillUid = React.useMemo(() => "ds-pill-".concat(uid.uid()), []);
32
34
  const TextComponent = labelTruncated ? _ref2 => {
@@ -43,7 +45,17 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
43
45
  if (onKeyboardRemove) onKeyboardRemove(pillUid);
44
46
  onRemove(e);
45
47
  }
46
- }, [onKeyboardRemove, onRemove, pillUid]);
48
+
49
+ if (e.code === 'ArrowLeft') {
50
+ e.preventDefault();
51
+ if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
52
+ }
53
+
54
+ if (e.code === 'ArrowRight') {
55
+ e.preventDefault();
56
+ if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
57
+ }
58
+ }, [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]);
47
59
  return /*#__PURE__*/_jsx__default["default"](styled.StyledRemovablePillWrapper, {
48
60
  size: size,
49
61
  cols: ['auto', '24px'],
@@ -61,10 +73,11 @@ const RemovablePill = /*#__PURE__*/React__default["default"].memo(_ref => {
61
73
  onClick: onRemove,
62
74
  onKeyDown: onKeyDown,
63
75
  "aria-label": "Remove ".concat(label),
64
- type: "right"
76
+ type: "right",
77
+ tabIndex: tabIndex
65
78
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
66
- width: 22.65,
67
- height: 22.65,
79
+ width: size === 's' ? 18 : 22.65,
80
+ height: size === 's' ? 18 : 22.65,
68
81
  color: ['brand-primary', '700']
69
82
  })));
70
83
  });
package/cjs/props.js CHANGED
@@ -49,7 +49,8 @@ const DSPillV2DefaultProps = {
49
49
  inputWidth: 72,
50
50
  inputRender: dsForm.DSInput,
51
51
  dropdownProps: {},
52
- onDropdownClick: () => null
52
+ onDropdownClick: () => null,
53
+ tabIndex: 0
53
54
  };
54
55
  const DSPillButtonDefaultProps = {
55
56
  type: 'right',
package/esm/components/PillGroup.js CHANGED
@@ -1,22 +1,32 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
3
  import 'core-js/modules/web.dom-collections.iterator.js';
3
4
  import 'core-js/modules/esnext.async-iterator.map.js';
4
5
  import 'core-js/modules/esnext.iterator.map.js';
6
+ import 'core-js/modules/esnext.async-iterator.filter.js';
7
+ import 'core-js/modules/esnext.iterator.constructor.js';
8
+ import 'core-js/modules/esnext.iterator.filter.js';
9
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
10
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
11
  import React, { createContext, useMemo, useCallback } from 'react';
6
- import { describe } from 'react-desc';
7
12
  import { uid } from 'uid';
8
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
13
+ import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
9
14
  import { DSPillGroupPropTypes, DSPillGroupDefaultProps } from '../props.js';
10
15
  import { StyledPillGroup } from './styled.js';
11
16
  import { jsx } from 'react/jsx-runtime';
12
17
 
18
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
+
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
13
21
  const DSPillGroupV2Context = /*#__PURE__*/createContext({
14
- onKeyboardRemove: () => null
22
+ onKeyboardRemove: () => null,
23
+ onKeyboardNavigation: () => null
15
24
  });
16
25
 
17
26
  const DSPillGroupV2 = props => {
18
27
  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
19
28
  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
29
+ const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
20
30
  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
21
31
  const {
22
32
  children,
@@ -33,18 +43,30 @@ const DSPillGroupV2 = props => {
33
43
  elems[pillIndex + 1].focus();
34
44
  }
35
45
  }, [pillGroupUid]);
46
+ const onKeyboardNavigation = useCallback((pillUid, step, e) => {
47
+ const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
48
+ const pillIndex = elems.findIndex(elem => elem.id === pillUid);
49
+
50
+ if (pillIndex >= 0) {
51
+ if (elems[pillIndex + step]) {
52
+ e.stopPropagation();
53
+ elems[pillIndex + step].focus();
54
+ }
55
+ }
56
+ }, [pillGroupUid]);
36
57
  return /*#__PURE__*/_jsx(DSPillGroupV2Context.Provider, {
37
58
  value: {
38
- onKeyboardRemove
59
+ onKeyboardRemove,
60
+ onKeyboardNavigation
39
61
  }
40
- }, void 0, /*#__PURE__*/jsx(StyledPillGroup, {
62
+ }, void 0, /*#__PURE__*/jsx(StyledPillGroup, _objectSpread(_objectSpread({}, globalAttrs), {}, {
41
63
  width: width,
42
64
  id: pillGroupUid,
43
65
  cols: React.Children.map(children, () => 'auto'),
44
66
  gutter: "2px",
45
67
  ref: innerRef,
46
68
  children: children
47
- }));
69
+ })));
48
70
  };
49
71
 
50
72
  const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
package/esm/components/types/RemovablePill.js CHANGED
@@ -14,10 +14,12 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
14
14
  labelTruncated,
15
15
  onRemove,
16
16
  innerRef,
17
- ariaLabel
17
+ ariaLabel,
18
+ tabIndex
18
19
  } = _ref;
19
20
  const {
20
- onKeyboardRemove
21
+ onKeyboardRemove,
22
+ onKeyboardNavigation
21
23
  } = useContext(DSPillGroupV2Context);
22
24
  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
23
25
  const TextComponent = labelTruncated ? _ref2 => {
@@ -34,7 +36,17 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
34
36
  if (onKeyboardRemove) onKeyboardRemove(pillUid);
35
37
  onRemove(e);
36
38
  }
37
- }, [onKeyboardRemove, onRemove, pillUid]);
39
+
40
+ if (e.code === 'ArrowLeft') {
41
+ e.preventDefault();
42
+ if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);
43
+ }
44
+
45
+ if (e.code === 'ArrowRight') {
46
+ e.preventDefault();
47
+ if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);
48
+ }
49
+ }, [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]);
38
50
  return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
39
51
  size: size,
40
52
  cols: ['auto', '24px'],
@@ -52,10 +64,11 @@ const RemovablePill = /*#__PURE__*/React.memo(_ref => {
52
64
  onClick: onRemove,
53
65
  onKeyDown: onKeyDown,
54
66
  "aria-label": "Remove ".concat(label),
55
- type: "right"
67
+ type: "right",
68
+ tabIndex: tabIndex
56
69
  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
57
- width: 22.65,
58
- height: 22.65,
70
+ width: size === 's' ? 18 : 22.65,
71
+ height: size === 's' ? 18 : 22.65,
59
72
  color: ['brand-primary', '700']
60
73
  })));
61
74
  });
package/esm/props.js CHANGED
@@ -45,7 +45,8 @@ const DSPillV2DefaultProps = {
45
45
  inputWidth: 72,
46
46
  inputRender: DSInput,
47
47
  dropdownProps: {},
48
- onDropdownClick: () => null
48
+ onDropdownClick: () => null,
49
+ tabIndex: 0
49
50
  };
50
51
  const DSPillButtonDefaultProps = {
51
52
  type: 'right',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pills",
3
- "version": "2.3.0-next.1",
3
+ "version": "2.3.0-next.14",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pills",
6
6
  "module": "./esm/index.js",
@@ -144,20 +144,20 @@
144
144
  "build": "node ../../scripts/build/build.js"
145
145
  },
146
146
  "dependencies": {
147
- "@elliemae/ds-button": "2.3.0-next.1",
148
- "@elliemae/ds-classnames": "2.3.0-next.1",
149
- "@elliemae/ds-dropdownmenu": "2.3.0-next.1",
150
- "@elliemae/ds-form": "2.3.0-next.1",
151
- "@elliemae/ds-grid": "2.3.0-next.1",
152
- "@elliemae/ds-icons": "2.3.0-next.1",
153
- "@elliemae/ds-modal": "2.3.0-next.1",
154
- "@elliemae/ds-popover": "2.3.0-next.1",
155
- "@elliemae/ds-props-helpers": "2.3.0-next.1",
156
- "@elliemae/ds-shared": "2.3.0-next.1",
157
- "@elliemae/ds-system": "2.3.0-next.1",
158
- "@elliemae/ds-tooltip": "2.3.0-next.1",
159
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.1",
160
- "@elliemae/ds-utilities": "2.3.0-next.1",
147
+ "@elliemae/ds-button": "2.3.0-next.14",
148
+ "@elliemae/ds-classnames": "2.3.0-next.14",
149
+ "@elliemae/ds-dropdownmenu": "2.3.0-next.14",
150
+ "@elliemae/ds-form": "2.3.0-next.14",
151
+ "@elliemae/ds-grid": "2.3.0-next.14",
152
+ "@elliemae/ds-icons": "2.3.0-next.14",
153
+ "@elliemae/ds-modal": "2.3.0-next.14",
154
+ "@elliemae/ds-popover": "2.3.0-next.14",
155
+ "@elliemae/ds-props-helpers": "2.3.0-next.14",
156
+ "@elliemae/ds-shared": "2.3.0-next.14",
157
+ "@elliemae/ds-system": "2.3.0-next.14",
158
+ "@elliemae/ds-tooltip": "2.3.0-next.14",
159
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.14",
160
+ "@elliemae/ds-utilities": "2.3.0-next.14",
161
161
  "prop-types": "~15.7.2",
162
162
  "react-desc": "~4.1.3",
163
163
  "uid": "~2.0.0"
package/types/components/PillGroup.d.ts CHANGED
@@ -1,13 +1,9 @@
1
- /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
2
1
  import React from 'react';
3
2
  import { DSPillGroupProps } from '../index.d';
4
3
  export declare const DSPillGroupV2Context: React.Context<{
5
4
  onKeyboardRemove: (pillUid: string) => void;
5
+ onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;
6
6
  }>;
7
7
  declare const DSPillGroupV2: React.ComponentType<DSPillGroupProps>;
8
- declare const DSPillGroupV2WithSchema: {
9
- (props?: unknown): JSX.Element;
10
- propTypes: unknown;
11
- toTypescript: () => import("react-desc").TypescriptSchema;
12
- };
8
+ declare const DSPillGroupV2WithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSPillGroupProps>;
13
9
  export { DSPillGroupV2, DSPillGroupV2WithSchema };
package/types/components/styled.d.ts CHANGED
@@ -1,24 +1,20 @@
1
1
  /// <reference types="react" />
2
- export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
3
- size: 'm' | 's';
2
+ export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
5
+ value: string;
6
+ inputWidth: number;
7
+ inputHasFocus: boolean;
4
8
  }, never>;
5
- export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
6
- size: 'm' | 's';
7
- }, never>;
8
- export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
9
- export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
10
- size: 'm' | 's';
11
- }, never>;
12
- export declare const StyledReadonlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
13
- export declare const StyledRemovablePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
14
- size: 'm' | 's';
9
+ export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
10
+ export declare const StyledReadonlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
11
+ hasIconRight: boolean;
12
+ hasIconLeft: boolean;
15
13
  }, never>;
14
+ export declare const StyledRemovablePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
16
15
  export declare const StyledPillGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
17
16
  export declare const StyledSpanWithTooltip: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
18
- export declare const StyledPillButton: import("styled-components").StyledComponent<{
19
- (props: import("@elliemae/ds-button/types/v2/propTypes").DSButtonPropsT): JSX.Element;
20
- propTypes: import("react").WeakValidationMap<unknown>;
21
- }, import("styled-components").DefaultTheme, {
17
+ export declare const StyledPillButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {
22
18
  width: string;
23
19
  height: string;
24
20
  }, never>;
package/types/props.d.ts CHANGED
@@ -80,6 +80,7 @@ export declare const DSPillV2DefaultProps: {
80
80
  inputRender: any;
81
81
  dropdownProps: {};
82
82
  onDropdownClick: () => null;
83
+ tabIndex: number;
83
84
  };
84
85
  export declare const DSPillButtonDefaultProps: {
85
86
  type: string;