@remember-web/primitive 0.5.3 → 0.5.5
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/Floating/Tooltip/index.cjs.js +4 -1
- package/dist/src/Floating/Tooltip/index.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/index.d.ts +1 -1
- package/dist/src/Floating/Tooltip/index.d.ts.map +1 -1
- package/dist/src/Floating/Tooltip/index.esm.js +4 -1
- package/dist/src/Floating/Tooltip/index.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/types.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/types.d.ts +1 -0
- package/dist/src/Floating/Tooltip/types.d.ts.map +1 -1
- package/dist/src/Floating/Tooltip/types.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js +4 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.d.ts +1 -0
- package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js +4 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js +4 -4
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.d.ts.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js +5 -5
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/types.d.ts +1 -0
- package/dist/src/Inputs/Select/DesignedSelect/types.d.ts.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +4 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.d.ts +1 -0
- package/dist/src/Inputs/Select/NativeSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js +4 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js +2 -2
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.d.ts.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js +3 -3
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/types.d.ts +1 -0
- package/dist/src/Inputs/Select/NativeSelect/types.d.ts.map +1 -1
- package/dist/src/Inputs/Select/index.cjs.js +4 -1
- package/dist/src/Inputs/Select/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/index.esm.js +4 -1
- package/dist/src/Inputs/Select/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/styles.cjs.js +12 -3
- package/dist/src/Inputs/Select/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/styles.d.ts +1 -0
- package/dist/src/Inputs/Select/styles.d.ts.map +1 -1
- package/dist/src/Inputs/Select/styles.esm.js +14 -5
- package/dist/src/Inputs/Select/styles.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Floating/Tooltip/Tooltip.stories.tsx +6 -2
- package/src/Floating/Tooltip/index.tsx +2 -0
- package/src/Floating/Tooltip/types.ts +1 -0
- package/src/Inputs/Select/DesignedSelect/index.tsx +2 -0
- package/src/Inputs/Select/DesignedSelect/styles.ts +12 -4
- package/src/Inputs/Select/DesignedSelect/types.ts +1 -0
- package/src/Inputs/Select/NativeSelect/index.tsx +2 -0
- package/src/Inputs/Select/NativeSelect/styles.ts +6 -7
- package/src/Inputs/Select/NativeSelect/types.ts +1 -0
- package/src/Inputs/Select/Select.stories.tsx +2 -3
- package/src/Inputs/Select/index.tsx +3 -0
- package/src/Inputs/Select/styles.ts +28 -5
|
@@ -36,7 +36,7 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
|
36
36
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
37
37
|
var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
|
|
38
38
|
|
|
39
|
-
var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
|
|
39
|
+
var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
|
|
40
40
|
var hoverable = shared.isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
|
|
41
41
|
function Tooltip(_ref) {
|
|
42
42
|
var children = _ref.children,
|
|
@@ -47,6 +47,8 @@ function Tooltip(_ref) {
|
|
|
47
47
|
side = _ref$side === void 0 ? 'top' : _ref$side,
|
|
48
48
|
_ref$gap = _ref.gap,
|
|
49
49
|
gap = _ref$gap === void 0 ? 4 : _ref$gap,
|
|
50
|
+
_ref$avoidCollisions = _ref.avoidCollisions,
|
|
51
|
+
avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
|
|
50
52
|
onOpenChange = _ref.onOpenChange,
|
|
51
53
|
onClickOutside = _ref.onClickOutside,
|
|
52
54
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
@@ -113,6 +115,7 @@ function Tooltip(_ref) {
|
|
|
113
115
|
}
|
|
114
116
|
onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
|
|
115
117
|
},
|
|
118
|
+
avoidCollisions: avoidCollisions,
|
|
116
119
|
collisionPadding: 20,
|
|
117
120
|
onClick: function onClick(e) {
|
|
118
121
|
_onClick === null || _onClick === void 0 || _onClick(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n avoidCollisions = true,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n avoidCollisions={avoidCollisions}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type PropsWithChildren } from 'react';
|
|
2
2
|
import { type TooltipProps, type TooltipSize, type TooltipType } from './types';
|
|
3
|
-
export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, avoidCollisions, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,eAAsB,EACtB,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAwF7C"}
|
|
@@ -10,7 +10,7 @@ import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButt
|
|
|
10
10
|
import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
|
|
11
11
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
12
|
|
|
13
|
-
var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
|
|
13
|
+
var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
|
|
14
14
|
var hoverable = isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
|
|
15
15
|
function Tooltip(_ref) {
|
|
16
16
|
var children = _ref.children,
|
|
@@ -21,6 +21,8 @@ function Tooltip(_ref) {
|
|
|
21
21
|
side = _ref$side === void 0 ? 'top' : _ref$side,
|
|
22
22
|
_ref$gap = _ref.gap,
|
|
23
23
|
gap = _ref$gap === void 0 ? 4 : _ref$gap,
|
|
24
|
+
_ref$avoidCollisions = _ref.avoidCollisions,
|
|
25
|
+
avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
|
|
24
26
|
onOpenChange = _ref.onOpenChange,
|
|
25
27
|
onClickOutside = _ref.onClickOutside,
|
|
26
28
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -87,6 +89,7 @@ function Tooltip(_ref) {
|
|
|
87
89
|
}
|
|
88
90
|
onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
|
|
89
91
|
},
|
|
92
|
+
avoidCollisions: avoidCollisions,
|
|
90
93
|
collisionPadding: 20,
|
|
91
94
|
onClick: function onClick(e) {
|
|
92
95
|
_onClick === null || _onClick === void 0 || _onClick(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n avoidCollisions = true,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /**\n * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n *\n * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable || type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType || isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <TooltipContentWrapper $zIndex={zIndex}>\n <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n sideOffset={gap}\n side={side}\n onPointerDownOutside={(e) => {\n if (isClickType) {\n _setOpen(false);\n }\n onClickOutside?.(e);\n }}\n avoidCollisions={avoidCollisions}\n collisionPadding={20}\n onClick={(e) => {\n if (isClickType) {\n () => _setOpen(false);\n }\n onClick?.(e);\n }}\n >\n {content}\n {type === 'closeButton' && (\n <CloseButton onClick={() => _setOpen(false)}>\n <IconCloseS />\n </CloseButton>\n )}\n {isLargeSizeProps(props) && props.hasArrow && (\n <Arrow\n width={14}\n height={8}\n color={backgroundColor}\n />\n )}\n </TooltipContent>\n </TooltipContentWrapper>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n avoidCollisions?: PopperContentProps['avoidCollisions'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;;"}
|
|
@@ -8,6 +8,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
|
|
|
8
8
|
defaultOpen?: boolean;
|
|
9
9
|
gap?: 4 | 8 | (number & {});
|
|
10
10
|
side?: PopperContentProps['side'];
|
|
11
|
+
avoidCollisions?: PopperContentProps['avoidCollisions'];
|
|
11
12
|
type?: Type;
|
|
12
13
|
size?: Size;
|
|
13
14
|
contentOptions?: TooltipContentOptionProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n DismissableLayerProps,\n PopperContentProps,\n TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n content: ReactNode;\n defaultOpen?: boolean;\n gap?: 4 | 8 | (number & {});\n side?: PopperContentProps['side'];\n avoidCollisions?: PopperContentProps['avoidCollisions'];\n type?: Type;\n size?: Size;\n contentOptions?: TooltipContentOptionProps;\n onOpenChange?: RadixTooltipProps['onOpenChange'];\n onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n 'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n 'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n maxWidth?: number | string;\n backgroundColor?: string;\n contentColor?: string;\n zIndex?: number;\n textAlign?: TooltipTextAlign;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;"}
|
|
@@ -20,7 +20,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
|
20
20
|
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
21
21
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
22
22
|
|
|
23
|
-
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled", "onClick"];
|
|
23
|
+
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "error", "disabled", "onClick"];
|
|
24
24
|
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; }
|
|
25
25
|
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; }
|
|
26
26
|
var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
@@ -32,6 +32,8 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
32
32
|
onChange = _ref.onChange,
|
|
33
33
|
width = _ref.width,
|
|
34
34
|
extendDirection = _ref.extendDirection,
|
|
35
|
+
_ref$error = _ref.error,
|
|
36
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
35
37
|
disabled = _ref.disabled,
|
|
36
38
|
onClick = _ref.onClick,
|
|
37
39
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
@@ -178,6 +180,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
178
180
|
"aria-expanded": isExpanded,
|
|
179
181
|
"aria-haspopup": "listbox",
|
|
180
182
|
"aria-disabled": disabled,
|
|
183
|
+
$error: error,
|
|
181
184
|
onKeyDown: keyDownHandler
|
|
182
185
|
}, props), {}, {
|
|
183
186
|
children: [/*#__PURE__*/jsxRuntime.jsx(styles$1.StyledSelect, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n disabled,\n onClick,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement | null>(null);\n const selectListRef = useRef<HTMLUListElement | null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue || null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n onClick={onClick}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label || placeholder || 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n error = false,\n disabled,\n onClick,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement | null>(null);\n const selectListRef = useRef<HTMLUListElement | null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue || null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n $error={error}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n onClick={onClick}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label || placeholder || 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","error","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","$error","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAeK;;;AAXDA;;;;;;AAKAC;;;AAGGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AACAC;AAA0B;;AAIxBJ;AACAK;AACAb;AACAc;AACAC;AACE;;AAEE;AACF;;AAIAT;;;AAG0C;AAE/BU;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAV;AACAR;AACAH;AAAqBmB;AAER;;;;;AAGTE;AAEAR;;AAEA;AACAF;;;AAGA;AAAA;AACAW;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
|
|
@@ -7,6 +7,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<import("r
|
|
|
7
7
|
width?: string | number | undefined;
|
|
8
8
|
placeholder?: string | undefined;
|
|
9
9
|
extendDirection?: "above" | "below" | undefined;
|
|
10
|
+
error?: boolean | undefined;
|
|
10
11
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
12
|
export default _default;
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAexE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAexE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;AAwR/D,wBAA0C"}
|
|
@@ -12,7 +12,7 @@ import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';
|
|
|
12
12
|
import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.esm.js';
|
|
13
13
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
14
14
|
|
|
15
|
-
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled", "onClick"];
|
|
15
|
+
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "error", "disabled", "onClick"];
|
|
16
16
|
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; }
|
|
17
17
|
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; }
|
|
18
18
|
var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
@@ -24,6 +24,8 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
24
24
|
onChange = _ref.onChange,
|
|
25
25
|
width = _ref.width,
|
|
26
26
|
extendDirection = _ref.extendDirection,
|
|
27
|
+
_ref$error = _ref.error,
|
|
28
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
27
29
|
disabled = _ref.disabled,
|
|
28
30
|
onClick = _ref.onClick,
|
|
29
31
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -170,6 +172,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
170
172
|
"aria-expanded": isExpanded,
|
|
171
173
|
"aria-haspopup": "listbox",
|
|
172
174
|
"aria-disabled": disabled,
|
|
175
|
+
$error: error,
|
|
173
176
|
onKeyDown: keyDownHandler
|
|
174
177
|
}, props), {}, {
|
|
175
178
|
children: [/*#__PURE__*/jsx(StyledSelect, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n disabled,\n onClick,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement | null>(null);\n const selectListRef = useRef<HTMLUListElement | null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue || null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n onClick={onClick}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label || placeholder || 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n error = false,\n disabled,\n onClick,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement | null>(null);\n const selectListRef = useRef<HTMLUListElement | null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue || null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n $error={error}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n onClick={onClick}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label || placeholder || 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","error","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","$error","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAeK;;;AAXDA;;;;;;AAKAC;;;AAGGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AACAC;AAA0B;;AAIxBJ;AACAK;AACAb;AACAc;AACAC;AACE;;AAEE;AACF;;AAIAT;;;AAG0C;AAE/BU;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAV;AACAR;AACAH;AAAqBmB;AAER;;;;;AAGTE;AAEAR;;AAEA;AACAF;;;AAGA;AAAA;AACAW;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
|
|
@@ -12,7 +12,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
15
|
-
var StyledSelect = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n border: 1px solid
|
|
15
|
+
var StyledSelect = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n border-width: 1px;\n border-style: solid;;\n\n ", ";\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", "\n\n ", ":focus-within & {\n outline: none;\n }\n\n ", ":not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n\n border-color: var(--border-color);\n"])), mixin.ellipsis(), function (_ref) {
|
|
16
16
|
var expandedDirection = _ref.expandedDirection;
|
|
17
17
|
return {
|
|
18
18
|
none: styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n border-radius: 4px;\n "]))),
|
|
@@ -22,9 +22,9 @@ var StyledSelect = styled__default.default.div(_templateObject || (_templateObje
|
|
|
22
22
|
}, function (_ref2) {
|
|
23
23
|
var isPlaceholder = _ref2.isPlaceholder;
|
|
24
24
|
return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n color: ", ";\n "])), mixin.contents200);
|
|
25
|
-
}, styles.SelectContainer,
|
|
25
|
+
}, styles.SelectContainer, styles.SelectContainer, mixin.bg200, mixin.bg300);
|
|
26
26
|
var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n"])));
|
|
27
|
-
var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid
|
|
27
|
+
var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n \n border-width: 1px;\n border-style: solid;;\n\n background-color: ", ";\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", ";\n\n ", "\n\n ", ":focus &, ", ":focus-within & {\n outline: none;\n }\n\n border-color: var(--border-color);\n"])), mixin.bg100, function (_ref3) {
|
|
28
28
|
var maxHeight = _ref3.maxHeight;
|
|
29
29
|
if (!maxHeight) {
|
|
30
30
|
return null;
|
|
@@ -36,7 +36,7 @@ var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templ
|
|
|
36
36
|
}, function (_ref4) {
|
|
37
37
|
var expandedDirection = _ref4.expandedDirection;
|
|
38
38
|
return expandedDirection === 'below' ? styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n "]))) : styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n "])));
|
|
39
|
-
}, styles.SelectContainer, styles.SelectContainer
|
|
39
|
+
}, styles.SelectContainer, styles.SelectContainer);
|
|
40
40
|
var SelectOption = styled__default.default.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n ", "\n padding: 10px 12px;\n color: ", ";\n\n &[aria-disabled='true'] {\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n outline: none;\n }\n\n ", "\n"])), mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
|
|
41
41
|
var isSelected = _ref5.isSelected;
|
|
42
42
|
return isSelected && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n "])), mixin.bg200);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border-width: 1px;\n border-style: solid;;\n\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n }\n\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n\n border-color: var(--border-color);\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n \n border-width: 1px;\n border-style: solid;;\n\n background-color: ${bg100};\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n }\n\n border-color: var(--border-color);\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below"],"mappings":";;;;;;;;;;;;;AAAa;;AAwBT;;;;AASEA;;AAI6B;AAK/B;;AAIC;AAqBE;;AA+BgB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AASF;AAcH;;AAIC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY;;;GAiDxB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAW1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAoD/B,CAAC;AAEF,eAAO,MAAM,YAAY;;GAmBxB,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
3
|
-
import { ellipsis,
|
|
3
|
+
import { ellipsis, contents200, bg200, bg300, bg100, contents000, contents300 } from '@remember-web/mixin';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { SelectContainer } from '../styles.esm.js';
|
|
6
6
|
|
|
7
7
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
8
|
-
var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n border: 1px solid
|
|
8
|
+
var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n border-width: 1px;\n border-style: solid;;\n\n ", ";\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", "\n\n ", ":focus-within & {\n outline: none;\n }\n\n ", ":not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n\n border-color: var(--border-color);\n"])), ellipsis(), function (_ref) {
|
|
9
9
|
var expandedDirection = _ref.expandedDirection;
|
|
10
10
|
return {
|
|
11
11
|
none: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 4px;\n "]))),
|
|
@@ -15,9 +15,9 @@ var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTempl
|
|
|
15
15
|
}, function (_ref2) {
|
|
16
16
|
var isPlaceholder = _ref2.isPlaceholder;
|
|
17
17
|
return isPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n "])), contents200);
|
|
18
|
-
}, SelectContainer,
|
|
18
|
+
}, SelectContainer, SelectContainer, bg200, bg300);
|
|
19
19
|
var SelectDownIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n"])));
|
|
20
|
-
var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid
|
|
20
|
+
var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n \n border-width: 1px;\n border-style: solid;;\n\n background-color: ", ";\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", ";\n\n ", "\n\n ", ":focus &, ", ":focus-within & {\n outline: none;\n }\n\n border-color: var(--border-color);\n"])), bg100, function (_ref3) {
|
|
21
21
|
var maxHeight = _ref3.maxHeight;
|
|
22
22
|
if (!maxHeight) {
|
|
23
23
|
return null;
|
|
@@ -29,7 +29,7 @@ var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _tag
|
|
|
29
29
|
}, function (_ref4) {
|
|
30
30
|
var expandedDirection = _ref4.expandedDirection;
|
|
31
31
|
return expandedDirection === 'below' ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n "])));
|
|
32
|
-
}, SelectContainer, SelectContainer
|
|
32
|
+
}, SelectContainer, SelectContainer);
|
|
33
33
|
var SelectOption = styled.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n ", "\n padding: 10px 12px;\n color: ", ";\n\n &[aria-disabled='true'] {\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n outline: none;\n }\n\n ", "\n"])), ellipsis(), contents000, contents300, bg200, function (_ref5) {
|
|
34
34
|
var isSelected = _ref5.isSelected;
|
|
35
35
|
return isSelected && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), bg200);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border-width: 1px;\n border-style: solid;;\n\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n }\n\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n\n border-color: var(--border-color);\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n \n border-width: 1px;\n border-style: solid;;\n\n background-color: ${bg100};\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n }\n\n border-color: var(--border-color);\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below"],"mappings":";;;;;;AAAa;;AAwBT;;;;AASEA;;AAI6B;AAK/B;;AAIC;AAqBE;;AA+BgB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AASF;AAcH;;AAIC;;"}
|
|
@@ -7,6 +7,7 @@ export type DesignedSelectInternalProps<Value extends SelectValue> = Omit<Select
|
|
|
7
7
|
width?: number | string;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
extendDirection?: Exclude<ExpandedType, 'none'>;
|
|
10
|
+
error?: boolean;
|
|
10
11
|
};
|
|
11
12
|
export type ExpandedType = 'none' | 'above' | 'below';
|
|
12
13
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,MAAM,2BAA2B,CAAC,KAAK,SAAS,WAAW,IAAI,IAAI,CACvE,oBAAoB,CAAC,cAAc,CAAC,EACpC,QAAQ,MAAM,EAAE,GAAG,UAAU,GAAG,UAAU,CAC3C,GAAG;IACF,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,MAAM,2BAA2B,CAAC,KAAK,SAAS,WAAW,IAAI,IAAI,CACvE,oBAAoB,CAAC,cAAc,CAAC,EACpC,QAAQ,MAAM,EAAE,GAAG,UAAU,GAAG,UAAU,CAC3C,GAAG;IACF,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC"}
|
|
@@ -14,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
14
14
|
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
15
15
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
16
16
|
|
|
17
|
-
var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick"];
|
|
17
|
+
var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick", "error"];
|
|
18
18
|
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; }
|
|
19
19
|
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; }
|
|
20
20
|
var NativeSelect = function NativeSelect(_ref, ref) {
|
|
@@ -25,12 +25,15 @@ var NativeSelect = function NativeSelect(_ref, ref) {
|
|
|
25
25
|
value = _ref.value,
|
|
26
26
|
disabled = _ref.disabled,
|
|
27
27
|
onClick = _ref.onClick,
|
|
28
|
+
_ref$error = _ref.error,
|
|
29
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
28
30
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
29
31
|
var showPlaceholder = !value && !!placeholder;
|
|
30
32
|
return /*#__PURE__*/jsxRuntime.jsxs(styles.SelectContainer, {
|
|
31
33
|
"aria-disabled": disabled,
|
|
32
34
|
className: className,
|
|
33
35
|
$width: width,
|
|
36
|
+
$error: error,
|
|
34
37
|
children: [/*#__PURE__*/jsxRuntime.jsxs(styles$1.StyledSelect, _objectSpread(_objectSpread({}, props), {}, {
|
|
35
38
|
value: value,
|
|
36
39
|
$width: width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer\n aria-disabled={disabled}\n className={className}\n $width={width}\n >\n <StyledSelect\n {...props}\n value={value}\n $width={width}\n ref={ref}\n isPlaceholder={showPlaceholder}\n disabled={disabled}\n onClick={onClick}\n >\n {!value && (\n <option value=\"\" selected>\n {placeholder || 'ㅤ'}\n </option>\n )}\n {children}\n </StyledSelect>\n <SelectDownIcon>\n <IconArrow2Down size=\"small\" />\n </SelectDownIcon>\n </SelectContainer>\n );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","$width","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n error = false,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer\n aria-disabled={disabled}\n className={className}\n $width={width}\n $error={error}\n >\n <StyledSelect\n {...props}\n value={value}\n $width={width}\n ref={ref}\n isPlaceholder={showPlaceholder}\n disabled={disabled}\n onClick={onClick}\n >\n {!value && (\n <option value=\"\" selected>\n {placeholder || 'ㅤ'}\n </option>\n )}\n {children}\n </StyledSelect>\n <SelectDownIcon>\n <IconArrow2Down size=\"small\" />\n </SelectDownIcon>\n </SelectContainer>\n );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["error","props","className","$width","$error","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAgBK;;;;;;;;AAJDA;AACGC;AAIL;;AAII;AACAC;AACAC;AACAC;;AAIEC;AACAF;AACAG;AACAC;AACAC;AACAC;AAAiBC;AAGPL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
|
|
@@ -3,6 +3,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<import("r
|
|
|
3
3
|
children: import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element> | import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element>[];
|
|
4
4
|
width?: string | number | undefined;
|
|
5
5
|
placeholder?: string | undefined;
|
|
6
|
+
error?: boolean | undefined;
|
|
6
7
|
} & import("react").RefAttributes<HTMLSelectElement>>;
|
|
7
8
|
export default _default;
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;;AA2DA,wBAAwC"}
|
|
@@ -7,7 +7,7 @@ import { SelectContainer } from '../styles.esm.js';
|
|
|
7
7
|
import { StyledSelect, SelectDownIcon } from './styles.esm.js';
|
|
8
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
9
|
|
|
10
|
-
var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick"];
|
|
10
|
+
var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick", "error"];
|
|
11
11
|
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; }
|
|
12
12
|
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; }
|
|
13
13
|
var NativeSelect = function NativeSelect(_ref, ref) {
|
|
@@ -18,12 +18,15 @@ var NativeSelect = function NativeSelect(_ref, ref) {
|
|
|
18
18
|
value = _ref.value,
|
|
19
19
|
disabled = _ref.disabled,
|
|
20
20
|
onClick = _ref.onClick,
|
|
21
|
+
_ref$error = _ref.error,
|
|
22
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
21
23
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
24
|
var showPlaceholder = !value && !!placeholder;
|
|
23
25
|
return /*#__PURE__*/jsxs(SelectContainer, {
|
|
24
26
|
"aria-disabled": disabled,
|
|
25
27
|
className: className,
|
|
26
28
|
$width: width,
|
|
29
|
+
$error: error,
|
|
27
30
|
children: [/*#__PURE__*/jsxs(StyledSelect, _objectSpread(_objectSpread({}, props), {}, {
|
|
28
31
|
value: value,
|
|
29
32
|
$width: width,
|