@serendie/ui/dist/components/List/ListItem.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as t, jsxs as f } from "react/jsx-runtime";
import { useRef as G, useEffect as O } from "react";
import { NotificationBadge as P } from "../NotificationBadge/NotificationBadge.js";
import { cx as i } from "../../styled-system/css/cx.js";
import { css as g } from "../../styled-system/css/css.js";
import { sva as W } from "../../styled-system/css/sva.js";
const E = W({
  slots: [
    "root",
    "wrapper",
    "textGroup",
    "title",
    "description",
    "subDescription",
    "trailingElement",
    "headingElement",
    "badge"
  ],
  base: {
    root: {
      position: "relative"
    },
    wrapper: {
      minH: 48,
      display: "flex",
      alignItems: "center",
      paddingX: "sd.system.dimension.spacing.medium",
      paddingY: "sd.system.dimension.spacing.extraSmall",
      gap: "sd.system.dimension.spacing.small",
      cursor: "pointer",
      _hover: {
        background: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredVariant}, {colors.sd.system.color.component.surface});"
      },
      _focusVisible: {
        outline: "1px solid",
        outlineColor: "sd.system.color.component.outline"
      },
      _selected: {
        background: "sd.system.color.interaction.selectedSurface",
        _hover: {
          background: "sd.system.color.interaction.selectedSurface"
        }
      },
      _disabled: {
        opacity: 0.3,
        cursor: "not-allowed",
        _selected: {
          background: "transparent"
        }
      }
    },
    textGroup: {
      display: "flex",
      flexDirection: "column",
      flexGrow: 1
    },
    title: {
      py: "sd.system.dimension.spacing.twoExtraSmall",
      textStyle: "sd.system.typography.label.extraLarge_compact",
      color: "sd.system.color.component.onSurface",
      _expanded: {
        textStyle: "sd.system.typography.label.extraLarge_expanded"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    description: {
      textStyle: "sd.system.typography.body.extraSmall_compact",
      color: "sd.system.color.component.onSurfaceVariant",
      _expanded: {
        textStyle: "sd.system.typography.body.extraSmall_expanded"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    subDescription: {
      textStyle: "sd.system.typography.body.extraSmall_compact",
      color: "sd.system.color.component.onSurfaceVariant",
      _expanded: {
        textStyle: "sd.system.typography.body.extraSmall_expanded"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    headingElement: {
      flexShrink: 0,
      "& svg": {
        display: "block",
        maxHeight: "100%",
        maxWidth: "100%",
        width: "24px",
        height: "24px"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    trailingElement: {
      flexShrink: 0,
      "& svg": {
        width: "24px",
        height: "24px"
      },
      _disabled: {
        opacity: 0.3
      }
    },
    badge: {
      flexShrink: 0
    }
  },
  variants: {
    isLargeHeadingElement: {
      true: {
        headingElement: {
          "& svg": {
            width: "40px",
            height: "40px"
          }
        }
      },
      false: {}
    },
    isLargeTrailingElement: {
      true: {
        trailingElement: {
          "& svg": {
            width: "40px",
            height: "40px"
          }
        }
      },
      false: {}
    },
    size: {
      small: {
        wrapper: {
          minH: 38
        }
      }
    }
  }
}), q = ({
  headingElement: v,
  trailingElement: b,
  title: w,
  description: s,
  subDescription: a,
  badge: n,
  children: S,
  disabled: _,
  selected: L,
  focusVisible: N,
  focusable: H = !0,
  className: T,
  leftIcon: l,
  rightIcon: r,
  isLargeLeftIcon: o,
  isLargeRightIcon: d,
  ...m
}) => {
  const y = G(!1);
  O(() => {
    y.current || process.env.NODE_ENV !== "production" && (l || r || o || d) && (y.current = !0, l && console.warn(
      "[ListItem] `leftIcon` は廃止予定です。`headingElement` を使ってください。"
    ), r && console.warn(
      "[ListItem] `rightIcon` は廃止予定です。`trailingElement` を使ってください。"
    ), o && console.warn(
      "[ListItem] `isLargeLeftIcon` は廃止予定です。`isLargeHeadingElement` を使ってください。"
    ), d && console.warn(
      "[ListItem] `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください。"
    ));
  }, []);
  const x = v ?? l, h = b ?? r, c = m.isLargeHeadingElement ?? o, u = m.isLargeTrailingElement ?? d, [k, I] = E.splitVariantProps(m), e = E({
    ...k,
    isLargeHeadingElement: c,
    isLargeTrailingElement: u
  }), p = (!!s || !!a) && !(!!c && !!s && !a), V = i(
    e.wrapper,
    p && g({ alignItems: "flex-start" })
  ), C = i(
    e.headingElement,
    p && g({ marginTop: "sd.system.dimension.spacing.twoExtraSmall" })
  ), D = i(
    e.trailingElement,
    p && g({ marginTop: "sd.system.dimension.spacing.twoExtraSmall" })
  );
  return /* @__PURE__ */ t("li", { className: i(e.root, T), ...I, children: /* @__PURE__ */ f(
    "div",
    {
      tabIndex: H ? 1 : -1,
      className: V,
      "data-disabled": _ ? !0 : void 0,
      "data-selected": L ? !0 : void 0,
      "data-focus-visible": N ? !0 : void 0,
      children: [
        x && /* @__PURE__ */ t(
          "div",
          {
            className: C,
            style: c ? { padding: "0", width: "40px", height: "40px" } : { padding: "0", width: "24px", height: "24px" },
            children: x
          }
        ),
        /* @__PURE__ */ f("div", { className: e.textGroup, children: [
          /* @__PURE__ */ t("span", { className: e.title, children: w }),
          s && /* @__PURE__ */ t("span", { className: e.description, children: s }),
          a && /* @__PURE__ */ t("span", { className: e.subDescription, children: a }),
          S
        ] }),
        h && /* @__PURE__ */ t(
          "div",
          {
            className: D,
            style: u ? { width: "40px", height: "40px" } : { width: "24px", height: "24px" },
            children: h
          }
        ),
        n != null && n > 0 && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(
          P,
          {
            count: n,
            variant: "secondary",
            size: "small",
            position: "relative"
          }
        ) })
      ]
    }
  ) });
};
export {
  q as ListItem,
  E as ListItemStyle
};