@synerise/ds-item-picker 0.13.5 → 0.14.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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
+ # [0.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.6...@synerise/ds-item-picker@0.14.0) (2024-12-13)
7
+
8
+
9
+ ### Features
10
+
11
+ * **item-picker:** infocard props for trigger ([0916327](https://github.com/Synerise/synerise-design/commit/0916327fd34fdaf2836860953e57c510564001d5))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.13.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.5...@synerise/ds-item-picker@0.13.6) (2024-12-04)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-item-picker
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.13.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.4...@synerise/ds-item-picker@0.13.5) (2024-11-29)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-item-picker
package/README.md CHANGED
@@ -46,33 +46,34 @@ import ItemPicker from '@synerise/ds-item-picker'
46
46
 
47
47
  ## API
48
48
 
49
- | Property | Description | Type | Default |
50
- | --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------- |
51
- | dataSource | Array of items to display in menu | [MenuItemProps[]](https://design.synerise.com/docs/components/menu#menuitemprops) | - |
52
- | dropdownVisibleRows | Visible rows count displayed in the dropdown | number | 10 |
53
- | dropdownProps | Antd dropdown props | [DropdownProps](https://design.synerise.com/docs/components/dropdown#dropdown) | {} |
54
- | dropdownRowHeight | Height of the row displayed in the dropdown | number | 32 |
55
- | dropdownBottomAction? | Dropdown bottom action | React.ReactNode | - |
56
- | closeOnBottomAction? | Close dropdown when bottom action has been clicked | boolean | false |
57
- | placeholder | Placeholder text | string, React.ReactNode | - |
58
- | clear | Clear button tooltip | string, React.ReactNode | 'Remove' |
59
- | searchPlaceholder | Placeholder of SearchBar in dropdown | string | 'Search' |
60
- | onClear | Callback executed when clear icon is clicked | () => void | - |
61
- | onChange | Callback executed when item from dropdown is clicked | (item: [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops)) => void | - |
62
- | selectedItem? | Selected item data | [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops) | - |
63
- | searchBarProps? | Additional props passed to the SearchBar component | [SearchBarProps](https://design.synerise.com/docs/components/search-bar#api) | - |
64
- | size? | Size of ItemPicker component | 'small', 'large' | - |
65
- | label? | Label of component | string, React.ReactNode | - |
66
- | description? | Description of component | string, React.ReactNode | - |
67
- | placeholderIcon? | Icon visible with placeholder | React.ReactNode | - |
68
- | error? | Whether the component has error state | boolean | - |
69
- | errorMessage? | Error message | string, React.ReactNode | - |
70
- | tooltip? | Tooltip text | string, React.ReactNode | - |
71
- | disabled? | Whether the component is disabled | boolean | - |
72
- | changeButtonLabel? | Label of change button, available only when size='large' | string, React.ReactNode | 'Change' |
73
- | withClearConfirmation | Shows Popconfirm on the clear icon click | boolean | - |
74
- | clearConfirmTitle | Title of Popconfirm | string | 'Are you sure to remove this selection?' |
75
- | yesText | Label of confirm button | string | 'Yes' |
76
- | noText | Label of cancel button | string | 'No' |
77
- | noResults | No search results info | string | 'No results' |
78
- | scrollbarProps | Object with scrollbar configturaion | ScrollbarAdditionalProps | - |
49
+ | Property | Description | Type | Default |
50
+ | --------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------- |
51
+ | dataSource | Array of items to display in menu | [MenuItemProps[]](https://design.synerise.com/docs/components/menu#menuitemprops) | - |
52
+ | dropdownVisibleRows | Visible rows count displayed in the dropdown | number | 10 |
53
+ | dropdownProps | Antd dropdown props | [DropdownProps](https://design.synerise.com/docs/components/dropdown#dropdown) | {} |
54
+ | dropdownRowHeight | Height of the row displayed in the dropdown | number | 32 |
55
+ | dropdownBottomAction? | Dropdown bottom action | React.ReactNode | - |
56
+ | closeOnBottomAction? | Close dropdown when bottom action has been clicked | boolean | false |
57
+ | placeholder | Placeholder text | string, React.ReactNode | - |
58
+ | clear | Clear button tooltip | string, React.ReactNode | 'Remove' |
59
+ | searchPlaceholder | Placeholder of SearchBar in dropdown | string | 'Search' |
60
+ | onClear | Callback executed when clear icon is clicked | () => void | - |
61
+ | onChange | Callback executed when item from dropdown is clicked | (item: [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops)) => void | - |
62
+ | selectedItem? | Selected item data | [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops) | - |
63
+ | searchBarProps? | Additional props passed to the SearchBar component | [SearchBarProps](https://design.synerise.com/docs/components/search-bar#api) | - |
64
+ | size? | Size of ItemPicker component | 'small', 'large' | - |
65
+ | label? | Label of component | string, React.ReactNode | - |
66
+ | description? | Description of component | string, React.ReactNode | - |
67
+ | placeholderIcon? | Icon visible with placeholder | React.ReactNode | - |
68
+ | error? | Whether the component has error state | boolean | - |
69
+ | errorMessage? | Error message | string, React.ReactNode | - |
70
+ | tooltip? | Tooltip text | string, React.ReactNode | - |
71
+ | disabled? | Whether the component is disabled | boolean | - |
72
+ | changeButtonLabel? | Label of change button, available only when size='large' | string, React.ReactNode | 'Change' |
73
+ | withClearConfirmation | Shows Popconfirm on the clear icon click | boolean | - |
74
+ | clearConfirmTitle | Title of Popconfirm | string | 'Are you sure to remove this selection?' |
75
+ | yesText | Label of confirm button | string | 'Yes' |
76
+ | noText | Label of cancel button | string | 'No' |
77
+ | noResults | No search results info | string | 'No results' |
78
+ | scrollbarProps | Object with scrollbar configturaion | ScrollbarAdditionalProps | - |
79
+ | informationCardTooltipProps | Trigger info card config | InformationCardTooltipProps see ds-information-card | |
@@ -65,7 +65,8 @@ var ItemPicker = function ItemPicker(_ref) {
65
65
  defaultMessage: 'Yes'
66
66
  }) : _ref$yesText,
67
67
  withClearConfirmation = _ref.withClearConfirmation,
68
- scrollbarProps = _ref.scrollbarProps;
68
+ scrollbarProps = _ref.scrollbarProps,
69
+ informationCardTooltipProps = _ref.informationCardTooltipProps;
69
70
  var _useState = useState(false),
70
71
  dropdownOpened = _useState[0],
71
72
  setDropdownOpened = _useState[1];
@@ -125,9 +126,10 @@ var ItemPicker = function ItemPicker(_ref) {
125
126
  clearConfirmTitle: clearConfirmTitle,
126
127
  yesText: yesText,
127
128
  noText: noText,
128
- withClearConfirmation: Boolean(withClearConfirmation)
129
+ withClearConfirmation: Boolean(withClearConfirmation),
130
+ informationCardTooltipProps: informationCardTooltipProps
129
131
  });
130
- }, [clear, selectedItem, onClear, dropdownOpened, error, disabled, placeholderIcon, placeholder, openDropdown, closeDropdown, size, changeButtonLabel, clearConfirmTitle, yesText, noText, withClearConfirmation]);
132
+ }, [clear, selectedItem, onClear, dropdownOpened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel, withClearConfirmation, clearConfirmTitle, yesText, noText, informationCardTooltipProps]);
131
133
  return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
132
134
  className: "ds-items-picker",
133
135
  disabled: disabled
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
2
2
  import type { IntlShape } from 'react-intl';
3
3
  import type { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
4
4
  import type { DropdownProps } from '@synerise/ds-dropdown';
5
+ import type { InformationCardTooltipProps } from '@synerise/ds-information-card';
5
6
  import type { ListItemProps } from '@synerise/ds-list-item';
6
7
  import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
7
8
  export type ItemPickerSize = 'small' | 'large';
@@ -17,7 +18,7 @@ export type ItemPickerProps = {
17
18
  closeOnBottomAction?: boolean;
18
19
  description?: ReactNode;
19
20
  disabled?: boolean;
20
- dropdownBottomAction?: React.ReactNode;
21
+ dropdownBottomAction?: ReactNode;
21
22
  dropdownProps?: Partial<DropdownProps>;
22
23
  dropdownRowHeight?: number;
23
24
  dropdownVisibleRows?: number;
@@ -28,12 +29,13 @@ export type ItemPickerProps = {
28
29
  onFocus?: () => void;
29
30
  noResults?: string;
30
31
  noText?: string;
31
- placeholderIcon?: React.ReactNode;
32
+ placeholderIcon?: ReactNode;
32
33
  searchPlaceholder?: string;
33
34
  searchBarProps?: Partial<SearchBarProps>;
34
35
  selectedItem?: ListItemProps | undefined;
35
36
  size?: ItemPickerSize;
36
37
  tooltip?: ReactNode;
38
+ informationCardTooltipProps?: Omit<InformationCardTooltipProps, 'children'>;
37
39
  withClearConfirmation?: boolean;
38
40
  yesText?: string;
39
41
  scrollbarProps?: ScrollbarAdditionalProps;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { Props } from './Trigger.types';
3
- declare const Trigger: React.FC<Props>;
3
+ declare const Trigger: ({ selected, clear, onClear, opened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel, withChangeButton, clearConfirmTitle, yesText, noText, withClearConfirmation, informationCardTooltipProps, }: Props) => React.JSX.Element;
4
4
  export default Trigger;
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useMemo, useCallback } from 'react';
2
2
  import { theme } from '@synerise/ds-core';
3
3
  import Icon, { AngleDownS, Close3S, WarningFillM } from '@synerise/ds-icon';
4
4
  import Tooltip from '@synerise/ds-tooltip';
@@ -22,13 +22,14 @@ var Trigger = function Trigger(_ref) {
22
22
  clearConfirmTitle = _ref.clearConfirmTitle,
23
23
  yesText = _ref.yesText,
24
24
  noText = _ref.noText,
25
- withClearConfirmation = _ref.withClearConfirmation;
26
- var handleClear = React.useCallback(function (event) {
25
+ withClearConfirmation = _ref.withClearConfirmation,
26
+ informationCardTooltipProps = _ref.informationCardTooltipProps;
27
+ var handleClear = useCallback(function (event) {
27
28
  event.stopPropagation();
28
29
  closeDropdown();
29
30
  onClear && onClear();
30
31
  }, [onClear, closeDropdown]);
31
- var renderClear = React.useMemo(function () {
32
+ var renderClear = useMemo(function () {
32
33
  var tooltip = /*#__PURE__*/React.createElement(Tooltip, {
33
34
  title: clear
34
35
  }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
@@ -57,49 +58,52 @@ var Trigger = function Trigger(_ref) {
57
58
  }
58
59
  return null;
59
60
  }, [clear, selected, withClearConfirmation, handleClear, clearConfirmTitle, yesText, noText]);
60
- var renderAngleIcon = React.useMemo(function () {
61
+ var renderAngleIcon = useMemo(function () {
61
62
  return size === 'small' && /*#__PURE__*/React.createElement(S.AngleIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
62
63
  "data-testid": "angle-icon",
63
64
  component: /*#__PURE__*/React.createElement(AngleDownS, null),
64
65
  color: theme.palette['grey-600']
65
66
  }));
66
67
  }, [size]);
67
- var handleChangeButtonClick = React.useCallback(function (event) {
68
+ var handleChangeButtonClick = useCallback(function (event) {
68
69
  event.stopPropagation();
69
70
  openDropdown();
70
71
  }, [openDropdown]);
71
- var handleOpen = React.useCallback(function () {
72
+ var handleOpen = useCallback(function () {
72
73
  if (!selected || selected && size === 'small' && !withClearConfirmation) {
73
74
  openDropdown();
74
75
  }
75
76
  }, [selected, openDropdown, size, withClearConfirmation]);
76
- var renderChangeButton = React.useMemo(function () {
77
+ var renderChangeButton = useMemo(function () {
77
78
  return size === 'large' && withChangeButton && /*#__PURE__*/React.createElement(S.ChangeButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
78
79
  type: "ghost-primary",
79
80
  onClick: handleChangeButtonClick
80
81
  }, changeButtonLabel));
81
82
  }, [withChangeButton, changeButtonLabel, size, handleChangeButtonClick]);
82
- return /*#__PURE__*/React.createElement(S.TriggerWrapper, {
83
- tabIndex: selected ? undefined : 0,
84
- size: size,
85
- opened: opened,
86
- disabled: disabled,
87
- error: error,
88
- onClick: handleOpen,
89
- selected: Boolean(selected),
90
- clearable: Boolean(onClear && renderClear)
91
- }, /*#__PURE__*/React.createElement(S.Trigger, {
92
- size: size
93
- }, selected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Value, null, selected.prefixel && /*#__PURE__*/React.createElement(S.Prefix, {
94
- "data-testid": "value-prefixel"
95
- }, selected.prefixel), /*#__PURE__*/React.createElement(S.ValueText, null, selected.text)), renderChangeButton) : /*#__PURE__*/React.createElement(S.Placeholder, {
96
- size: size
97
- }, placeholderIcon && /*#__PURE__*/React.createElement(S.Prefix, {
98
- "data-testid": "placeholder-icon"
99
- }, /*#__PURE__*/React.createElement(Icon, {
100
- component: placeholderIcon
101
- })), placeholder)), /*#__PURE__*/React.createElement(S.IconWrapper, {
102
- size: size
103
- }, onClear && renderClear, renderAngleIcon));
83
+ var renderedTrigger = useMemo(function () {
84
+ return /*#__PURE__*/React.createElement(S.TriggerWrapper, {
85
+ tabIndex: selected ? undefined : 0,
86
+ size: size,
87
+ opened: opened,
88
+ disabled: disabled,
89
+ error: error,
90
+ onClick: handleOpen,
91
+ selected: Boolean(selected),
92
+ clearable: Boolean(onClear && renderClear)
93
+ }, /*#__PURE__*/React.createElement(S.Trigger, {
94
+ size: size
95
+ }, selected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Value, null, selected.prefixel && /*#__PURE__*/React.createElement(S.Prefix, {
96
+ "data-testid": "value-prefixel"
97
+ }, selected.prefixel), /*#__PURE__*/React.createElement(S.ValueText, null, selected.text)), renderChangeButton) : /*#__PURE__*/React.createElement(S.Placeholder, {
98
+ size: size
99
+ }, placeholderIcon && /*#__PURE__*/React.createElement(S.Prefix, {
100
+ "data-testid": "placeholder-icon"
101
+ }, /*#__PURE__*/React.createElement(Icon, {
102
+ component: placeholderIcon
103
+ })), placeholder)), /*#__PURE__*/React.createElement(S.IconWrapper, {
104
+ size: size
105
+ }, onClear && renderClear, renderAngleIcon));
106
+ }, [disabled, error, handleOpen, onClear, opened, placeholder, placeholderIcon, renderAngleIcon, renderChangeButton, renderClear, selected, size]);
107
+ return informationCardTooltipProps ? /*#__PURE__*/React.createElement(S.TriggerTooltip, informationCardTooltipProps, renderedTrigger) : renderedTrigger;
104
108
  };
105
109
  export default Trigger;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { ItemPickerSize } from '../ItemPicker.types';
2
3
  type TriggerWrapperProps = {
3
4
  opened: boolean;
@@ -24,4 +25,5 @@ export declare const Trigger: import("styled-components").StyledComponent<"div",
24
25
  export declare const TriggerWrapper: import("styled-components").StyledComponent<"div", any, TriggerWrapperProps, never>;
25
26
  export declare const ChangeButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
26
27
  export declare const ValueText: import("styled-components").StyledComponent<"span", any, {}, never>;
28
+ export declare const TriggerTooltip: import("styled-components").StyledComponent<({ triggerProps, children, style, informationCardProps, ...rest }: import("@synerise/ds-information-card").InformationCardTooltipProps) => import("react").JSX.Element, any, {}, never>;
27
29
  export {};
@@ -1,4 +1,5 @@
1
1
  import styled, { css } from 'styled-components';
2
+ import { InformationCardTooltip } from '@synerise/ds-information-card';
2
3
  var getDefaultStyles = function getDefaultStyles(props) {
3
4
  if (props.size === 'small') return "box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-400'] + ";";
4
5
  return "border: 1px dashed " + props.theme.palette['grey-400'] + ";";
@@ -76,7 +77,7 @@ export var Trigger = styled.div.withConfig({
76
77
  export var TriggerWrapper = styled.div.withConfig({
77
78
  displayName: "Triggerstyles__TriggerWrapper",
78
79
  componentId: "av8hmu-8"
79
- })(["width:100%;display:flex;cursor:", ";pointer-events:", ";flex-direction:row;align-items:center;justify-content:space-between;position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " ", " &:hover{", ";", "}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], function (props) {
80
+ })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:", ";pointer-events:", ";position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " ", " &:hover{", ";", "}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], function (props) {
80
81
  if (props.disabled) return 'not-allowed';
81
82
  if (props.selected) return 'default';
82
83
  return 'pointer';
@@ -117,4 +118,8 @@ export var ChangeButtonWrapper = styled.div.withConfig({
117
118
  export var ValueText = styled.span.withConfig({
118
119
  displayName: "Triggerstyles__ValueText",
119
120
  componentId: "av8hmu-10"
120
- })(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
121
+ })(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
122
+ export var TriggerTooltip = styled(InformationCardTooltip).withConfig({
123
+ displayName: "Triggerstyles__TriggerTooltip",
124
+ componentId: "av8hmu-11"
125
+ })(["width:100%;"]);
@@ -1,6 +1,6 @@
1
- import { ReactNode } from 'react';
2
- import { ListItemProps } from '@synerise/ds-list-item';
3
- import { ItemPickerSize } from '../ItemPicker.types';
1
+ import type { ReactNode } from 'react';
2
+ import type { ListItemProps } from '@synerise/ds-list-item';
3
+ import type { ItemPickerSize, ItemPickerProps } from '../ItemPicker.types';
4
4
  export type ItemPickerTriggerProps = {
5
5
  openDropdown: () => void;
6
6
  closeDropdown: () => void;
@@ -19,5 +19,5 @@ export type ItemPickerTriggerProps = {
19
19
  yesText: string;
20
20
  noText: string;
21
21
  withClearConfirmation: boolean;
22
- };
22
+ } & Pick<ItemPickerProps, 'informationCardTooltipProps'>;
23
23
  export type Props = ItemPickerTriggerProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-picker",
3
- "version": "0.13.5",
3
+ "version": "0.14.0",
4
4
  "description": "ItemPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,20 +34,21 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-avatar": "^0.17.23",
38
- "@synerise/ds-button": "^0.21.21",
39
- "@synerise/ds-dropdown": "^0.18.26",
37
+ "@synerise/ds-avatar": "^0.17.25",
38
+ "@synerise/ds-button": "^0.22.0",
39
+ "@synerise/ds-dropdown": "^0.18.28",
40
40
  "@synerise/ds-flag": "^0.5.3",
41
41
  "@synerise/ds-icon": "^0.68.0",
42
- "@synerise/ds-input": "^0.24.16",
43
- "@synerise/ds-list-item": "^0.5.1",
44
- "@synerise/ds-popconfirm": "^0.10.63",
45
- "@synerise/ds-result": "^0.7.16",
42
+ "@synerise/ds-information-card": "^0.7.4",
43
+ "@synerise/ds-input": "^0.24.18",
44
+ "@synerise/ds-list-item": "^0.6.0",
45
+ "@synerise/ds-popconfirm": "^0.10.64",
46
+ "@synerise/ds-result": "^0.7.17",
46
47
  "@synerise/ds-scrollbar": "^0.11.21",
47
- "@synerise/ds-search": "^0.9.21",
48
- "@synerise/ds-search-bar": "^0.7.4",
49
- "@synerise/ds-tooltip": "^0.14.51",
50
- "@synerise/ds-typography": "^0.16.8",
48
+ "@synerise/ds-search": "^0.9.22",
49
+ "@synerise/ds-search-bar": "^0.7.6",
50
+ "@synerise/ds-tooltip": "^0.14.52",
51
+ "@synerise/ds-typography": "^0.16.9",
51
52
  "@synerise/ds-utils": "^0.31.2"
52
53
  },
53
54
  "peerDependencies": {
@@ -56,5 +57,5 @@
56
57
  "react-intl": ">=3.12.0 <= 6.8",
57
58
  "styled-components": "5.0.1"
58
59
  },
59
- "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
60
+ "gitHead": "f10ff573f65d5e70b13c695abded40a3289f792f"
60
61
  }