@lanaco/lnc-react-ui/dist/index-5cttM4t7.js

React component library

import { jsx as i, jsxs as d, Fragment as z } from "react/jsx-runtime";
import _, { useState as w, useRef as F, useEffect as j, useImperativeHandle as P, forwardRef as q } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import U from "./FlexBox.js";
import W from "./IconButton.js";
import { useTheme as X } from "./ThemeProvider.js";
import { n as Z } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as C } from "./consts-C1uHV4xc.js";
import { u as J } from "./useDetectMobile-BC6EGaBc.js";
import { I as H } from "./index-wy-PXQR9.js";
import V from "./Button.js";
import Q from "./Icon.js";
import { l as Y } from "./utils-DtRLzzTZ.js";
const ee = Z.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 (max-width: ${C + "px"}) {
      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 (max-width: ${C + "px"}) {
    & .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"};
    }
  }
`, L = _.forwardRef(
  ({
    columnGap: e = "2rem",
    rowGap: v = "1.25rem",
    scrollBySize: f = 300,
    wrapForMobile: y = !1,
    wrap: n = !1,
    children: u,
    methodsRef: b,
    arrowsVisibleOnHover: S = !0,
    rightAlignArrows: k = !1,
    padding: m = "0",
    showTimesBtn: h,
    noArrows: a,
    noGradient: x = !1,
    hideDisabledArrows: c = !1,
    noMargin: g = !1,
    ...N
  }, T) => {
    const $ = J(), { theme: l } = X(), [t, A] = w(!1), [p, B] = w(!1), [M, I] = w(!0), o = F(), R = () => {
      var s;
      (s = o.current) == null || s.scrollBy(f, 0);
    }, K = () => {
      var s;
      (s = o.current) == null || s.scrollBy(-f, 0);
    }, [E, D] = w(!1);
    j(() => {
      var s, O;
      D(
        ((s = o == null ? void 0 : o.current) == null ? void 0 : s.scrollWidth) > ((O = o == null ? void 0 : o.current) == null ? void 0 : O.clientWidth)
      );
    }, [u]), P(b, () => ({
      scrollToEnd() {
        G();
      },
      scrollLeft() {
        K();
      },
      scrollRight() {
        R();
      }
    }));
    const G = () => {
      o.current.scrollLeft = o.current.scrollWidth;
    };
    return /* @__PURE__ */ i(
      ee,
      {
        ref: T,
        arrowsVisibleOnHover: S,
        hasOverflow: E,
        noArrows: a,
        padding: m,
        rightAlignArrows: k,
        showTimesBtn: h,
        theme: l,
        noMargin: g,
        ...N,
        children: /* @__PURE__ */ d(
          U,
          {
            ref: o,
            className: "scrollable-container",
            columnGap: e,
            rowGap: v,
            wrap: n || y && $ ? "Wrap" : "NoWrap",
            children: [
              a !== !0 && /* @__PURE__ */ d(z, { children: [
                !(c === !0 && p === !0) && /* @__PURE__ */ i(
                  W,
                  {
                    borderRadius: "curved",
                    btnType: "tinted",
                    className: "scroll-arrow-left",
                    color: "neutral",
                    disabled: p,
                    icon: "angle-left",
                    onClick: K
                  }
                ),
                !(c === !0 && t === !0) && /* @__PURE__ */ i(
                  W,
                  {
                    borderRadius: "curved",
                    btnType: "tinted",
                    className: "scroll-arrow-right",
                    color: "neutral",
                    disabled: t,
                    icon: "angle-right",
                    onClick: R
                  }
                )
              ] }),
              /* @__PURE__ */ i(
                H,
                {
                  isHorizontal: !0,
                  onIsNotVisible: () => {
                    p === !0 && B(!1);
                  },
                  onIsVisible: () => {
                    p === !1 && B(!0);
                  }
                }
              ),
              u,
              /* @__PURE__ */ i(
                H,
                {
                  className: "right-scroller",
                  isHorizontal: !0,
                  onIsNotVisible: () => {
                    t === !0 && A(!1), I(!0);
                  },
                  onIsVisible: () => {
                    t === !1 && A(!0), I(!1);
                  }
                }
              ),
              M && E && x !== !0 && /* @__PURE__ */ i("div", { className: "gradient" })
            ]
          }
        )
      }
    );
  }
);
L.propTypes = {
  title: r.string,
  rowGap: r.string,
  columnGap: r.string,
  scrollBySize: r.number,
  wrapForMobile: r.bool,
  wrap: r.bool,
  methodsRef: r.any,
  arrowsVisibleOnHover: r.bool,
  rightAlignArrows: r.bool,
  padding: r.string
};
const re = q((e, v) => {
  const {
    allButton: f = !0,
    items: y = [],
    selectedIds: n = [],
    onSelect: u = () => {
    },
    onRemove: b = () => {
    },
    onSelectAll: S = () => {
    },
    className: k,
    showTimesBtn: m = !1,
    labelKey: h = "label",
    valueKey: a = "value",
    codeKey: x = "code",
    uniqueKey: c,
    typeKey: g,
    productsToolbarName: N = "All",
    ...T
  } = e, $ = (l, t) => {
    n != null && n.includes(t) ? b(l, t) : u(l, t);
  };
  return /* @__PURE__ */ d(
    L,
    {
      ref: v,
      arrowsVisibleOnHover: !1,
      className: k,
      columnGap: "0.75rem",
      padding: "0.25rem 0",
      rightAlignArrows: !0,
      showTimesBtn: m,
      ...T,
      children: [
        f && /* @__PURE__ */ i(
          V,
          {
            borderRadius: "curved",
            btnType: n.length === 0 ? "filled" : "tinted",
            className: "badge-button",
            color: "neutral",
            onClick: S,
            children: N
          }
        ),
        y.map((l, t) => /* @__PURE__ */ d(
          V,
          {
            borderRadius: "curved",
            btnType: n.includes(l.uuid) ? "filled" : "tinted",
            className: "badge-button",
            color: "neutral",
            onClick: () => $(l, l[a]),
            children: [
              Y(l == null ? void 0 : l.icon) && /* @__PURE__ */ d(z, { children: [
                /* @__PURE__ */ i("i", { className: l == null ? void 0 : l.icon }),
                " "
              ] }),
              l[h],
              m === !0 && /* @__PURE__ */ i(
                Q,
                {
                  className: "times-btn",
                  icon: "times",
                  sizeInUnits: "0.75rem",
                  onClick: () => b(
                    l[a],
                    l[h],
                    l[x],
                    c ? l[c] : null,
                    g ? l[g] : null
                  )
                }
              )
            ]
          },
          t
        ))
      ]
    }
  );
});
re.propTypes = {
  allButton: r.bool,
  items: r.array,
  selectedIds: r.array,
  onSelect: r.func,
  onRemove: r.func,
  onSelectAll: r.func,
  className: r.string,
  showTimesBtn: r.bool,
  valuKey: r.string,
  labelKey: r.string,
  codeKey: r.string
};
export {
  re as S
};