@remember-web/primitive 0.1.10 → 0.1.12
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/Control/BaseToggle/ToggleIcon/index.cjs.js +5 -0
- package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js +6 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.cjs.js +16 -3
- package/dist/src/Control/BaseToggle/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.d.ts +1 -0
- package/dist/src/Control/BaseToggle/index.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/index.esm.js +16 -3
- package/dist/src/Control/BaseToggle/index.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/types.d.ts +2 -1
- package/dist/src/Control/BaseToggle/types.d.ts.map +1 -1
- package/dist/src/Control/Checkbox.cjs.js.map +1 -1
- package/dist/src/Control/Checkbox.d.ts +14 -6
- package/dist/src/Control/Checkbox.d.ts.map +1 -1
- package/dist/src/Control/Checkbox.esm.js.map +1 -1
- package/dist/src/Control/Radio.cjs.js.map +1 -1
- package/dist/src/Control/Radio.d.ts +1 -1
- package/dist/src/Control/Radio.d.ts.map +1 -1
- package/dist/src/Control/Radio.esm.js.map +1 -1
- package/dist/src/Control/Toggle.cjs.js.map +1 -1
- package/dist/src/Control/Toggle.d.ts +4 -2
- package/dist/src/Control/Toggle.d.ts.map +1 -1
- package/dist/src/Control/Toggle.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js +3 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js +3 -1
- package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +3 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js +3 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js.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/types.d.ts +1 -0
- package/dist/src/Inputs/Select/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/Control/BaseToggle/ToggleIcon/index.tsx +27 -5
- package/src/Control/BaseToggle/index.tsx +16 -1
- package/src/Control/BaseToggle/styles.ts +9 -0
- package/src/Control/BaseToggle/types.ts +2 -1
- package/src/Control/Checkbox.stories.tsx +28 -1
- package/src/Control/Checkbox.tsx +9 -3
- package/src/Control/Radio.tsx +1 -1
- package/src/Control/Toggle.tsx +1 -1
- package/src/Inputs/Select/DesignedSelect/index.tsx +2 -0
- package/src/Inputs/Select/NativeSelect/index.tsx +11 -1
- package/src/Inputs/Select/Select.stories.tsx +3 -0
- package/src/Inputs/Select/index.tsx +3 -0
- package/src/Inputs/Select/types.ts +1 -0
|
@@ -8,22 +8,27 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
8
8
|
var ICON_NAME = {
|
|
9
9
|
check: {
|
|
10
10
|
on: icon.ControlCheckOn,
|
|
11
|
+
indeterminate: icon.ControlCheckOn,
|
|
11
12
|
off: icon.ControlCheckOff
|
|
12
13
|
},
|
|
13
14
|
checkbox: {
|
|
14
15
|
on: icon.ControlCheckboxOn,
|
|
16
|
+
indeterminate: icon.ControlCheckboxIndeterminate,
|
|
15
17
|
off: icon.ControlCheckboxOff
|
|
16
18
|
},
|
|
17
19
|
favorite: {
|
|
18
20
|
on: icon.ControlFavoriteOn,
|
|
21
|
+
indeterminate: icon.ControlFavoriteOn,
|
|
19
22
|
off: icon.ControlFavoriteOff
|
|
20
23
|
},
|
|
21
24
|
bookmark: {
|
|
22
25
|
on: icon.ControlBookmarkOn,
|
|
26
|
+
indeterminate: icon.ControlBookmarkOn,
|
|
23
27
|
off: icon.ControlBookmarkOff
|
|
24
28
|
},
|
|
25
29
|
radio: {
|
|
26
30
|
on: icon.ControlRadioOn,
|
|
31
|
+
indeterminate: icon.ControlRadioOn,
|
|
27
32
|
off: icon.ControlRadioOff
|
|
28
33
|
}
|
|
29
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOn,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAwBA;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAKaK;AAAsBC;AAAe;AACpD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiCpE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAOf"}
|
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, ControlCheckboxOff, ControlFavoriteOn, ControlFavoriteOff, ControlBookmarkOn, ControlBookmarkOff, ControlRadioOn, ControlRadioOff } from '@remember-web/icon';
|
|
2
|
+
import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, ControlCheckboxIndeterminate, ControlCheckboxOff, ControlFavoriteOn, ControlFavoriteOff, ControlBookmarkOn, ControlBookmarkOff, ControlRadioOn, ControlRadioOff } from '@remember-web/icon';
|
|
3
3
|
import { isSvgRegularSize, SVG_SIZES } from '@remember-web/icon/util';
|
|
4
4
|
import { jsx } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var ICON_NAME = {
|
|
7
7
|
check: {
|
|
8
8
|
on: ControlCheckOn,
|
|
9
|
+
indeterminate: ControlCheckOn,
|
|
9
10
|
off: ControlCheckOff
|
|
10
11
|
},
|
|
11
12
|
checkbox: {
|
|
12
13
|
on: ControlCheckboxOn,
|
|
14
|
+
indeterminate: ControlCheckboxIndeterminate,
|
|
13
15
|
off: ControlCheckboxOff
|
|
14
16
|
},
|
|
15
17
|
favorite: {
|
|
16
18
|
on: ControlFavoriteOn,
|
|
19
|
+
indeterminate: ControlFavoriteOn,
|
|
17
20
|
off: ControlFavoriteOff
|
|
18
21
|
},
|
|
19
22
|
bookmark: {
|
|
20
23
|
on: ControlBookmarkOn,
|
|
24
|
+
indeterminate: ControlBookmarkOn,
|
|
21
25
|
off: ControlBookmarkOff
|
|
22
26
|
},
|
|
23
27
|
radio: {
|
|
24
28
|
on: ControlRadioOn,
|
|
29
|
+
indeterminate: ControlRadioOn,
|
|
25
30
|
off: ControlRadioOff
|
|
26
31
|
}
|
|
27
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxIndeterminate,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: {\n on: ControlCheckOn,\n indeterminate: ControlCheckOn,\n off: ControlCheckOff,\n },\n checkbox: {\n on: ControlCheckboxOn,\n indeterminate: ControlCheckboxIndeterminate,\n off: ControlCheckboxOff,\n },\n favorite: {\n on: ControlFavoriteOn,\n indeterminate: ControlFavoriteOn,\n off: ControlFavoriteOff,\n },\n bookmark: {\n on: ControlBookmarkOn,\n indeterminate: ControlBookmarkOn,\n off: ControlBookmarkOff,\n },\n radio: {\n on: ControlRadioOn,\n indeterminate: ControlRadioOn,\n off: ControlRadioOff,\n },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAwBA;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAKaK;AAAsBC;AAAe;AACpD;;"}
|
|
@@ -20,10 +20,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
20
20
|
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
21
21
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
22
22
|
|
|
23
|
-
var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
|
|
23
|
+
var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
|
|
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), !0).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
|
-
var _BaseToggle = function _BaseToggle(_ref,
|
|
26
|
+
var _BaseToggle = function _BaseToggle(_ref, _ref2) {
|
|
27
27
|
var variant = _ref.variant,
|
|
28
28
|
_label = _ref.label,
|
|
29
29
|
_ref$labelPosition = _ref.labelPosition,
|
|
@@ -38,6 +38,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
38
38
|
type = _ref$type === void 0 ? 'checkbox' : _ref$type,
|
|
39
39
|
onToggle = _ref.onToggle,
|
|
40
40
|
_onChange = _ref.onChange,
|
|
41
|
+
indeterminate = _ref.indeterminate,
|
|
41
42
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
42
43
|
var isStringLabel = typeof _label === 'string';
|
|
43
44
|
var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1, {
|
|
@@ -48,7 +49,14 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
48
49
|
className: className,
|
|
49
50
|
$gap: labelGap,
|
|
50
51
|
children: [/*#__PURE__*/jsxRuntime.jsx(styles.ToggleInput, _objectSpread(_objectSpread({
|
|
51
|
-
ref: ref
|
|
52
|
+
ref: function ref(input) {
|
|
53
|
+
if (typeof _ref2 !== 'function' && _ref2) {
|
|
54
|
+
_ref2.current = input;
|
|
55
|
+
}
|
|
56
|
+
if (input) {
|
|
57
|
+
input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
|
|
58
|
+
}
|
|
59
|
+
},
|
|
52
60
|
className: inputClassName,
|
|
53
61
|
type: type
|
|
54
62
|
}, props), {}, {
|
|
@@ -61,6 +69,11 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
61
69
|
size: size,
|
|
62
70
|
status: "on",
|
|
63
71
|
variant: variant
|
|
72
|
+
}), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
|
|
73
|
+
className: "indeterminateIcon",
|
|
74
|
+
size: size,
|
|
75
|
+
status: "indeterminate",
|
|
76
|
+
variant: variant
|
|
64
77
|
}), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
|
|
65
78
|
className: "offIcon",
|
|
66
79
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={(input) => {\n if (typeof ref !== 'function' && ref) {\n ref.current = input;\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n }}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;;AAEA;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -8,5 +8,6 @@ export declare const BaseToggle: import("react").ForwardRefExoticComponent<{
|
|
|
8
8
|
onToggle?: ((checked: boolean) => void) | undefined;
|
|
9
9
|
size?: import("./types").ToggleIconSizeType | undefined;
|
|
10
10
|
type?: "checkbox" | "radio" | undefined;
|
|
11
|
+
indeterminate?: boolean | undefined;
|
|
11
12
|
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";AAkFA,eAAO,MAAM,UAAU;;;;;;;;;;sJAA0B,CAAC"}
|
|
@@ -13,10 +13,10 @@ import '../../Common/Typography/styles.esm.js';
|
|
|
13
13
|
import { ToggleIcon } from './ToggleIcon/index.esm.js';
|
|
14
14
|
import { ToggleRoot, ToggleInput } from './styles.esm.js';
|
|
15
15
|
|
|
16
|
-
var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
|
|
16
|
+
var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
|
|
17
17
|
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; }
|
|
18
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).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; }
|
|
19
|
-
var _BaseToggle = function _BaseToggle(_ref,
|
|
19
|
+
var _BaseToggle = function _BaseToggle(_ref, _ref2) {
|
|
20
20
|
var variant = _ref.variant,
|
|
21
21
|
_label = _ref.label,
|
|
22
22
|
_ref$labelPosition = _ref.labelPosition,
|
|
@@ -31,6 +31,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
31
31
|
type = _ref$type === void 0 ? 'checkbox' : _ref$type,
|
|
32
32
|
onToggle = _ref.onToggle,
|
|
33
33
|
_onChange = _ref.onChange,
|
|
34
|
+
indeterminate = _ref.indeterminate,
|
|
34
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
35
36
|
var isStringLabel = typeof _label === 'string';
|
|
36
37
|
var label = isStringLabel ? /*#__PURE__*/jsx(Typography, {
|
|
@@ -41,7 +42,14 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
41
42
|
className: className,
|
|
42
43
|
$gap: labelGap,
|
|
43
44
|
children: [/*#__PURE__*/jsx(ToggleInput, _objectSpread(_objectSpread({
|
|
44
|
-
ref: ref
|
|
45
|
+
ref: function ref(input) {
|
|
46
|
+
if (typeof _ref2 !== 'function' && _ref2) {
|
|
47
|
+
_ref2.current = input;
|
|
48
|
+
}
|
|
49
|
+
if (input) {
|
|
50
|
+
input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
|
|
51
|
+
}
|
|
52
|
+
},
|
|
45
53
|
className: inputClassName,
|
|
46
54
|
type: type
|
|
47
55
|
}, props), {}, {
|
|
@@ -54,6 +62,11 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
54
62
|
size: size,
|
|
55
63
|
status: "on",
|
|
56
64
|
variant: variant
|
|
65
|
+
}), /*#__PURE__*/jsx(ToggleIcon, {
|
|
66
|
+
className: "indeterminateIcon",
|
|
67
|
+
size: size,
|
|
68
|
+
status: "indeterminate",
|
|
69
|
+
variant: variant
|
|
57
70
|
}), /*#__PURE__*/jsx(ToggleIcon, {
|
|
58
71
|
className: "offIcon",
|
|
59
72
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={ref}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"Body1\">{_label}</Typography>\n ) : (\n _label\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={(input) => {\n if (typeof ref !== 'function' && ref) {\n ref.current = input;\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n }}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;;AAEA;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -15,7 +15,7 @@ var ToggleRoot = styled__default.default.label(_templateObject || (_templateObje
|
|
|
15
15
|
var $gap = _ref.$gap;
|
|
16
16
|
return $gap && "gap: ".concat($gap, "px;");
|
|
17
17
|
});
|
|
18
|
-
var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), mixin.primary100);
|
|
18
|
+
var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:indeterminate ~ svg.offIcon,\n &:indeterminate ~ svg.onIcon {\n display: none;\n }\n\n &:not(:indeterminate) ~ svg.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), mixin.primary100);
|
|
19
19
|
|
|
20
20
|
exports.ToggleInput = ToggleInput;
|
|
21
21
|
exports.ToggleRoot = ToggleRoot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > svg {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n :has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > svg {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > svg {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n :has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > svg {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:indeterminate ~ svg.offIcon,\n &:indeterminate ~ svg.onIcon {\n display: none;\n }\n\n &:not(:indeterminate) ~ svg.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,UAAU;;GAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,UAAU;;GAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yNAoCvB,CAAC"}
|
|
@@ -8,7 +8,7 @@ var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTempl
|
|
|
8
8
|
var $gap = _ref.$gap;
|
|
9
9
|
return $gap && "gap: ".concat($gap, "px;");
|
|
10
10
|
});
|
|
11
|
-
var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), primary100);
|
|
11
|
+
var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:indeterminate ~ svg.offIcon,\n &:indeterminate ~ svg.onIcon {\n display: none;\n }\n\n &:not(:indeterminate) ~ svg.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), primary100);
|
|
12
12
|
|
|
13
13
|
export { ToggleInput, ToggleRoot };
|
|
14
14
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > svg {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n :has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > svg {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n width: fit-content;\n height: fit-content;\n display: flex;\n ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n cursor: pointer;\n user-select: none;\n align-items: center;\n\n & > svg {\n transition: filter 0.2s ease-in-out;\n flex-shrink: 0;\n }\n\n :has(input:disabled) {\n cursor: default;\n }\n\n @media (hover: hover) {\n &:hover > svg {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n`;\n\nexport const ToggleInput = styled.input`\n all: unset;\n position: absolute;\n width: 1px;\n height: 0px;\n margin-left: -1px;\n\n &:checked ~ svg.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ svg.onIcon {\n display: none;\n }\n\n &:indeterminate ~ svg.offIcon,\n &:indeterminate ~ svg.onIcon {\n display: none;\n }\n\n &:not(:indeterminate) ~ svg.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ svg {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ svg {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ svg {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
export type ToggleStatusType = 'on' | 'off';
|
|
2
|
+
export type ToggleStatusType = 'on' | 'off' | 'indeterminate';
|
|
3
3
|
export type ToggleVariantType = 'check' | 'checkbox' | 'favorite' | 'bookmark' | 'radio';
|
|
4
4
|
export type ToggleIconSizeType = 'small' | 'medium';
|
|
5
5
|
export type BaseToggleProps = {
|
|
@@ -17,5 +17,6 @@ export type BaseToggleProps = {
|
|
|
17
17
|
onToggle?: (checked: boolean) => void;
|
|
18
18
|
size?: ToggleIconSizeType;
|
|
19
19
|
type?: 'checkbox' | 'radio';
|
|
20
|
+
indeterminate?: boolean;
|
|
20
21
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | `aria-${string}` | 'size'>;
|
|
21
22
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,eAAe,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,MAAM,EAAE,GAAG,MAAM,CACnC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;;"}
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { type ForwardRefRenderFunction } from 'react';
|
|
2
2
|
import type { BaseToggleProps } from './BaseToggle/types';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
type CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;
|
|
4
|
+
export declare const _Checkbox: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps<{
|
|
5
|
+
variant: 'checkbox';
|
|
6
|
+
indeterminate?: boolean;
|
|
7
|
+
}> | CheckboxProps<{
|
|
8
|
+
variant: 'check';
|
|
9
|
+
}>>;
|
|
10
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<(CheckboxProps<{
|
|
11
|
+
variant: 'checkbox';
|
|
12
|
+
indeterminate?: boolean | undefined;
|
|
13
|
+
}> | CheckboxProps<{
|
|
14
|
+
variant: 'check';
|
|
15
|
+
}>) & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
|
+
export {};
|
|
9
17
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,aAAa,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,EACd,aAAa,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,aAAa,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAGL,CAAC;AAEF,eAAO,MAAM,QAAQ;aAVN,UAAU;;;aAIV,OAAO;sDAMuB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n HTMLInputElement,\n | CheckboxProps<{\n variant: 'checkbox';\n indeterminate?: boolean;\n }>\n | CheckboxProps<{\n variant: 'check';\n }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
|
|
1
|
+
{"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { BaseToggleProps } from './BaseToggle/types';
|
|
3
|
-
export declare const Radio: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "onToggle"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
3
|
+
export declare const Radio: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "onToggle" | "indeterminate"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
4
4
|
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/Control/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU1D,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/Control/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU1D,eAAO,MAAM,KAAK,uKAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
|
|
1
|
+
{"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.cjs.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}
|
|
1
|
+
{"version":3,"file":"Toggle.cjs.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type ForwardRefRenderFunction } from 'react';
|
|
2
2
|
import type { BaseToggleProps } from './BaseToggle/types';
|
|
3
|
-
export declare const _Toggle: ForwardRefRenderFunction<HTMLInputElement, Omit<BaseToggleProps, 'variant' | 'type'> & {
|
|
3
|
+
export declare const _Toggle: ForwardRefRenderFunction<HTMLInputElement, Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {
|
|
4
4
|
variant: 'bookmark' | 'favorite';
|
|
5
5
|
}>;
|
|
6
|
-
export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant"> & {
|
|
6
|
+
export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "indeterminate"> & {
|
|
7
7
|
variant: 'bookmark' | 'favorite';
|
|
8
8
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
9
9
|
export declare const CircleBaseToggle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<{
|
|
@@ -15,6 +15,7 @@ export declare const CircleBaseToggle: import("styled-components").IStyledCompon
|
|
|
15
15
|
onToggle?: ((checked: boolean) => void) | undefined;
|
|
16
16
|
size?: import("./BaseToggle/types").ToggleIconSizeType | undefined;
|
|
17
17
|
type?: "checkbox" | "radio" | undefined;
|
|
18
|
+
indeterminate?: boolean | undefined;
|
|
18
19
|
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
|
|
19
20
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
20
21
|
}, never>> & Omit<import("react").ForwardRefExoticComponent<{
|
|
@@ -26,5 +27,6 @@ export declare const CircleBaseToggle: import("styled-components").IStyledCompon
|
|
|
26
27
|
onToggle?: ((checked: boolean) => void) | undefined;
|
|
27
28
|
size?: import("./BaseToggle/types").ToggleIconSizeType | undefined;
|
|
28
29
|
type?: "checkbox" | "radio" | undefined;
|
|
30
|
+
indeterminate?: boolean | undefined;
|
|
29
31
|
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
|
|
30
32
|
//# sourceMappingURL=Toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,eAAe,CAAC,GAAG;IAC5D,OAAO,EAAE,UAAU,GAAG,UAAU,CAAC;CAClC,CAGF,CAAC;AAEF,eAAO,MAAM,MAAM;aANN,UAAU,GAAG,UAAU;oDAMK,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;sMAI5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.esm.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}
|
|
1
|
+
{"version":3,"file":"Toggle.esm.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}
|
|
@@ -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"];
|
|
23
|
+
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "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), !0).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) {
|
|
@@ -33,6 +33,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
33
33
|
width = _ref.width,
|
|
34
34
|
extendDirection = _ref.extendDirection,
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
|
+
onClick = _ref.onClick,
|
|
36
37
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
37
38
|
var id = react.useId();
|
|
38
39
|
var _useState = react.useState('none'),
|
|
@@ -181,6 +182,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
181
182
|
}, props), {}, {
|
|
182
183
|
children: [/*#__PURE__*/jsxRuntime.jsx(styles$1.StyledSelect, {
|
|
183
184
|
ref: ref,
|
|
185
|
+
onClick: onClick,
|
|
184
186
|
expandedDirection: expandedDirection,
|
|
185
187
|
isPlaceholder: !selectedOption && !!placeholder,
|
|
186
188
|
onPointerDown: function onPointerDown(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useRef,\n useState,\n useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\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 ...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 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","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 type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useRef,\n useState,\n useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\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;AAcK;;;AAVDA;;;;;;;AAOGC;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;AAA0B;;AAIxBH;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAiBxE,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":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAiBxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;AAqR/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"];
|
|
15
|
+
var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "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), !0).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) {
|
|
@@ -25,6 +25,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
25
25
|
width = _ref.width,
|
|
26
26
|
extendDirection = _ref.extendDirection,
|
|
27
27
|
disabled = _ref.disabled,
|
|
28
|
+
onClick = _ref.onClick,
|
|
28
29
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
30
|
var id = useId();
|
|
30
31
|
var _useState = useState('none'),
|
|
@@ -173,6 +174,7 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
|
|
|
173
174
|
}, props), {}, {
|
|
174
175
|
children: [/*#__PURE__*/jsx(StyledSelect, {
|
|
175
176
|
ref: ref,
|
|
177
|
+
onClick: onClick,
|
|
176
178
|
expandedDirection: expandedDirection,
|
|
177
179
|
isPlaceholder: !selectedOption && !!placeholder,
|
|
178
180
|
onPointerDown: function onPointerDown(e) {
|