@synerise/ds-select 1.3.18 → 1.3.20

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 (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +13 -5
  3. package/dist/Select.d.ts +5 -7
  4. package/dist/Select.js +71 -86
  5. package/dist/Select.styles.d.ts +7 -7
  6. package/dist/Select.styles.js +73 -55
  7. package/dist/Select.types.d.ts +4 -4
  8. package/dist/Select.types.js +1 -1
  9. package/dist/assets/style/index-tn0RQdqM.css +0 -0
  10. package/dist/index.js +6 -3
  11. package/dist/modules.d.js +1 -1
  12. package/dist/modules.d.ts +0 -0
  13. package/package.json +8 -8
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.3.20](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.19...@synerise/ds-select@1.3.20) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-select
9
+
10
+ ## [1.3.19](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.18...@synerise/ds-select@1.3.19) (2026-03-20)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-select
13
+
6
14
  ## [1.3.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.17...@synerise/ds-select@1.3.18) (2026-03-09)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-select
package/README.md CHANGED
@@ -13,6 +13,8 @@ Based on [Ant Design Select](https://ant.design/components/select/)
13
13
  npm i @synerise/ds-select
14
14
  or
15
15
  yarn add @synerise/ds-select
16
+ or
17
+ pnpm add @synerise/ds-select
16
18
  ```
17
19
 
18
20
  ## Usage
@@ -59,20 +61,20 @@ const { Option, OptGroup } = Select;
59
61
  | defaultActiveFirstOption | Whether active first option by default | boolean | `true` |
60
62
  | defaultOpen | Initial open state of dropdown | boolean | - |
61
63
  | defaultValue | Initial selected option. | `string` / `string[]` / `number` / `number[]` / `LabeledValue` / `LabeledValue[]` | - |
62
- | description | input description | string | - |
64
+ | description | input description | ReactNode | - |
63
65
  | disabled | Whether disabled select | boolean | `false` |
64
66
  | dropdownClassName | className of dropdown menu | string | - |
65
67
  | dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | `true` |
66
68
  | dropdownMenuStyle | additional style applied to dropdown menu | React.CSSProperties | - |
67
69
  | dropdownRender | Customize dropdown content | (menuNode: React.ReactNode, props) => React.ReactNode | - |
68
70
  | dropdownStyle | style of dropdown menu | React.CSSProperties | - |
69
- | errorText | error message, if provided input will be set in error state | string | - |
71
+ | errorText | error message, if provided input will be set in error state | ReactNode | - |
70
72
  | error | if provided input will be set in error state, without error message | boolean | - |
71
73
  | filterOption | If true, filter options by input, if function, filter options against it. | boolean / (inputValue: string / number / LabeledValue, option: Option) => void | `true` |
72
74
  | firstActiveValue | Value of action option by default | string or string[] | - |
73
75
  | grey | Turn on grey background of the component | boolean | false |
74
76
  | getPopupContainer | Parent Node which the selector should be rendered to. Default to body | (triggerNode: React.ReactNode) => void | () => document.body |
75
- | label | input label | string | - |
77
+ | label | input label | ReactNode | - |
76
78
  | labelInValue | whether to embed label in value | boolean | `false` |
77
79
  | loading | indicate loading state | Boolean | `false` |
78
80
  | maxTagCount | Max tag count to show | number | - |
@@ -105,13 +107,19 @@ const { Option, OptGroup } = Select;
105
107
  | tooltip | Tooltip content | React.ReactNode | - |
106
108
  | tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
107
109
  | value | Current selected option. | `string` / `string[]` / `number` / `number[]` / `LabeledValue` / `LabeledValue[]` | - |
108
- | raw | Simple select without label, description and margins | boolean | `false` |
110
+ | asFormElement | Forces 16px bottom margin even when `errorText` and `description` are absent | boolean | - |
111
+ | clearTooltip | Tooltip text shown on hover of the clear (×) button | string | - |
112
+ | prefixel | Addon node attached to the left of the selector | React.ReactNode | - |
113
+ | raw | Skips the FormField wrapper; renders only the selector div | boolean | - |
114
+ | readOnly | Disables selection while using readable styling (white bg, default cursor, grey-600 text) | boolean | - |
115
+ | selectorStyle | Additional CSS applied to the inner `.ant-select-selector` element | CSSObject | - |
116
+ | suffixel | Addon node attached to the right of the selector | React.ReactNode | - |
109
117
 
110
118
  ### Option props
111
119
 
112
120
  | Property | Description | Type | Default |
113
121
  | --------- | -------------------------------------------------------------------------------------------------------------------------------- | ------ | ------- |
114
- | disabled | Disable this option boolean`false` | | |
122
+ | disabled | Disable this option | boolean | `false` |
115
123
  | key | Same usage as value. If React request you to set this property, you can set it to value of option, and then omit value property. | string | |
116
124
  | title | title of Select after select this Option | string | - |
117
125
  | value | default to filter with this property string | number | - |
package/dist/Select.d.ts CHANGED
@@ -1,8 +1,6 @@
1
- import AntdSelect from 'antd/lib/select';
2
- import React from 'react';
3
- import '@synerise/ds-core/dist/js/style';
4
- import './style/index.less';
5
- export declare const Select: React.ForwardRefExoticComponent<Omit<import("antd/lib/select").SelectProps<import("antd/lib/select").SelectValue, import("antd/lib/select").DefaultOptionType>, "listHeight"> & {
1
+ import { default as AntdSelect } from 'antd/lib/select';
2
+ import { default as React } from 'react';
3
+ export declare const Select: React.ForwardRefExoticComponent<Omit<import('antd/lib/select').SelectProps<import('antd/lib/select').SelectValue, import('antd/lib/select').DefaultOptionType>, "listHeight"> & {
6
4
  error?: boolean;
7
5
  clearTooltip?: string;
8
6
  prefixel?: React.ReactNode;
@@ -10,11 +8,11 @@ export declare const Select: React.ForwardRefExoticComponent<Omit<import("antd/l
10
8
  listHeight?: React.ReactText;
11
9
  grey?: boolean;
12
10
  asFormElement?: boolean;
13
- selectorStyle?: import("styled-components").CSSObject;
11
+ selectorStyle?: import('styled-components').CSSObject;
14
12
  raw?: boolean;
15
13
  readOnly?: boolean;
16
14
  disabled?: boolean;
17
- } & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & React.RefAttributes<HTMLDivElement>>;
15
+ } & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & React.RefAttributes<HTMLDivElement>>;
18
16
  type SelectCompoundComponent = typeof Select & {
19
17
  Option: typeof AntdSelect.Option;
20
18
  OptGroup: typeof AntdSelect.OptGroup;
package/dist/Select.js CHANGED
@@ -1,89 +1,74 @@
1
- var _excluded = ["label", "description", "errorText", "error", "tooltip", "tooltipConfig", "clearTooltip", "prefixel", "suffixel", "style", "size", "listHeight", "className", "getPopupContainer", "grey", "dropdownClassName", "asFormElement", "raw", "readOnly", "disabled"];
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
- import AntdSelect from 'antd/lib/select';
5
- import classNames from 'classnames';
6
- import React, { forwardRef } from 'react';
7
- import '@synerise/ds-core/dist/js/style';
8
- import FormField from '@synerise/ds-form-field';
9
- import Icon, { Close3M, CloseS } from '@synerise/ds-icon';
10
- import Tooltip from '@synerise/ds-tooltip';
11
- import { getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
12
- import * as S from './Select.styles';
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import AntdSelect$1 from "antd/lib/select";
3
+ import classNames from "classnames";
4
+ import { forwardRef } from "react";
5
+ import FormField from "@synerise/ds-form-field";
6
+ import Icon, { CloseS, Close3M } from "@synerise/ds-icon";
7
+ import Tooltip from "@synerise/ds-tooltip";
8
+ import { getPopupContainer } from "@synerise/ds-utils";
9
+ import { SelectWrapper, PrefixWrapper, AntdSelect, SuffixWrapper, SelectContainer } from "./Select.styles.js";
13
10
  import "./style/index.css";
14
- export var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
15
- var _classNames;
16
- var label = _ref.label,
17
- description = _ref.description,
18
- errorText = _ref.errorText,
19
- error = _ref.error,
20
- tooltip = _ref.tooltip,
21
- tooltipConfig = _ref.tooltipConfig,
22
- clearTooltip = _ref.clearTooltip,
23
- prefixel = _ref.prefixel,
24
- suffixel = _ref.suffixel,
25
- style = _ref.style,
26
- size = _ref.size,
27
- listHeight = _ref.listHeight,
28
- className = _ref.className,
29
- _ref$getPopupContaine = _ref.getPopupContainer,
30
- getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
31
- grey = _ref.grey,
32
- dropdownClassName = _ref.dropdownClassName,
33
- asFormElement = _ref.asFormElement,
34
- raw = _ref.raw,
35
- readOnly = _ref.readOnly,
36
- disabled = _ref.disabled,
37
- antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
38
- var hasBottomMargin = asFormElement || Boolean(errorText || description);
39
- var simpleSelect = /*#__PURE__*/React.createElement(S.SelectWrapper, {
40
- grey: grey,
41
- error: Boolean(errorText),
42
- className: classNames('ds-select-wrapper', {
43
- error: errorText || error
44
- }, (_classNames = {}, _classNames[className] = !!className, _classNames)),
45
- style: style,
46
- ref: raw ? forwardedRef : undefined
47
- }, !!prefixel && /*#__PURE__*/React.createElement(S.PrefixWrapper, null, prefixel), /*#__PURE__*/React.createElement(S.AntdSelect, _extends({
48
- dropdownAlign: {
49
- offset: [0, 8]
50
- } // STOR-588
51
- }, antdProps, {
52
- getPopupContainer: getPopupContainer,
53
- listHeight: listHeight,
54
- size: size,
55
- withPrefixel: !!prefixel,
56
- withSuffixel: !!suffixel,
57
- disabled: disabled || readOnly,
58
- readOnly: readOnly,
59
- clearIcon: /*#__PURE__*/React.createElement(Tooltip, {
60
- title: clearTooltip
61
- }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
62
- component: /*#__PURE__*/React.createElement(Close3M, null),
63
- size: size === 'small' ? 18 : 24
64
- }))),
65
- removeIcon: /*#__PURE__*/React.createElement(Icon, {
66
- component: /*#__PURE__*/React.createElement(CloseS, null)
67
- }),
68
- className: classNames({
69
- error: errorText || error
70
- }),
71
- dropdownClassName: classNames('ps__child--consume', dropdownClassName)
72
- })), !!suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel));
73
- return raw ? simpleSelect : /*#__PURE__*/React.createElement(S.SelectContainer, {
74
- className: "ds-select-container",
75
- hasBottomMargin: hasBottomMargin,
76
- ref: forwardedRef
77
- }, /*#__PURE__*/React.createElement(FormField, {
78
- errorText: errorText,
79
- description: description,
80
- label: label,
81
- tooltip: tooltip,
82
- tooltipConfig: tooltipConfig
83
- }, simpleSelect));
11
+ const Select = forwardRef(({
12
+ label,
13
+ description,
14
+ errorText,
15
+ error,
16
+ tooltip,
17
+ tooltipConfig,
18
+ clearTooltip,
19
+ prefixel,
20
+ suffixel,
21
+ style,
22
+ size,
23
+ listHeight,
24
+ className,
25
+ getPopupContainer: getPopupContainer$1 = getPopupContainer,
26
+ grey,
27
+ dropdownClassName,
28
+ asFormElement,
29
+ raw,
30
+ readOnly,
31
+ disabled,
32
+ ...antdProps
33
+ }, forwardedRef) => {
34
+ const hasBottomMargin = asFormElement || Boolean(errorText || description);
35
+ const simpleSelect = /* @__PURE__ */ jsxs(SelectWrapper, { grey, error: Boolean(errorText), className: classNames("ds-select-wrapper", {
36
+ error: errorText || error
37
+ }, {
38
+ [className]: !!className
39
+ }), style, ref: raw ? forwardedRef : void 0, children: [
40
+ !!prefixel && /* @__PURE__ */ jsx(PrefixWrapper, { children: prefixel }),
41
+ /* @__PURE__ */ jsx(
42
+ AntdSelect,
43
+ {
44
+ dropdownAlign: {
45
+ offset: [0, 8]
46
+ },
47
+ ...antdProps,
48
+ getPopupContainer: getPopupContainer$1,
49
+ listHeight,
50
+ size,
51
+ withPrefixel: !!prefixel,
52
+ withSuffixel: !!suffixel,
53
+ disabled: disabled || readOnly,
54
+ readOnly,
55
+ clearIcon: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3M, {}), size: size === "small" ? 18 : 24 }) }) }),
56
+ removeIcon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}) }),
57
+ className: classNames({
58
+ error: errorText || error
59
+ }),
60
+ dropdownClassName: classNames("ps__child--consume", dropdownClassName)
61
+ }
62
+ ),
63
+ !!suffixel && /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel })
64
+ ] });
65
+ return raw ? simpleSelect : /* @__PURE__ */ jsx(SelectContainer, { className: "ds-select-container", hasBottomMargin, ref: forwardedRef, children: /* @__PURE__ */ jsx(FormField, { errorText, description, label, tooltip, tooltipConfig, children: simpleSelect }) });
84
66
  });
85
- var SelectWithComponents = Object.assign(Select, {
86
- Option: AntdSelect.Option,
87
- OptGroup: AntdSelect.OptGroup
67
+ const SelectWithComponents = Object.assign(Select, {
68
+ Option: AntdSelect$1.Option,
69
+ OptGroup: AntdSelect$1.OptGroup
88
70
  });
89
- export default SelectWithComponents;
71
+ export {
72
+ Select,
73
+ SelectWithComponents as default
74
+ };
package/dist/Select.styles.d.ts CHANGED
@@ -1,17 +1,17 @@
1
- import type React from 'react';
2
- import { type Props } from './Select.types';
3
- export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
1
+ import { default as React } from 'react';
2
+ import { Props } from './Select.types';
3
+ export declare const SelectContainer: import('styled-components').StyledComponent<"div", any, {
4
4
  hasBottomMargin?: boolean;
5
5
  }, never>;
6
- export declare const AntdSelect: import("styled-components").StyledComponent<React.ComponentType<Props>, any, {
6
+ export declare const AntdSelect: import('styled-components').StyledComponent<React.ComponentType<Props>, any, {
7
7
  size?: string;
8
8
  withPrefixel?: boolean;
9
9
  withSuffixel?: boolean;
10
10
  readOnly?: boolean;
11
11
  }, never>;
12
- export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
13
- export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
14
- export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
12
+ export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
13
+ export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
14
+ export declare const SelectWrapper: import('styled-components').StyledComponent<"div", any, {
15
15
  error?: boolean;
16
16
  grey?: boolean;
17
17
  }, never>;
package/dist/Select.styles.js CHANGED
@@ -1,67 +1,85 @@
1
- import Select from 'antd/lib/select';
2
- import styled, { css } from 'styled-components';
3
- var errorStyle = function errorStyle(props) {
4
- return "\n border-color: " + props.theme.palette['red-600'] + ";\n box-shadow: inset 0 0 0 1px " + props.theme.palette['red-600'] + ";\n background: " + props.theme.palette['red-050'] + ";\n";
5
- };
6
- var searchIconWithCustomColor = function searchIconWithCustomColor(color) {
7
- var colorValueForSvg = color.replace(/#/, '%23');
8
- var iconWithColor = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36' >/><path fill='none' d='M0 0h24v24H0z' /><path style='fill: " + colorValueForSvg + ";' d='M10.734 17.234a6.463 6.463 0 004.03-1.41l3.721 3.722a.75.75 0 001.06-1.06l-3.72-3.722a6.494 6.494 0 10-5.09 2.47zm0-11.5a5 5 0 11-5 5 5.006 5.006 0 015-5z'/></svg>";
1
+ import AntdSelect$1 from "antd/lib/select";
2
+ import styled, { css } from "styled-components";
3
+ const errorStyle = (props) => `
4
+ border-color: ${props.theme.palette["red-600"]};
5
+ box-shadow: inset 0 0 0 1px ${props.theme.palette["red-600"]};
6
+ background: ${props.theme.palette["red-050"]};
7
+ `;
8
+ const searchIconWithCustomColor = (color) => {
9
+ const colorValueForSvg = color.replace(/#/, "%23");
10
+ const iconWithColor = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36' >/><path fill='none' d='M0 0h24v24H0z' /><path style='fill: ${colorValueForSvg};' d='M10.734 17.234a6.463 6.463 0 004.03-1.41l3.721 3.722a.75.75 0 001.06-1.06l-3.72-3.722a6.494 6.494 0 10-5.09 2.47zm0-11.5a5 5 0 11-5 5 5.006 5.006 0 015-5z'/></svg>`;
9
11
  return iconWithColor;
10
12
  };
