@teamturing/react-kit 2.19.8 → 2.19.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/core/Pill/index.d.ts +5 -3
  2. package/dist/index.js +82 -57
  3. package/esm/core/ActionList/ActionListItem.js +2 -2
  4. package/esm/core/ActionList/ActionListSectionHeader.js +1 -1
  5. package/esm/core/Avatar/index.js +1 -1
  6. package/esm/core/Breadcrumbs/BreadcrumbsItem.js +1 -1
  7. package/esm/core/Breadcrumbs/index.js +1 -1
  8. package/esm/core/Checkbox/index.js +1 -1
  9. package/esm/core/CounterBadge/index.js +1 -1
  10. package/esm/core/Datagrid/DatagridBody.js +1 -1
  11. package/esm/core/Datagrid/DatagridHeader.js +1 -1
  12. package/esm/core/Datagrid/DatagridSubheader.js +1 -1
  13. package/esm/core/Datagrid/index.js +1 -1
  14. package/esm/core/DescriptionList/index.js +1 -1
  15. package/esm/core/DialogHandler/index.js +1 -1
  16. package/esm/core/FormControl/FormControlLabel.js +1 -1
  17. package/esm/core/Grid/index.js +3 -3
  18. package/esm/core/Overlay/index.js +1 -1
  19. package/esm/core/OverlayPopper/index.js +1 -1
  20. package/esm/core/OverlaySelectInput/index.js +3 -3
  21. package/esm/core/Pagination/index.js +6 -2
  22. package/esm/core/Pill/index.js +23 -2
  23. package/esm/core/Select/SelectOption.js +1 -1
  24. package/esm/core/Select/index.js +3 -3
  25. package/esm/core/Stack/index.js +1 -1
  26. package/esm/core/Tab/TabItem.js +1 -1
  27. package/esm/core/Tab/index.js +1 -1
  28. package/esm/core/TextInput/TextInputTrailingAction.js +1 -1
  29. package/esm/core/TextInput/index.js +3 -3
  30. package/esm/core/Textarea/index.js +2 -2
  31. package/esm/core/Tooltip/index.js +1 -1
  32. package/package.json +2 -2
  33. package/dist/utils/forcePixelValue.d.ts +0 -6
  34. package/dist/utils/index.d.ts +0 -4
  35. package/dist/utils/isArray.d.ts +0 -1
  36. package/dist/utils/isFunction.d.ts +0 -1
  37. package/dist/utils/isNullable.d.ts +0 -1
  38. package/dist/utils/scrollIntoView.d.ts +0 -11
  39. /package/esm/{utils → packages/utils/esm}/forcePixelValue.js +0 -0
  40. /package/esm/{utils → packages/utils/esm}/isArray.js +0 -0
  41. /package/esm/{utils → packages/utils/esm}/isFunction.js +0 -0
  42. /package/esm/{utils → packages/utils/esm}/isNullable.js +0 -0
  43. /package/esm/{utils → packages/utils/esm}/scrollIntoView.js +0 -0
