@gobolt/genesis 0.2.18 → 0.2.19
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/dist/_virtual/index5.cjs +4 -4
- package/dist/_virtual/index5.js +4 -4
- package/dist/_virtual/index6.cjs +4 -4
- package/dist/_virtual/index6.js +4 -4
- package/dist/components/Avatar/Avatar.cjs +0 -1
- package/dist/components/Avatar/Avatar.js +0 -1
- package/dist/components/Card/__stories__/Card.stories.d.ts +0 -1
- package/dist/components/Filters/Filter.d.ts +23 -0
- package/dist/components/Filters/FilterRow.d.ts +8 -0
- package/dist/components/Filters/Filters.d.ts +8 -0
- package/dist/components/Filters/__stories__/Filters.stories.d.ts +9 -0
- package/dist/components/Filters/__tests__/Filters.test.d.ts +1 -0
- package/dist/components/Filters/index.d.ts +2 -0
- package/dist/components/Filters/styles.d.ts +26 -0
- package/dist/components/Select/MultiSelectCount.cjs +8 -4
- package/dist/components/Select/MultiSelectCount.d.ts +3 -2
- package/dist/components/Select/MultiSelectCount.js +8 -4
- package/dist/components/Select/Select.cjs +47 -18
- package/dist/components/Select/Select.d.ts +4 -2
- package/dist/components/Select/Select.js +47 -18
- package/dist/components/Select/__stories__/MultiSelectCount.stories.d.ts +1 -0
- package/dist/components/Select/__stories__/Select.stories.d.ts +1 -1
- package/dist/components/Select/styles.cjs +7 -4
- package/dist/components/Select/styles.d.ts +1 -0
- package/dist/components/Select/styles.js +7 -4
- package/dist/components/Stories/position-checker.d.ts +6 -0
- package/dist/components/Table/TableControls/PrimaryTableControlsRow.cjs +1 -1
- package/dist/components/Table/TableControls/PrimaryTableControlsRow.js +1 -1
- package/dist/components/Table/TableWithControls/TableWithControls.cjs +0 -1
- package/dist/components/Table/TableWithControls/TableWithControls.js +0 -1
- package/dist/node_modules/antd/es/typography/hooks/useCopyClick.cjs +1 -1
- package/dist/node_modules/antd/es/typography/hooks/useCopyClick.js +1 -1
- package/package.json +1 -1
package/dist/_virtual/index5.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var _commonjsHelpers = require("./_commonjsHelpers.cjs");
|
|
3
|
-
var index = require("../node_modules/
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
module.exports =
|
|
3
|
+
var index = require("../node_modules/copy-to-clipboard/index.cjs");
|
|
4
|
+
var copyToClipboardExports = index.__require();
|
|
5
|
+
var copy = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(copyToClipboardExports);
|
|
6
|
+
module.exports = copy;
|
package/dist/_virtual/index5.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
|
|
2
|
-
import { __require as
|
|
3
|
-
var
|
|
4
|
-
var
|
|
2
|
+
import { __require as requireCopyToClipboard } from "../node_modules/copy-to-clipboard/index.js";
|
|
3
|
+
var copyToClipboardExports = requireCopyToClipboard();
|
|
4
|
+
var copy = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
copy as default
|
|
7
7
|
};
|
package/dist/_virtual/index6.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var _commonjsHelpers = require("./_commonjsHelpers.cjs");
|
|
3
|
-
var index = require("../node_modules/
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
module.exports =
|
|
3
|
+
var index = require("../node_modules/debounce/index.cjs");
|
|
4
|
+
var debounceExports = /* @__PURE__ */ index.__require();
|
|
5
|
+
var debounce = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(debounceExports);
|
|
6
|
+
module.exports = debounce;
|
package/dist/_virtual/index6.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
|
|
2
|
-
import { __require as
|
|
3
|
-
var
|
|
4
|
-
var
|
|
2
|
+
import { __require as requireDebounce } from "../node_modules/debounce/index.js";
|
|
3
|
+
var debounceExports = /* @__PURE__ */ requireDebounce();
|
|
4
|
+
var debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
debounce as default
|
|
7
7
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { RangePickerProps } from 'antd/lib/date-picker';
|
|
2
|
+
export declare const FILTER_TYPE: {
|
|
3
|
+
readonly input: "input";
|
|
4
|
+
readonly select: "select";
|
|
5
|
+
readonly dateRange: "date-range";
|
|
6
|
+
readonly multiSelectCount: "multi-select-count";
|
|
7
|
+
};
|
|
8
|
+
export type Option = {
|
|
9
|
+
value: string;
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
export interface FilterProps {
|
|
13
|
+
id: string;
|
|
14
|
+
label: string;
|
|
15
|
+
type: "input" | "select" | "date-range" | "multi-select-count";
|
|
16
|
+
value: string | string[] | number | RangePickerProps["value"];
|
|
17
|
+
options?: Option[];
|
|
18
|
+
onChange: (updatedFilter: FilterProps) => void;
|
|
19
|
+
selectedValues?: string[];
|
|
20
|
+
colSpan?: number;
|
|
21
|
+
}
|
|
22
|
+
declare const Filter: ({ id, label, type, value, options, onChange, selectedValues, colSpan, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default Filter;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FilterProps } from './Filter';
|
|
3
|
+
export interface FilterRowProps {
|
|
4
|
+
filters: FilterProps[];
|
|
5
|
+
onChange?: (filters: any) => void;
|
|
6
|
+
}
|
|
7
|
+
declare const FilterRow: React.FC<FilterRowProps>;
|
|
8
|
+
export default FilterRow;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FilterProps } from './Filter';
|
|
2
|
+
import { FilterRowProps } from './FilterRow';
|
|
3
|
+
export interface FiltersProps {
|
|
4
|
+
onChange?: (newFilter: FilterProps, newFilters: FilterRowProps[]) => void;
|
|
5
|
+
filterRows: FilterRowProps[];
|
|
6
|
+
}
|
|
7
|
+
declare const Filters: ({ filterRows, onChange }: FiltersProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default Filters;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { default as Filters } from '../Filters';
|
|
3
|
+
import { FilterRowProps } from '../FilterRow';
|
|
4
|
+
declare const meta: Meta<typeof Filters>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof Filters>;
|
|
7
|
+
export declare const oneFilterRow: FilterRowProps[];
|
|
8
|
+
export declare const OneFilterRowStory: Story;
|
|
9
|
+
export declare const ThreeFilterRowsStory: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
|
|
2
|
+
interface StyledFiltersProps {
|
|
3
|
+
theme?: GenesisTheme;
|
|
4
|
+
type?: "primary" | "secondary";
|
|
5
|
+
state?: "active" | "disabled";
|
|
6
|
+
}
|
|
7
|
+
export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
|
|
8
|
+
colors: any;
|
|
9
|
+
borderRadius: any;
|
|
10
|
+
sizing: any;
|
|
11
|
+
}, type?: string, state?: string) => string;
|
|
12
|
+
export declare const StyledFilters: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFiltersProps>> & string;
|
|
13
|
+
export declare const LinkButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
|
|
14
|
+
export declare const FilterRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
|
|
15
|
+
ref?: import('react').Ref<HTMLDivElement>;
|
|
16
|
+
}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
|
|
17
|
+
export declare const FilterRowNoDivider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
|
|
18
|
+
ref?: import('react').Ref<HTMLDivElement>;
|
|
19
|
+
}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').RowProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
|
|
20
|
+
export declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').InputProps, never>> & string & Omit<({ state, size, ...rest }: import('..').InputProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
|
|
21
|
+
export declare const StyledSelect: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').SelectProps, never>> & string & Omit<({ type, state, variant, defaultValue, onChange, size, width, value, ...rest }: import('..').SelectProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
|
|
22
|
+
export declare const StyledCol: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('antd').ColProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
|
|
23
|
+
ref?: import('react').Ref<HTMLDivElement>;
|
|
24
|
+
}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').ColProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
|
|
25
|
+
export declare const HelperText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
26
|
+
export {};
|
|
@@ -6,8 +6,9 @@ const MultiSelectCount = ({
|
|
|
6
6
|
options,
|
|
7
7
|
onChange,
|
|
8
8
|
width = 320,
|
|
9
|
-
selectedValues,
|
|
10
|
-
placeholder = "0 selected"
|
|
9
|
+
selectedValues = [],
|
|
10
|
+
placeholder = "0 selected",
|
|
11
|
+
variant = "multiSelectCount"
|
|
11
12
|
}) => {
|
|
12
13
|
const renderMultiSelectValue = () => {
|
|
13
14
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -19,7 +20,7 @@ const MultiSelectCount = ({
|
|
|
19
20
|
paddingTop: "2px"
|
|
20
21
|
},
|
|
21
22
|
children: [
|
|
22
|
-
selectedValues.length,
|
|
23
|
+
(selectedValues || []).length,
|
|
23
24
|
" selected"
|
|
24
25
|
]
|
|
25
26
|
}
|
|
@@ -31,13 +32,16 @@ const MultiSelectCount = ({
|
|
|
31
32
|
options,
|
|
32
33
|
mode: "multiple",
|
|
33
34
|
value: selectedValues,
|
|
35
|
+
defaultValue: selectedValues,
|
|
34
36
|
onChange,
|
|
35
37
|
maxTagCount: 0,
|
|
36
38
|
suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
|
|
37
39
|
labelInValue: false,
|
|
38
40
|
showSearch: false,
|
|
39
41
|
maxTagPlaceholder: renderMultiSelectValue,
|
|
40
|
-
placeholder
|
|
42
|
+
placeholder,
|
|
43
|
+
variant,
|
|
44
|
+
style: { width }
|
|
41
45
|
}
|
|
42
46
|
) });
|
|
43
47
|
};
|
|
@@ -4,9 +4,10 @@ export interface MultiSelectCountProps {
|
|
|
4
4
|
label: string;
|
|
5
5
|
}[];
|
|
6
6
|
onChange: (values: string[]) => void;
|
|
7
|
-
width?: number;
|
|
7
|
+
width?: number | string;
|
|
8
8
|
selectedValues?: string[];
|
|
9
9
|
placeholder?: string;
|
|
10
|
+
variant?: "multiSelectCount" | "none";
|
|
10
11
|
}
|
|
11
|
-
declare const MultiSelectCount: ({ options, onChange, width, selectedValues, placeholder, }: MultiSelectCountProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare const MultiSelectCount: ({ options, onChange, width, selectedValues, placeholder, variant, }: MultiSelectCountProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export default MultiSelectCount;
|
|
@@ -5,8 +5,9 @@ const MultiSelectCount = ({
|
|
|
5
5
|
options,
|
|
6
6
|
onChange,
|
|
7
7
|
width = 320,
|
|
8
|
-
selectedValues,
|
|
9
|
-
placeholder = "0 selected"
|
|
8
|
+
selectedValues = [],
|
|
9
|
+
placeholder = "0 selected",
|
|
10
|
+
variant = "multiSelectCount"
|
|
10
11
|
}) => {
|
|
11
12
|
const renderMultiSelectValue = () => {
|
|
12
13
|
return /* @__PURE__ */ jsxs(
|
|
@@ -18,7 +19,7 @@ const MultiSelectCount = ({
|
|
|
18
19
|
paddingTop: "2px"
|
|
19
20
|
},
|
|
20
21
|
children: [
|
|
21
|
-
selectedValues.length,
|
|
22
|
+
(selectedValues || []).length,
|
|
22
23
|
" selected"
|
|
23
24
|
]
|
|
24
25
|
}
|
|
@@ -30,13 +31,16 @@ const MultiSelectCount = ({
|
|
|
30
31
|
options,
|
|
31
32
|
mode: "multiple",
|
|
32
33
|
value: selectedValues,
|
|
34
|
+
defaultValue: selectedValues,
|
|
33
35
|
onChange,
|
|
34
36
|
maxTagCount: 0,
|
|
35
37
|
suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
|
|
36
38
|
labelInValue: false,
|
|
37
39
|
showSearch: false,
|
|
38
40
|
maxTagPlaceholder: renderMultiSelectValue,
|
|
39
|
-
placeholder
|
|
41
|
+
placeholder,
|
|
42
|
+
variant,
|
|
43
|
+
style: { width }
|
|
40
44
|
}
|
|
41
45
|
) });
|
|
42
46
|
};
|
|
@@ -12,39 +12,68 @@ const Select = ({
|
|
|
12
12
|
defaultValue,
|
|
13
13
|
onChange,
|
|
14
14
|
size = "normal",
|
|
15
|
+
width = 320,
|
|
16
|
+
value,
|
|
15
17
|
...rest
|
|
16
18
|
}) => {
|
|
17
19
|
const { breakpoint } = useGenesis.useGenesis();
|
|
18
20
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
19
21
|
React.useEffect(() => {
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
+
const style2 = document.createElement("style");
|
|
23
|
+
style2.textContent = `
|
|
22
24
|
.ant-select-dropdown {
|
|
23
25
|
padding: 0px !important;
|
|
24
26
|
border-radius: 0px !important;
|
|
25
27
|
}
|
|
28
|
+
.ant-select-selection-placeholder {
|
|
29
|
+
inset-inline-start: 0px !important;
|
|
30
|
+
}
|
|
26
31
|
`;
|
|
27
|
-
document.head.appendChild(
|
|
32
|
+
document.head.appendChild(style2);
|
|
28
33
|
return () => {
|
|
29
|
-
document.head.removeChild(
|
|
34
|
+
document.head.removeChild(style2);
|
|
30
35
|
};
|
|
31
36
|
}, []);
|
|
32
37
|
const customDropdownRender = (menu) => /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropdown, { type, state, children: /* @__PURE__ */ jsxRuntime.jsx(styles.StyledMenuItem, { type, state, children: menu }) });
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
|
|
39
|
+
const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
|
|
40
|
+
const shiftHackStyle = {
|
|
41
|
+
display: "block",
|
|
42
|
+
position: "absolute",
|
|
43
|
+
top: totalSelected === 0 ? 0 : 12,
|
|
44
|
+
left: 0,
|
|
45
|
+
width
|
|
46
|
+
};
|
|
47
|
+
const normalStyle = {
|
|
48
|
+
display: "block",
|
|
49
|
+
position: "relative",
|
|
50
|
+
width
|
|
51
|
+
};
|
|
52
|
+
const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
styles.SelectWrapper,
|
|
35
55
|
{
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
$isFocused: isFocused,
|
|
57
|
+
type,
|
|
58
|
+
$isMultiSelectCountAtZero: isMultiSelectCountAtZero,
|
|
59
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
styles.Select,
|
|
61
|
+
{
|
|
62
|
+
...rest,
|
|
63
|
+
size,
|
|
64
|
+
defaultValue,
|
|
65
|
+
$variant: variant,
|
|
66
|
+
suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
|
|
67
|
+
dropdownRender: customDropdownRender,
|
|
68
|
+
onFocus: () => setIsFocused(true),
|
|
69
|
+
onBlur: () => setIsFocused(false),
|
|
70
|
+
onChange: (value2) => {
|
|
71
|
+
setIsFocused(false);
|
|
72
|
+
onChange == null ? void 0 : onChange(value2);
|
|
73
|
+
},
|
|
74
|
+
style: { width }
|
|
75
|
+
}
|
|
76
|
+
)
|
|
48
77
|
}
|
|
49
78
|
) });
|
|
50
79
|
};
|
|
@@ -8,10 +8,12 @@ export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
|
|
|
8
8
|
value: string;
|
|
9
9
|
label: React.ReactNode;
|
|
10
10
|
}[];
|
|
11
|
-
variant?: "simple" | "none";
|
|
11
|
+
variant?: "simple" | "none" | "multiSelectCount";
|
|
12
12
|
defaultValue?: string | string[] | number | number[] | unknown;
|
|
13
13
|
onChange?: (value: string | string[]) => void;
|
|
14
14
|
size?: "normal" | "small" | "large";
|
|
15
|
+
value?: string[] | string | number[] | number;
|
|
16
|
+
width?: number;
|
|
15
17
|
}
|
|
16
|
-
declare const Select: ({ type, state, variant, defaultValue, onChange, size, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
export default Select;
|
|
@@ -11,39 +11,68 @@ const Select = ({
|
|
|
11
11
|
defaultValue,
|
|
12
12
|
onChange,
|
|
13
13
|
size = "normal",
|
|
14
|
+
width = 320,
|
|
15
|
+
value,
|
|
14
16
|
...rest
|
|
15
17
|
}) => {
|
|
16
18
|
const { breakpoint } = useGenesis();
|
|
17
19
|
const [isFocused, setIsFocused] = React__default.useState(false);
|
|
18
20
|
useEffect(() => {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
+
const style2 = document.createElement("style");
|
|
22
|
+
style2.textContent = `
|
|
21
23
|
.ant-select-dropdown {
|
|
22
24
|
padding: 0px !important;
|
|
23
25
|
border-radius: 0px !important;
|
|
24
26
|
}
|
|
27
|
+
.ant-select-selection-placeholder {
|
|
28
|
+
inset-inline-start: 0px !important;
|
|
29
|
+
}
|
|
25
30
|
`;
|
|
26
|
-
document.head.appendChild(
|
|
31
|
+
document.head.appendChild(style2);
|
|
27
32
|
return () => {
|
|
28
|
-
document.head.removeChild(
|
|
33
|
+
document.head.removeChild(style2);
|
|
29
34
|
};
|
|
30
35
|
}, []);
|
|
31
36
|
const customDropdownRender = (menu) => /* @__PURE__ */ jsx(SelectDropdown, { type, state, children: /* @__PURE__ */ jsx(StyledMenuItem, { type, state, children: menu }) });
|
|
32
|
-
|
|
33
|
-
|
|
37
|
+
const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
|
|
38
|
+
const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
|
|
39
|
+
const shiftHackStyle = {
|
|
40
|
+
display: "block",
|
|
41
|
+
position: "absolute",
|
|
42
|
+
top: totalSelected === 0 ? 0 : 12,
|
|
43
|
+
left: 0,
|
|
44
|
+
width
|
|
45
|
+
};
|
|
46
|
+
const normalStyle = {
|
|
47
|
+
display: "block",
|
|
48
|
+
position: "relative",
|
|
49
|
+
width
|
|
50
|
+
};
|
|
51
|
+
const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
|
|
52
|
+
return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
|
|
53
|
+
SelectWrapper,
|
|
34
54
|
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
55
|
+
$isFocused: isFocused,
|
|
56
|
+
type,
|
|
57
|
+
$isMultiSelectCountAtZero: isMultiSelectCountAtZero,
|
|
58
|
+
children: /* @__PURE__ */ jsx(
|
|
59
|
+
Select$1,
|
|
60
|
+
{
|
|
61
|
+
...rest,
|
|
62
|
+
size,
|
|
63
|
+
defaultValue,
|
|
64
|
+
$variant: variant,
|
|
65
|
+
suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
|
|
66
|
+
dropdownRender: customDropdownRender,
|
|
67
|
+
onFocus: () => setIsFocused(true),
|
|
68
|
+
onBlur: () => setIsFocused(false),
|
|
69
|
+
onChange: (value2) => {
|
|
70
|
+
setIsFocused(false);
|
|
71
|
+
onChange == null ? void 0 : onChange(value2);
|
|
72
|
+
},
|
|
73
|
+
style: { width }
|
|
74
|
+
}
|
|
75
|
+
)
|
|
47
76
|
}
|
|
48
77
|
) });
|
|
49
78
|
};
|
|
@@ -4,7 +4,7 @@ declare const meta: Meta<typeof Select>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Select>;
|
|
6
6
|
export declare const Default: Story;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const DefaultSelectedValue: Story;
|
|
8
8
|
export declare const Focussed: Story;
|
|
9
9
|
export declare const Disabled: Story;
|
|
10
10
|
export declare const Simple: Story;
|
|
@@ -3,17 +3,18 @@ var styled = require("styled-components");
|
|
|
3
3
|
var index = require("../../node_modules/antd/es/select/index.cjs");
|
|
4
4
|
const SelectWrapper = styled.div`
|
|
5
5
|
position: relative;
|
|
6
|
-
border: 2px solid transparent;
|
|
6
|
+
//border: 2px solid transparent;
|
|
7
7
|
background-color: transparent;
|
|
8
8
|
border-radius: 8px;
|
|
9
|
-
padding: 1px;
|
|
9
|
+
//padding: 1px;
|
|
10
10
|
width: auto;
|
|
11
|
+
margin-top: ${({ $isMultiSelectCountAtZero }) => $isMultiSelectCountAtZero ? "-12px" : "0px"};
|
|
11
12
|
|
|
12
13
|
${({ $isFocused, theme: theme2, type = "primary" }) => $isFocused && `
|
|
13
14
|
border: 2px solid ${theme2.colors[type].focussed.ringColor};
|
|
14
15
|
background-color: transparent;
|
|
15
16
|
border-radius: 8px;
|
|
16
|
-
padding: 1px;
|
|
17
|
+
//padding: 1px;
|
|
17
18
|
`}
|
|
18
19
|
|
|
19
20
|
.ant-select-dropdown {
|
|
@@ -57,7 +58,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
|
|
|
57
58
|
min-width: 250px;
|
|
58
59
|
height: ${size === "normal" || size === "large" ? "40px" : "32px"};
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
background-color: ${colors[type][state].backgroundColor}
|
|
61
62
|
background-color: #fff;
|
|
62
63
|
|
|
63
64
|
border-radius: ${borderRadius.BorderRadiusMd}px;
|
|
@@ -107,6 +108,8 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
|
|
|
107
108
|
|
|
108
109
|
&.ant-select-selection-placeholder {
|
|
109
110
|
padding-top: 6px;
|
|
111
|
+
inset-inline-end: 0px;
|
|
112
|
+
inset-inline-start: 0px;
|
|
110
113
|
}
|
|
111
114
|
}
|
|
112
115
|
|
|
@@ -12,6 +12,7 @@ interface SelectWrapperProps {
|
|
|
12
12
|
type: keyof typeof TYPE;
|
|
13
13
|
variant?: "simple" | "none";
|
|
14
14
|
size?: "normal" | "small" | "large";
|
|
15
|
+
$isMultiSelectCountAtZero?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export declare const SelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectWrapperProps>> & string;
|
|
17
18
|
export declare const getGenesisClass: ({ colors, sizing, typography, borderRadius }: {
|
|
@@ -2,17 +2,18 @@ import styled from "styled-components";
|
|
|
2
2
|
import Select$1 from "../../node_modules/antd/es/select/index.js";
|
|
3
3
|
const SelectWrapper = styled.div`
|
|
4
4
|
position: relative;
|
|
5
|
-
border: 2px solid transparent;
|
|
5
|
+
//border: 2px solid transparent;
|
|
6
6
|
background-color: transparent;
|
|
7
7
|
border-radius: 8px;
|
|
8
|
-
padding: 1px;
|
|
8
|
+
//padding: 1px;
|
|
9
9
|
width: auto;
|
|
10
|
+
margin-top: ${({ $isMultiSelectCountAtZero }) => $isMultiSelectCountAtZero ? "-12px" : "0px"};
|
|
10
11
|
|
|
11
12
|
${({ $isFocused, theme: theme2, type = "primary" }) => $isFocused && `
|
|
12
13
|
border: 2px solid ${theme2.colors[type].focussed.ringColor};
|
|
13
14
|
background-color: transparent;
|
|
14
15
|
border-radius: 8px;
|
|
15
|
-
padding: 1px;
|
|
16
|
+
//padding: 1px;
|
|
16
17
|
`}
|
|
17
18
|
|
|
18
19
|
.ant-select-dropdown {
|
|
@@ -56,7 +57,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
|
|
|
56
57
|
min-width: 250px;
|
|
57
58
|
height: ${size === "normal" || size === "large" ? "40px" : "32px"};
|
|
58
59
|
|
|
59
|
-
|
|
60
|
+
background-color: ${colors[type][state].backgroundColor}
|
|
60
61
|
background-color: #fff;
|
|
61
62
|
|
|
62
63
|
border-radius: ${borderRadius.BorderRadiusMd}px;
|
|
@@ -106,6 +107,8 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
|
|
|
106
107
|
|
|
107
108
|
&.ant-select-selection-placeholder {
|
|
108
109
|
padding-top: 6px;
|
|
110
|
+
inset-inline-end: 0px;
|
|
111
|
+
inset-inline-start: 0px;
|
|
109
112
|
}
|
|
110
113
|
}
|
|
111
114
|
|
|
@@ -3,7 +3,7 @@ var jsxRuntime = require("react/jsx-runtime");
|
|
|
3
3
|
var index$1 = require("../../../node_modules/react-icons/hi2/index.cjs");
|
|
4
4
|
var index = require("../../../node_modules/react-icons/hi/index.cjs");
|
|
5
5
|
var index$2 = require("../../../node_modules/react-icons/fi/index.cjs");
|
|
6
|
-
var index$3 = require("../../../_virtual/
|
|
6
|
+
var index$3 = require("../../../_virtual/index6.cjs");
|
|
7
7
|
var Input = require("../../Input/Input.cjs");
|
|
8
8
|
var UtilityButton = require("../../Button/UtilityButton.cjs");
|
|
9
9
|
var Typography = require("../../Typography/Typography.cjs");
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { HiMiniAdjustmentsVertical } from "../../../node_modules/react-icons/hi2/index.js";
|
|
3
3
|
import { HiSearch, HiOutlineSortDescending, HiOutlineSortAscending } from "../../../node_modules/react-icons/hi/index.js";
|
|
4
4
|
import { FiSettings } from "../../../node_modules/react-icons/fi/index.js";
|
|
5
|
-
import debounce from "../../../_virtual/
|
|
5
|
+
import debounce from "../../../_virtual/index6.js";
|
|
6
6
|
import Input from "../../Input/Input.js";
|
|
7
7
|
import UtilityButton from "../../Button/UtilityButton.js";
|
|
8
8
|
import Typography from "../../Typography/Typography.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var React = require("react");
|
|
3
|
-
var index = require("../../../../../_virtual/
|
|
3
|
+
var index = require("../../../../../_virtual/index5.cjs");
|
|
4
4
|
var useEvent = require("../../../../rc-util/es/hooks/useEvent.cjs");
|
|
5
5
|
var toList = require("../../_util/toList.cjs");
|
|
6
6
|
function _interopNamespaceDefault(e) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import copy from "../../../../../_virtual/
|
|
2
|
+
import copy from "../../../../../_virtual/index5.js";
|
|
3
3
|
import useEvent from "../../../../rc-util/es/hooks/useEvent.js";
|
|
4
4
|
import toList from "../../_util/toList.js";
|
|
5
5
|
var __awaiter = function(thisArg, _arguments, P, generator) {
|