11
- var withPrefixStyles = function withPrefixStyles() {
12
- return "\n border-top-left-radius:0;\n border-bottom-left-radius:0;\n";
13
- };
14
- var withSuffixStyles = function withSuffixStyles() {
15
- return "\n border-top-right-radius:0;\n border-bottom-right-radius:0;\n";
16
- };
17
- var addonStyles = function addonStyles(props) {
18
- return "\n display: flex;\n align-items: center;\n background: " + props.theme.palette['grey-050'] + ";\n box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-300'] + ";\n color: " + props.theme.palette['grey-500'] + ";\n font-size:13px;\n line-height: 1.39;\n ";
19
- };
20
- export var SelectContainer = styled.div.withConfig({
13
+ const withPrefixStyles = () => `
14
+ border-top-left-radius:0;
15
+ border-bottom-left-radius:0;
16
+ `;
17
+ const withSuffixStyles = () => `
18
+ border-top-right-radius:0;
19
+ border-bottom-right-radius:0;
20
+ `;
21
+ const addonStyles = (props) => `
22
+ display: flex;
23
+ align-items: center;
24
+ background: ${props.theme.palette["grey-050"]};
25
+ box-shadow: inset 0 0 0 1px ${props.theme.palette["grey-300"]};
26
+ color: ${props.theme.palette["grey-500"]};
27
+ font-size:13px;
28
+ line-height: 1.39;
29
+ `;
30
+ const SelectContainer = /* @__PURE__ */ styled.div.withConfig({
21
31
  displayName: "Selectstyles__SelectContainer",
22
32
  componentId: "sc-n9lk0v-0"
23
- })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0 0 ", "px;"], function (props) {
24
- return props.hasBottomMargin ? 16 : 0;
25
- });
26
- export var AntdSelect = styled(Select).withConfig({
33
+ })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0 0 ", "px;"], (props) => props.hasBottomMargin ? 16 : 0);
34
+ const AntdSelect = /* @__PURE__ */ styled(AntdSelect$1).withConfig({
27
35
  displayName: "Selectstyles__AntdSelect",
28
36
  componentId: "sc-n9lk0v-1"
29
- })(["", " &.ant-select-multiple{.ant-select-arrow{top:16px;}}&&{.ant-select-selector{", "}}&&&{width:100%;.ant-select-clear{height:18px;background-position:center;background-repeat:no-repeat;background-size:contain;top:50%;right:8px;transform-origin:50% 25%;display:flex;transform:translateY(-50%);align-items:center;justify-content:center;margin-top:0;}.ant-select-selector{", " ", "}span[aria-label='search']{svg{display:none;}width:24px;height:24px;background-color:rgba(0,0,0,0);background-image:", ";}}&.error{.ant-select-selector.ant-select-selector{", "}.ant-select-clear{background-color:", ";}}&&&.ant-select-disabled{.ant-select-selector.ant-select-selector{color:", ";cursor:", ";background-color:", ";}.ant-select-arrow{opacity:0.5;}}"], function (props) {
30
- return props.size === 'large' && "\n\n &.ant-select-single .ant-select-selector, \n &.ant-select-single .ant-select-selection-search-input {\n height:48px;\n }\n\n &.ant-select-single .ant-select-selection-item, \n &.ant-select-single .ant-select-selection-placeholder {\n line-height:46px;\n }\n \n &.ant-select-multiple.ant-select-lg {\n .ant-select-arrow {\n top: 23px\n }\n .ant-select-selector {\n padding: 8px;\n }\n\n .ant-select-selector::after,\n .ant-select-selection-item,\n .ant-select-selection-search,\n .ant-select-selection-search-input {\n height: 24px; \n line-height: 22px;\n }\n }\n\n ";
31
- }, function (props) {
32
- return !!props.selectorStyle && css(props.selectorStyle);
33
- }, function (props) {
34
- return !!props.withPrefixel && withPrefixStyles();
35
- }, function (props) {
36
- return !!props.withSuffixel && withSuffixStyles();
37
- }, function (props) {
38
- return "url(\"" + searchIconWithCustomColor(props.theme.palette['grey-400']) + "\")";
39
- }, function (props) {
40
- return errorStyle(props);
41
- }, function (props) {
42
- return props.theme.palette['red-050'];
43
- }, function (props) {
44
- return props.readOnly ? props.theme.palette['grey-600'] : props.theme.palette['grey-400'];
45
- }, function (props) {
46
- return props.readOnly ? 'default' : 'not-allowed';
47
- }, function (props) {
48
- return props.readOnly ? props.theme.palette.white : props.theme.palette['grey-050'];
49
- });
50
- export var PrefixWrapper = styled.div.withConfig({
37
+ })(["", " &.ant-select-multiple{.ant-select-arrow{top:16px;}}&&{.ant-select-selector{", "}}&&&{width:100%;.ant-select-clear{height:18px;background-position:center;background-repeat:no-repeat;background-size:contain;top:50%;right:8px;transform-origin:50% 25%;display:flex;transform:translateY(-50%);align-items:center;justify-content:center;margin-top:0;}.ant-select-selector{", " ", "}span[aria-label='search']{svg{display:none;}width:24px;height:24px;background-color:rgba(0,0,0,0);background-image:", ";}}&.error{.ant-select-selector.ant-select-selector{", "}.ant-select-clear{background-color:", ";}}&&&.ant-select-disabled{.ant-select-selector.ant-select-selector{color:", ";cursor:", ";background-color:", ";}.ant-select-arrow{opacity:0.5;}}"], (props) => props.size === "large" && `
38
+
39
+ &.ant-select-single .ant-select-selector,
40
+ &.ant-select-single .ant-select-selection-search-input {
41
+ height:48px;
42
+ }
43
+
44
+ &.ant-select-single .ant-select-selection-item,
45
+ &.ant-select-single .ant-select-selection-placeholder {
46
+ line-height:46px;
47
+ }
48
+
49
+ &.ant-select-multiple.ant-select-lg {
50
+ .ant-select-arrow {
51
+ top: 23px
52
+ }
53
+ .ant-select-selector {
54
+ padding: 8px;
55
+ }
56
+
57
+ .ant-select-selector::after,
58
+ .ant-select-selection-item,
59
+ .ant-select-selection-search,
60
+ .ant-select-selection-search-input {
61
+ height: 24px;
62
+ line-height: 22px;
63
+ }
64
+ }
65
+
66
+ `, (props) => !!props.selectorStyle && css(props.selectorStyle), (props) => !!props.withPrefixel && withPrefixStyles(), (props) => !!props.withSuffixel && withSuffixStyles(), (props) => `url("${searchIconWithCustomColor(props.theme.palette["grey-400"])}")`, (props) => errorStyle(props), (props) => props.theme.palette["red-050"], (props) => props.readOnly ? props.theme.palette["grey-600"] : props.theme.palette["grey-400"], (props) => props.readOnly ? "default" : "not-allowed", (props) => props.readOnly ? props.theme.palette.white : props.theme.palette["grey-050"]);
67
+ const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
51
68
  displayName: "Selectstyles__PrefixWrapper",
