@team-monolith/cds 1.30.1 → 1.30.2

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

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

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -19,8 +19,6 @@ 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,8 +1,9 @@
 import { ButtonSize, SquareButtonSize } from "../..";
 import React from "react";
-export type SegmentedControlGroupProps<T = string> = {
+import { PolymorphicProps } from "@mui/base";
+export type SegmentedControlGroupOwnProps<T, RootComponentType extends React.ElementType> = {
     className?: string;
-    component?: React.ElementType;
+    component?: RootComponentType;
     children?: React.ReactNode;
     /** 컴포넌트 크기 */
     size: ButtonSize | SquareButtonSize;
@@ -21,9 +22,14 @@ export type SegmentedControlGroupProps<T = string> = {
     value: T[];
     onChange?: (newValue: T[]) => void;
 });
+export interface SegmentedControlGroupTypeMap<T, RootComponentType extends React.ElementType = "div"> {
+    props: SegmentedControlGroupOwnProps<T, RootComponentType>;
+    defaultComponent: RootComponentType;
+}
+export type SegmentedControlGroupProps<T = string, RootComponentType extends React.ElementType = SegmentedControlGroupTypeMap<T>["defaultComponent"]> = PolymorphicProps<SegmentedControlGroupTypeMap<T, RootComponentType>, RootComponentType>;
+type SegmentedControlGroupComponent = <T = string, RootComponentType extends React.ElementType = "div">(props: SegmentedControlGroupProps<T, RootComponentType>) => React.ReactElement | null;
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare const SegmentedControlGroup: <T>(props: SegmentedControlGroupProps<T> & {
-    ref?: React.ComponentPropsWithRef<"div">["ref"];
-}) => React.ReactElement;
+export declare const SegmentedControlGroup: SegmentedControlGroupComponent;
+export {};

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
@@ -6,13 +17,11 @@ 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, multiSelect, } = props;
+    const { component: Component = "div", className, children, size, fullWidth, disabled, multiSelect, value, onChange } = props, other = __rest(props, ["component", "className", "children", "size", "fullWidth", "disabled", "multiSelect", "value", "onChange"]);
     const theme = useTheme();
     const Context = SegmentedControlGroupPropsContext;
-    return (_jsx(Component, Object.assign({ ref: ref, className: className, css: css `
+    return (_jsx(Component, Object.assign({ ref: ref }, other, { className: className, css: css `
           display: flex;
           padding: 4px;
           box-sizing: border-box;

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

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

package/dist/patterns/SegmentedControl/SegmentedControlGroupPropsContext.js

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

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

@@ -4,9 +4,9 @@ export interface SegmentedControlSquareButtonProps<T> extends Omit<SquareButtonP
     value: T;
     icon: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
+type SegmentedControlSquareButtonComponent = <T = string>(props: SegmentedControlSquareButtonProps<T>) => React.ReactElement | null;
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
-export declare const SegmentedControlSquareButton: <T>(props: SegmentedControlSquareButtonProps<T> & {
-    ref?: React.ComponentPropsWithRef<"button">["ref"];
-}) => React.ReactElement;
+export declare const SegmentedControlSquareButton: SegmentedControlSquareButtonComponent;
+export {};

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -19,8 +19,6 @@ import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupProps
 /**
  * [피그마](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);
@@ -32,7 +30,7 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick, disabled: context.disabled || props.disabled })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/package.json

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