kdpa-components 1.35.2 → 1.35.3

package/dist/Chip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KdpaChip } from "./KdpaChip";
+export type { KdpaChipProps } from "./KdpaChip";
+//# sourceMappingURL=index.d.ts.map

package/dist/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/Chip/index.js

@@ -0,0 +1,61 @@
+import { j as o } from "../jsx-runtime-944c88e2.js";
+import { KdpaTooltip as a } from "../Tooltips/index.js";
+import { G as l } from "../iconBase-800b43ff.js";
+import "react";
+import "../Tooltip-4b1baf1b.js";
+import "../extends-393586f3.js";
+import "../identifier-9dfe30d8.js";
+import "../emotion-memoize.esm-021d0d4e.js";
+import "../_commonjsHelpers-92157f1b.js";
+import "../useThemeProps-7d04a175.js";
+import "../emotion-is-prop-valid.esm-b7f48706.js";
+import "../useTheme-014a54ad.js";
+import "../Popper-490e6477.js";
+import "../Portal-b4f8657f.js";
+import "react-dom";
+import "../useForkRef-0781dda0.js";
+import "../useEventCallback-fe4fd69c.js";
+import "../HTMLElementType-ff213f3c.js";
+import "../exactProp-3aaa3ecc.js";
+import "../ownerDocument-5430cd5b.js";
+import "../chainPropTypes-004bf492.js";
+import "../refType-af1a9f54.js";
+import "../popper-78c6b162.js";
+import "../useSlotProps-f238319f.js";
+import "../useControlled-cc2d41cb.js";
+import "../useId-e7dff7be.js";
+import "../useIsFocusVisible-4693b580.js";
+import "../Grow-151a20f6.js";
+import "../utils-129661c6.js";
+import "../TransitionGroupContext-7435e195.js";
+import "../setPrototypeOf-98a00546.js";
+import "../elementAcceptingRef-803dfd80.js";
+import "../Zoom-b84bdc2b.js";
+function n(t) {
+  return l({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm52.7 283.3L256 278.6l-52.7 52.7c-6.2 6.2-16.4 6.2-22.6 0-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3l52.7-52.7-52.7-52.7c-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3 6.2-6.2 16.4-6.2 22.6 0l52.7 52.7 52.7-52.7c6.2-6.2 16.4-6.2 22.6 0 6.2 6.2 6.2 16.4 0 22.6L278.6 256l52.7 52.7c6.2 6.2 6.2 16.4 0 22.6-6.2 6.3-16.4 6.3-22.6 0z" } }] })(t);
+}
+function J({
+  color: t,
+  title: i,
+  children: r,
+  className: m = "",
+  onClose: p,
+  onClick: c,
+  ...s
+}) {
+  return /* @__PURE__ */ o.jsx(a, { ...s, title: i, placement: "top", children: /* @__PURE__ */ o.jsxs(
+    "span",
+    {
+      style: { color: `${t}`, backgroundColor: `${t}1f` },
+      className: `kdpa-chip kdpa-chip--pill ${m}`,
+      onClick: c,
+      children: [
+        r,
+        p && /* @__PURE__ */ o.jsx("span", { className: "kdpa-chip__close-button", onClick: p, children: /* @__PURE__ */ o.jsx(n, { size: 18 }) })
+      ]
+    }
+  ) });
+}
+export {
+  J as KdpaChip
+};

package/dist/Chip-7b1a25ce.js

@@ -0,0 +1,444 @@
+import { _ as u, a as J } from "./extends-393586f3.js";
+import * as b from "react";
+import { g as Q, h as r, a as d, P as l } from "./identifier-9dfe30d8.js";
+import { g as X, s as K, u as Y, c as k, a as Z } from "./useThemeProps-7d04a175.js";
+import { c as w } from "./createSvgIcon-b80a8a41.js";
+import { j as m } from "./jsx-runtime-944c88e2.js";
+import { u as oo } from "./useForkRef-0781dda0.js";
+import { B as M } from "./ButtonBase-0f9f324d.js";
+import { u as ao } from "./unsupportedProp-3dbf01f6.js";
+const lo = w(/* @__PURE__ */ m.jsx("path", {
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+}), "Cancel");
+function eo(o) {
+  return Q("MuiChip", o);
+}
+const ro = X("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), e = ro, co = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"], io = (o) => {
+  const {
+    classes: a,
+    disabled: s,
+    size: c,
+    color: n,
+    iconColor: g,
+    onDelete: f,
+    clickable: t,
+    variant: p
+  } = o, $ = {
+    root: ["root", p, s && "disabled", `size${r(c)}`, `color${r(n)}`, t && "clickable", t && `clickableColor${r(n)}`, f && "deletable", f && `deletableColor${r(n)}`, `${p}${r(n)}`],
+    label: ["label", `label${r(c)}`],
+    avatar: ["avatar", `avatar${r(c)}`, `avatarColor${r(n)}`],
+    icon: ["icon", `icon${r(c)}`, `iconColor${r(g)}`],
+    deleteIcon: ["deleteIcon", `deleteIcon${r(c)}`, `deleteIconColor${r(n)}`, `deleteIcon${r(p)}Color${r(n)}`]
+  };
+  return Z($, eo, a);
+}, no = K("div", {
+  name: "MuiChip",
+  slot: "Root",
+  overridesResolver: (o, a) => {
+    const {
+      ownerState: s
+    } = o, {
+      color: c,
+      iconColor: n,
+      clickable: g,
+      onDelete: f,
+      size: t,
+      variant: p
+    } = s;
+    return [{
+      [`& .${e.avatar}`]: a.avatar
+    }, {
+      [`& .${e.avatar}`]: a[`avatar${r(t)}`]
+    }, {
+      [`& .${e.avatar}`]: a[`avatarColor${r(c)}`]
+    }, {
+      [`& .${e.icon}`]: a.icon
+    }, {
+      [`& .${e.icon}`]: a[`icon${r(t)}`]
+    }, {
+      [`& .${e.icon}`]: a[`iconColor${r(n)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a.deleteIcon
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIcon${r(t)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIconColor${r(c)}`]
+    }, {
+      [`& .${e.deleteIcon}`]: a[`deleteIcon${r(p)}Color${r(c)}`]
+    }, a.root, a[`size${r(t)}`], a[`color${r(c)}`], g && a.clickable, g && c !== "default" && a[`clickableColor${r(c)})`], f && a.deletable, f && c !== "default" && a[`deletableColor${r(c)}`], a[p], a[`${p}${r(c)}`]];
+  }
+})(({
+  theme: o,
+  ownerState: a
+}) => {
+  const s = o.palette.mode === "light" ? o.palette.grey[700] : o.palette.grey[300];
+  return u({
+    maxWidth: "100%",
+    fontFamily: o.typography.fontFamily,
+    fontSize: o.typography.pxToRem(13),
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 32,
+    color: (o.vars || o).palette.text.primary,
+    backgroundColor: (o.vars || o).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: "nowrap",
+    transition: o.transitions.create(["background-color", "box-shadow"]),
+    // label will inherit this from root, then `clickable` class overrides this for both
+    cursor: "default",
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: "none",
+    border: 0,
+    // Remove `button` border
+    padding: 0,
+    // Remove `button` padding
+    verticalAlign: "middle",
+    boxSizing: "border-box",
+    [`&.${e.disabled}`]: {
+      opacity: (o.vars || o).palette.action.disabledOpacity,
+      pointerEvents: "none"
+    },
+    [`& .${e.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: o.vars ? o.vars.palette.Chip.defaultAvatarColor : s,
+      fontSize: o.typography.pxToRem(12)
+    },
+    [`& .${e.avatarColorPrimary}`]: {
+      color: (o.vars || o).palette.primary.contrastText,
+      backgroundColor: (o.vars || o).palette.primary.dark
+    },
+    [`& .${e.avatarColorSecondary}`]: {
+      color: (o.vars || o).palette.secondary.contrastText,
+      backgroundColor: (o.vars || o).palette.secondary.dark
+    },
+    [`& .${e.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: o.typography.pxToRem(10)
+    },
+    [`& .${e.icon}`]: u({
+      marginLeft: 5,
+      marginRight: -6
+    }, a.size === "small" && {
+      fontSize: 18,
+      marginLeft: 4,
+      marginRight: -4
+    }, a.iconColor === a.color && u({
+      color: o.vars ? o.vars.palette.Chip.defaultIconColor : s
+    }, a.color !== "default" && {
+      color: "inherit"
+    })),
+    [`& .${e.deleteIcon}`]: u({
+      WebkitTapHighlightColor: "transparent",
+      color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.26)` : d(o.palette.text.primary, 0.26),
+      fontSize: 22,
+      cursor: "pointer",
+      margin: "0 5px 0 -6px",
+      "&:hover": {
+        color: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / 0.4)` : d(o.palette.text.primary, 0.4)
+      }
+    }, a.size === "small" && {
+      fontSize: 16,
+      marginRight: 4,
+      marginLeft: -4
+    }, a.color !== "default" && {
+      color: o.vars ? `rgba(${o.vars.palette[a.color].contrastTextChannel} / 0.7)` : d(o.palette[a.color].contrastText, 0.7),
+      "&:hover, &:active": {
+        color: (o.vars || o).palette[a.color].contrastText
+      }
+    })
+  }, a.size === "small" && {
+    height: 24
+  }, a.color !== "default" && {
+    backgroundColor: (o.vars || o).palette[a.color].main,
+    color: (o.vars || o).palette[a.color].contrastText
+  }, a.onDelete && {
+    [`&.${e.focusVisible}`]: {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : d(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
+    }
+  }, a.onDelete && a.color !== "default" && {
+    [`&.${e.focusVisible}`]: {
+      backgroundColor: (o.vars || o).palette[a.color].dark
+    }
+  });
+}, ({
+  theme: o,
+  ownerState: a
+}) => u({}, a.clickable && {
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.hoverOpacity}))` : d(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.hoverOpacity)
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.selectedChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.focusOpacity}))` : d(o.palette.action.selected, o.palette.action.selectedOpacity + o.palette.action.focusOpacity)
+  },
+  "&:active": {
+    boxShadow: (o.vars || o).shadows[1]
+  }
+}, a.clickable && a.color !== "default" && {
+  [`&:hover, &.${e.focusVisible}`]: {
+    backgroundColor: (o.vars || o).palette[a.color].dark
+  }
+}), ({
+  theme: o,
+  ownerState: a
+}) => u({}, a.variant === "outlined" && {
+  backgroundColor: "transparent",
+  border: o.vars ? `1px solid ${o.vars.palette.Chip.defaultBorder}` : `1px solid ${o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700]}`,
+  [`&.${e.clickable}:hover`]: {
+    backgroundColor: (o.vars || o).palette.action.hover
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: (o.vars || o).palette.action.focus
+  },
+  [`& .${e.avatar}`]: {
+    marginLeft: 4
+  },
+  [`& .${e.avatarSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${e.icon}`]: {
+    marginLeft: 4
+  },
+  [`& .${e.iconSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${e.deleteIcon}`]: {
+    marginRight: 5
+  },
+  [`& .${e.deleteIconSmall}`]: {
+    marginRight: 3
+  }
+}, a.variant === "outlined" && a.color !== "default" && {
+  color: (o.vars || o).palette[a.color].main,
+  border: `1px solid ${o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : d(o.palette[a.color].main, 0.7)}`,
+  [`&.${e.clickable}:hover`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : d(o.palette[a.color].main, o.palette.action.hoverOpacity)
+  },
+  [`&.${e.focusVisible}`]: {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.focusOpacity})` : d(o.palette[a.color].main, o.palette.action.focusOpacity)
+  },
+  [`& .${e.deleteIcon}`]: {
+    color: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / 0.7)` : d(o.palette[a.color].main, 0.7),
+    "&:hover, &:active": {
+      color: (o.vars || o).palette[a.color].main
+    }
+  }
+})), to = K("span", {
+  name: "MuiChip",
+  slot: "Label",
+  overridesResolver: (o, a) => {
+    const {
+      ownerState: s
+    } = o, {
+      size: c
+    } = s;
+    return [a.label, a[`label${r(c)}`]];
+  }
+})(({
+  ownerState: o
+}) => u({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: "nowrap"
+}, o.size === "small" && {
+  paddingLeft: 8,
+  paddingRight: 8
+}));
+function j(o) {
+  return o.key === "Backspace" || o.key === "Delete";
+}
+const U = /* @__PURE__ */ b.forwardRef(function(a, s) {
+  const c = Y({
+    props: a,
+    name: "MuiChip"
+  }), {
+    avatar: n,
+    className: g,
+    clickable: f,
+    color: t = "default",
+    component: p,
+    deleteIcon: $,
+    disabled: I = !1,
+    icon: y,
+    label: F,
+    onClick: T,
+    onDelete: v,
+    onKeyDown: N,
+    onKeyUp: E,
+    size: S = "medium",
+    variant: W = "filled",
+    tabIndex: _,
+    skipFocusWhenDisabled: B = !1
+    // TODO v6: Rename to `focusableWhenDisabled`.
+  } = c, h = J(c, co), x = b.useRef(null), A = oo(x, s), L = (i) => {
+    i.stopPropagation(), v && v(i);
+  }, H = (i) => {
+    i.currentTarget === i.target && j(i) && i.preventDefault(), N && N(i);
+  }, q = (i) => {
+    i.currentTarget === i.target && (v && j(i) ? v(i) : i.key === "Escape" && x.current && x.current.blur()), E && E(i);
+  }, O = f !== !1 && T ? !0 : f, R = O || v ? M : p || "div", z = u({}, c, {
+    component: R,
+    disabled: I,
+    size: S,
+    color: t,
+    iconColor: /* @__PURE__ */ b.isValidElement(y) && y.props.color || t,
+    onDelete: !!v,
+    clickable: O,
+    variant: W
+  }), C = io(z), G = R === M ? u({
+    component: p || "div",
+    focusVisibleClassName: C.focusVisible
+  }, v && {
+    disableRipple: !0
+  }) : {};
+  let V = null;
+  v && (V = $ && /* @__PURE__ */ b.isValidElement($) ? /* @__PURE__ */ b.cloneElement($, {
+    className: k($.props.className, C.deleteIcon),
+    onClick: L
+  }) : /* @__PURE__ */ m.jsx(lo, {
+    className: k(C.deleteIcon),
+    onClick: L
+  }));
+  let P = null;
+  n && /* @__PURE__ */ b.isValidElement(n) && (P = /* @__PURE__ */ b.cloneElement(n, {
+    className: k(C.avatar, n.props.className)
+  }));
+  let D = null;
+  return y && /* @__PURE__ */ b.isValidElement(y) && (D = /* @__PURE__ */ b.cloneElement(y, {
+    className: k(C.icon, y.props.className)
+  })), process.env.NODE_ENV !== "production" && P && D && console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one."), /* @__PURE__ */ m.jsxs(no, u({
+    as: R,
+    className: k(C.root, g),
+    disabled: O && I ? !0 : void 0,
+    onClick: T,
+    onKeyDown: H,
+    onKeyUp: q,
+    ref: A,
+    tabIndex: B && I ? -1 : _,
+    ownerState: z
+  }, G, h, {
+    children: [P || D, /* @__PURE__ */ m.jsx(to, {
+      className: k(C.label),
+      ownerState: z,
+      children: F
+    }), V]
+  }));
+});
+process.env.NODE_ENV !== "production" && (U.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The Avatar element to display.
+   */
+  avatar: l.element,
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: ao,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: l.object,
+  /**
+   * @ignore
+   */
+  className: l.string,
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable: l.bool,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color: l.oneOfType([l.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), l.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: l.elementType,
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: l.element,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: l.bool,
+  /**
+   * Icon element.
+   */
+  icon: l.element,
+  /**
+   * The content of the component.
+   */
+  label: l.node,
+  /**
+   * @ignore
+   */
+  onClick: l.func,
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: l.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: l.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: l.func,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: l.oneOfType([l.oneOf(["medium", "small"]), l.string]),
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled: l.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: l.oneOfType([l.arrayOf(l.oneOfType([l.func, l.object, l.bool])), l.func, l.object]),
+  /**
+   * @ignore
+   */
+  tabIndex: l.number,
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant: l.oneOfType([l.oneOf(["filled", "outlined"]), l.string])
+});
+const $o = U;
+export {
+  $o as C
+};