@redocly/theme 0.37.6 → 0.38.0

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 (4) hide show
  1. package/lib/components/Select/Select.d.ts +3 -0
  2. package/lib/components/Select/Select.js +7 -5
  3. package/package.json +3 -3
  4. package/src/components/Select/Select.tsx +22 -9
package/lib/components/Select/Select.d.ts CHANGED
@@ -17,9 +17,12 @@ export type SelectProps<T = any> = {
17
17
  onlyIcon?: boolean;
18
18
  placeholder?: string;
19
19
  disabled?: boolean;
20
+ hideCheckmarkIcon?: boolean;
21
+ dataTestId?: string;
20
22
  renderInput?: (props: {
21
23
  isOpen: boolean;
22
24
  }) => React.ReactElement;
25
+ renderDivider?: () => React.ReactElement;
23
26
  };
24
27
  export declare function Select<T>(props: SelectProps<T>): JSX.Element;
25
28
  export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
package/lib/components/Select/Select.js CHANGED
@@ -34,7 +34,7 @@ const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon")
34
34
  const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
35
35
  const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
36
36
  function Select(props) {
37
- const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, renderInput, } = props;
37
+ const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, renderInput, renderDivider, dataTestId = 'select', } = props;
38
38
  const containerRef = (0, react_1.useRef)(null);
39
39
  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
40
40
  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
@@ -62,13 +62,15 @@ function Select(props) {
62
62
  !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
63
63
  icon,
64
64
  withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, { size: "14px" }) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "14px" }) : null));
65
- return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
65
+ return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
66
66
  renderInput ? renderInput({ isOpen }) : renderDefaultInput(),
67
67
  isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => {
68
68
  const selected = option.value === value;
69
- return (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
70
- typeof option.element === 'string' ? react_1.default.createElement("div", null, option.element) : option.element,
71
- selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)));
69
+ return (react_1.default.createElement(react_1.default.Fragment, null,
70
+ react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
71
+ typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element),
72
+ !hideCheckmarkIcon && selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)),
73
+ renderDivider && index !== options.length - 1 ? renderDivider() : null));
72
74
  })))));
73
75
  }
74
76
  exports.Select = Select;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.37.6",
3
+ "version": "0.38.0",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -74,7 +74,7 @@
74
74
  "npm-run-all2": "5.0.2",
75
75
  "react-refresh": "0.14.2",
76
76
  "react-router-dom": "6.21.1",
77
- "rimraf": "5.0.5",
77
+ "rimraf": "5.0.7",
78
78
  "storybook": "7.6.19",
79
79
  "storybook-addon-pseudo-states": "3.1.1",
80
80
  "storybook-design-token": "3.1.0",
@@ -98,7 +98,7 @@
98
98
  "timeago.js": "^4.0.2",
99
99
  "i18next": "^22.4.12",
100
100
  "nprogress": "^0.2.0",
101
- "@redocly/config": "0.6.1"
101
+ "@redocly/config": "0.6.2"
102
102
  },
103
103
  "scripts": {
104
104
  "start": "npm-run-all --parallel storybook storybook:tokens:watch",
package/src/components/Select/Select.tsx CHANGED
@@ -24,7 +24,10 @@ export type SelectProps<T = any> = {
24
24
  onlyIcon?: boolean;
25
25
  placeholder?: string;
26
26
  disabled?: boolean;
27
+ hideCheckmarkIcon?: boolean;
28
+ dataTestId?: string;
27
29
  renderInput?: (props: { isOpen: boolean }) => React.ReactElement;
30
+ renderDivider?: () => React.ReactElement;
28
31
  };
29
32
 
30
33
  export function Select<T>(props: SelectProps<T>): JSX.Element {
@@ -42,7 +45,10 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
42
45
  onlyIcon,
43
46
  disabled,
44
47
  placeholder,
48
+ hideCheckmarkIcon,
45
49
  renderInput,
50
+ renderDivider,
51
+ dataTestId = 'select',
46
52
  } = props;
47
53
 
48
54
  const containerRef = useRef<HTMLDivElement | null>(null);
@@ -94,7 +100,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
94
100
  data-component-name="Select/Select"
95
101
  {...dataAttributes}
96
102
  disabled={disabled}
97
- data-testid="select"
103
+ data-testid={dataTestId}
98
104
  className={className}
99
105
  ref={containerRef}
100
106
  onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
@@ -107,14 +113,21 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
107
113
  {options.map((option, index) => {
108
114
  const selected = option.value === value;
109
115
  return (
110
- <SelectListItem
111
- key={index}
112
- onClick={() => handleSelect(option.value)}
113
- selected={selected}
114
- >
115
- {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
116
- {selected && <CheckmarkIcon />}
117
- </SelectListItem>
116
+ <>
117
+ <SelectListItem
118
+ key={index}
119
+ onClick={() => handleSelect(option.value)}
120
+ selected={selected}
121
+ >
122
+ {typeof option.element === 'string' ? (
123
+ <div>{option.element}</div>
124
+ ) : (
125
+ option.element
126
+ )}
127
+ {!hideCheckmarkIcon && selected && <CheckmarkIcon />}
128
+ </SelectListItem>
129
+ {renderDivider && index !== options.length - 1 ? renderDivider() : null}
130
+ </>
118
131
  );
119
132
  })}
120
133
  </SelectList>