@teamturing/react-kit 2.19.20 → 2.19.22

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 (8) hide show
  1. package/dist/core/ActionList/index.d.ts +5 -4
  2. package/dist/core/GradientText/index.d.ts +1 -1
  3. package/dist/index.js +10 -2
  4. package/dist/theme/index.d.ts +3 -0
  5. package/esm/core/ActionList/ActionListItem.js +3 -1
  6. package/esm/core/ActionList/index.js +4 -1
  7. package/esm/packages/token-studio/esm/token/color/index.js +3 -0
  8. package/package.json +3 -3
package/dist/core/ActionList/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { PropsWithChildren } from 'react';
1
+ import { PropsWithChildren, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
2
2
  import { SxProp } from '../../utils/styled-system';
3
3
  import { ActionListItemProps } from './ActionListItem';
4
4
  import { ActionListSectionDividerProps } from './ActionListSectionDivider';
@@ -11,10 +11,11 @@ type Props = {
11
11
  * `multiple`: 모든 아이템에 Checkbox를 표시합니다.
12
12
  */
13
13
  selectionVariant?: 'single' | 'multiple';
14
+ onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
14
15
  } & SxProp;
15
- type ActionListContextValue = {} & Pick<Props, 'selectionVariant'>;
16
- declare const ActionListContext: import("react").Context<Pick<Props, "selectionVariant">>;
17
- declare const _default: (({ ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
16
+ type ActionListContextValue = {} & Pick<Props, 'selectionVariant' | 'onSelect'>;
17
+ declare const ActionListContext: import("react").Context<Pick<Props, "onSelect" | "selectionVariant">>;
18
+ declare const _default: (({ selectionVariant, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
18
19
  Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, sx, }: PropsWithChildren<ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
19
20
  SectionDivider: ({ color, variant, width, sx }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
20
21
  SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
package/dist/core/GradientText/index.d.ts CHANGED
@@ -273,7 +273,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
273
273
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
274
274
  } & {
275
275
  typography?: import("styled-system").ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
276
- } & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
276
+ } & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
277
277
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
278
278
  }, Props>>;
279
279
  export default GradientText;
package/dist/index.js CHANGED
@@ -5009,6 +5009,9 @@ const bgColor = {
5009
5009
  'bg/primary': palette.violet500,
5010
5010
  'bg/primary/hovered': palette.violet700,
5011
5011
  'bg/primary/pressed': palette.violet700,
5012
+ 'bg/neutral/subtlest': palette.transparent,
5013
+ 'bg/neutral/subtlest/hovered': palette.gray50,
5014
+ 'bg/neutral/subtlest/pressed': palette.gray50,
5012
5015
  'bg/neutral/subtler': palette.transparent,
5013
5016
  'bg/neutral/subtler/hovered': palette.gray100,
5014
5017
  'bg/neutral/subtler/pressed': palette.gray100,
@@ -6941,12 +6944,14 @@ const ActionListItem = ({
6941
6944
  sx
6942
6945
  }) => {
6943
6946
  const {
6944
- selectionVariant
6947
+ selectionVariant,
6948
+ onSelect: defaultOnSelect
6945
6949
  } = React.useContext(ActionListContext);
6946
6950
  if (!selectionVariant && selected) {
6947
6951
  throw new Error('To use selected props in ActionList.Item, ActionList selectionVariant props should be defined.');
6948
6952
  }
6949
6953
  const handleSelect = React.useCallback(event => {
6954
+ defaultOnSelect?.(event);
6950
6955
  propOnSelect?.(event);
6951
6956
  }, [propOnSelect]);
6952
6957
  const handleClick = React.useCallback(event => {
@@ -7274,11 +7279,14 @@ const BaseActionListSectionHeader = styled__default.default.div`
7274
7279
 
7275
7280
  const ActionListContext = /*#__PURE__*/React.createContext({});
7276
7281
  const ActionList = ({
7282
+ selectionVariant,
7283
+ onSelect,
7277
7284
  ...props
7278
7285
  }) => {
7279
7286
  return /*#__PURE__*/jsxRuntimeExports.jsx(ActionListContext.Provider, {
7280
7287
  value: {
7281
- selectionVariant: props.selectionVariant
7288
+ selectionVariant,
7289
+ onSelect
7282
7290
  },
7283
7291
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
7284
7292
  role: 'menu',
package/dist/theme/index.d.ts CHANGED
@@ -216,6 +216,9 @@ declare const theme: {
216
216
  'bg/primary': "#835EEB";
217
217
  'bg/primary/hovered': "#5D43A7";
218
218
  'bg/primary/pressed': "#5D43A7";
219
+ 'bg/neutral/subtlest': "#FFFFFF00";
220
+ 'bg/neutral/subtlest/hovered': "#F9FAFB";
221
+ 'bg/neutral/subtlest/pressed': "#F9FAFB";
219
222
  'bg/neutral/subtler': "#FFFFFF00";
220
223
  'bg/neutral/subtler/hovered': "#F3F4F6";
221
224
  'bg/neutral/subtler/pressed': "#F3F4F6";
package/esm/core/ActionList/ActionListItem.js CHANGED
@@ -28,12 +28,14 @@ const ActionListItem = ({
28
28
  sx
29
29
  }) => {
30
30
  const {
31
- selectionVariant
31
+ selectionVariant,
32
+ onSelect: defaultOnSelect
32
33
  } = useContext(ActionListContext);
33
34
  if (!selectionVariant && selected) {
34
35
  throw new Error('To use selected props in ActionList.Item, ActionList selectionVariant props should be defined.');
35
36
  }
36
37
  const handleSelect = useCallback(event => {
38
+ defaultOnSelect?.(event);
37
39
  propOnSelect?.(event);
38
40
  }, [propOnSelect]);
39
41
  const handleClick = useCallback(event => {
package/esm/core/ActionList/index.js CHANGED
@@ -8,11 +8,14 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
8
8
 
9
9
  const ActionListContext = /*#__PURE__*/createContext({});
10
10
  const ActionList = ({
11
+ selectionVariant,
12
+ onSelect,
11
13
  ...props
12
14
  }) => {
13
15
  return /*#__PURE__*/jsxRuntimeExports.jsx(ActionListContext.Provider, {
14
16
  value: {
15
- selectionVariant: props.selectionVariant
17
+ selectionVariant,
18
+ onSelect
16
19
  },
17
20
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
18
21
  role: 'menu',
package/esm/packages/token-studio/esm/token/color/index.js CHANGED
@@ -26,6 +26,9 @@ const bgColor = {
26
26
  'bg/primary': palette.violet500,
27
27
  'bg/primary/hovered': palette.violet700,
28
28
  'bg/primary/pressed': palette.violet700,
29
+ 'bg/neutral/subtlest': palette.transparent,
30
+ 'bg/neutral/subtlest/hovered': palette.gray50,
31
+ 'bg/neutral/subtlest/pressed': palette.gray50,
29
32
  'bg/neutral/subtler': palette.transparent,
30
33
  'bg/neutral/subtler/hovered': palette.gray100,
31
34
  'bg/neutral/subtler/pressed': palette.gray100,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.19.20",
3
+ "version": "2.19.22",
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",
@@ -55,12 +55,12 @@
55
55
  "@floating-ui/react-dom": "^2.0.2",
56
56
  "@primer/behaviors": "^1.3.6",
57
57
  "@teamturing/icons": "^1.21.0",
58
- "@teamturing/token-studio": "^1.2.0",
58
+ "@teamturing/token-studio": "^1.2.1",
59
59
  "framer-motion": "^10.16.4",
60
60
  "lodash.debounce": "^4.0.8",
61
61
  "lodash.throttle": "^4.1.1",
62
62
  "react-is": "^18.2.0",
63
63
  "styled-system": "^5.1.5"
64
64
  },
65
- "gitHead": "9f4613197191aaf0b7525e4835d7aaea05ce90d7"
65
+ "gitHead": "21f8cf528efba304aaf99cbbd6f1d89b42cb19be"
66
66
  }