52
69
  componentId: "sc-n9lk0v-2"
53
- })(["border-radius:3px 0 0 3px;margin-right:-2px;padding-right:1px;", ";"], function (props) {
54
- return addonStyles(props);
55
- });
56
- export var SuffixWrapper = styled.div.withConfig({
70
+ })(["border-radius:3px 0 0 3px;margin-right:-2px;padding-right:1px;", ";"], (props) => addonStyles(props));
71
+ const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
57
72
  displayName: "Selectstyles__SuffixWrapper",
58
73
  componentId: "sc-n9lk0v-3"
59
- })(["border-radius:0 3px 3px 0;margin-left:-1px;", ";"], function (props) {
60
- return addonStyles(props);
61
- });
62
- export var SelectWrapper = styled.div.withConfig({
74
+ })(["border-radius:0 3px 3px 0;margin-left:-1px;", ";"], (props) => addonStyles(props));
75
+ const SelectWrapper = /* @__PURE__ */ styled.div.withConfig({
63
76
  displayName: "Selectstyles__SelectWrapper",
64
77
  componentId: "sc-n9lk0v-4"
65
- })(["display:flex;", ""], function (props) {
66
- return props.grey && !props.error && css(["&&&{.ant-select-selector{background-color:", ";}}"], props.theme.palette['grey-050']);
67
- });
78
+ })(["display:flex;", ""], (props) => props.grey && !props.error && css(["&&&{.ant-select-selector{background-color:", ";}}"], props.theme.palette["grey-050"]));
79
+ export {
80
+ AntdSelect,
81
+ PrefixWrapper,
82
+ SelectContainer,
83
+ SelectWrapper,
84
+ SuffixWrapper
85
+ };
package/dist/Select.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { SelectProps, SelectValue } from 'antd/lib/select';
2
- import type { ReactNode, ReactText } from 'react';
3
- import type { CSSObject } from 'styled-components';
4
- import type { FormFieldCommonProps } from '@synerise/ds-form-field';
1
+ import { SelectProps, SelectValue } from 'antd/lib/select';
2
+ import { ReactNode, ReactText } from 'react';
3
+ import { CSSObject } from 'styled-components';
4
+ import { FormFieldCommonProps } from '@synerise/ds-form-field';
5
5
  export type Props<T = SelectValue> = Omit<SelectProps<T>, 'listHeight'> & {
6
6
  error?: boolean;
7
7
  clearTooltip?: string;
package/dist/Select.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/assets/style/index-tn0RQdqM.css ADDED
File without changes
package/dist/index.js CHANGED
@@ -1,3 +1,6 @@
1
- export { default } from './Select';
2
- import * as _SelectStyles from './Select.styles';
3
- export { _SelectStyles as SelectStyles };
1
+ import { default as default2 } from "./Select.js";
2
+ import * as Select_styles from "./Select.styles.js";
3
+ export {
4
+ Select_styles as SelectStyles,
5
+ default2 as default
6
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-select",
3
- "version": "1.3.18",
3
+ "version": "1.3.20",
4
4
  "description": "Select 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": "pnpm run build:js && pnpm run build:css && pnpm run defs",
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": "pnpm run build:js -- --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,10 +35,10 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-form-field": "^1.3.8",
39
- "@synerise/ds-icon": "^1.14.1",
40
- "@synerise/ds-tooltip": "^1.4.8",
41
- "@synerise/ds-utils": "^1.6.0",
38
+ "@synerise/ds-form-field": "^1.3.10",
39
+ "@synerise/ds-icon": "^1.15.1",
40
+ "@synerise/ds-tooltip": "^1.4.10",
41
+ "@synerise/ds-utils": "^1.7.1",
42
42
  "classnames": "^2.5.1"
43
43
  },
44
44
  "peerDependencies": {
@@ -47,5 +47,5 @@
47
47
  "react": ">=16.9.0 <= 18.3.1",
48
48
  "styled-components": "^5.3.3"
49
49
  },
50
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
50
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
51
51
  }