@team-monolith/cds 1.99.12 → 1.99.14

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 (6) hide show
  1. package/dist/patterns/Accordion.d.ts +1 -0
  2. package/dist/patterns/Accordion.js +5 -3
  3. package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js +3 -3
  4. package/dist/patterns/SegmentedControl/SegmentedControlButton.js +1 -1
  5. package/dist/patterns/SegmentedControl/SegmentedControlGroup.js +1 -1
  6. package/package.json +1 -1
package/dist/patterns/Accordion.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface AccordionProps {
7
7
  children: React.ReactNode;
8
8
  open?: boolean;
9
9
  onClick?: () => void;
10
+ buttonLabel?: string;
10
11
  }
11
12
  /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
12
13
  export declare function Accordion(props: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/patterns/Accordion.js CHANGED
@@ -3,14 +3,15 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
3
3
  import { css } from "@emotion/react";
4
4
  import styled from "@emotion/styled";
5
5
  import { ArrowDownSLineIcon, ArrowUpSLineIcon } from "../icons";
6
+ import { RESET_BUTTON } from "../utils/reset";
6
7
  /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
7
8
  export function Accordion(props) {
8
- const { className, icon, title, children, open = false, onClick, wrapperClassName, } = props;
9
+ const { className, icon, title, children, open = false, onClick, wrapperClassName, buttonLabel, } = props;
9
10
  return (_jsxs("div", Object.assign({ css: css `
10
11
  display: flex;
11
12
  flex-direction: column;
12
13
  gap: 2px;
13
- `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
14
+ `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ className: className, onClick: onClick, "aria-expanded": open, "aria-label": buttonLabel }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
14
15
  }
15
16
  const Title = styled.div(({ theme }) => css `
16
17
  display: flex;
@@ -21,7 +22,8 @@ const Title = styled.div(({ theme }) => css `
21
22
  font-weight: 700;
22
23
  line-height: 16px; /* 133.333% */
23
24
  `);
24
- const Container = styled.div `
25
+ const Container = styled.button `
26
+ ${RESET_BUTTON}
25
27
  display: flex;
26
28
  padding: 8px 16px;
27
29
  align-items: center;
package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js CHANGED
@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
14
14
  import { css } from "@emotion/react";
15
15
  import * as React from "react";
16
16
  import styled from "@emotion/styled";
17
- import { CheckboxInput, ArrowRightSLineIcon, HOVER, } from "../../..";
17
+ import { CheckboxInput, ArrowRightSLineIcon, HOVER, RESET_BUTTON, } from "../../..";
18
18
  import { useContext, useId, useRef } from "react";
19
19
  import { DropdownMenu } from "../DropdownMenu";
20
20
  import { DropdownContext } from "../DropdownContext";
@@ -27,7 +27,7 @@ const TYPE_TO_COLOR = (theme, type) => ({
27
27
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
28
28
  */
29
29
  const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
30
- const { className, index, labelCss, component: Component = "div", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
30
+ const { className, index, labelCss, component: Component = "button", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
31
31
  const itemRef = useRef(null);
32
32
  const { open, onCloseOnItemClick, nestedIndex, itemState, setItemState } = useContext(DropdownContext);
33
33
  const dropdownMenuId = `dropdown-menu-${useId()}`;
@@ -50,7 +50,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
50
50
  setSelected(setItemState, absItemIndex);
51
51
  }
52
52
  };
53
- return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
53
+ return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined, css: Component === "button" && css `${RESET_BUTTON}` }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
54
54
  e.stopPropagation();
55
55
  } }))), startIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: startIcon }))), _jsx(LabelDiv, Object.assign({ css: labelCss, type: type }, { children: label }))] }), endIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: endIcon }))), !endIcon && isSubMenuExist && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: _jsx(ArrowRightSLineIcon, {}) })))] })) })), isSubMenuExist && (_jsx(DropdownContext.Provider, Object.assign({ value: {
56
56
  open,
package/dist/patterns/SegmentedControl/SegmentedControlButton.js CHANGED
@@ -30,7 +30,7 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
30
30
  const isActive = context.multiSelect
31
31
  ? context.value.includes(props.value)
32
32
  : context.value === props.value;
33
- return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, "aria-selected": isActive ? "true" : undefined })));
33
+ return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, "aria-selected": isActive ? "true" : undefined, role: "tab" })));
34
34
  });
35
35
  const StyledButton = styled(Button, {
36
36
  shouldForwardProp: (prop) => prop !== "isActive",
package/dist/patterns/SegmentedControl/SegmentedControlGroup.js CHANGED
@@ -29,7 +29,7 @@ export const SegmentedControlGroup = React.forwardRef(function SegmentedControlG
29
29
  background-color: ${theme.color.background.neutralAlt};
30
30
  border-radius: 8px;
31
31
  border: 1px solid ${theme.color.background.neutralAltActive};
32
- ` }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
32
+ `, role: "tablist" }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
33
33
  var _a, _b, _c;
34
34
  if (multiSelect) {
35
35
  if (props.value.includes(newValue)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "1.99.12",
3
+ "version": "1.99.14",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,