@synerise/ds-inline-edit 1.1.22 → 1.1.24
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.
- package/CHANGELOG.md +8 -0
- package/README.md +42 -40
- package/dist/InlineEdit.d.ts +2 -2
- package/dist/InlineEdit.js +38 -73
- package/dist/InlineEdit.styles.d.ts +4 -4
- package/dist/InlineEdit.styles.js +33 -62
- package/dist/InlineEdit.types.d.ts +1 -1
- package/dist/InlineEdit.types.js +1 -1
- package/dist/InlineSelect/InlineSelect.d.ts +2 -2
- package/dist/InlineSelect/InlineSelect.js +50 -107
- package/dist/InlineSelect/InlineSelect.style.d.ts +4 -4
- package/dist/InlineSelect/InlineSelect.style.js +34 -50
- package/dist/InlineSelect/InlineSelect.types.d.ts +4 -4
- package/dist/InlineSelect/InlineSelect.types.js +1 -1
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.d.ts +3 -3
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.js +25 -47
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.style.d.ts +5 -5
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.style.js +17 -12
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.types.d.ts +3 -3
- package/dist/InlineSelect/SelectDropdown/SelectDropdown.types.js +1 -1
- package/dist/index.js +6 -4
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.1.23...@synerise/ds-inline-edit@1.1.24) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-inline-edit
|
|
9
|
+
|
|
10
|
+
## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.1.22...@synerise/ds-inline-edit@1.1.23) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-inline-edit
|
|
13
|
+
|
|
6
14
|
## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.1.21...@synerise/ds-inline-edit@1.1.22) (2026-03-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-inline-edit
|
package/README.md
CHANGED
|
@@ -32,49 +32,51 @@ InlineEdit UI Component
|
|
|
32
32
|
|
|
33
33
|
## InlineEdit API
|
|
34
34
|
|
|
35
|
-
| Property | Description | Type
|
|
36
|
-
| ------------ | -------------------------------- |
|
|
37
|
-
| autoFocus | Set focus on input after mount | boolean
|
|
38
|
-
| className | Optional className for component | string
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
35
|
+
| Property | Description | Type | Default |
|
|
36
|
+
| ------------ | -------------------------------- | ----------------------------- | -------- |
|
|
37
|
+
| autoFocus | Set focus on input after mount | boolean | - |
|
|
38
|
+
| className | Optional className for component | string | - |
|
|
39
|
+
| customIcon | Replaces the default edit icon | ReactNode | - |
|
|
40
|
+
| disabled | Disabled state of component | boolean | - |
|
|
41
|
+
| error | Error state of component | boolean | - |
|
|
42
|
+
| hideIcon | Hides input icon | boolean | - |
|
|
43
|
+
| input | Properties of the input | InputProps | - |
|
|
44
|
+
| size | Component size | `large` / `normal` / `small` | `normal` |
|
|
45
|
+
| style | Styles object | React.CSSProperties | - |
|
|
46
|
+
| tooltipTitle | Text of the tooltip on the icon | string | - |
|
|
46
47
|
|
|
47
48
|
## InlineSelect API
|
|
48
49
|
|
|
49
|
-
| Property | Description
|
|
50
|
-
| -------------------- |
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
50
|
+
| Property | Description | Type | Default |
|
|
51
|
+
| -------------------- | ---------------------------------------------------------------------------- | ------------------- | -------- |
|
|
52
|
+
| dataSource | Items displayed in the dropdown | ListItemProps[] | - |
|
|
53
|
+
| input | Input value and event handlers (`onChange` is ignored — use `onValueChange`) | Partial\<InputProps\> | - |
|
|
54
|
+
| autoFocus | Set focus on input after mount | boolean | - |
|
|
55
|
+
| className | Optional className for component | string | - |
|
|
56
|
+
| disabled | Disabled state of component | boolean | - |
|
|
57
|
+
| dropdownOverlayStyle | Styles object applied to the dropdown overlay wrapper | React.CSSProperties | `{}` |
|
|
58
|
+
| dropdownProps | Props object applied to the dropdown component | DropdownProps | `{}` |
|
|
59
|
+
| error | Error state of component | boolean | - |
|
|
60
|
+
| expanded | Initial expansion state of dropdown menu | boolean | - |
|
|
61
|
+
| hideIcon | Hides the chevron icon | boolean | - |
|
|
62
|
+
| initialValue | Initial displayed text (takes precedence over `placeholder`) | string | - |
|
|
63
|
+
| inputStyle | Styles applied to the inner input element | React.CSSProperties | - |
|
|
64
|
+
| onValueChange | Called when a dropdown item is selected | (item: ItemType) => void | - |
|
|
65
|
+
| placeholder | Default text when no value is selected | string | - |
|
|
66
|
+
| size | Component size | `normal` / `small` | `normal` |
|
|
67
|
+
| style | Styles object | React.CSSProperties | - |
|
|
66
68
|
|
|
67
69
|
## InlineEdit input API
|
|
68
70
|
|
|
69
|
-
| Property | Description
|
|
70
|
-
| ------------ |
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
| readOnly | Readonly state
|
|
77
|
-
| placeholder |
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
71
|
+
| Property | Description | Type | Default |
|
|
72
|
+
| ------------ | ---------------------------------------------------------------- | ------------------------------------------- | ------- |
|
|
73
|
+
| value | Controlled value | string \| number | - |
|
|
74
|
+
| onChange | Called when input changes | (event: ChangeEvent\<HTMLInputElement\>) => void | - |
|
|
75
|
+
| name | Native html name attribute; used to derive the input `id` | string | - |
|
|
76
|
+
| disabled | Disabled state | boolean | - |
|
|
77
|
+
| maxLength | Maximum characters inside the input element | number | - |
|
|
78
|
+
| readOnly | Readonly state | boolean | - |
|
|
79
|
+
| placeholder | Placeholder text | string | - |
|
|
80
|
+
| autoComplete | Native html autocomplete attribute | string | - |
|
|
81
|
+
| onBlur | Called when input loses focus | FocusEventHandler\<HTMLInputElement\> | - |
|
|
82
|
+
| onEnterPress | Called when user presses `Enter`; also triggers `blur()` | KeyboardEventHandler\<HTMLInputElement\> | - |
|
package/dist/InlineEdit.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InlineEditProps } from './InlineEdit.types';
|
|
3
3
|
declare const InlineEdit: ({ className, style, size, disabled, autoFocus, hideIcon, customIcon, tooltipTitle, error, input, }: InlineEditProps) => React.JSX.Element;
|
|
4
4
|
export default InlineEdit;
|
package/dist/InlineEdit.js
CHANGED
|
@@ -1,91 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { useTheme } from
|
|
4
|
-
import Icon, { EditS } from
|
|
5
|
-
import { AutosizeInput } from
|
|
6
|
-
import Tooltip from
|
|
7
|
-
import { toCamelCase } from
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var handleChange = useCallback(function (event) {
|
|
27
|
-
input.onChange == null || input.onChange(event);
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useCallback, useEffect } from "react";
|
|
3
|
+
import { useTheme } from "@synerise/ds-core";
|
|
4
|
+
import Icon, { EditS } from "@synerise/ds-icon";
|
|
5
|
+
import { AutosizeInput } from "@synerise/ds-input";
|
|
6
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
7
|
+
import { toCamelCase } from "@synerise/ds-utils";
|
|
8
|
+
import { InPlaceEditableInputContainer, IconWrapper } from "./InlineEdit.styles.js";
|
|
9
|
+
const InlineEdit = ({
|
|
10
|
+
className,
|
|
11
|
+
style,
|
|
12
|
+
size = "normal",
|
|
13
|
+
disabled,
|
|
14
|
+
autoFocus,
|
|
15
|
+
hideIcon,
|
|
16
|
+
customIcon,
|
|
17
|
+
tooltipTitle,
|
|
18
|
+
error,
|
|
19
|
+
input
|
|
20
|
+
}) => {
|
|
21
|
+
const inputRef = useRef(null);
|
|
22
|
+
const [focused, setFocused] = useState();
|
|
23
|
+
const theme = useTheme();
|
|
24
|
+
const handleChange = useCallback((event) => {
|
|
25
|
+
input.onChange?.(event);
|
|
28
26
|
}, [input]);
|
|
29
|
-
|
|
27
|
+
const handleFocus = () => {
|
|
30
28
|
setFocused(false);
|
|
31
29
|
};
|
|
32
|
-
|
|
30
|
+
const handleBlur = useCallback((event) => {
|
|
33
31
|
input.onBlur && input.onBlur(event);
|
|
34
32
|
inputRef.current && inputRef.current.scrollTo({
|
|
35
33
|
left: 0
|
|
36
34
|
});
|
|
37
35
|
setFocused(true);
|
|
38
36
|
}, [input]);
|
|
39
|
-
|
|
40
|
-
if (event.key ===
|
|
37
|
+
const handleKeyPress = useCallback((event) => {
|
|
38
|
+
if (event.key === "Enter") {
|
|
41
39
|
input.onEnterPress && input.onEnterPress(event);
|
|
42
40
|
inputRef.current && inputRef.current.blur();
|
|
43
41
|
}
|
|
44
42
|
}, [input]);
|
|
45
|
-
|
|
43
|
+
const handleFocusInput = useCallback(() => {
|
|
46
44
|
inputRef.current && inputRef.current.focus();
|
|
47
45
|
}, []);
|
|
48
|
-
useEffect(
|
|
46
|
+
useEffect(() => {
|
|
49
47
|
autoFocus && inputRef.current && inputRef.current.focus();
|
|
50
48
|
}, [autoFocus]);
|
|
51
|
-
return
|
|
52
|
-
className: "
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}, /*#__PURE__*/React.createElement(AutosizeInput, {
|
|
59
|
-
extraWidth: 2,
|
|
60
|
-
value: input.value,
|
|
61
|
-
placeholder: input.placeholder,
|
|
62
|
-
placeholderIsMinWidth: false,
|
|
63
|
-
wrapperClassName: "autosize-input"
|
|
64
|
-
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
65
|
-
autoComplete: "off",
|
|
66
|
-
id: input.name ? toCamelCase(input.name) : 'id'
|
|
67
|
-
}, input, {
|
|
68
|
-
className: "autosize-input",
|
|
69
|
-
"data-testid": "inline-edit-autosize-input",
|
|
70
|
-
onKeyPress: handleKeyPress,
|
|
71
|
-
disabled: disabled,
|
|
72
|
-
onChange: handleChange,
|
|
73
|
-
onBlur: handleBlur,
|
|
74
|
-
onFocus: handleFocus,
|
|
75
|
-
value: input.value,
|
|
76
|
-
ref: inputRef
|
|
77
|
-
}))), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
|
|
78
|
-
"data-testid": "inline-edit-icon",
|
|
79
|
-
title: tooltipTitle
|
|
80
|
-
}, /*#__PURE__*/React.createElement(S.IconWrapper, {
|
|
81
|
-
customIcon: Boolean(customIcon),
|
|
82
|
-
disabled: disabled,
|
|
83
|
-
onClick: handleFocusInput,
|
|
84
|
-
size: size
|
|
85
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
86
|
-
color: theme.palette["grey-600"],
|
|
87
|
-
component: customIcon || /*#__PURE__*/React.createElement(EditS, null),
|
|
88
|
-
size: 24
|
|
89
|
-
}))));
|
|
49
|
+
return /* @__PURE__ */ jsxs(InPlaceEditableInputContainer, { className: `ds-inline-edit ${className || ""}`, style, size, disabled, error, scrolled: focused, children: [
|
|
50
|
+
/* @__PURE__ */ jsx(AutosizeInput, { extraWidth: 2, value: input.value, placeholder: input.placeholder, placeholderIsMinWidth: false, wrapperClassName: "autosize-input", children: /* @__PURE__ */ jsx("input", { autoComplete: "off", id: input.name ? toCamelCase(input.name) : "id", ...input, className: "autosize-input", "data-testid": "inline-edit-autosize-input", onKeyPress: handleKeyPress, disabled, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: input.value, ref: inputRef }) }),
|
|
51
|
+
!hideIcon && /* @__PURE__ */ jsx(Tooltip, { "data-testid": "inline-edit-icon", title: tooltipTitle, children: /* @__PURE__ */ jsx(IconWrapper, { customIcon: Boolean(customIcon), disabled, onClick: handleFocusInput, size, children: /* @__PURE__ */ jsx(Icon, { color: theme.palette[`grey-600`], component: customIcon || /* @__PURE__ */ jsx(EditS, {}), size: 24 }) }) })
|
|
52
|
+
] });
|
|
53
|
+
};
|
|
54
|
+
export {
|
|
55
|
+
InlineEdit as default
|
|
90
56
|
};
|
|
91
|
-
export default InlineEdit;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ThemeProps } from '@synerise/ds-core';
|
|
2
2
|
type InPlaceEditableInputContainerProps = {
|
|
3
3
|
size: 'large' | 'small' | 'normal';
|
|
4
4
|
disabled?: boolean;
|
|
@@ -6,11 +6,11 @@ type InPlaceEditableInputContainerProps = {
|
|
|
6
6
|
pressed?: boolean;
|
|
7
7
|
scrolled?: boolean;
|
|
8
8
|
};
|
|
9
|
-
export declare const FontStyleWatcher: import(
|
|
10
|
-
export declare const IconWrapper: import(
|
|
9
|
+
export declare const FontStyleWatcher: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
11
11
|
size: string;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
customIcon?: boolean;
|
|
14
14
|
} & ThemeProps, never>;
|
|
15
|
-
export declare const InPlaceEditableInputContainer: import(
|
|
15
|
+
export declare const InPlaceEditableInputContainer: import('styled-components').StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
|
|
16
16
|
export {};
|
|
@@ -1,85 +1,56 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import { macro } from
|
|
3
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { macro } from "@synerise/ds-typography";
|
|
3
|
+
const applyColor = (props) => {
|
|
4
4
|
if (props.error) {
|
|
5
|
-
return props.theme.palette[
|
|
5
|
+
return props.theme.palette["red-600"];
|
|
6
6
|
}
|
|
7
|
-
return props.theme.palette[
|
|
7
|
+
return props.theme.palette["grey-800"];
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
const applyColorFocus = (props) => {
|
|
10
10
|
if (props.error) {
|
|
11
|
-
return props.theme.palette[
|
|
11
|
+
return props.theme.palette["red-600"];
|
|
12
12
|
}
|
|
13
|
-
return props.theme.palette[
|
|
13
|
+
return props.theme.palette["blue-600"];
|
|
14
14
|
};
|
|
15
|
-
|
|
15
|
+
const applyDots = (props) => {
|
|
16
16
|
if (props.error) {
|
|
17
|
-
return props.theme.palette[
|
|
17
|
+
return props.theme.palette["red-600"];
|
|
18
18
|
}
|
|
19
|
-
return props.theme.palette[
|
|
19
|
+
return props.theme.palette["grey-400"];
|
|
20
20
|
};
|
|
21
|
-
|
|
21
|
+
const applyDotsOnError = (props) => {
|
|
22
22
|
if (props.error) {
|
|
23
|
-
return
|
|
23
|
+
return `background-image: linear-gradient(to right, ${applyDots(props)} 20%, rgba(255, 255, 255, 0) 10%);
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
background-position: bottom left;
|
|
26
|
+
background-size: 5px 1px;
|
|
27
|
+
background-repeat: repeat-x;`;
|
|
24
28
|
}
|
|
25
|
-
return
|
|
29
|
+
return "";
|
|
26
30
|
};
|
|
27
|
-
|
|
31
|
+
const fontSize = {
|
|
28
32
|
large: macro.h600,
|
|
29
33
|
normal: macro.h400,
|
|
30
34
|
small: macro.small
|
|
31
35
|
};
|
|
32
|
-
|
|
36
|
+
const FontStyleWatcher = /* @__PURE__ */ styled.div.withConfig({
|
|
33
37
|
displayName: "InlineEditstyles__FontStyleWatcher",
|
|
34
38
|
componentId: "sc-1itw4az-0"
|
|
35
39
|
})(["visibility:hidden;pointer-events:none;"]);
|
|
36
|
-
|
|
40
|
+
const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
37
41
|
displayName: "InlineEditstyles__IconWrapper",
|
|
38
42
|
componentId: "sc-1itw4az-1"
|
|
39
|
-
})(["display:", ";border-radius:24px;color:", ";background:", ";margin:0;font-size:11px;justify-content:center;align-items:center;margin-left:", ";width:24px;height:24px;line-height:inherit;cursor:pointer;&&&:hover{background-color:", ";}div :active{border-radius:", ";background-color:", ";}"],
|
|
40
|
-
|
|
41
|
-
}, function (props) {
|
|
42
|
-
return props.theme.palette['grey-600'];
|
|
43
|
-
}, function (props) {
|
|
44
|
-
return props.customIcon ? undefined : props.theme.palette['grey-100'];
|
|
45
|
-
}, function (props) {
|
|
46
|
-
return props.size === 'small' ? '4px' : '8px';
|
|
47
|
-
}, function (props) {
|
|
48
|
-
return props.theme.palette.white;
|
|
49
|
-
}, function (props) {
|
|
50
|
-
return props.customIcon ? '0px' : '24px';
|
|
51
|
-
}, function (props) {
|
|
52
|
-
return props.customIcon ? undefined : props.theme.palette['grey-300'];
|
|
53
|
-
});
|
|
54
|
-
export var InPlaceEditableInputContainer = styled.div.withConfig({
|
|
43
|
+
})(["display:", ";border-radius:24px;color:", ";background:", ";margin:0;font-size:11px;justify-content:center;align-items:center;margin-left:", ";width:24px;height:24px;line-height:inherit;cursor:pointer;&&&:hover{background-color:", ";}div :active{border-radius:", ";background-color:", ";}"], (props) => props.disabled ? "none" : "flex", (props) => props.theme.palette["grey-600"], (props) => props.customIcon ? void 0 : props.theme.palette["grey-100"], (props) => props.size === "small" ? "4px" : "8px", (props) => props.theme.palette.white, (props) => props.customIcon ? "0px" : "24px", (props) => props.customIcon ? void 0 : props.theme.palette["grey-300"]);
|
|
44
|
+
const InPlaceEditableInputContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
55
45
|
displayName: "InlineEditstyles__InPlaceEditableInputContainer",
|
|
56
46
|
componentId: "sc-1itw4az-2"
|
|
57
|
-
})(["display:flex;max-width:100%;align-items:center;pointer-events:", ";", "{svg{color:", ";fill:", ";}}input{", "}&:hover{input{color:", ";background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}", "{background-color:", ";}}", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", " overflow:hidden;text-overflow:", ";max-width:100%;padding-bottom:", ";margin:0;vertical-align:top;color:", ";::placeholder{color:", ";}}"],
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
return props.theme.palette['grey-800'];
|
|
68
|
-
}, function (props) {
|
|
69
|
-
return applyDots(props);
|
|
70
|
-
}, IconWrapper, function (_ref2) {
|
|
71
|
-
var theme = _ref2.theme;
|
|
72
|
-
return theme.palette['grey-200'];
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}}}"], applyColorFocus(props));
|
|
75
|
-
}, FontStyleWatcher, function (props) {
|
|
76
|
-
return fontSize[props.size];
|
|
77
|
-
}, function (props) {
|
|
78
|
-
return props.scrolled ? 'initial' : 'ellipsis';
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.size === 'small' ? '2px' : '0';
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return applyColor(props);
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.theme.palette[props.error ? 'red-600' : 'grey-400'];
|
|
85
|
-
});
|
|
47
|
+
})(["display:flex;max-width:100%;align-items:center;pointer-events:", ";", "{svg{color:", ";fill:", ";}}input{", "}&:hover{input{color:", ";background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}", "{background-color:", ";}}", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", " overflow:hidden;text-overflow:", ";max-width:100%;padding-bottom:", ";margin:0;vertical-align:top;color:", ";::placeholder{color:", ";}}"], ({
|
|
48
|
+
disabled
|
|
49
|
+
}) => disabled ? "none" : "all", IconWrapper, (props) => applyColor(props), (props) => applyColor(props), (props) => applyDotsOnError(props), (props) => props.theme.palette["grey-800"], (props) => applyDots(props), IconWrapper, ({
|
|
50
|
+
theme
|
|
51
|
+
}) => theme.palette["grey-200"], (props) => !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}}}"], applyColorFocus(props)), FontStyleWatcher, (props) => fontSize[props.size], (props) => props.scrolled ? "initial" : "ellipsis", (props) => props.size === "small" ? "2px" : "0", (props) => applyColor(props), (props) => props.theme.palette[props.error ? "red-600" : "grey-400"]);
|
|
52
|
+
export {
|
|
53
|
+
FontStyleWatcher,
|
|
54
|
+
IconWrapper,
|
|
55
|
+
InPlaceEditableInputContainer
|
|
56
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CSSProperties, ChangeEvent, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
|
|
2
2
|
export type InputProps = {
|
|
3
3
|
name?: string;
|
|
4
4
|
value: string | number;
|
package/dist/InlineEdit.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InlineSelectProps } from './InlineSelect.types';
|
|
3
3
|
declare const InlineSelect: ({ className, style, expanded, dropdownProps, dropdownOverlayStyle, inputStyle, size, disabled, autoFocus, hideIcon, error, input, placeholder, dataSource, initialValue, onValueChange, }: InlineSelectProps) => React.JSX.Element;
|
|
4
4
|
export default InlineSelect;
|
|
@@ -1,115 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
setIsOpened = _useState2[1];
|
|
39
|
-
var _useState3 = useState(false),
|
|
40
|
-
isPressed = _useState3[0],
|
|
41
|
-
setIsPressed = _useState3[1];
|
|
42
|
-
var value = input.value,
|
|
43
|
-
onChange = input.onChange,
|
|
44
|
-
inputProps = _objectWithoutPropertiesLoose(input, _excluded);
|
|
45
|
-
var handleSelect = function handleSelect(item) {
|
|
46
|
-
onValueChange == null || onValueChange(item);
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useEffect } from "react";
|
|
3
|
+
import Dropdown from "@synerise/ds-dropdown";
|
|
4
|
+
import Icon, { AngleDownS } from "@synerise/ds-icon";
|
|
5
|
+
import { AutosizeInput } from "@synerise/ds-input";
|
|
6
|
+
import { NOOP, toCamelCase } from "@synerise/ds-utils";
|
|
7
|
+
import { InPlaceEditableInputContainer, IconWrapper } from "./InlineSelect.style.js";
|
|
8
|
+
import SelectDropdown from "./SelectDropdown/SelectDropdown.js";
|
|
9
|
+
const InlineSelect = ({
|
|
10
|
+
className,
|
|
11
|
+
style,
|
|
12
|
+
expanded,
|
|
13
|
+
dropdownProps = {},
|
|
14
|
+
dropdownOverlayStyle = {},
|
|
15
|
+
inputStyle = {},
|
|
16
|
+
size = "normal",
|
|
17
|
+
disabled,
|
|
18
|
+
autoFocus,
|
|
19
|
+
hideIcon,
|
|
20
|
+
error,
|
|
21
|
+
input,
|
|
22
|
+
placeholder,
|
|
23
|
+
dataSource,
|
|
24
|
+
initialValue,
|
|
25
|
+
onValueChange
|
|
26
|
+
}) => {
|
|
27
|
+
const inputRef = useRef(null);
|
|
28
|
+
const [selectedValue, setSelectedValue] = useState(initialValue || placeholder || "option");
|
|
29
|
+
const [isOpened, setIsOpened] = useState(Boolean(expanded));
|
|
30
|
+
const [isPressed, setIsPressed] = useState(false);
|
|
31
|
+
const {
|
|
32
|
+
value,
|
|
33
|
+
onChange,
|
|
34
|
+
...inputProps
|
|
35
|
+
} = input;
|
|
36
|
+
const handleSelect = (item) => {
|
|
37
|
+
onValueChange?.(item);
|
|
47
38
|
setSelectedValue(item.text);
|
|
48
39
|
};
|
|
49
|
-
useEffect(
|
|
40
|
+
useEffect(() => {
|
|
50
41
|
if (value && value !== selectedValue) {
|
|
51
|
-
setSelectedValue(
|
|
42
|
+
setSelectedValue(`${value}`);
|
|
52
43
|
}
|
|
53
44
|
}, [value, selectedValue]);
|
|
54
|
-
useEffect(
|
|
45
|
+
useEffect(() => {
|
|
55
46
|
autoFocus && inputRef.current && inputRef.current.focus();
|
|
56
47
|
}, [autoFocus, inputRef]);
|
|
57
|
-
return
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
},
|
|
68
|
-
style: dropdownOverlayStyle
|
|
69
|
-
}),
|
|
70
|
-
trigger: ['click'],
|
|
71
|
-
asChild: true
|
|
72
|
-
}, dropdownProps, {
|
|
73
|
-
popoverProps: _extends({
|
|
74
|
-
testId: 'inline-select'
|
|
75
|
-
}, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
|
|
76
|
-
}), /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
|
|
77
|
-
className: "ds-inline-edit " + (className || ''),
|
|
78
|
-
style: style,
|
|
79
|
-
size: size,
|
|
80
|
-
disabled: disabled,
|
|
81
|
-
error: error,
|
|
82
|
-
tabIndex: 0,
|
|
83
|
-
onMouseDown: function onMouseDown() {
|
|
84
|
-
return setIsPressed(true);
|
|
85
|
-
},
|
|
86
|
-
onMouseUp: function onMouseUp() {
|
|
87
|
-
return setIsPressed(false);
|
|
88
|
-
},
|
|
89
|
-
pressed: isPressed,
|
|
90
|
-
dropdownOpened: isOpened
|
|
91
|
-
}, /*#__PURE__*/React.createElement(AutosizeInput, {
|
|
92
|
-
value: selectedValue || placeholder,
|
|
93
|
-
placeholderIsMinWidth: false,
|
|
94
|
-
extraWidth: 2,
|
|
95
|
-
wrapperClassName: "autosize-input"
|
|
96
|
-
}, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
|
|
97
|
-
ref: inputRef,
|
|
98
|
-
style: inputStyle,
|
|
99
|
-
id: input.name ? toCamelCase(input.name) : 'id',
|
|
100
|
-
className: "autosize-input",
|
|
101
|
-
"data-testid": "inline-select-autosize-input",
|
|
102
|
-
value: selectedValue || placeholder,
|
|
103
|
-
autoComplete: "off",
|
|
104
|
-
placeholder: placeholder,
|
|
105
|
-
disabled: disabled,
|
|
106
|
-
onChange: NOOP
|
|
107
|
-
}))), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
|
|
108
|
-
size: size,
|
|
109
|
-
expanded: isOpened
|
|
110
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
111
|
-
component: /*#__PURE__*/React.createElement(AngleDownS, null),
|
|
112
|
-
size: 24
|
|
113
|
-
}))));
|
|
48
|
+
return /* @__PURE__ */ jsx(Dropdown, { open: !disabled && isOpened, onOpenChange: setIsOpened, placement: "bottomRight", disabled, overlay: /* @__PURE__ */ jsx(SelectDropdown, { dataSource, onSelect: handleSelect, closeDropdown: () => setIsOpened(false), style: dropdownOverlayStyle }), trigger: ["click"], asChild: true, ...dropdownProps, popoverProps: {
|
|
49
|
+
testId: "inline-select",
|
|
50
|
+
...dropdownProps?.popoverProps
|
|
51
|
+
}, children: /* @__PURE__ */ jsxs(InPlaceEditableInputContainer, { className: `ds-inline-edit ${className || ""}`, style, size, disabled, error, tabIndex: 0, onMouseDown: () => setIsPressed(true), onMouseUp: () => setIsPressed(false), pressed: isPressed, dropdownOpened: isOpened, children: [
|
|
52
|
+
/* @__PURE__ */ jsx(AutosizeInput, { value: selectedValue || placeholder, placeholderIsMinWidth: false, extraWidth: 2, wrapperClassName: "autosize-input", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, style: inputStyle, id: input.name ? toCamelCase(input.name) : "id", className: "autosize-input", "data-testid": "inline-select-autosize-input", value: selectedValue || placeholder, autoComplete: "off", placeholder, disabled, onChange: NOOP }) }),
|
|
53
|
+
!hideIcon && /* @__PURE__ */ jsx(IconWrapper, { size, expanded: isOpened, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), size: 24 }) })
|
|
54
|
+
] }) });
|
|
55
|
+
};
|
|
56
|
+
export {
|
|
57
|
+
InlineSelect as default
|
|
114
58
|
};
|
|
115
|
-
export default InlineSelect;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ThemeProps } from '@synerise/ds-core';
|
|
2
2
|
type InPlaceEditableInputContainerProps = {
|
|
3
3
|
size: 'small' | 'normal';
|
|
4
4
|
disabled?: boolean;
|
|
@@ -8,10 +8,10 @@ type InPlaceEditableInputContainerProps = {
|
|
|
8
8
|
pressed: boolean;
|
|
9
9
|
dropdownOpened: boolean;
|
|
10
10
|
};
|
|
11
|
-
export declare const FontStyleWatcher: import(
|
|
12
|
-
export declare const IconWrapper: import(
|
|
11
|
+
export declare const FontStyleWatcher: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
13
13
|
size: string;
|
|
14
14
|
expanded: boolean;
|
|
15
15
|
} & ThemeProps, never>;
|
|
16
|
-
export declare const InPlaceEditableInputContainer: import(
|
|
16
|
+
export declare const InPlaceEditableInputContainer: import('styled-components').StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
|
|
17
17
|
export {};
|
|
@@ -1,69 +1,53 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import { macro } from
|
|
3
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { macro } from "@synerise/ds-typography";
|
|
3
|
+
const applyColor = (props) => {
|
|
4
4
|
if (props.error) {
|
|
5
|
-
return props.theme.palette[
|
|
5
|
+
return props.theme.palette["red-600"];
|
|
6
6
|
}
|
|
7
|
-
return props.theme.palette[
|
|
7
|
+
return props.theme.palette["blue-600"];
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
const applyColorHover = (props) => {
|
|
10
10
|
if (props.error) {
|
|
11
|
-
return props.theme.palette[
|
|
11
|
+
return props.theme.palette["red-600"];
|
|
12
12
|
}
|
|
13
|
-
return props.theme.palette[
|
|
13
|
+
return props.theme.palette["blue-500"];
|
|
14
14
|
};
|
|
15
|
-
|
|
15
|
+
const applyColorActive = (props) => {
|
|
16
16
|
if (props.error) {
|
|
17
|
-
return props.theme.palette[
|
|
17
|
+
return props.theme.palette["red-600"];
|
|
18
18
|
}
|
|
19
|
-
return props.theme.palette[
|
|
19
|
+
return props.theme.palette["blue-700"];
|
|
20
20
|
};
|
|
21
|
-
|
|
21
|
+
const applyDotsOnError = (props) => {
|
|
22
22
|
if (props.error) {
|
|
23
|
-
return
|
|
23
|
+
return `background-image: linear-gradient(to right, ${applyColor(props)} 20%, rgba(255, 255, 255, 0) 10%);
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
background-position: bottom left;
|
|
26
|
+
background-size: 5px 1px;
|
|
27
|
+
background-repeat: repeat-x;`;
|
|
24
28
|
}
|
|
25
|
-
return
|
|
29
|
+
return "";
|
|
26
30
|
};
|
|
27
|
-
|
|
31
|
+
const FontStyleWatcher = /* @__PURE__ */ styled.div.withConfig({
|
|
28
32
|
displayName: "InlineSelectstyle__FontStyleWatcher",
|
|
29
33
|
componentId: "sc-188pn99-0"
|
|
30
34
|
})(["visibility:hidden;pointer-events:none;position:absolute;"]);
|
|
31
|
-
|
|
35
|
+
const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
32
36
|
displayName: "InlineSelectstyle__IconWrapper",
|
|
33
37
|
componentId: "sc-188pn99-1"
|
|
34
|
-
})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"],
|
|
35
|
-
|
|
36
|
-
}, function (props) {
|
|
37
|
-
return props.expanded ? '180deg' : '0deg';
|
|
38
|
-
});
|
|
39
|
-
export var InPlaceEditableInputContainer = styled.div.withConfig({
|
|
38
|
+
})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], (props) => props.theme.palette.white, (props) => props.expanded ? "180deg" : "0deg");
|
|
39
|
+
const InPlaceEditableInputContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
40
40
|
displayName: "InlineSelectstyle__InPlaceEditableInputContainer",
|
|
41
41
|
componentId: "sc-188pn99-2"
|
|
42
|
-
})(["display:flex;padding-bottom:2px;max-width:100%;align-items:center;opacity:", ";pointer-events:", ";", "{margin-right:-3px;svg{color:", ";fill:", ";}}", " &&:hover{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}", " ", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", ";overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0;margin:0;vertical-align:top;font-weight:500;color:transparent;text-shadow:0 0 0 ", ";::placeholder{color:", ";}}"],
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, function (props) {
|
|
55
|
-
return applyColorHover(props);
|
|
56
|
-
}, IconWrapper, function (props) {
|
|
57
|
-
return applyColorHover(props);
|
|
58
|
-
}, function (props) {
|
|
59
|
-
return !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props));
|
|
60
|
-
}, function (props) {
|
|
61
|
-
return (props.dropdownOpened || props.pressed) && css(["&&&:active,&&&{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}"], applyColorActive(props), IconWrapper, applyColorActive(props));
|
|
62
|
-
}, FontStyleWatcher, function (_ref3) {
|
|
63
|
-
var size = _ref3.size;
|
|
64
|
-
return size === 'normal' ? macro.h500 : macro.small;
|
|
65
|
-
}, function (props) {
|
|
66
|
-
return applyColor(props);
|
|
67
|
-
}, function (props) {
|
|
68
|
-
return props.theme.palette[props.error ? 'red-600' : 'grey-400'];
|
|
69
|
-
});
|
|
42
|
+
})(["display:flex;padding-bottom:2px;max-width:100%;align-items:center;opacity:", ";pointer-events:", ";", "{margin-right:-3px;svg{color:", ";fill:", ";}}", " &&:hover{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}", " ", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", ";overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0;margin:0;vertical-align:top;font-weight:500;color:transparent;text-shadow:0 0 0 ", ";::placeholder{color:", ";}}"], ({
|
|
43
|
+
disabled
|
|
44
|
+
}) => disabled ? 0.4 : 1, ({
|
|
45
|
+
disabled
|
|
46
|
+
}) => disabled ? "none" : "all", IconWrapper, (props) => applyColor(props), (props) => applyColor(props), (props) => applyDotsOnError(props), (props) => applyColorHover(props), IconWrapper, (props) => applyColorHover(props), (props) => !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props)), (props) => (props.dropdownOpened || props.pressed) && css(["&&&:active,&&&{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}"], applyColorActive(props), IconWrapper, applyColorActive(props)), FontStyleWatcher, ({
|
|
47
|
+
size
|
|
48
|
+
}) => size === "normal" ? macro.h500 : macro.small, (props) => applyColor(props), (props) => props.theme.palette[props.error ? "red-600" : "grey-400"]);
|
|
49
|
+
export {
|
|
50
|
+
FontStyleWatcher,
|
|
51
|
+
IconWrapper,
|
|
52
|
+
InPlaceEditableInputContainer
|
|
53
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { DropdownSharedProps } from '@synerise/ds-dropdown';
|
|
3
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
4
|
+
import { InputProps } from '../InlineEdit.types';
|
|
5
5
|
export type InlineSelectProps<ItemType extends ListItemProps = ListItemProps> = {
|
|
6
6
|
size?: 'normal' | 'small';
|
|
7
7
|
tooltipTitle?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
3
|
+
import { SelectDropdownProps } from './SelectDropdown.types';
|
|
4
4
|
declare const SelectDropdown: <ItemType extends ListItemProps>({ dataSource, dropdownVisibleRows, dropdownRowHeight, onSelect, closeDropdown, style, }: SelectDropdownProps<ItemType>) => React.JSX.Element;
|
|
5
5
|
export default SelectDropdown;
|
|
@@ -1,51 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { SearchItems } from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var handleItemClick = useCallback(function (item) {
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback } from "react";
|
|
3
|
+
import { SearchItems } from "@synerise/ds-search";
|
|
4
|
+
import { DropdownWrapper, ListWrapper, StyledScrollbar, ListItem } from "./SelectDropdown.style.js";
|
|
5
|
+
const DEFAULT_ROW_HEIGHT = 32;
|
|
6
|
+
const DEFAULT_VISIBLE_ROWS = 10;
|
|
7
|
+
const SelectDropdown = ({
|
|
8
|
+
dataSource,
|
|
9
|
+
dropdownVisibleRows,
|
|
10
|
+
dropdownRowHeight,
|
|
11
|
+
onSelect,
|
|
12
|
+
closeDropdown,
|
|
13
|
+
style
|
|
14
|
+
}) => {
|
|
15
|
+
const rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
|
|
16
|
+
const rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
|
|
17
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
18
|
+
const handleItemClick = useCallback((item) => {
|
|
20
19
|
onSelect(item);
|
|
21
|
-
|
|
22
|
-
item.onClick == null || item.onClick(item);
|
|
20
|
+
item.onClick?.(item);
|
|
23
21
|
closeDropdown();
|
|
24
22
|
}, [onSelect, closeDropdown]);
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return setScrollTop(event.currentTarget.scrollTop);
|
|
32
|
-
}
|
|
33
|
-
}, /*#__PURE__*/React.createElement(SearchItems, {
|
|
34
|
-
data: dataSource,
|
|
35
|
-
itemRender: function itemRender(item) {
|
|
36
|
-
return /*#__PURE__*/React.createElement(S.ListItem, _extends({
|
|
37
|
-
key: item == null ? void 0 : item.text
|
|
38
|
-
}, item));
|
|
39
|
-
},
|
|
40
|
-
onItemClick: handleItemClick,
|
|
41
|
-
rowHeight: rowHeight,
|
|
42
|
-
height: rowCount * rowHeight,
|
|
43
|
-
visibleRows: rowCount,
|
|
44
|
-
listProps: {
|
|
45
|
-
scrollTop: scrollTop
|
|
46
|
-
},
|
|
47
|
-
width: "100%",
|
|
48
|
-
renderInMenu: false
|
|
49
|
-
}))));
|
|
23
|
+
return /* @__PURE__ */ jsx(DropdownWrapper, { style, children: /* @__PURE__ */ jsx(ListWrapper, { children: /* @__PURE__ */ jsx(StyledScrollbar, { maxHeight: rowCount * rowHeight, absolute: true, onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), children: /* @__PURE__ */ jsx(SearchItems, { data: dataSource, itemRender: (item) => /* @__PURE__ */ jsx(ListItem, { ...item }, item?.text), onItemClick: handleItemClick, rowHeight, height: rowCount * rowHeight, visibleRows: rowCount, listProps: {
|
|
24
|
+
scrollTop
|
|
25
|
+
}, width: "100%", renderInMenu: false }) }) }) });
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
SelectDropdown as default
|
|
50
29
|
};
|
|
51
|
-
export default SelectDropdown;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
export declare const DropdownWrapper: import(
|
|
4
|
-
export declare const ListWrapper: import(
|
|
5
|
-
export declare const StyledScrollbar: import(
|
|
1
|
+
import { StyledListItem } from '@synerise/ds-list-item';
|
|
2
|
+
import { ScrollbarProps } from '@synerise/ds-scrollbar';
|
|
3
|
+
export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const StyledScrollbar: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
|
|
6
6
|
export declare const ListItem: StyledListItem;
|
|
@@ -1,22 +1,27 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import DSListItem from
|
|
3
|
-
import Scrollbar from
|
|
4
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import DSListItem from "@synerise/ds-list-item";
|
|
3
|
+
import Scrollbar from "@synerise/ds-scrollbar";
|
|
4
|
+
const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
5
5
|
displayName: "SelectDropdownstyle__DropdownWrapper",
|
|
6
6
|
componentId: "sc-1c17xkc-0"
|
|
7
7
|
})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:200px;"]);
|
|
8
|
-
|
|
8
|
+
const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
9
9
|
displayName: "SelectDropdownstyle__ListWrapper",
|
|
10
10
|
componentId: "sc-1c17xkc-1"
|
|
11
|
-
})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;background:", ";"],
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
export var StyledScrollbar = styled(Scrollbar).withConfig({
|
|
11
|
+
})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;background:", ";"], ({
|
|
12
|
+
theme
|
|
13
|
+
}) => theme.palette.white);
|
|
14
|
+
const StyledScrollbar = /* @__PURE__ */ styled(Scrollbar).withConfig({
|
|
16
15
|
displayName: "SelectDropdownstyle__StyledScrollbar",
|
|
17
16
|
componentId: "sc-1c17xkc-2"
|
|
18
17
|
})(["&&{.scrollbar-container{padding-right:8px;}}"]);
|
|
19
|
-
|
|
18
|
+
const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
|
|
20
19
|
displayName: "SelectDropdownstyle__ListItem",
|
|
21
20
|
componentId: "sc-1c17xkc-3"
|
|
22
|
-
})(["min-width:auto;"]);
|
|
21
|
+
})(["min-width:auto;"]);
|
|
22
|
+
export {
|
|
23
|
+
DropdownWrapper,
|
|
24
|
+
ListItem,
|
|
25
|
+
ListWrapper,
|
|
26
|
+
StyledScrollbar
|
|
27
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
3
|
+
import { InlineSelectProps } from '../InlineSelect.types';
|
|
4
4
|
export type SelectDropdownProps<ItemType extends ListItemProps = ListItemProps> = Pick<InlineSelectProps<ItemType>, 'dataSource'> & {
|
|
5
5
|
dropdownVisibleRows?: number;
|
|
6
6
|
dropdownRowHeight?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
1
|
+
import { default as default2 } from "./InlineEdit.js";
|
|
2
|
+
import { default as default3 } from "./InlineSelect/InlineSelect.js";
|
|
3
|
+
export {
|
|
4
|
+
default3 as InlineSelect,
|
|
5
|
+
default2 as default
|
|
6
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-inline-edit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.24",
|
|
4
4
|
"description": "InlineEdit UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
39
|
-
"@synerise/ds-icon": "^1.
|
|
40
|
-
"@synerise/ds-input": "^1.6.
|
|
41
|
-
"@synerise/ds-list-item": "^1.4.
|
|
42
|
-
"@synerise/ds-scrollbar": "^1.2.
|
|
43
|
-
"@synerise/ds-search": "^1.5.
|
|
44
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
45
|
-
"@synerise/ds-typography": "^1.1.
|
|
46
|
-
"@synerise/ds-utils": "^1.
|
|
38
|
+
"@synerise/ds-dropdown": "^1.3.2",
|
|
39
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
40
|
+
"@synerise/ds-input": "^1.6.10",
|
|
41
|
+
"@synerise/ds-list-item": "^1.4.10",
|
|
42
|
+
"@synerise/ds-scrollbar": "^1.2.17",
|
|
43
|
+
"@synerise/ds-search": "^1.5.10",
|
|
44
|
+
"@synerise/ds-tooltip": "^1.4.10",
|
|
45
|
+
"@synerise/ds-typography": "^1.1.13",
|
|
46
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@synerise/ds-core": "*",
|
|
50
50
|
"react": ">=16.9.0 <= 18.3.1",
|
|
51
51
|
"styled-components": "^5.3.3"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
54
54
|
}
|