@team-monolith/cds 1.28.2 → 1.29.1

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { ButtonProps } from "../..";
-export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size" | "startIcon" | "endIcon"> {
-    value: string;
+export interface SegmentedControlButtonProps<T> extends Omit<ButtonProps, "color" | "size" | "startIcon" | "endIcon" | "value"> {
+    value: T;
     startIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
     endIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare const SegmentedControlButton: React.ForwardRefExoticComponent<Omit<SegmentedControlButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const SegmentedControlButton: <T>(props: SegmentedControlButtonProps<T> & {
+    ref?: React.ComponentPropsWithRef<"button">["ref"];
+}) => React.ReactElement;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -14,11 +14,13 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
-import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupPropsContext";
 import { Button, shadows } from "../..";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+// type assertion
 export const SegmentedControlButton = React.forwardRef(function SegmentedControlButton(props, ref) {
     const { onClick, startIcon, endIcon } = props, other = __rest(props, ["onClick", "startIcon", "endIcon"]);
     const context = useContext(SegmentedControlGroupPropsContext);

package/dist/patterns/SegmentedControl/SegmentedControlGroup.d.ts

@@ -1,6 +1,6 @@
 import { ButtonSize, SquareButtonSize } from "../..";
 import React from "react";
-export type SegmentedControlGroupProps = {
+export type SegmentedControlGroupProps<T = string> = {
     className?: string;
     component?: React.ElementType;
     children?: React.ReactNode;
@@ -14,14 +14,16 @@ export type SegmentedControlGroupProps = {
     /** 중복 선택 가능 유무 */
     multiSelect?: false;
     /** 선택된 값 */
-    value: string | undefined;
-    onChange?: (newValue: string) => void;
+    value: T | undefined;
+    onChange?: (newValue: T) => void;
 } | {
     multiSelect: true;
-    value: string[];
-    onChange?: (newValue: string[]) => void;
+    value: T[];
+    onChange?: (newValue: T[]) => void;
 });
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare const SegmentedControlGroup: React.ForwardRefExoticComponent<SegmentedControlGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SegmentedControlGroup: <T>(props: SegmentedControlGroupProps<T> & {
+    ref?: React.ComponentPropsWithRef<"div">["ref"];
+}) => React.ReactElement;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
-import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupPropsContext";
 import React from "react";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+// type assertion
 export const SegmentedControlGroup = React.forwardRef(function SegmentedControlGroup(props, ref) {
-    const { component: Component = "div", className, children, fullWidth, disabled, multiSelect, } = props;
+    const { component: Component = "div", className, children, fullWidth, multiSelect, } = props;
     const theme = useTheme();
+    const Context = SegmentedControlGroupPropsContext;
     return (_jsx(Component, Object.assign({ ref: ref, className: className, css: css `
           display: flex;
           padding: 4px;
@@ -17,7 +20,7 @@ export const SegmentedControlGroup = React.forwardRef(function SegmentedControlG
           background-color: ${theme.color.background.neutralAlt};
           border-radius: 8px;
           border: 1px solid ${theme.color.background.neutralAltActive};
-        ` }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
+        ` }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
                     var _a, _b, _c;
                     if (multiSelect) {
                         if (props.value.includes(newValue)) {

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SegmentedControlGroupProps } from "./SegmentedControlGroup";
-export declare const SegmentedControlGroupPropsContext: import("react").Context<SegmentedControlGroupProps & {
-    onClick?: ((newValue: string) => void) | undefined;
-}>;
+export type SegmentedControlGroupPropsContextType<T> = SegmentedControlGroupProps<T> & {
+    onClick?: (newValue: T) => void;
+};
+export declare const SegmentedControlGroupPropsContext: import("react").Context<SegmentedControlGroupPropsContextType<any>>;

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.js

@@ -1,4 +1,5 @@
 import { createContext } from "react";
+// TODO: type 추론을 더 잘해서 any를 제거하고 싶습니다.
 export const SegmentedControlGroupPropsContext = createContext({
     value: undefined,
     size: "medium",

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import { SquareButtonProps } from "../..";
-export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size" | "icon"> {
-    value: string;
+export interface SegmentedControlSquareButtonProps<T> extends Omit<SquareButtonProps, "color" | "size" | "icon"> {
+    value: T;
     icon: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare const SegmentedControlSquareButton: React.ForwardRefExoticComponent<Omit<SegmentedControlSquareButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const SegmentedControlSquareButton: <T>(props: SegmentedControlSquareButtonProps<T> & {
+    ref?: React.ComponentPropsWithRef<"button">["ref"];
+}) => React.ReactElement;

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -15,10 +15,12 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
 import { shadows, SquareButton } from "../..";
-import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupPropsContext";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+// type assertion
 export const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
     const { onClick, icon } = props, other = __rest(props, ["onClick", "icon"]);
     const context = useContext(SegmentedControlGroupPropsContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.28.2",
+  "version": "1.29.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,