@team-monolith/cds 1.119.3 → 1.119.4

package/dist/patterns/LexicalEditor/theme.js

@@ -1,297 +1,335 @@
 import { css } from "@emotion/css";
+import { arrowDownSFillSvg, arrowRightSFillSvg } from "../../icons";
 export function getTheme(theme, editable) {
     return {
-        paragraph: css `
-      color: ${theme.color.foreground.neutralBase};
-
-      /* Default/Paragraph/16px-Rg */
-      font-family: ${theme.fontFamily.ui};
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px; /* 150% */
+        paragraph: css `
+      color: ${theme.color.foreground.neutralBase};
+
+      /* Default/Paragraph/16px-Rg */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
     `,
-        quote: css `
-      color: ${theme.color.container.marbleOnContainer};
-
-      /* Default/Paragraph/14px-Rg */
-      font-family: ${theme.fontFamily.ui};
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 142.857% */
-
-      margin: 16px 0;
-      padding-left: 12px;
-      border-left: 4px solid ${theme.color.container.marbleContainer};
+        quote: css `
+      color: ${theme.color.container.marbleOnContainer};
+
+      /* Default/Paragraph/14px-Rg */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+
+      margin: 16px 0;
+      padding-left: 12px;
+      border-left: 4px solid ${theme.color.container.marbleContainer};
     `,
         coloredQuote: {
-            grey: css `
-        color: ${theme.color.container.marbleOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.marbleContainer};
+            grey: css `
+        color: ${theme.color.container.marbleOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.marbleContainer};
       `,
-            red: css `
-        color: ${theme.color.container.redOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.redContainer};
+            red: css `
+        color: ${theme.color.container.redOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.redContainer};
       `,
-            yellow: css `
-        color: ${theme.color.container.yellowOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.yellowContainer};
+            yellow: css `
+        color: ${theme.color.container.yellowOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.yellowContainer};
       `,
-            blue: css `
-        color: ${theme.color.container.blueOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.blueContainer};
+            blue: css `
+        color: ${theme.color.container.blueOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.blueContainer};
       `,
-            green: css `
-        color: ${theme.color.container.greenOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.greenContainer};
+            green: css `
+        color: ${theme.color.container.greenOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.greenContainer};
       `,
         },
         heading: {
-            h1: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Alt/Heading/32px-Hv */
-        font-family: ${theme.fontFamily.title};
-        font-size: 32px;
-        font-style: normal;
-        font-weight: 900;
-        line-height: 40px; /* 125% */
+            h1: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Alt/Heading/32px-Hv */
+        font-family: ${theme.fontFamily.title};
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 900;
+        line-height: 40px; /* 125% */
       `,
-            h2: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Heading/24px-Bd */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 32px; /* 133.333% */
+            h2: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Heading/24px-Bd */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px; /* 133.333% */
       `,
-            h3: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Paragraph/18px-Bd */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 28px; /* 155.556% */
+            h3: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Paragraph/18px-Bd */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 28px; /* 155.556% */
       `,
         },
-        link: css `
-      color: ${theme.color.foreground.primary};
-      text-decoration: underline;
-      cursor: pointer;
+        link: css `
+      color: ${theme.color.foreground.primary};
+      text-decoration: underline;
+      cursor: pointer;
     `,
         list: {
             nested: {
-                listitem: css `
-          list-style-type: none;
-          &::before,
-          &::after {
-            display: none;
-          }
+                listitem: css `
+          list-style-type: none;
+          &::before,
+          &::after {
+            display: none;
+          }
         `,
             },
             olDepth: [
-                css `
-          padding: 0;
-          margin: 16px 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 16px 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: upper-alpha;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: upper-alpha;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: lower-alpha;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: lower-alpha;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: upper-roman;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: upper-roman;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: lower-roman;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: lower-roman;
+          list-style-position: inside;
         `,
             ],
             ulDepth: [
-                css `
-          padding: 0;
-          margin: 16px 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 16px 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
             ],
-            listitem: css `
-        margin: 0 24px;
-
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Paragraph/16px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 24px; /* 150% */
+            listitem: css `
+        margin: 0 24px;
+
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Paragraph/16px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px; /* 150% */
       `,
         },
-        code: css `
-      margin: 16px 0;
-
-      display: block;
-      padding: 4px 8px;
-      border-radius: 6px;
-      background: ${theme.color.background.neutralAlt};
-
-      color: ${theme.color.foreground.neutralBase};
-
-      /* Mono/Paragraph/14px-Rg */
-      font-family: ${theme.fontFamily.code}, consolas, monospace;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 142.857% */
+        code: css `
+      margin: 16px 0;
+
+      display: block;
+      padding: 4px 8px;
+      border-radius: 6px;
+      background: ${theme.color.background.neutralAlt};
+
+      color: ${theme.color.foreground.neutralBase};
+
+      /* Mono/Paragraph/14px-Rg */
+      font-family: ${theme.fontFamily.code}, consolas, monospace;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
     `,
         text: {
-            code: css `
-        padding: 4px 8px;
-        border-radius: 6px;
-        background: ${theme.color.background.neutralAlt};
-
-        color: ${theme.color.foreground.neutralBase};
-        /* Mono/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.code}, consolas, monospace;
+            code: css `
+        padding: 4px 8px;
+        border-radius: 6px;
+        background: ${theme.color.background.neutralAlt};
+
+        color: ${theme.color.foreground.neutralBase};
+        /* Mono/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.code}, consolas, monospace;
       `,
-            underline: css `
-        text-decoration: underline;
+            underline: css `
+        text-decoration: underline;
       `,
-            strikethrough: css `
-        text-decoration: line-through;
+            strikethrough: css `
+        text-decoration: line-through;
       `,
         },
-        problemInput: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        problemInput: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        problemSelect: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        problemSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        sheetSelect: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        sheetSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        sheetInput: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        sheetInput: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        layoutContainer: css `
-      display: grid;
-      gap: 24px;
+        layoutContainer: css `
+      display: grid;
+      gap: 24px;
     `,
         layoutItem: editable &&
-            css `
-        border: 1px dashed ${theme.color.background.neutralAltActive};
-        overflow: auto;
+            css `
+        border: 1px dashed ${theme.color.background.neutralAltActive};
+        overflow: auto;
       `,
-        selfEvaluation: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        selfEvaluation: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
+        toggle: {
+            container: css `
+        margin: 16px 0;
+        &[open] > summary {
+          margin-bottom: 4px;
+        }
+      `,
+            title: css `
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        & > :last-child {
+          flex: 1;
+          min-width: 0;
+          margin: 0;
+        }
+      `,
+            iconBtn: css `
+        width: 24px;
+        height: 24px;
+        border: 0;
+        padding: 0;
+        background-color: transparent;
+        cursor: pointer;
+
+        &[aria-expanded="false"] {
+          background-image: url(${arrowRightSFillSvg});
+        }
+        &[aria-expanded="true"] {
+          background-image: url(${arrowDownSFillSvg});
+        }
+      `,
+            content: css `
+        padding-left: 28px;
+      `,
+        },
     };
 }

package/dist/patterns/LexicalEditor/utils/toggleUtils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function setDomHiddenUntilFound(dom: HTMLElement): void;
+export declare function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void;

package/dist/patterns/LexicalEditor/utils/toggleUtils.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleUtils.ts
+export function setDomHiddenUntilFound(dom) {
+    // @ts-expect-error 'hidden' 속성은 boolean으로만 정의되어 있지만,
+    // Chromium 계열 브라우저에서는 실험적으로 'until-found' 문자열 값도 지원한다.
+    dom.hidden = "until-found";
+}
+export function domOnBeforeMatch(dom, callback) {
+    if ("onbeforematch" in dom) {
+        dom.onbeforematch = callback;
+    }
+}

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -48,15 +48,15 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ isActive }) => css `
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
+})(({ isActive }) => css `
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
     ${isActive &&
-    `
-      box-shadow: ${shadows.shadow04};
-      span {
-        font-weight: 700;
-      }
-    `}
+    `
+      box-shadow: ${shadows.shadow04};
+      span {
+        font-weight: 700;
+      }
+    `}
   `);

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -21,14 +21,14 @@ export const SegmentedControlGroup = React.forwardRef(function SegmentedControlG
     const { component: Component = "div", className, children, size: _size, fullWidth, disabled: _disabled, multiSelect, value: _value, onChange: _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 }, other, { className: className, css: css `
-          display: flex;
-          padding: 4px;
-          box-sizing: border-box;
-          width: ${fullWidth ? "100%" : "fit-content"};
-          background-color: ${theme.color.background.neutralAlt};
-          border-radius: 8px;
-          border: 1px solid ${theme.color.background.neutralAltActive};
+    return (_jsx(Component, Object.assign({ ref: ref }, other, { className: className, css: css `
+          display: flex;
+          padding: 4px;
+          box-sizing: border-box;
+          width: ${fullWidth ? "100%" : "fit-content"};
+          background-color: ${theme.color.background.neutralAlt};
+          border-radius: 8px;
+          border: 1px solid ${theme.color.background.neutralAltActive};
         `, role: "tablist", "aria-orientation": "horizontal", children: _jsx(Context.Provider, { value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
                     var _a, _b, _c;
                     if (multiSelect) {

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -48,7 +48,7 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
         }
     };
     return (_jsx(SquareButton, Object.assign({}, other, { css: isActive &&
-            css `
-            box-shadow: ${shadows.shadow04};
+            css `
+            box-shadow: ${shadows.shadow04};
           `, ref: ref, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, onClick: handleClick, onKeyDown: handleKeyDown, disabled: context.disabled || props.disabled, "aria-selected": isActive, role: "tab", tabIndex: isActive ? 0 : -1 })));
 });