@elliemae/ds-pills 2.3.0-next.4 → 2.3.0-next.8

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 +15 -2
  2. package/cjs/components/types/RemovablePill.js +19 -6
  3. package/cjs/props.js +2 -1
  4. package/esm/components/PillGroup.js +15 -2
  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 +1 -0
  9. package/types/components/styled.d.ts +12 -16
  10. package/types/props.d.ts +1 -0
package/cjs/components/PillGroup.js CHANGED
@@ -20,7 +20,8 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
20
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
22
  const DSPillGroupV2Context = /*#__PURE__*/React.createContext({
23
- onKeyboardRemove: () => null
23
+ onKeyboardRemove: () => null,
24
+ onKeyboardNavigation: () => null
24
25
  });
25
26
 
26
27
  const DSPillGroupV2 = props$1 => {
@@ -42,9 +43,21 @@ const DSPillGroupV2 = props$1 => {
42
43
  elems[pillIndex + 1].focus();
43
44
  }
44
45
  }, [pillGroupUid]);
46
+ const onKeyboardNavigation = React.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]);
45
57
  return /*#__PURE__*/_jsx__default["default"](DSPillGroupV2Context.Provider, {
46
58
  value: {
47
- onKeyboardRemove
59
+ onKeyboardRemove,
60
+ onKeyboardNavigation
48
61
  }
49
62
  }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledPillGroup, {
50
63
  width: width,
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
@@ -11,7 +11,8 @@ import { StyledPillGroup } from './styled.js';
11
11
  import { jsx } from 'react/jsx-runtime';
12
12
 
13
13
  const DSPillGroupV2Context = /*#__PURE__*/createContext({
14
- onKeyboardRemove: () => null
14
+ onKeyboardRemove: () => null,
15
+ onKeyboardNavigation: () => null
15
16
  });
16
17
 
17
18
  const DSPillGroupV2 = props => {
@@ -33,9 +34,21 @@ const DSPillGroupV2 = props => {
33
34
  elems[pillIndex + 1].focus();
34
35
  }
35
36
  }, [pillGroupUid]);
37
+ const onKeyboardNavigation = useCallback((pillUid, step, e) => {
38
+ const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
39
+ const pillIndex = elems.findIndex(elem => elem.id === pillUid);
40
+
41
+ if (pillIndex >= 0) {
42
+ if (elems[pillIndex + step]) {
43
+ e.stopPropagation();
44
+ elems[pillIndex + step].focus();
45
+ }
46
+ }
47
+ }, [pillGroupUid]);
36
48
  return /*#__PURE__*/_jsx(DSPillGroupV2Context.Provider, {
37
49
  value: {
38
- onKeyboardRemove
50
+ onKeyboardRemove,
51
+ onKeyboardNavigation
39
52
  }
40
53
  }, void 0, /*#__PURE__*/jsx(StyledPillGroup, {
41
54
  width: width,
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.4",
3
+ "version": "2.3.0-next.8",
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.4",
148
- "@elliemae/ds-classnames": "2.3.0-next.4",
149
- "@elliemae/ds-dropdownmenu": "2.3.0-next.4",
150
- "@elliemae/ds-form": "2.3.0-next.4",
151
- "@elliemae/ds-grid": "2.3.0-next.4",
152
- "@elliemae/ds-icons": "2.3.0-next.4",
153
- "@elliemae/ds-modal": "2.3.0-next.4",
154
- "@elliemae/ds-popover": "2.3.0-next.4",
155
- "@elliemae/ds-props-helpers": "2.3.0-next.4",
156
- "@elliemae/ds-shared": "2.3.0-next.4",
157
- "@elliemae/ds-system": "2.3.0-next.4",
158
- "@elliemae/ds-tooltip": "2.3.0-next.4",
159
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.4",
160
- "@elliemae/ds-utilities": "2.3.0-next.4",
147
+ "@elliemae/ds-button": "2.3.0-next.8",
148
+ "@elliemae/ds-classnames": "2.3.0-next.8",
149
+ "@elliemae/ds-dropdownmenu": "2.3.0-next.8",
150
+ "@elliemae/ds-form": "2.3.0-next.8",
151
+ "@elliemae/ds-grid": "2.3.0-next.8",
152
+ "@elliemae/ds-icons": "2.3.0-next.8",
153
+ "@elliemae/ds-modal": "2.3.0-next.8",
154
+ "@elliemae/ds-popover": "2.3.0-next.8",
155
+ "@elliemae/ds-props-helpers": "2.3.0-next.8",
156
+ "@elliemae/ds-shared": "2.3.0-next.8",
157
+ "@elliemae/ds-system": "2.3.0-next.8",
158
+ "@elliemae/ds-tooltip": "2.3.0-next.8",
159
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.8",
160
+ "@elliemae/ds-utilities": "2.3.0-next.8",
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
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import { DSPillGroupProps } from '../index.d';
4
4
  export declare const DSPillGroupV2Context: React.Context<{
5
5
  onKeyboardRemove: (pillUid: string) => void;
6
+ onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;
6
7
  }>;
7
8
  declare const DSPillGroupV2: React.ComponentType<DSPillGroupProps>;
8
9
  declare const 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;