@@ -1,17 +1,19 @@
1
1
  import { ComponentType, ElementType, HTMLAttributes, ReactNode, SVGProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
2
2
  import { ResponsiveValue } from 'styled-system';
3
3
  import { SxProp } from '../../utils/styled-system';
4
+ type PillSizeType = 'm';
5
+ type PillVariantType = 'outlined' | 'secondary';
4
6
  type Props = {
5
7
  /**
6
8
  * 크기를 정의합니다.
7
9
  * 반응형 디자인이 적용됩니다.
8
10
  */
9
- size?: ResponsiveValue<'m'>;
11
+ size?: ResponsiveValue<PillSizeType>;
10
12
  /**
11
13
  * 색을 정의합니다.
12
14
  * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
13
15
  */
14
- variant?: ResponsiveValue<'outlined'>;
16
+ variant?: ResponsiveValue<PillVariantType>;
15
17
  /**
16
18
  *
17
19
  */
@@ -43,7 +45,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
43
45
  * 색을 정의합니다.
44
46
  * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
45
47
  */
46
- variant?: ResponsiveValue<"outlined"> | undefined;
48
+ variant?: ResponsiveValue<PillVariantType> | undefined;
47
49
  /**
48
50
  *
49
51
  */
package/dist/index.js CHANGED
@@ -4431,11 +4431,67 @@ var icons = /*#__PURE__*/Object.freeze({
4431
4431
  YoutubeIcon: SvgYoutube
4432
4432
  });
4433
4433
 
4434
+ /**
4435
+ * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
4436
+ */
4437
+ const forcePixelValue = value => {
4438
+ return typeof value === 'string' ? value : `${value}px`;
4439
+ };
4440
+
4441
+ const isArray = value => Array.isArray(value);
4442
+
4443
+ const isFunction = value => typeof value === 'function';
4444
+
4445
+ const isNullable = value => value === null || value === undefined;
4446
+
4434
4447
  /**
4435
4448
  * 아무 행위도 하지 않는 함수입니다.
4436
4449
  */
4437
4450
  function noop$2() {}
4438
4451
 
4452
+ const scrollIntoView = ({
4453
+ childrenRef,
4454
+ scrollContainerRef,
4455
+ options = {
4456
+ behavior: 'smooth',
4457
+ direction: 'vertical',
4458
+ offset: 0
4459
+ }
4460
+ }) => {
4461
+ if (!isNullable(scrollContainerRef)) {
4462
+ const startSide = options.direction === 'vertical' ? 'top' : 'left';
4463
+ const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
4464
+ const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
4465
+ const {
4466
+ [startSide]: childrenStart,
4467
+ [endSide]: childrenEnd
4468
+ } = childrenRef.getBoundingClientRect();
4469
+ const {
4470
+ [startSide]: scrollContainerStart,
4471
+ [endSide]: scrollContainerEnd
4472
+ } = scrollContainerRef.getBoundingClientRect();
4473
+ const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
4474
+ const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
4475
+ if (isChildrenStartAboveScrollContainer) {
4476
+ const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
4477
+ scrollContainerRef.scrollTo({
4478
+ behavior: options.behavior,
4479
+ [startSide]: scrollDistance
4480
+ });
4481
+ } else if (isChildrenBottomBelowScrollContainer) {
4482
+ const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
4483
+ scrollContainerRef.scrollTo({
4484
+ behavior: options.behavior,
4485
+ [startSide]: scrollDistance
4486
+ });
4487
+ }
4488
+ } else {
4489
+ childrenRef.scrollIntoView({
4490
+ behavior: options.behavior
4491
+ });
4492
+ }
4493
+ };
4494
+
4439
4495
  var reactIs = {exports: {}};
4440
4496
 
4441
4497
  var reactIs_production_min = {};
@@ -4777,15 +4833,6 @@ if (process.env.NODE_ENV === 'production') {
4777
4833
  }
4778
4834
  var reactIsExports = reactIs.exports;
4779
4835
 
4780
- /**
4781
- * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
4782
- */
4783
- const forcePixelValue = value => {
4784
- return typeof value === 'string' ? value : `${value}px`;
4785
- };
4786
-
4787
- const isNullable = value => value === null || value === undefined;
4788
-
4789
4836
  const device = {
4790
4837
  deviceDesktop: 1280,
4791
4838
  deviceTablet: 900,
@@ -5409,10 +5456,6 @@ const typography = {
5409
5456
  }
5410
5457
  };
5411
5458
 
5412
- const isArray = value => Array.isArray(value);
5413
-
5414
- const isFunction = value => typeof value === 'function';
5415
-
5416
5459
  const View = styled__default.default.div`
5417
5460
  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
5418
5461
  ${sx}
@@ -22029,7 +22072,11 @@ const BasePagination = styled__default.default.nav`
22029
22072
  ${variant({
22030
22073
  prop: 'type',
22031
22074
  variants: {
22032
- default: {},
22075
+ default: {
22076
+ '& > *:not(:first-child):not(:last-child)': {
22077
+ display: 'inline-block !important'
22078
+ }
22079
+ },
22033
22080
  simple: {
22034
22081
  '& > *:not(:first-child):not(:last-child)': {
22035
22082
  display: 'none !important'
@@ -22340,6 +22387,27 @@ const BasePill = styled__default.default(UnstyledButton)`
22340
22387
  color: theme.colors['icon/disabled']
22341
22388
  }
22342
22389
  } : {})
22390
+ },
22391
+ secondary: {
22392
+ 'backgroundColor': theme.colors['bg/secondary'],
22393
+ 'color': theme.colors['text/primary'],
22394
+ '& svg': {
22395
+ color: theme.colors['icon/primary']
22396
+ },
22397
+ '&:hover': {
22398
+ backgroundColor: theme.colors['bg/secondary/hovered']
22399
+ },
22400
+ '&:active': {
22401
+ backgroundColor: theme.colors['bg/secondary/pressed']
22402
+ },
22403
+ ...(disabled ? {
22404
+ 'cursor': 'not-allowed',
22405
+ 'backgroundColor': theme.colors['bg/disabled'],
22406
+ 'color': theme.colors['text/disabled'],
22407
+ '& svg': {
22408
+ color: theme.colors['icon/disabled']
22409
+ }
22410
+ } : {})
22343
22411
  }
22344
22412
  }
22345
22413
  })}
@@ -23195,49 +23263,6 @@ const useResize = resizeCallback => {
23195
23263
  }, []);
23196
23264
  };
23197
23265
 
23198
- const scrollIntoView = ({
23199
- childrenRef,
23200
- scrollContainerRef,
23201
- options = {
23202
- behavior: 'smooth',
23203
- direction: 'vertical',
23204
- offset: 0
23205
- }
23206
- }) => {
23207
- if (!isNullable(scrollContainerRef)) {
23208
- const startSide = options.direction === 'vertical' ? 'top' : 'left';
23209
- const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
23210
- const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
23211
- const {
23212
- [startSide]: childrenStart,
23213
- [endSide]: childrenEnd
23214
- } = childrenRef.getBoundingClientRect();
23215
- const {
23216
- [startSide]: scrollContainerStart,
23217
- [endSide]: scrollContainerEnd
23218
- } = scrollContainerRef.getBoundingClientRect();
23219
- const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
23220
- const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
23221
- if (isChildrenStartAboveScrollContainer) {
23222
- const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
23223
- scrollContainerRef.scrollTo({
23224
- behavior: options.behavior,
23225
- [startSide]: scrollDistance
23226
- });
23227
- } else if (isChildrenBottomBelowScrollContainer) {
23228
- const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
23229
- scrollContainerRef.scrollTo({
23230
- behavior: options.behavior,
23231
- [startSide]: scrollDistance
23232
- });
23233
- }
23234
- } else {
23235
- childrenRef.scrollIntoView({
23236
- behavior: options.behavior
23237
- });
23238
- }
23239
- };
23240
-
23241
23266
  const TabItem = ({
23242
23267
  children,
23243
23268
  leadingIcon: LeadingIcon,
@@ -1,11 +1,11 @@
1
1
  import { useContext, useCallback } from 'react';
2
2
  import SvgCheck from '../../packages/icons/esm/Check.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
5
  import { noop } from '../../packages/utils/esm/noop.js';
4
6
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
5
7
  import styled, { css } from 'styled-components';
6
8
  import '../../node_modules/styled-system/dist/index.esm.js';
7
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
8
- import { isNullable } from '../../utils/isNullable.js';
9
9
  import { sx } from '../../utils/styled-system/index.js';
10
10
  import Grid from '../Grid/index.js';
11
11
  import StyledIcon from '../StyledIcon/index.js';
@@ -1,5 +1,5 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled from 'styled-components';
2
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
3
3
  import { sx } from '../../utils/styled-system/index.js';
4
4
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
5
5
 
@@ -1,7 +1,7 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { forwardRef } from 'react';
2
3
  import styled from 'styled-components';
3
4
  import '../../node_modules/styled-system/dist/index.esm.js';
4
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
5
5
  import { sx } from '../../utils/styled-system/index.js';
6
6
  import Image from '../Image/index.js';
7
7
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { useRef, useState, useEffect } from 'react';
2
3
  import styled, { css } from 'styled-components';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import Tooltip from '../Tooltip/index.js';
5
5
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
6
6
 
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { Children, useState } from 'react';
2
3
  import styled from 'styled-components';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import BreadcrumbsItem from './BreadcrumbsItem.js';
5
5
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
6
6
 
@@ -1,8 +1,8 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { forwardRef } from 'react';
2
3
  import styled, { css } from 'styled-components';
3
4
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
4
5
  import useSafeLayoutEffect from '../../hook/useSafeLayoutEffect.js';
5
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
6
6
  import { sx } from '../../utils/styled-system/index.js';
7
7
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
8
8
 
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled from 'styled-components';
2
3
  import '../../node_modules/styled-system/dist/index.esm.js';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import { sx } from '../../utils/styled-system/index.js';
5
5
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
6
6
  import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
@@ -1,5 +1,5 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled from 'styled-components';
2
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
3
3
  import { sx } from '../../utils/styled-system/index.js';
4
4
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
5
5
 
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
2
3
  import styled from 'styled-components';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import { sx } from '../../utils/styled-system/index.js';
5
5
  import View from '../View/index.js';
6
6
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -1,5 +1,5 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled from 'styled-components';
2
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
3
3
  import { sx } from '../../utils/styled-system/index.js';
4
4
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
5
5
 
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled from 'styled-components';
2
3
  import useRelocation from '../../hook/useRelocation.js';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import { sx } from '../../utils/styled-system/index.js';
5
5
  import DatagridBody from './DatagridBody.js';
6
6
  import DatagridCell from './DatagridCell.js';
@@ -1,4 +1,4 @@
1
- import { isNullable } from '../../utils/isNullable.js';
1
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
2
2
  import Grid from '../Grid/index.js';
3
3
  import ItemList from '../ItemList/index.js';
4
4
  import StyledIcon from '../StyledIcon/index.js';
@@ -1,6 +1,6 @@
1
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
1
2
  import { Children, cloneElement } from 'react';
2
3
  import useDialogHandler from '../../hook/useDialogHandler.js';
3
- import { isFunction } from '../../utils/isFunction.js';
4
4
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
5
5
 
6
6
  const DialogHandler = ({
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { useContext } from 'react';
2
3
  import styled from 'styled-components';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import { sx } from '../../utils/styled-system/index.js';
5
5
  import View from '../View/index.js';
6
6
  import { FormControlContext } from './index.js';
@@ -1,11 +1,11 @@
1
1
  import space from '../../packages/token-studio/esm/token/space/index.js';
2
2
  import '../../packages/token-studio/esm/token/typography/index.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isArray } from '../../packages/utils/esm/isArray.js';
5
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
6
  import { forwardRef } from 'react';
4
7
  import styled from 'styled-components';
5
8
  import '../../node_modules/styled-system/dist/index.esm.js';
6
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
7
- import { isArray } from '../../utils/isArray.js';
8
- import { isNullable } from '../../utils/isNullable.js';
9
9
  import View from '../View/index.js';
10
10
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
11
11
  import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
@@ -1,7 +1,7 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
2
3
  import styled from 'styled-components';
3
4
  import { maxHeight } from '../../node_modules/styled-system/dist/index.esm.js';
4
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
5
5
  import { sx } from '../../utils/styled-system/index.js';
6
6
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
7
7
  import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
@@ -1,11 +1,11 @@
1
1
  import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
2
2
  import space from '../../packages/token-studio/esm/token/space/index.js';
3
3
  import '../../packages/token-studio/esm/token/typography/index.js';
4
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
4
5
  import { Children, cloneElement } from 'react';
5
6
  import useFocusTrap from '../../hook/useFocusTrap.js';
6
7
  import useFocusZone from '../../hook/useFocusZone.js';
7
8
  import useToggleHandler from '../../hook/useToggleHandler.js';
8
- import { isFunction } from '../../utils/isFunction.js';
9
9
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
10
10
  import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
11
11
  import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
@@ -1,12 +1,12 @@
1
1
  import { forwardRef } from 'react';
2
2
  import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
5
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
6
  import { noop } from '../../packages/utils/esm/noop.js';
4
7
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
5
8
  import styled, { css } from 'styled-components';
6
9
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
7
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
8
- import { isFunction } from '../../utils/isFunction.js';
9
- import { isNullable } from '../../utils/isNullable.js';
10
10
  import Overlay from '../Overlay/index.js';
11
11
  import OverlayPopper from '../OverlayPopper/index.js';
12
12
  import StyledIcon from '../StyledIcon/index.js';
@@ -1,10 +1,10 @@
1
1
  import { useCallback, Fragment } from 'react';
2
2
  import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
3
3
  import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
4
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
5
  import { noop } from '../../packages/utils/esm/noop.js';
5
6
  import styled, { css } from 'styled-components';
6
7
  import '../../node_modules/styled-system/dist/index.esm.js';
7
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
8
8
  import { sx } from '../../utils/styled-system/index.js';
9
9
  import UnstyledButton from '../_UnstyledButton.js';
10
10
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -117,7 +117,11 @@ const BasePagination = styled.nav`
117
117
  ${variant({
118
118
  prop: 'type',
119
119
  variants: {
120
- default: {},
120
+ default: {
121
+ '& > *:not(:first-child):not(:last-child)': {
122
+ display: 'inline-block !important'
123
+ }
124
+ },
121
125
  simple: {
122
126
  '& > *:not(:first-child):not(:last-child)': {
123
127
  display: 'none !important'
@@ -1,10 +1,10 @@
1
1
  import { forwardRef, useCallback } from 'react';
2
2
  import SvgClose from '../../packages/icons/esm/Close.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
5
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
4
6
  import styled from 'styled-components';
5
7
  import '../../node_modules/styled-system/dist/index.esm.js';
6
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
7
- import { isNullable } from '../../utils/isNullable.js';
8
8
  import { sx } from '../../utils/styled-system/index.js';
9
9
  import UnstyledButton from '../_UnstyledButton.js';
10
10
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -168,6 +168,27 @@ const BasePill = styled(UnstyledButton)`
168
168
  color: theme.colors['icon/disabled']
169
169
  }
170
170
  } : {})
171
+ },
172
+ secondary: {
173
+ 'backgroundColor': theme.colors['bg/secondary'],
174
+ 'color': theme.colors['text/primary'],
175
+ '& svg': {
176
+ color: theme.colors['icon/primary']
177
+ },
178
+ '&:hover': {
179
+ backgroundColor: theme.colors['bg/secondary/hovered']
180
+ },
181
+ '&:active': {
182
+ backgroundColor: theme.colors['bg/secondary/pressed']
183
+ },
184
+ ...(disabled ? {
185
+ 'cursor': 'not-allowed',
186
+ 'backgroundColor': theme.colors['bg/disabled'],
187
+ 'color': theme.colors['text/disabled'],
188
+ '& svg': {
189
+ color: theme.colors['icon/disabled']
190
+ }
191
+ } : {})
171
192
  }
172
193
  }
173
194
  })}
@@ -1,5 +1,5 @@
1
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
1
2
  import styled from 'styled-components';
2
- import { isNullable } from '../../utils/isNullable.js';
3
3
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
4
4
 
5
5
  const SelectOption = ({
@@ -1,11 +1,11 @@
1
1
  import { forwardRef, useState } from 'react';
2
2
  import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
5
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
6
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
4
7
  import styled, { css } from 'styled-components';
5
8
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
6
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
7
- import { isFunction } from '../../utils/isFunction.js';
8
- import { isNullable } from '../../utils/isNullable.js';
9
9
  import StyledIcon from '../StyledIcon/index.js';
10
10
  import View from '../View/index.js';
11
11
  import SelectOption from './SelectOption.js';
@@ -1,9 +1,9 @@
1
1
  import space from '../../packages/token-studio/esm/token/space/index.js';
2
2
  import '../../packages/token-studio/esm/token/typography/index.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
3
4
  import { forwardRef } from 'react';
4
5
  import styled from 'styled-components';
5
6
  import '../../node_modules/styled-system/dist/index.esm.js';
6
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
7
7
  import View from '../View/index.js';
8
8
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
9
9
  import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
@@ -1,8 +1,8 @@
1
1
  import typography from '../../packages/token-studio/esm/token/typography/index.js';
2
+ import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
2
3
  import { useRef, useContext } from 'react';
3
4
  import styled from 'styled-components';
4
5
  import '../../node_modules/styled-system/dist/index.esm.js';
5
- import { scrollIntoView } from '../../utils/scrollIntoView.js';
6
6
  import View from '../View/index.js';
7
7
  import UnstyledButton from '../_UnstyledButton.js';
8
8
  import { TabContext } from './index.js';
@@ -4,9 +4,9 @@ import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
4
4
  import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
5
5
  import gradient from '../../packages/token-studio/esm/token/gradient/index.js';
6
6
  import '../../packages/token-studio/esm/token/typography/index.js';
7
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
7
8
  import throttle from '../../node_modules/lodash.throttle/index.js';
8
9
  import useResize from '../../hook/useResize.js';
9
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
10
10
  import IconButton from '../IconButton/index.js';
11
11
  import View from '../View/index.js';
12
12
  import TabItem from './TabItem.js';
@@ -1,6 +1,6 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import { forwardRef } from 'react';
2
3
  import styled from 'styled-components';
3
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
4
4
  import { sx } from '../../utils/styled-system/index.js';
5
5
  import UnstyledButton from '../_UnstyledButton.js';
6
6
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -1,12 +1,12 @@
1
1
  import color from '../../packages/token-studio/esm/token/color/index.js';
2
2
  import '../../packages/token-studio/esm/token/typography/index.js';
3
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
5
+ import { isNullable } from '../../packages/utils/esm/isNullable.js';
3
6
  import { forwardRef, cloneElement } from 'react';
4
7
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
5
8
  import styled, { css } from 'styled-components';
6
9
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
7
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
8
- import { isFunction } from '../../utils/isFunction.js';
9
- import { isNullable } from '../../utils/isNullable.js';
10
10
  import View from '../View/index.js';
11
11
  import TextInputTrailingAction from './TextInputTrailingAction.js';
12
12
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -1,8 +1,8 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
2
+ import { isFunction } from '../../packages/utils/esm/isFunction.js';
1
3
  import { forwardRef } from 'react';
2
4
  import styled, { css } from 'styled-components';
3
5
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
4
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
5
- import { isFunction } from '../../utils/isFunction.js';
6
6
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
7
7
 
8
8
  const Textarea = /*#__PURE__*/forwardRef(({
@@ -1,5 +1,5 @@
1
+ import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
1
2
  import styled, { keyframes } from 'styled-components';
2
- import { forcePixelValue } from '../../utils/forcePixelValue.js';
3
3
  import { sx } from '../../utils/styled-system/index.js';
4
4
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.19.8",
3
+ "version": "2.19.10",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -62,5 +62,5 @@
62
62
  "react-is": "^18.2.0",
63
63
  "styled-system": "^5.1.5"
64
64
  },
65
- "gitHead": "da545ffe3e84ff72c4d7824332665a1f9d8b360e"
65
+ "gitHead": "067156f6704f7daaf43fad373029485b5e751740"
66
66
  }
@@ -1,6 +0,0 @@
1
- type CSSPixelValue = number | string;
2
- /**
3
- * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
4
- */
5
- export declare const forcePixelValue: (value: CSSPixelValue) => string;
6
- export {};
@@ -1,4 +0,0 @@
1
- export { forcePixelValue } from './forcePixelValue';
2
- export { isArray } from './isArray';
3
- export { isFunction } from './isFunction';
4
- export { isNullable } from './isNullable';
@@ -1 +0,0 @@
1
- export declare const isArray: (value: any) => value is any[];
@@ -1 +0,0 @@
1
- export declare const isFunction: (value: any) => value is (...args: any[]) => any;
@@ -1 +0,0 @@
1
- export declare const isNullable: (value: any) => value is null | undefined;
@@ -1,11 +0,0 @@
1
- type Options = {
2
- behavior?: ScrollBehavior;
3
- direction?: 'horizontal' | 'vertical';
4
- offset?: number;
5
- };
6
- export declare const scrollIntoView: ({ childrenRef, scrollContainerRef, options, }: {
7
- childrenRef: HTMLElement;
8
- scrollContainerRef?: HTMLElement | undefined;
9
- options: Options;
10
- }) => void;
11
- export {};
File without changes
File without changes
File without changes