@lanaco/lnc-react-ui/dist/index-CCwfh-7A.js

React component library

import { jsx as o, jsxs as c, Fragment as V } from "react/jsx-runtime";
import j, { useState as w, useRef as F, useEffect as G, useImperativeHandle as M, forwardRef as _ } from "react";
import q from "./FlexBox.js";
import E from "./IconButton.js";
import { useTheme as U } from "./ThemeProvider.js";
import { s as J } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as H } from "./breakpoints-BubDitvo.js";
import { u as P } from "./useDetectMobile-B0Jog4jQ.js";
import { I as K } from "./index-DMmw5Ad5.js";
import O from "./Button.js";
import Q from "./Icon.js";
import { m as X } from "./utils-BUdHa0nB.js";
const Y = J.div`
  position: relative;
  padding: ${(e) => e.padding};

  & button {
    white-space: nowrap;
  }

  & .badge-button {
    ${(e) => e.showTimesBtn === !0 && "padding-left: 0.5rem; padding-right: 0.5rem;"}
  }

  & .gradient {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 4;
    transition: ${"0.3s"};
    right: ${(e) => e.noArrows !== !0 ? "6rem" : "0"};
    width: 2rem;
    background: #fff;
    height: 100%;
    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
    mask-image: linear-gradient(to left, black 10%, transparent 50%);
  }

  & .scrollable-container {
    max-width: -webkit-fill-available;
    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
    max-width: fill-available;

    ${(e) => e.rightAlignArrows === !0 && e.noArrows !== !0 && "margin-right: 6rem"};
    scroll-behavior: smooth;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    ::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */

    &::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */
    }

    @media ${H("S")} {
      margin-right: 0;
    }
  }
  & .scroll-arrow-right,
  & .scroll-arrow-left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    visibility: ${(e) => e.arrowsVisibleOnHover === !1 && e.hasOverflow ? "visible" : "hidden"};
    z-index: 4;
    transition: ${"0.3s"};
  }
  & .scroll-arrow-right {
    ${(e) => e.rightAlignArrows === !0 ? "right: 0" : "right: 0.7rem"};
  }
  & .scroll-arrow-left {
    ${(e) => e.rightAlignArrows === !0 ? "right: 2.625rem" : "left: 0.7rem"};
  }
  & .scrollable-container:hover > .scroll-arrow-left,
  & .scrollable-container:hover > .scroll-arrow-right {
    visibility: ${(e) => e.hasOverflow ? "visible" : "hidden"};
  }

  @media ${H("S")} {
    & .scrollable-container {
      overflow: auto;
    }
    & .scroll-arrow-left,
    & .scroll-arrow-right {
      display: none;
    }

    & .gradient {
      right: 0;
    }

    & .scrollable-container button:nth-of-type(3) {
      ${(e) => e.noMargin !== !0 && "margin-left: 1rem"};
    }
  }
`, Z = j.forwardRef(
  ({
    columnGap: e = "2rem",
    rowGap: p = "1.25rem",
    scrollBySize: d = 300,
    wrapForMobile: v = !1,
    wrap: s = !1,
    children: f,
    methodsRef: u,
    arrowsVisibleOnHover: y = !0,
    rightAlignArrows: k = !1,
    padding: b = "0",
    showTimesBtn: m,
    noArrows: a,
    noGradient: N = !1,
    hideDisabledArrows: n = !1,
    noMargin: h = !1,
    ...S
  }, $) => {
    const x = P(), { theme: r } = U(), [t, A] = w(!1), [g, R] = w(!1), [z, T] = w(!0), l = F(), I = () => {
      var i;
      (i = l.current) == null || i.scrollBy(d, 0);
    }, B = () => {
      var i;
      (i = l.current) == null || i.scrollBy(-d, 0);
    }, [W, D] = w(!1);
    G(() => {
      var i, C;
      D(
        ((i = l == null ? void 0 : l.current) == null ? void 0 : i.scrollWidth) > ((C = l == null ? void 0 : l.current) == null ? void 0 : C.clientWidth)
      );
    }, [f]), M(u, () => ({
      scrollToEnd() {
        L();
      },
      scrollLeft() {
        B();
      },
      scrollRight() {
        I();
      }
    }));
    const L = () => {
      l.current.scrollLeft = l.current.scrollWidth;
    };
    return /* @__PURE__ */ o(
      Y,
      {
        ref: $,
        arrowsVisibleOnHover: y,
        hasOverflow: W,
        noArrows: a,
        padding: b,
        rightAlignArrows: k,
        showTimesBtn: m,
        theme: r,
        noMargin: h,
        ...S,
        children: /* @__PURE__ */ c(
          q,
          {
            ref: l,
            className: "scrollable-container",
            columnGap: e,
            rowGap: p,
            wrap: s || v && x ? "Wrap" : "NoWrap",
            children: [
              a !== !0 && /* @__PURE__ */ c(V, { children: [
                !(n === !0 && g === !0) && /* @__PURE__ */ o(
                  E,
                  {
                    borderRadius: "curved",
                    btnType: "tinted",
                    className: "scroll-arrow-left",
                    color: "neutral",
                    disabled: g,
                    icon: "angle-left",
                    onClick: B
                  }
                ),
                !(n === !0 && t === !0) && /* @__PURE__ */ o(
                  E,
                  {
                    borderRadius: "curved",
                    btnType: "tinted",
                    className: "scroll-arrow-right",
                    color: "neutral",
                    disabled: t,
                    icon: "angle-right",
                    onClick: I
                  }
                )
              ] }),
              /* @__PURE__ */ o(
                K,
                {
                  isHorizontal: !0,
                  onIsNotVisible: () => {
                    g === !0 && R(!1);
                  },
                  onIsVisible: () => {
                    g === !1 && R(!0);
                  }
                }
              ),
              f,
              /* @__PURE__ */ o(
                K,
                {
                  className: "right-scroller",
                  isHorizontal: !0,
                  onIsNotVisible: () => {
                    t === !0 && A(!1), T(!0);
                  },
                  onIsVisible: () => {
                    t === !1 && A(!0), T(!1);
                  }
                }
              ),
              z && W && N !== !0 && /* @__PURE__ */ o("div", { className: "gradient" })
            ]
          }
        )
      }
    );
  }
), ue = _((e, p) => {
  const {
    allButton: d = !0,
    items: v = [],
    selectedIds: s = [],
    onSelect: f = () => {
    },
    onRemove: u = () => {
    },
    onSelectAll: y = () => {
    },
    className: k,
    showTimesBtn: b = !1,
    labelKey: m = "label",
    valueKey: a = "value",
    codeKey: N = "code",
    uniqueKey: n,
    typeKey: h,
    productsToolbarName: S = "All",
    ...$
  } = e, x = (r, t) => {
    s != null && s.includes(t) ? u(r, t) : f(r, t);
  };
  return /* @__PURE__ */ c(
    Z,
    {
      ref: p,
      arrowsVisibleOnHover: !1,
      className: k,
      columnGap: "0.75rem",
      padding: "0.25rem 0",
      rightAlignArrows: !0,
      showTimesBtn: b,
      ...$,
      children: [
        d && /* @__PURE__ */ o(
          O,
          {
            borderRadius: "curved",
            btnType: s.length === 0 ? "filled" : "tinted",
            className: "badge-button",
            color: "neutral",
            onClick: y,
            children: S
          }
        ),
        v.map((r, t) => /* @__PURE__ */ c(
          O,
          {
            borderRadius: "curved",
            btnType: s.includes(r.uuid) ? "filled" : "tinted",
            className: "badge-button",
            color: "neutral",
            onClick: () => x(r, r[a]),
            children: [
              X(r == null ? void 0 : r.icon) && /* @__PURE__ */ c(V, { children: [
                /* @__PURE__ */ o("i", { className: r == null ? void 0 : r.icon }),
                " "
              ] }),
              r[m],
              b === !0 && /* @__PURE__ */ o(
                Q,
                {
                  className: "times-btn",
                  icon: "times",
                  sizeInUnits: "0.75rem",
                  onClick: () => u(
                    r[a],
                    r[m],
                    r[N],
                    n ? r[n] : null,
                    h ? r[h] : null
                  )
                }
              )
            ]
          },
          t
        ))
      ]
    }
  );
});
export {
  ue as S
};