@remember-web/primitive 0.5.1 → 0.5.3
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/src/Chips/Chip/const.cjs.js +17 -0
- package/dist/src/Chips/Chip/const.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/const.d.ts +8 -0
- package/dist/src/Chips/Chip/const.d.ts.map +1 -1
- package/dist/src/Chips/Chip/const.esm.js +17 -1
- package/dist/src/Chips/Chip/const.esm.js.map +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js +5 -5
- package/dist/src/Chips/Chip/styles.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/styles.d.ts.map +1 -1
- package/dist/src/Chips/Chip/styles.esm.js +5 -5
- package/dist/src/Chips/Chip/styles.esm.js.map +1 -1
- package/dist/src/Chips/Chip/typeGuard.cjs.js +4 -3
- package/dist/src/Chips/Chip/typeGuard.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/typeGuard.d.ts.map +1 -1
- package/dist/src/Chips/Chip/typeGuard.esm.js +4 -3
- package/dist/src/Chips/Chip/typeGuard.esm.js.map +1 -1
- package/dist/src/Chips/Chip/types.d.ts +1 -1
- package/dist/src/Chips/Chip/types.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.cjs.js +20 -11
- package/dist/src/Floating/DropdownMenu/index.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.d.ts +1 -1
- package/dist/src/Floating/DropdownMenu/index.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/index.esm.js +20 -11
- package/dist/src/Floating/DropdownMenu/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Chips/Chip/Chip.stories.tsx +15 -18
- package/src/Chips/Chip/const.ts +45 -7
- package/src/Chips/Chip/styles.ts +6 -2
- package/src/Chips/Chip/typeGuard.ts +4 -4
- package/src/Chips/Chip/types.ts +1 -1
- package/src/Floating/DropdownMenu/index.tsx +19 -12
|
@@ -22,6 +22,17 @@ var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
|
22
22
|
padding: '6px 14px',
|
|
23
23
|
height: '30px'
|
|
24
24
|
};
|
|
25
|
+
var LARGE_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
26
|
+
typography: 'UIBody2',
|
|
27
|
+
padding: '6px 12px',
|
|
28
|
+
height: '34px'
|
|
29
|
+
};
|
|
30
|
+
var LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
31
|
+
typography: 'UIBody2',
|
|
32
|
+
padding: '7px 13px',
|
|
33
|
+
height: '34px'
|
|
34
|
+
};
|
|
35
|
+
var CHIP_SIZES = ['small', 'medium', 'large'];
|
|
25
36
|
var CHIP_SIZE_STYLE = {
|
|
26
37
|
small: {
|
|
27
38
|
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
@@ -32,6 +43,11 @@ var CHIP_SIZE_STYLE = {
|
|
|
32
43
|
filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
33
44
|
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
34
45
|
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
|
|
46
|
+
},
|
|
47
|
+
large: {
|
|
48
|
+
filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
49
|
+
outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
|
|
50
|
+
dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE
|
|
35
51
|
}
|
|
36
52
|
};
|
|
37
53
|
var CHIP_VARIANT_STYLE = {
|
|
@@ -143,6 +159,7 @@ var CHIP_VARIANT_STYLE = {
|
|
|
143
159
|
}
|
|
144
160
|
};
|
|
145
161
|
|
|
162
|
+
exports.CHIP_SIZES = CHIP_SIZES;
|
|
146
163
|
exports.CHIP_SIZE_STYLE = CHIP_SIZE_STYLE;
|
|
147
164
|
exports.CHIP_VARIANT_STYLE = CHIP_VARIANT_STYLE;
|
|
148
165
|
//# sourceMappingURL=const.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type {
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type {\n ChipSize,\n ChipSizeStyle,\n ChipState,\n ChipVariant,\n ChipVariantStyleMap,\n} from './types';\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nconst LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody2',\n padding: '6px 12px',\n height: '34px',\n};\n\nconst LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody2',\n padding: '7px 13px',\n height: '34px',\n};\n\nexport const CHIP_SIZES = [\n 'small',\n 'medium',\n 'large',\n] as const satisfies readonly ChipSize[];\nexport const CHIP_VARIANTS = [\n 'filled',\n 'outline',\n 'dashedLine',\n] as const satisfies readonly ChipVariant[];\nexport const CHIP_STATES = [\n 'default',\n 'hover',\n 'disabled',\n 'selected',\n] as const satisfies readonly ChipState[];\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n large: {\n filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","LARGE_WITH_BORDER_CHIP_SIZE_STYE","LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZES","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","large","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { ChipSizeStyle, ChipVariantStyleMap } from './types';
|
|
2
|
+
export declare const CHIP_SIZES: readonly ["small", "medium", "large"];
|
|
3
|
+
export declare const CHIP_VARIANTS: readonly ["filled", "outline", "dashedLine"];
|
|
4
|
+
export declare const CHIP_STATES: readonly ["default", "hover", "disabled", "selected"];
|
|
2
5
|
export declare const CHIP_SIZE_STYLE: {
|
|
3
6
|
readonly small: {
|
|
4
7
|
readonly filled: ChipSizeStyle;
|
|
@@ -10,6 +13,11 @@ export declare const CHIP_SIZE_STYLE: {
|
|
|
10
13
|
readonly outline: ChipSizeStyle;
|
|
11
14
|
readonly dashedLine: ChipSizeStyle;
|
|
12
15
|
};
|
|
16
|
+
readonly large: {
|
|
17
|
+
readonly filled: ChipSizeStyle;
|
|
18
|
+
readonly outline: ChipSizeStyle;
|
|
19
|
+
readonly dashedLine: ChipSizeStyle;
|
|
20
|
+
};
|
|
13
21
|
};
|
|
14
22
|
export declare const CHIP_VARIANT_STYLE: ChipVariantStyleMap;
|
|
15
23
|
//# sourceMappingURL=const.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAEV,aAAa,EAGb,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAsCjB,eAAO,MAAM,UAAU,uCAIiB,CAAC;AACzC,eAAO,MAAM,aAAa,8CAIiB,CAAC;AAC5C,eAAO,MAAM,WAAW,uDAKiB,CAAC;AAE1C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgB6C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}
|
|
@@ -20,6 +20,17 @@ var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
|
20
20
|
padding: '6px 14px',
|
|
21
21
|
height: '30px'
|
|
22
22
|
};
|
|
23
|
+
var LARGE_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
24
|
+
typography: 'UIBody2',
|
|
25
|
+
padding: '6px 12px',
|
|
26
|
+
height: '34px'
|
|
27
|
+
};
|
|
28
|
+
var LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
29
|
+
typography: 'UIBody2',
|
|
30
|
+
padding: '7px 13px',
|
|
31
|
+
height: '34px'
|
|
32
|
+
};
|
|
33
|
+
var CHIP_SIZES = ['small', 'medium', 'large'];
|
|
23
34
|
var CHIP_SIZE_STYLE = {
|
|
24
35
|
small: {
|
|
25
36
|
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
@@ -30,6 +41,11 @@ var CHIP_SIZE_STYLE = {
|
|
|
30
41
|
filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
31
42
|
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
32
43
|
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
|
|
44
|
+
},
|
|
45
|
+
large: {
|
|
46
|
+
filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
47
|
+
outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
|
|
48
|
+
dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE
|
|
33
49
|
}
|
|
34
50
|
};
|
|
35
51
|
var CHIP_VARIANT_STYLE = {
|
|
@@ -141,5 +157,5 @@ var CHIP_VARIANT_STYLE = {
|
|
|
141
157
|
}
|
|
142
158
|
};
|
|
143
159
|
|
|
144
|
-
export { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE };
|
|
160
|
+
export { CHIP_SIZES, CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE };
|
|
145
161
|
//# sourceMappingURL=const.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type {
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type {\n ChipSize,\n ChipSizeStyle,\n ChipState,\n ChipVariant,\n ChipVariantStyleMap,\n} from './types';\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nconst LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody2',\n padding: '6px 12px',\n height: '34px',\n};\n\nconst LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n typography: 'UIBody2',\n padding: '7px 13px',\n height: '34px',\n};\n\nexport const CHIP_SIZES = [\n 'small',\n 'medium',\n 'large',\n] as const satisfies readonly ChipSize[];\nexport const CHIP_VARIANTS = [\n 'filled',\n 'outline',\n 'dashedLine',\n] as const satisfies readonly ChipVariant[];\nexport const CHIP_STATES = [\n 'default',\n 'hover',\n 'disabled',\n 'selected',\n] as const satisfies readonly ChipState[];\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n large: {\n filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","LARGE_WITH_BORDER_CHIP_SIZE_STYE","LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZES","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","large","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
15
15
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
16
16
|
|
|
17
17
|
var _excluded = ["$size", "$variant", "$clickable"];
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
19
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
21
|
var getVariantStyles = function getVariantStyles(props) {
|
|
@@ -26,20 +26,20 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
26
26
|
var getStateStyle = function getStateStyle(state) {
|
|
27
27
|
return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), _const.CHIP_VARIANT_STYLE[$variant][state].backgroundColor, _const.CHIP_VARIANT_STYLE[$variant][state].color, _const.CHIP_VARIANT_STYLE[$variant][state].border || 'none', _const.CHIP_VARIANT_STYLE[$variant][state].leftIconColor, _const.CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
28
28
|
};
|
|
29
|
-
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", "
|
|
29
|
+
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", "\n "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected && styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n &:not([data-chip-disabled=\"true\"]) {\n ", " \n }"])), getStateStyle('selected'))), getStateStyle('disabled'));
|
|
30
30
|
};
|
|
31
|
-
var StyledChip = styled__default.default.div(
|
|
31
|
+
var StyledChip = styled__default.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n ", "\n"])), function (_ref) {
|
|
32
32
|
var $size = _ref.$size,
|
|
33
33
|
$variant = _ref.$variant,
|
|
34
34
|
_ref$$clickable = _ref.$clickable,
|
|
35
35
|
$clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
|
|
36
36
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
37
|
-
return styled.css(
|
|
37
|
+
return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', _const.CHIP_SIZE_STYLE[$size][$variant].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
|
|
38
38
|
$variant: $variant,
|
|
39
39
|
$clickable: $clickable
|
|
40
40
|
}, props)));
|
|
41
41
|
});
|
|
42
|
-
var ButtonWrapper = styled__default.default.button(
|
|
42
|
+
var ButtonWrapper = styled__default.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n "])));
|
|
43
43
|
|
|
44
44
|
exports.ButtonWrapper = ButtonWrapper;
|
|
45
45
|
exports.StyledChip = StyledChip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${\n $selected &&\n css`\n &:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }`\n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","_templateObject4","StyledChip","styled","div","_templateObject5","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject6","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject7"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;AA+CzD,eAAO,MAAM,UAAU,2NAuBtB,CAAC;AAEF,eAAO,MAAM,aAAa,4NAMvB,CAAC"}
|
|
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
|
|
|
6
6
|
import { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const.esm.js';
|
|
7
7
|
|
|
8
8
|
var _excluded = ["$size", "$variant", "$clickable"];
|
|
9
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
9
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
10
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
12
|
var getVariantStyles = function getVariantStyles(props) {
|
|
@@ -17,20 +17,20 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
17
17
|
var getStateStyle = function getStateStyle(state) {
|
|
18
18
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), CHIP_VARIANT_STYLE[$variant][state].backgroundColor, CHIP_VARIANT_STYLE[$variant][state].color, CHIP_VARIANT_STYLE[$variant][state].border || 'none', CHIP_VARIANT_STYLE[$variant][state].leftIconColor, CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
19
19
|
};
|
|
20
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", "
|
|
20
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", "\n "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &:not([data-chip-disabled=\"true\"]) {\n ", " \n }"])), getStateStyle('selected'))), getStateStyle('disabled'));
|
|
21
21
|
};
|
|
22
|
-
var StyledChip = styled.div(
|
|
22
|
+
var StyledChip = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref) {
|
|
23
23
|
var $size = _ref.$size,
|
|
24
24
|
$variant = _ref.$variant,
|
|
25
25
|
_ref$$clickable = _ref.$clickable,
|
|
26
26
|
$clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
|
|
27
27
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
-
return css(
|
|
28
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', CHIP_SIZE_STYLE[$size][$variant].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
|
|
29
29
|
$variant: $variant,
|
|
30
30
|
$clickable: $clickable
|
|
31
31
|
}, props)));
|
|
32
32
|
});
|
|
33
|
-
var ButtonWrapper = styled.button(
|
|
33
|
+
var ButtonWrapper = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n "])));
|
|
34
34
|
|
|
35
35
|
export { ButtonWrapper, StyledChip };
|
|
36
36
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${\n $selected &&\n css`\n &:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }`\n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","_templateObject4","StyledChip","styled","div","_templateObject5","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject6","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject7"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _const = require('./const.cjs.js');
|
|
4
|
+
|
|
3
5
|
function ensureValidChipProps(props) {
|
|
4
6
|
if (props.clickable === false && 'selected' in props) {
|
|
5
7
|
throw new Error('오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' + '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.');
|
|
@@ -16,9 +18,8 @@ function ensureValidChipProps(props) {
|
|
|
16
18
|
if (!props.variant) {
|
|
17
19
|
throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
|
|
18
20
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(validSizes.join(', '), "."));
|
|
21
|
+
if (props.size && !_const.CHIP_SIZES.includes(props.size)) {
|
|
22
|
+
throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(_const.CHIP_SIZES.join(', '), "."));
|
|
22
23
|
}
|
|
23
24
|
var validVariants = ['filled', 'outline', 'dashedLine'];
|
|
24
25
|
if (props.variant && !validVariants.includes(props.variant)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typeGuard.cjs.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import type { ChipProps,
|
|
1
|
+
{"version":3,"file":"typeGuard.cjs.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import { CHIP_SIZES } from './const';\nimport type { ChipProps, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n if (props.clickable === false && 'selected' in props) {\n throw new Error(\n '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n );\n }\n\n if (props.onDelete === undefined && 'deleteIcon' in props) {\n throw new Error(\n '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n );\n }\n\n if (!props.children) {\n throw new Error(\n '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n );\n }\n\n if (!props.size) {\n throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n }\n\n if (!props.variant) {\n throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n }\n\n if (props.size && !CHIP_SIZES.includes(props.size)) {\n throw new Error(\n `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n `유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`\n );\n }\n\n const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n if (props.variant && !validVariants.includes(props.variant)) {\n throw new Error(\n `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n );\n }\n return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","CHIP_SIZES","includes","concat","join","validVariants"],"mappings":";;;;AAGO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAIF,KAAK,CAACM,IAAI,IAAI,CAACE,iBAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,iBAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typeGuard.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"typeGuard.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,SAAS,CAAC;AAEtD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,IAAI,SAAS,CA4CzE"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { CHIP_SIZES } from './const.esm.js';
|
|
2
|
+
|
|
1
3
|
function ensureValidChipProps(props) {
|
|
2
4
|
if (props.clickable === false && 'selected' in props) {
|
|
3
5
|
throw new Error('오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' + '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.');
|
|
@@ -14,9 +16,8 @@ function ensureValidChipProps(props) {
|
|
|
14
16
|
if (!props.variant) {
|
|
15
17
|
throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
|
|
16
18
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(validSizes.join(', '), "."));
|
|
19
|
+
if (props.size && !CHIP_SIZES.includes(props.size)) {
|
|
20
|
+
throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(CHIP_SIZES.join(', '), "."));
|
|
20
21
|
}
|
|
21
22
|
var validVariants = ['filled', 'outline', 'dashedLine'];
|
|
22
23
|
if (props.variant && !validVariants.includes(props.variant)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typeGuard.esm.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import type { ChipProps,
|
|
1
|
+
{"version":3,"file":"typeGuard.esm.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import { CHIP_SIZES } from './const';\nimport type { ChipProps, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n if (props.clickable === false && 'selected' in props) {\n throw new Error(\n '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n );\n }\n\n if (props.onDelete === undefined && 'deleteIcon' in props) {\n throw new Error(\n '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n );\n }\n\n if (!props.children) {\n throw new Error(\n '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n );\n }\n\n if (!props.size) {\n throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n }\n\n if (!props.variant) {\n throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n }\n\n if (props.size && !CHIP_SIZES.includes(props.size)) {\n throw new Error(\n `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n `유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`\n );\n }\n\n const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n if (props.variant && !validVariants.includes(props.variant)) {\n throw new Error(\n `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n );\n }\n return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","CHIP_SIZES","includes","concat","join","validVariants"],"mappings":";;AAGO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAIF,KAAK,CAACM,IAAI,IAAI,CAACE,UAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,UAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TypographyStyle } from '@remember-web/mixin';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
|
-
export type ChipSize = 'small' | 'medium';
|
|
3
|
+
export type ChipSize = 'small' | 'medium' | 'large';
|
|
4
4
|
export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
|
|
5
5
|
type ClickableProps = {
|
|
6
6
|
clickable?: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
5
|
var RadixPopover = require('@radix-ui/react-popover');
|
|
6
|
+
var react = require('react');
|
|
6
7
|
var styles = require('./styles.cjs.js');
|
|
7
8
|
var index = require('../Popover/index.cjs.js');
|
|
8
9
|
var DropdownMenuSection = require('./DropdownMenuSection.cjs.js');
|
|
@@ -40,22 +41,30 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
40
41
|
* @see Popover
|
|
41
42
|
*/
|
|
42
43
|
var DropdownMenu = Object.assign(RadixPopover__namespace.Root.bind(null), {
|
|
43
|
-
Content: function
|
|
44
|
-
var _props$
|
|
44
|
+
Content: /*#__PURE__*/react.forwardRef(function (_ref, ref) {
|
|
45
|
+
var _props$style2;
|
|
45
46
|
var _ref$isInsideCloseabl = _ref.isInsideCloseable,
|
|
46
47
|
isInsideCloseable = _ref$isInsideCloseabl === void 0 ? false : _ref$isInsideCloseabl,
|
|
47
48
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
children: /*#__PURE__*/jsxRuntime.jsx(styles.
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
if (isInsideCloseable) {
|
|
50
|
+
var _props$style;
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsx(RadixPopover__namespace.Close, {
|
|
52
|
+
asChild: true,
|
|
53
|
+
children: /*#__PURE__*/jsxRuntime.jsx(styles.StyledDropdownMenuContentWrapper, {
|
|
54
|
+
$zIndex: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.zIndex,
|
|
55
|
+
children: /*#__PURE__*/jsxRuntime.jsx(styles.StyledDropdownMenuContent, _objectSpread({
|
|
56
|
+
ref: ref
|
|
57
|
+
}, props))
|
|
58
|
+
})
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
return /*#__PURE__*/jsxRuntime.jsx(styles.StyledDropdownMenuContentWrapper, {
|
|
55
62
|
$zIndex: (_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.zIndex,
|
|
56
|
-
children: /*#__PURE__*/jsxRuntime.jsx(styles.StyledDropdownMenuContent, _objectSpread({
|
|
63
|
+
children: /*#__PURE__*/jsxRuntime.jsx(styles.StyledDropdownMenuContent, _objectSpread({
|
|
64
|
+
ref: ref
|
|
65
|
+
}, props))
|
|
57
66
|
});
|
|
58
|
-
},
|
|
67
|
+
}),
|
|
59
68
|
Arrow: index.Arrow,
|
|
60
69
|
Trigger: index.Trigger,
|
|
61
70
|
Portal: index.Portal,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef } from 'react';\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuContentWrapper,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\nimport Popover from '@/Floating/Popover';\nimport { DropdownMenuSection } from './DropdownMenuSection';\n\nexport interface DropdownContentProps extends PopoverContentProps {}\nexport interface DropdownMenuProps extends PopoverProps {}\n/**\n * Popover에 DropdownMenu Parts들을 추가한 컴포넌트\n * @see Popover\n */\nconst DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {\n Content: forwardRef<\n React.ElementRef<typeof StyledDropdownMenuContent>,\n DropdownContentProps\n >(({ isInsideCloseable = false, ...props }: DropdownContentProps, ref) => {\n if (isInsideCloseable) {\n return (\n <RadixPopover.Close asChild>\n <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>\n <StyledDropdownMenuContent ref={ref} {...props} />\n </StyledDropdownMenuContentWrapper>\n </RadixPopover.Close>\n );\n }\n\n return (\n <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>\n <StyledDropdownMenuContent ref={ref} {...props} />\n </StyledDropdownMenuContentWrapper>\n );\n }),\n Arrow: Popover.Arrow,\n Trigger: Popover.Trigger,\n Portal: Popover.Portal,\n Anchor: Popover.Anchor,\n Close: Popover.Close,\n Section: DropdownMenuSection,\n Item: StyledDropdownMenuItem,\n});\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","Object","assign","RadixPopover","Root","bind","Content","forwardRef","_ref","ref","_props$style2","_ref$isInsideCloseabl","isInsideCloseable","props","_objectWithoutProperties","_excluded","_props$style","_jsx","Close","asChild","children","StyledDropdownMenuContentWrapper","$zIndex","style","zIndex","StyledDropdownMenuContent","_objectSpread","Arrow","Popover","Trigger","Portal","Anchor","Section","DropdownMenuSection","Item","StyledDropdownMenuItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,uBAAY,CAACC,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC/DC,EAAAA,OAAO,eAAEC,gBAAU,CAGjB,UAAAC,IAAA,EAAgEC,GAAG,EAAK;AAAA,IAAA,IAAAC,aAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAH,IAAA,CAArEI,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;AAAKE,MAAAA,KAAK,GAAAC,yCAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AACtC,IAAA,IAAIH,iBAAiB,EAAE;AAAA,MAAA,IAAAI,YAAA;AACrB,MAAA,oBACEC,cAAA,CAACd,uBAAY,CAACe,KAAK,EAAA;QAACC,OAAO,EAAA,IAAA;QAAAC,QAAA,eACzBH,cAAA,CAACI,uCAAgC,EAAA;UAACC,OAAO,EAAA,CAAAN,YAAA,GAAEH,KAAK,CAACU,KAAK,MAAA,IAAA,IAAAP,YAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,YAAA,CAAaQ,MAAO;AAAAJ,UAAAA,QAAA,eAC7DH,cAAA,CAACQ,gCAAyB,EAAAC,aAAA,CAAA;AAACjB,YAAAA,GAAG,EAAEA;AAAI,WAAA,EAAKI,KAAK,CAAG;SACjB;AAAC,OACjB,CAAC;AAEzB;IAEA,oBACEI,cAAA,CAACI,uCAAgC,EAAA;MAACC,OAAO,EAAA,CAAAZ,aAAA,GAAEG,KAAK,CAACU,KAAK,MAAA,IAAA,IAAAb,aAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,aAAA,CAAac,MAAO;AAAAJ,MAAAA,QAAA,eAC7DH,cAAA,CAACQ,gCAAyB,EAAAC,aAAA,CAAA;AAACjB,QAAAA,GAAG,EAAEA;AAAI,OAAA,EAAKI,KAAK,CAAG;AAAC,KAClB,CAAC;AAEvC,GAAC,CAAC;EACFc,KAAK,EAAEC,KAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,KAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,KAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,KAAO,CAACG,MAAM;EACtBb,KAAK,EAAEU,KAAO,CAACV,KAAK;AACpBc,EAAAA,OAAO,EAAEC,uCAAmB;AAC5BC,EAAAA,IAAI,EAAEC;AACR,CAAC;;;;"}
|
|
@@ -10,7 +10,7 @@ export interface DropdownMenuProps extends PopoverProps {
|
|
|
10
10
|
* @see Popover
|
|
11
11
|
*/
|
|
12
12
|
declare const DropdownMenu: import("react").FC<RadixPopover.PopoverProps> & {
|
|
13
|
-
Content: (
|
|
13
|
+
Content: import("react").ForwardRefExoticComponent<DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
14
|
Arrow: import("react").ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
15
15
|
Trigger: (props: RadixPopover.PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
Portal: import("react").FC<RadixPopover.PopoverPortalProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAOxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAOxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI5E,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB;CAAG;AACpE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;CAAG;AAC1D;;;GAGG;AACH,QAAA,MAAM,YAAY;;;;;;;;;;;;;CA4BhB,CAAC;AAEH,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
3
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
4
5
|
import { StyledDropdownMenuItem, StyledDropdownMenuContentWrapper, StyledDropdownMenuContent } from './styles.esm.js';
|
|
5
6
|
import Popover from '../Popover/index.esm.js';
|
|
6
7
|
import { DropdownMenuSection } from './DropdownMenuSection.esm.js';
|
|
@@ -14,22 +15,30 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
14
15
|
* @see Popover
|
|
15
16
|
*/
|
|
16
17
|
var DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
|
|
17
|
-
Content: function
|
|
18
|
-
var _props$
|
|
18
|
+
Content: /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
19
|
+
var _props$style2;
|
|
19
20
|
var _ref$isInsideCloseabl = _ref.isInsideCloseable,
|
|
20
21
|
isInsideCloseable = _ref$isInsideCloseabl === void 0 ? false : _ref$isInsideCloseabl,
|
|
21
22
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
children: /*#__PURE__*/jsx(
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
if (isInsideCloseable) {
|
|
24
|
+
var _props$style;
|
|
25
|
+
return /*#__PURE__*/jsx(RadixPopover.Close, {
|
|
26
|
+
asChild: true,
|
|
27
|
+
children: /*#__PURE__*/jsx(StyledDropdownMenuContentWrapper, {
|
|
28
|
+
$zIndex: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.zIndex,
|
|
29
|
+
children: /*#__PURE__*/jsx(StyledDropdownMenuContent, _objectSpread({
|
|
30
|
+
ref: ref
|
|
31
|
+
}, props))
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
return /*#__PURE__*/jsx(StyledDropdownMenuContentWrapper, {
|
|
29
36
|
$zIndex: (_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.zIndex,
|
|
30
|
-
children: /*#__PURE__*/jsx(StyledDropdownMenuContent, _objectSpread({
|
|
37
|
+
children: /*#__PURE__*/jsx(StyledDropdownMenuContent, _objectSpread({
|
|
38
|
+
ref: ref
|
|
39
|
+
}, props))
|
|
31
40
|
});
|
|
32
|
-
},
|
|
41
|
+
}),
|
|
33
42
|
Arrow: Popover.Arrow,
|
|
34
43
|
Trigger: Popover.Trigger,
|
|
35
44
|
Portal: Popover.Portal,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef } from 'react';\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuContentWrapper,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\nimport Popover from '@/Floating/Popover';\nimport { DropdownMenuSection } from './DropdownMenuSection';\n\nexport interface DropdownContentProps extends PopoverContentProps {}\nexport interface DropdownMenuProps extends PopoverProps {}\n/**\n * Popover에 DropdownMenu Parts들을 추가한 컴포넌트\n * @see Popover\n */\nconst DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {\n Content: forwardRef<\n React.ElementRef<typeof StyledDropdownMenuContent>,\n DropdownContentProps\n >(({ isInsideCloseable = false, ...props }: DropdownContentProps, ref) => {\n if (isInsideCloseable) {\n return (\n <RadixPopover.Close asChild>\n <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>\n <StyledDropdownMenuContent ref={ref} {...props} />\n </StyledDropdownMenuContentWrapper>\n </RadixPopover.Close>\n );\n }\n\n return (\n <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>\n <StyledDropdownMenuContent ref={ref} {...props} />\n </StyledDropdownMenuContentWrapper>\n );\n }),\n Arrow: Popover.Arrow,\n Trigger: Popover.Trigger,\n Portal: Popover.Portal,\n Anchor: Popover.Anchor,\n Close: Popover.Close,\n Section: DropdownMenuSection,\n Item: StyledDropdownMenuItem,\n});\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","Object","assign","RadixPopover","Root","bind","Content","forwardRef","_ref","ref","_props$style2","_ref$isInsideCloseabl","isInsideCloseable","props","_objectWithoutProperties","_excluded","_props$style","_jsx","Close","asChild","children","StyledDropdownMenuContentWrapper","$zIndex","style","zIndex","StyledDropdownMenuContent","_objectSpread","Arrow","Popover","Trigger","Portal","Anchor","Section","DropdownMenuSection","Item","StyledDropdownMenuItem"],"mappings":";;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,YAAY,CAACC,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC/DC,EAAAA,OAAO,eAAEC,UAAU,CAGjB,UAAAC,IAAA,EAAgEC,GAAG,EAAK;AAAA,IAAA,IAAAC,aAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAH,IAAA,CAArEI,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;AAAKE,MAAAA,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AACtC,IAAA,IAAIH,iBAAiB,EAAE;AAAA,MAAA,IAAAI,YAAA;AACrB,MAAA,oBACEC,GAAA,CAACd,YAAY,CAACe,KAAK,EAAA;QAACC,OAAO,EAAA,IAAA;QAAAC,QAAA,eACzBH,GAAA,CAACI,gCAAgC,EAAA;UAACC,OAAO,EAAA,CAAAN,YAAA,GAAEH,KAAK,CAACU,KAAK,MAAA,IAAA,IAAAP,YAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,YAAA,CAAaQ,MAAO;AAAAJ,UAAAA,QAAA,eAC7DH,GAAA,CAACQ,yBAAyB,EAAAC,aAAA,CAAA;AAACjB,YAAAA,GAAG,EAAEA;AAAI,WAAA,EAAKI,KAAK,CAAG;SACjB;AAAC,OACjB,CAAC;AAEzB;IAEA,oBACEI,GAAA,CAACI,gCAAgC,EAAA;MAACC,OAAO,EAAA,CAAAZ,aAAA,GAAEG,KAAK,CAACU,KAAK,MAAA,IAAA,IAAAb,aAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,aAAA,CAAac,MAAO;AAAAJ,MAAAA,QAAA,eAC7DH,GAAA,CAACQ,yBAAyB,EAAAC,aAAA,CAAA;AAACjB,QAAAA,GAAG,EAAEA;AAAI,OAAA,EAAKI,KAAK,CAAG;AAAC,KAClB,CAAC;AAEvC,GAAC,CAAC;EACFc,KAAK,EAAEC,OAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,OAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,OAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,OAAO,CAACG,MAAM;EACtBb,KAAK,EAAEU,OAAO,CAACV,KAAK;AACpBc,EAAAA,OAAO,EAAEC,mBAAmB;AAC5BC,EAAAA,IAAI,EAAEC;AACR,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
getIconComponentFromName,
|
|
3
|
-
iconNames,
|
|
4
|
-
isIconName,
|
|
5
|
-
} from '@/stories/util';
|
|
1
|
+
import { IconArrow2LeftS } from '@remember-web/icon';
|
|
6
2
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
7
|
-
import {
|
|
3
|
+
import { createElement, Fragment } from 'react';
|
|
8
4
|
|
|
9
5
|
import { Typography } from '@/Common';
|
|
10
6
|
import {
|
|
@@ -15,8 +11,13 @@ import {
|
|
|
15
11
|
TableHeader,
|
|
16
12
|
TableRow,
|
|
17
13
|
} from '@/stories/common.styles';
|
|
18
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
getIconComponentFromName,
|
|
16
|
+
iconNames,
|
|
17
|
+
isIconName,
|
|
18
|
+
} from '@/stories/util';
|
|
19
19
|
import { Chip } from './';
|
|
20
|
+
import { CHIP_SIZES, CHIP_STATES, CHIP_VARIANTS } from './const';
|
|
20
21
|
import type { ChipSize } from './types';
|
|
21
22
|
|
|
22
23
|
type Story = StoryObj<typeof Chip>;
|
|
@@ -27,9 +28,9 @@ const meta = {
|
|
|
27
28
|
argTypes: {
|
|
28
29
|
variant: {
|
|
29
30
|
control: 'select',
|
|
30
|
-
options:
|
|
31
|
+
options: CHIP_VARIANTS,
|
|
31
32
|
},
|
|
32
|
-
size: { control: 'select', options:
|
|
33
|
+
size: { control: 'select', options: CHIP_SIZES },
|
|
33
34
|
children: { control: 'text' },
|
|
34
35
|
disabled: { control: 'boolean' },
|
|
35
36
|
selected: { control: 'boolean' },
|
|
@@ -80,10 +81,6 @@ export const Default: Story = {
|
|
|
80
81
|
},
|
|
81
82
|
};
|
|
82
83
|
|
|
83
|
-
const variants = ['filled', 'outline', 'dashedLine'] as const;
|
|
84
|
-
const sizes = ['medium', 'small'] as const;
|
|
85
|
-
const states = ['default', 'hover', 'disabled', 'selected'] as const;
|
|
86
|
-
|
|
87
84
|
export const Overview: Story = {
|
|
88
85
|
render: () => (
|
|
89
86
|
<Paper $minWidth={800} $maxWidth={1200}>
|
|
@@ -94,7 +91,7 @@ export const Overview: Story = {
|
|
|
94
91
|
<TableRow>
|
|
95
92
|
<TableColumn isHeader>State</TableColumn>
|
|
96
93
|
<TableColumn isHeader>Size</TableColumn>
|
|
97
|
-
{
|
|
94
|
+
{CHIP_VARIANTS.map((variant) => (
|
|
98
95
|
<TableColumn key={variant} isHeader align="center">
|
|
99
96
|
{variant.charAt(0).toUpperCase() + variant.slice(1)}
|
|
100
97
|
</TableColumn>
|
|
@@ -102,19 +99,19 @@ export const Overview: Story = {
|
|
|
102
99
|
</TableRow>
|
|
103
100
|
</TableHeader>
|
|
104
101
|
<TableBody>
|
|
105
|
-
{
|
|
102
|
+
{CHIP_STATES.map((state) => (
|
|
106
103
|
<Fragment key={state}>
|
|
107
|
-
{
|
|
104
|
+
{CHIP_SIZES.map((size: ChipSize, index: number) => (
|
|
108
105
|
<TableRow key={`${state}-${size}`}>
|
|
109
106
|
{index === 0 && (
|
|
110
|
-
<TableColumn rowSpan={
|
|
107
|
+
<TableColumn rowSpan={CHIP_SIZES.length}>
|
|
111
108
|
{state.charAt(0).toUpperCase() + state.slice(1)}
|
|
112
109
|
</TableColumn>
|
|
113
110
|
)}
|
|
114
111
|
<TableColumn>
|
|
115
112
|
{size.charAt(0).toUpperCase() + size.slice(1)}
|
|
116
113
|
</TableColumn>
|
|
117
|
-
{
|
|
114
|
+
{CHIP_VARIANTS.map((variant) => (
|
|
118
115
|
<TableColumn key={variant} align="center">
|
|
119
116
|
<Chip
|
|
120
117
|
size={size}
|
package/src/Chips/Chip/const.ts
CHANGED
|
@@ -10,34 +10,67 @@ import {
|
|
|
10
10
|
contents999,
|
|
11
11
|
primary100,
|
|
12
12
|
} from '@remember-web/mixin';
|
|
13
|
-
import type {
|
|
13
|
+
import type {
|
|
14
|
+
ChipSize,
|
|
15
|
+
ChipSizeStyle,
|
|
16
|
+
ChipState,
|
|
17
|
+
ChipVariant,
|
|
18
|
+
ChipVariantStyleMap,
|
|
19
|
+
} from './types';
|
|
14
20
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
|
|
21
|
+
const SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
18
22
|
typography: 'Caption1',
|
|
19
23
|
padding: '6px 10px',
|
|
20
24
|
height: '28px',
|
|
21
25
|
};
|
|
22
26
|
|
|
23
|
-
const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE
|
|
27
|
+
const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
24
28
|
typography: 'Caption1',
|
|
25
29
|
padding: '7px 11px',
|
|
26
30
|
height: '28px',
|
|
27
31
|
};
|
|
28
32
|
|
|
29
|
-
const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
|
|
33
|
+
const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
30
34
|
typography: 'UIBody3',
|
|
31
35
|
padding: '5px 12px',
|
|
32
36
|
height: '30px',
|
|
33
37
|
};
|
|
34
38
|
|
|
35
|
-
const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE
|
|
39
|
+
const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
36
40
|
typography: 'UIBody3',
|
|
37
41
|
padding: '6px 14px',
|
|
38
42
|
height: '30px',
|
|
39
43
|
};
|
|
40
44
|
|
|
45
|
+
const LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
46
|
+
typography: 'UIBody2',
|
|
47
|
+
padding: '6px 12px',
|
|
48
|
+
height: '34px',
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
|
|
52
|
+
typography: 'UIBody2',
|
|
53
|
+
padding: '7px 13px',
|
|
54
|
+
height: '34px',
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export const CHIP_SIZES = [
|
|
58
|
+
'small',
|
|
59
|
+
'medium',
|
|
60
|
+
'large',
|
|
61
|
+
] as const satisfies readonly ChipSize[];
|
|
62
|
+
export const CHIP_VARIANTS = [
|
|
63
|
+
'filled',
|
|
64
|
+
'outline',
|
|
65
|
+
'dashedLine',
|
|
66
|
+
] as const satisfies readonly ChipVariant[];
|
|
67
|
+
export const CHIP_STATES = [
|
|
68
|
+
'default',
|
|
69
|
+
'hover',
|
|
70
|
+
'disabled',
|
|
71
|
+
'selected',
|
|
72
|
+
] as const satisfies readonly ChipState[];
|
|
73
|
+
|
|
41
74
|
export const CHIP_SIZE_STYLE = {
|
|
42
75
|
small: {
|
|
43
76
|
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
@@ -49,6 +82,11 @@ export const CHIP_SIZE_STYLE = {
|
|
|
49
82
|
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
50
83
|
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
51
84
|
},
|
|
85
|
+
large: {
|
|
86
|
+
filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
87
|
+
outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
|
|
88
|
+
dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
|
|
89
|
+
},
|
|
52
90
|
} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;
|
|
53
91
|
|
|
54
92
|
export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
|
package/src/Chips/Chip/styles.ts
CHANGED
|
@@ -23,8 +23,12 @@ const getVariantStyles = (props: Partial<ChipStyleProps>) => {
|
|
|
23
23
|
${getStateStyle($selected ? 'selectedHover' : 'hover')}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
${
|
|
27
|
-
$
|
|
26
|
+
${
|
|
27
|
+
$selected &&
|
|
28
|
+
css`
|
|
29
|
+
&:not([data-chip-disabled="true"]) {
|
|
30
|
+
${getStateStyle('selected')}
|
|
31
|
+
}`
|
|
28
32
|
}
|
|
29
33
|
`
|
|
30
34
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CHIP_SIZES } from './const';
|
|
2
|
+
import type { ChipProps, ChipVariant } from './types';
|
|
2
3
|
|
|
3
4
|
export function ensureValidChipProps(props: ChipProps): props is ChipProps {
|
|
4
5
|
if (props.clickable === false && 'selected' in props) {
|
|
@@ -29,11 +30,10 @@ export function ensureValidChipProps(props: ChipProps): props is ChipProps {
|
|
|
29
30
|
throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
if (props.size && !validSizes.includes(props.size)) {
|
|
33
|
+
if (props.size && !CHIP_SIZES.includes(props.size)) {
|
|
34
34
|
throw new Error(
|
|
35
35
|
`오류: 올바르지 않은 size 값입니다: "${props.size}". ` +
|
|
36
|
-
`유효한 size 값은 다음과 같습니다: ${
|
|
36
|
+
`유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`
|
|
37
37
|
);
|
|
38
38
|
}
|
|
39
39
|
|
package/src/Chips/Chip/types.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { TypographyStyle } from '@remember-web/mixin';
|
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
3
|
|
|
4
4
|
// Props types -------------------------------------------------------
|
|
5
|
-
export type ChipSize = 'small' | 'medium';
|
|
5
|
+
export type ChipSize = 'small' | 'medium' | 'large';
|
|
6
6
|
|
|
7
7
|
export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
|
|
8
8
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
2
|
-
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import {
|
|
4
4
|
StyledDropdownMenuContent,
|
|
5
5
|
StyledDropdownMenuContentWrapper,
|
|
@@ -7,7 +7,6 @@ import {
|
|
|
7
7
|
} from '@/Floating/DropdownMenu/styles';
|
|
8
8
|
import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
|
|
9
9
|
import Popover from '@/Floating/Popover';
|
|
10
|
-
|
|
11
10
|
import { DropdownMenuSection } from './DropdownMenuSection';
|
|
12
11
|
|
|
13
12
|
export interface DropdownContentProps extends PopoverContentProps {}
|
|
@@ -17,18 +16,26 @@ export interface DropdownMenuProps extends PopoverProps {}
|
|
|
17
16
|
* @see Popover
|
|
18
17
|
*/
|
|
19
18
|
const DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
|
|
20
|
-
Content:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
Content: forwardRef<
|
|
20
|
+
React.ElementRef<typeof StyledDropdownMenuContent>,
|
|
21
|
+
DropdownContentProps
|
|
22
|
+
>(({ isInsideCloseable = false, ...props }: DropdownContentProps, ref) => {
|
|
23
|
+
if (isInsideCloseable) {
|
|
24
|
+
return (
|
|
25
|
+
<RadixPopover.Close asChild>
|
|
26
|
+
<StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>
|
|
27
|
+
<StyledDropdownMenuContent ref={ref} {...props} />
|
|
28
|
+
</StyledDropdownMenuContentWrapper>
|
|
29
|
+
</RadixPopover.Close>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return (
|
|
28
34
|
<StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>
|
|
29
|
-
<StyledDropdownMenuContent {...props} />
|
|
35
|
+
<StyledDropdownMenuContent ref={ref} {...props} />
|
|
30
36
|
</StyledDropdownMenuContentWrapper>
|
|
31
|
-
)
|
|
37
|
+
);
|
|
38
|
+
}),
|
|
32
39
|
Arrow: Popover.Arrow,
|
|
33
40
|
Trigger: Popover.Trigger,
|
|
34
41
|
Portal: Popover.Portal,
|