@lax-wp/design-system 0.13.69 → 0.13.72
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.
- package/dist/components/layout/CustomScrollbar.cjs.js +1 -1
- package/dist/components/layout/CustomScrollbar.cjs.js.map +1 -1
- package/dist/components/layout/CustomScrollbar.es.js +43 -20
- package/dist/components/layout/CustomScrollbar.es.js.map +1 -1
- package/dist/components/user-avatar/constants.cjs.js +1 -1
- package/dist/components/user-avatar/constants.cjs.js.map +1 -1
- package/dist/components/user-avatar/constants.d.ts +1 -0
- package/dist/components/user-avatar/constants.es.js +3 -1
- package/dist/components/user-avatar/constants.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("../../hooks/useEventListener.cjs.js"),w=require("../../_virtual/index.cjs.js"),i=require("react"),f=require("react-custom-scrollbars-2"),l=i.memo(i.forwardRef(({adjustWithScreen:n,children:a,renderViewClassName:u,fullHeight:c,...s},d)=>{const[h,m]=i.useState(window.innerHeight),r=i.useRef(null),b=()=>{n&&m(window.innerHeight)};return g.useEventListener("resize",b),i.useImperativeHandle(d,()=>({get getInstance(){return r.current},get view(){return r.current?.view??null},scrollToTop:()=>{r.current&&r.current.scrollToTop()},scrollToRight:()=>{r.current&&r.current.scrollToRight()}}),[]),o.jsx(f.Scrollbars,{ref:r,autoHide:!0,renderTrackVertical:({style:e,...t})=>o.jsx("div",{style:e,className:"h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size",...t}),renderThumbVertical:({style:e,...t})=>o.jsx("div",{style:{...e,position:"absolute",top:0,right:2},className:"rounded-md bg-[#00000033] dark:bg-black-500 !w-2 transition-[width] duration-200 ease-out hover:!w-3",...t}),renderTrackHorizontal:({style:e,...t})=>o.jsx("div",{style:e,className:"w-full bottom-0 left-0 rounded-md z-[1001] !h-scrollbar-size ",...t}),renderThumbHorizontal:({style:e,...t})=>o.jsx("div",{style:{...e,position:"absolute",left:0,bottom:2},className:"rounded-md bg-[#00000033] dark:bg-black-500 !h-2 transition-[height] duration-200 ease-out hover:!h-3",...t}),renderView:({style:e,...t})=>o.jsx("div",{className:w("h-full [&::-webkit-scrollbar]:hidden",u),style:{...e,marginRight:0,marginBottom:0,scrollbarWidth:"none"},...t}),...s,style:{...s.style||{},zIndex:0,...!s.autoHeight&&!s.style?.height?{height:c?"100%":h}:{}},children:a})}));l.displayName="CustomScrollbar";exports.CustomScrollbar=l;
|
|
2
2
|
//# sourceMappingURL=CustomScrollbar.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomScrollbar.cjs.js","sources":["../../../src/components/layout/CustomScrollbar.tsx"],"sourcesContent":["import { useEventListener } from '../../hooks/useEventListener';\nimport cn from 'classnames';\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef, CSSProperties } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\nimport type { ScrollbarProps } from 'react-custom-scrollbars-2';\n\n/**\n * Custom scrollbar handle for external control\n */\nexport interface CustomScrollbarHandle {\n /** Get the Scrollbars instance */\n getInstance?: Scrollbars | null;\n /** Direct access to the scrollable view DOM element */\n view?: HTMLElement | null;\n /** Scroll to the top of the container */\n scrollToTop?: () => void;\n /** Scroll to the right of the container */\n scrollToRight?: () => void;\n}\n\n/**\n * Props for the CustomScrollbar component\n */\nexport interface CustomScrollbarProps {\n /** Content to render inside the scrollbar */\n children: React.ReactNode;\n /** Whether to adjust height based on screen size */\n adjustWithScreen?: boolean;\n /** Additional CSS classes for the inner view */\n renderViewClassName?: string;\n /** Whether to use full height */\n fullHeight?: boolean;\n}\n\n/**\n * CustomScrollbar component provides a styled scrollable container\n * with custom scrollbar appearance\n *\n * @example\n * ```tsx\n * <CustomScrollbar>\n * <div>Scrollable content...</div>\n * </CustomScrollbar>\n *\n * // With ref for programmatic control\n * const scrollRef = useRef<CustomScrollbarHandle>(null);\n * <CustomScrollbar ref={scrollRef}>\n * <div>Content...</div>\n * </CustomScrollbar>\n * // scrollRef.current?.scrollToTop();\n * ```\n */\nexport const CustomScrollbar = React.memo(\n React.forwardRef(\n (\n { adjustWithScreen, children, renderViewClassName, fullHeight, ...props }: CustomScrollbarProps & ScrollbarProps,\n scrollBarRef: ForwardedRef<CustomScrollbarHandle>,\n ) => {\n const [height, setHeight] = useState<string | number>(window.innerHeight);\n const ref = useRef<Scrollbars | null>(null);\n\n const handleSize = () => {\n if (adjustWithScreen) {\n setHeight(window.innerHeight);\n }\n };\n useEventListener('resize', handleSize);\n\n useImperativeHandle(\n scrollBarRef,\n () => ({\n get getInstance() {\n return ref.current;\n },\n get view() {\n return (ref.current as unknown as { view?: HTMLElement })?.view ?? null;\n },\n scrollToTop: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToTop();\n }\n },\n scrollToRight: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToRight();\n }\n },\n }),\n [],\n );\n\n return (\n <Scrollbars\n ref={ref}\n autoHide\n renderTrackVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size' {..._props} />\n )}\n renderThumbVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div
|
|
1
|
+
{"version":3,"file":"CustomScrollbar.cjs.js","sources":["../../../src/components/layout/CustomScrollbar.tsx"],"sourcesContent":["import { useEventListener } from '../../hooks/useEventListener';\nimport cn from 'classnames';\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef, CSSProperties } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\nimport type { ScrollbarProps } from 'react-custom-scrollbars-2';\n\n/**\n * Custom scrollbar handle for external control\n */\nexport interface CustomScrollbarHandle {\n /** Get the Scrollbars instance */\n getInstance?: Scrollbars | null;\n /** Direct access to the scrollable view DOM element */\n view?: HTMLElement | null;\n /** Scroll to the top of the container */\n scrollToTop?: () => void;\n /** Scroll to the right of the container */\n scrollToRight?: () => void;\n}\n\n/**\n * Props for the CustomScrollbar component\n */\nexport interface CustomScrollbarProps {\n /** Content to render inside the scrollbar */\n children: React.ReactNode;\n /** Whether to adjust height based on screen size */\n adjustWithScreen?: boolean;\n /** Additional CSS classes for the inner view */\n renderViewClassName?: string;\n /** Whether to use full height */\n fullHeight?: boolean;\n}\n\n/**\n * CustomScrollbar component provides a styled scrollable container\n * with custom scrollbar appearance\n *\n * @example\n * ```tsx\n * <CustomScrollbar>\n * <div>Scrollable content...</div>\n * </CustomScrollbar>\n *\n * // With ref for programmatic control\n * const scrollRef = useRef<CustomScrollbarHandle>(null);\n * <CustomScrollbar ref={scrollRef}>\n * <div>Content...</div>\n * </CustomScrollbar>\n * // scrollRef.current?.scrollToTop();\n * ```\n */\nexport const CustomScrollbar = React.memo(\n React.forwardRef(\n (\n { adjustWithScreen, children, renderViewClassName, fullHeight, ...props }: CustomScrollbarProps & ScrollbarProps,\n scrollBarRef: ForwardedRef<CustomScrollbarHandle>,\n ) => {\n const [height, setHeight] = useState<string | number>(window.innerHeight);\n const ref = useRef<Scrollbars | null>(null);\n\n const handleSize = () => {\n if (adjustWithScreen) {\n setHeight(window.innerHeight);\n }\n };\n useEventListener('resize', handleSize);\n\n useImperativeHandle(\n scrollBarRef,\n () => ({\n get getInstance() {\n return ref.current;\n },\n get view() {\n return (ref.current as unknown as { view?: HTMLElement })?.view ?? null;\n },\n scrollToTop: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToTop();\n }\n },\n scrollToRight: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToRight();\n }\n },\n }),\n [],\n );\n\n return (\n <Scrollbars\n ref={ref}\n autoHide\n renderTrackVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size' {..._props} />\n )}\n renderThumbVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n // `position: absolute` + `right`/`top` are set inline so they win over the library's\n // default inline `position: relative`. Anchoring the right (outer) edge lets the\n // hover width-expansion grow inward (leftward) instead of overflowing the track.\n <div\n style={{ ...style, position: 'absolute', top: 0, right: 2 }}\n className='rounded-md bg-[#00000033] dark:bg-black-500 !w-2 transition-[width] duration-200 ease-out hover:!w-3'\n {..._props}\n />\n )}\n renderTrackHorizontal={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='w-full bottom-0 left-0 rounded-md z-[1001] !h-scrollbar-size ' {..._props} />\n )}\n renderThumbHorizontal={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n // Anchor the bottom (outer) edge so the hover height-expansion grows upward (inward);\n // `position: absolute` inline overrides the library's default inline `position: relative`.\n <div\n style={{ ...style, position: 'absolute', left: 0, bottom: 2 }}\n className='rounded-md bg-[#00000033] dark:bg-black-500 !h-2 transition-[height] duration-200 ease-out hover:!h-3'\n {..._props}\n />\n )}\n renderView={({ style: libStyle, ..._props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('h-full [&::-webkit-scrollbar]:hidden', renderViewClassName)}\n style={{ ...libStyle, marginRight: 0, marginBottom: 0, scrollbarWidth: 'none' } as React.CSSProperties}\n {..._props}\n />\n )}\n {...props}\n style={{\n ...(props.style || {}),\n zIndex: 0,\n ...(!props.autoHeight && !props.style?.height ? { height: fullHeight ? '100%' : height } : {}),\n }}\n >\n {children}\n </Scrollbars>\n );\n },\n ),\n);\n\nCustomScrollbar.displayName = \"CustomScrollbar\";\n"],"names":["CustomScrollbar","React","adjustWithScreen","children","renderViewClassName","fullHeight","props","scrollBarRef","height","setHeight","useState","ref","useRef","handleSize","useEventListener","useImperativeHandle","jsx","Scrollbars","style","_props","libStyle","cn"],"mappings":"yQAqDaA,EAAkBC,EAAM,KACnCA,EAAM,WACJ,CACE,CAAE,iBAAAC,EAAkB,SAAAC,EAAU,oBAAAC,EAAqB,WAAAC,EAAY,GAAGC,CAAA,EAClEC,IACG,CACH,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAA0B,OAAO,WAAW,EAClEC,EAAMC,EAAAA,OAA0B,IAAI,EAEpCC,EAAa,IAAM,CACnBX,GACFO,EAAU,OAAO,WAAW,CAEhC,EACAK,OAAAA,EAAAA,iBAAiB,SAAUD,CAAU,EAErCE,EAAAA,oBACER,EACA,KAAO,CACL,IAAI,aAAc,CAChB,OAAOI,EAAI,OACb,EACA,IAAI,MAAO,CACT,OAAQA,EAAI,SAA+C,MAAQ,IACrE,EACA,YAAa,IAAM,CACbA,EAAI,SACLA,EAAI,QAAuB,YAAA,CAEhC,EACA,cAAe,IAAM,CACfA,EAAI,SACLA,EAAI,QAAuB,cAAA,CAEhC,CAAA,GAEF,CAAA,CAAC,EAIDK,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAN,EACA,SAAQ,GACR,oBAAqB,CAAC,CAAE,MAAAO,EAAO,GAAGC,CAAA,IAChCH,EAAAA,IAAC,MAAA,CAAI,MAAAE,EAAc,UAAU,6DAA8D,GAAGC,CAAA,CAAQ,EAExG,oBAAqB,CAAC,CAAE,MAAAD,EAAO,GAAGC,CAAA,IAIhCH,EAAAA,IAAC,MAAA,CACC,MAAO,CAAE,GAAGE,EAAO,SAAU,WAAY,IAAK,EAAG,MAAO,CAAA,EACxD,UAAU,uGACT,GAAGC,CAAA,CAAA,EAGR,sBAAuB,CAAC,CAAE,MAAAD,EAAO,GAAGC,CAAA,IAClCH,EAAAA,IAAC,MAAA,CAAI,MAAAE,EAAc,UAAU,gEAAiE,GAAGC,CAAA,CAAQ,EAE3G,sBAAuB,CAAC,CAAE,MAAAD,EAAO,GAAGC,CAAA,IAGlCH,EAAAA,IAAC,MAAA,CACC,MAAO,CAAE,GAAGE,EAAO,SAAU,WAAY,KAAM,EAAG,OAAQ,CAAA,EAC1D,UAAU,wGACT,GAAGC,CAAA,CAAA,EAGR,WAAY,CAAC,CAAE,MAAOC,EAAU,GAAGD,KACjCH,EAAAA,IAAC,MAAA,CACC,UAAWK,EAAG,uCAAwCjB,CAAmB,EACzE,MAAO,CAAE,GAAGgB,EAAU,YAAa,EAAG,aAAc,EAAG,eAAgB,MAAA,EACtE,GAAGD,CAAA,CAAA,EAGP,GAAGb,EACJ,MAAO,CACL,GAAIA,EAAM,OAAS,CAAA,EACnB,OAAQ,EACR,GAAI,CAACA,EAAM,YAAc,CAACA,EAAM,OAAO,OAAS,CAAE,OAAQD,EAAa,OAASG,CAAA,EAAW,CAAA,CAAC,EAG7F,SAAAL,CAAA,CAAA,CAGP,CAAA,CAEJ,EAEAH,EAAgB,YAAc"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { useEventListener as h } from "../../hooks/useEventListener.es.js";
|
|
3
3
|
import g from "../../_virtual/index.es.js";
|
|
4
|
-
import
|
|
5
|
-
import { Scrollbars as
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
({ adjustWithScreen: n, children: a, renderViewClassName: s, fullHeight: d, ...
|
|
9
|
-
const [
|
|
4
|
+
import l, { useState as b, useRef as f, useImperativeHandle as w } from "react";
|
|
5
|
+
import { Scrollbars as v } from "react-custom-scrollbars-2";
|
|
6
|
+
const z = l.memo(
|
|
7
|
+
l.forwardRef(
|
|
8
|
+
({ adjustWithScreen: n, children: a, renderViewClassName: s, fullHeight: d, ...i }, c) => {
|
|
9
|
+
const [u, m] = b(window.innerHeight), t = f(null);
|
|
10
10
|
return h("resize", () => {
|
|
11
|
-
n &&
|
|
11
|
+
n && m(window.innerHeight);
|
|
12
12
|
}), w(
|
|
13
13
|
c,
|
|
14
14
|
() => ({
|
|
@@ -26,16 +26,39 @@ const T = i.memo(
|
|
|
26
26
|
}
|
|
27
27
|
}),
|
|
28
28
|
[]
|
|
29
|
-
), /* @__PURE__ */
|
|
30
|
-
|
|
29
|
+
), /* @__PURE__ */ o(
|
|
30
|
+
v,
|
|
31
31
|
{
|
|
32
32
|
ref: t,
|
|
33
33
|
autoHide: !0,
|
|
34
|
-
renderTrackVertical: ({ style: e, ...r }) => /* @__PURE__ */
|
|
35
|
-
renderThumbVertical: ({ style: e, ...r }) =>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
renderTrackVertical: ({ style: e, ...r }) => /* @__PURE__ */ o("div", { style: e, className: "h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size", ...r }),
|
|
35
|
+
renderThumbVertical: ({ style: e, ...r }) => (
|
|
36
|
+
// `position: absolute` + `right`/`top` are set inline so they win over the library's
|
|
37
|
+
// default inline `position: relative`. Anchoring the right (outer) edge lets the
|
|
38
|
+
// hover width-expansion grow inward (leftward) instead of overflowing the track.
|
|
39
|
+
/* @__PURE__ */ o(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
style: { ...e, position: "absolute", top: 0, right: 2 },
|
|
43
|
+
className: "rounded-md bg-[#00000033] dark:bg-black-500 !w-2 transition-[width] duration-200 ease-out hover:!w-3",
|
|
44
|
+
...r
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
),
|
|
48
|
+
renderTrackHorizontal: ({ style: e, ...r }) => /* @__PURE__ */ o("div", { style: e, className: "w-full bottom-0 left-0 rounded-md z-[1001] !h-scrollbar-size ", ...r }),
|
|
49
|
+
renderThumbHorizontal: ({ style: e, ...r }) => (
|
|
50
|
+
// Anchor the bottom (outer) edge so the hover height-expansion grows upward (inward);
|
|
51
|
+
// `position: absolute` inline overrides the library's default inline `position: relative`.
|
|
52
|
+
/* @__PURE__ */ o(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
style: { ...e, position: "absolute", left: 0, bottom: 2 },
|
|
56
|
+
className: "rounded-md bg-[#00000033] dark:bg-black-500 !h-2 transition-[height] duration-200 ease-out hover:!h-3",
|
|
57
|
+
...r
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
),
|
|
61
|
+
renderView: ({ style: e, ...r }) => /* @__PURE__ */ o(
|
|
39
62
|
"div",
|
|
40
63
|
{
|
|
41
64
|
className: g("h-full [&::-webkit-scrollbar]:hidden", s),
|
|
@@ -43,11 +66,11 @@ const T = i.memo(
|
|
|
43
66
|
...r
|
|
44
67
|
}
|
|
45
68
|
),
|
|
46
|
-
...
|
|
69
|
+
...i,
|
|
47
70
|
style: {
|
|
48
|
-
...
|
|
71
|
+
...i.style || {},
|
|
49
72
|
zIndex: 0,
|
|
50
|
-
...!
|
|
73
|
+
...!i.autoHeight && !i.style?.height ? { height: d ? "100%" : u } : {}
|
|
51
74
|
},
|
|
52
75
|
children: a
|
|
53
76
|
}
|
|
@@ -55,8 +78,8 @@ const T = i.memo(
|
|
|
55
78
|
}
|
|
56
79
|
)
|
|
57
80
|
);
|
|
58
|
-
|
|
81
|
+
z.displayName = "CustomScrollbar";
|
|
59
82
|
export {
|
|
60
|
-
|
|
83
|
+
z as CustomScrollbar
|
|
61
84
|
};
|
|
62
85
|
//# sourceMappingURL=CustomScrollbar.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomScrollbar.es.js","sources":["../../../src/components/layout/CustomScrollbar.tsx"],"sourcesContent":["import { useEventListener } from '../../hooks/useEventListener';\nimport cn from 'classnames';\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef, CSSProperties } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\nimport type { ScrollbarProps } from 'react-custom-scrollbars-2';\n\n/**\n * Custom scrollbar handle for external control\n */\nexport interface CustomScrollbarHandle {\n /** Get the Scrollbars instance */\n getInstance?: Scrollbars | null;\n /** Direct access to the scrollable view DOM element */\n view?: HTMLElement | null;\n /** Scroll to the top of the container */\n scrollToTop?: () => void;\n /** Scroll to the right of the container */\n scrollToRight?: () => void;\n}\n\n/**\n * Props for the CustomScrollbar component\n */\nexport interface CustomScrollbarProps {\n /** Content to render inside the scrollbar */\n children: React.ReactNode;\n /** Whether to adjust height based on screen size */\n adjustWithScreen?: boolean;\n /** Additional CSS classes for the inner view */\n renderViewClassName?: string;\n /** Whether to use full height */\n fullHeight?: boolean;\n}\n\n/**\n * CustomScrollbar component provides a styled scrollable container\n * with custom scrollbar appearance\n *\n * @example\n * ```tsx\n * <CustomScrollbar>\n * <div>Scrollable content...</div>\n * </CustomScrollbar>\n *\n * // With ref for programmatic control\n * const scrollRef = useRef<CustomScrollbarHandle>(null);\n * <CustomScrollbar ref={scrollRef}>\n * <div>Content...</div>\n * </CustomScrollbar>\n * // scrollRef.current?.scrollToTop();\n * ```\n */\nexport const CustomScrollbar = React.memo(\n React.forwardRef(\n (\n { adjustWithScreen, children, renderViewClassName, fullHeight, ...props }: CustomScrollbarProps & ScrollbarProps,\n scrollBarRef: ForwardedRef<CustomScrollbarHandle>,\n ) => {\n const [height, setHeight] = useState<string | number>(window.innerHeight);\n const ref = useRef<Scrollbars | null>(null);\n\n const handleSize = () => {\n if (adjustWithScreen) {\n setHeight(window.innerHeight);\n }\n };\n useEventListener('resize', handleSize);\n\n useImperativeHandle(\n scrollBarRef,\n () => ({\n get getInstance() {\n return ref.current;\n },\n get view() {\n return (ref.current as unknown as { view?: HTMLElement })?.view ?? null;\n },\n scrollToTop: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToTop();\n }\n },\n scrollToRight: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToRight();\n }\n },\n }),\n [],\n );\n\n return (\n <Scrollbars\n ref={ref}\n autoHide\n renderTrackVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size' {..._props} />\n )}\n renderThumbVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div
|
|
1
|
+
{"version":3,"file":"CustomScrollbar.es.js","sources":["../../../src/components/layout/CustomScrollbar.tsx"],"sourcesContent":["import { useEventListener } from '../../hooks/useEventListener';\nimport cn from 'classnames';\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport type { ForwardedRef, CSSProperties } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\nimport type { ScrollbarProps } from 'react-custom-scrollbars-2';\n\n/**\n * Custom scrollbar handle for external control\n */\nexport interface CustomScrollbarHandle {\n /** Get the Scrollbars instance */\n getInstance?: Scrollbars | null;\n /** Direct access to the scrollable view DOM element */\n view?: HTMLElement | null;\n /** Scroll to the top of the container */\n scrollToTop?: () => void;\n /** Scroll to the right of the container */\n scrollToRight?: () => void;\n}\n\n/**\n * Props for the CustomScrollbar component\n */\nexport interface CustomScrollbarProps {\n /** Content to render inside the scrollbar */\n children: React.ReactNode;\n /** Whether to adjust height based on screen size */\n adjustWithScreen?: boolean;\n /** Additional CSS classes for the inner view */\n renderViewClassName?: string;\n /** Whether to use full height */\n fullHeight?: boolean;\n}\n\n/**\n * CustomScrollbar component provides a styled scrollable container\n * with custom scrollbar appearance\n *\n * @example\n * ```tsx\n * <CustomScrollbar>\n * <div>Scrollable content...</div>\n * </CustomScrollbar>\n *\n * // With ref for programmatic control\n * const scrollRef = useRef<CustomScrollbarHandle>(null);\n * <CustomScrollbar ref={scrollRef}>\n * <div>Content...</div>\n * </CustomScrollbar>\n * // scrollRef.current?.scrollToTop();\n * ```\n */\nexport const CustomScrollbar = React.memo(\n React.forwardRef(\n (\n { adjustWithScreen, children, renderViewClassName, fullHeight, ...props }: CustomScrollbarProps & ScrollbarProps,\n scrollBarRef: ForwardedRef<CustomScrollbarHandle>,\n ) => {\n const [height, setHeight] = useState<string | number>(window.innerHeight);\n const ref = useRef<Scrollbars | null>(null);\n\n const handleSize = () => {\n if (adjustWithScreen) {\n setHeight(window.innerHeight);\n }\n };\n useEventListener('resize', handleSize);\n\n useImperativeHandle(\n scrollBarRef,\n () => ({\n get getInstance() {\n return ref.current;\n },\n get view() {\n return (ref.current as unknown as { view?: HTMLElement })?.view ?? null;\n },\n scrollToTop: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToTop();\n }\n },\n scrollToRight: () => {\n if (ref.current) {\n (ref.current as Scrollbars).scrollToRight();\n }\n },\n }),\n [],\n );\n\n return (\n <Scrollbars\n ref={ref}\n autoHide\n renderTrackVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='h-full top-0 right-0 rounded-md z-[1001] !w-scrollbar-size' {..._props} />\n )}\n renderThumbVertical={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n // `position: absolute` + `right`/`top` are set inline so they win over the library's\n // default inline `position: relative`. Anchoring the right (outer) edge lets the\n // hover width-expansion grow inward (leftward) instead of overflowing the track.\n <div\n style={{ ...style, position: 'absolute', top: 0, right: 2 }}\n className='rounded-md bg-[#00000033] dark:bg-black-500 !w-2 transition-[width] duration-200 ease-out hover:!w-3'\n {..._props}\n />\n )}\n renderTrackHorizontal={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n <div style={style} className='w-full bottom-0 left-0 rounded-md z-[1001] !h-scrollbar-size ' {..._props} />\n )}\n renderThumbHorizontal={({ style, ..._props }: { style: CSSProperties; [key: string]: unknown }) => (\n // Anchor the bottom (outer) edge so the hover height-expansion grows upward (inward);\n // `position: absolute` inline overrides the library's default inline `position: relative`.\n <div\n style={{ ...style, position: 'absolute', left: 0, bottom: 2 }}\n className='rounded-md bg-[#00000033] dark:bg-black-500 !h-2 transition-[height] duration-200 ease-out hover:!h-3'\n {..._props}\n />\n )}\n renderView={({ style: libStyle, ..._props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('h-full [&::-webkit-scrollbar]:hidden', renderViewClassName)}\n style={{ ...libStyle, marginRight: 0, marginBottom: 0, scrollbarWidth: 'none' } as React.CSSProperties}\n {..._props}\n />\n )}\n {...props}\n style={{\n ...(props.style || {}),\n zIndex: 0,\n ...(!props.autoHeight && !props.style?.height ? { height: fullHeight ? '100%' : height } : {}),\n }}\n >\n {children}\n </Scrollbars>\n );\n },\n ),\n);\n\nCustomScrollbar.displayName = \"CustomScrollbar\";\n"],"names":["CustomScrollbar","React","adjustWithScreen","children","renderViewClassName","fullHeight","props","scrollBarRef","height","setHeight","useState","ref","useRef","useEventListener","useImperativeHandle","jsx","Scrollbars","style","_props","libStyle","cn"],"mappings":";;;;;AAqDO,MAAMA,IAAkBC,EAAM;AAAA,EACnCA,EAAM;AAAA,IACJ,CACE,EAAE,kBAAAC,GAAkB,UAAAC,GAAU,qBAAAC,GAAqB,YAAAC,GAAY,GAAGC,EAAA,GAClEC,MACG;AACH,YAAM,CAACC,GAAQC,CAAS,IAAIC,EAA0B,OAAO,WAAW,GAClEC,IAAMC,EAA0B,IAAI;AAO1C,aAAAC,EAAiB,UALE,MAAM;AACvB,QAAIX,KACFO,EAAU,OAAO,WAAW;AAAA,MAEhC,CACqC,GAErCK;AAAA,QACEP;AAAA,QACA,OAAO;AAAA,UACL,IAAI,cAAc;AAChB,mBAAOI,EAAI;AAAA,UACb;AAAA,UACA,IAAI,OAAO;AACT,mBAAQA,EAAI,SAA+C,QAAQ;AAAA,UACrE;AAAA,UACA,aAAa,MAAM;AACjB,YAAIA,EAAI,WACLA,EAAI,QAAuB,YAAA;AAAA,UAEhC;AAAA,UACA,eAAe,MAAM;AACnB,YAAIA,EAAI,WACLA,EAAI,QAAuB,cAAA;AAAA,UAEhC;AAAA,QAAA;AAAA,QAEF,CAAA;AAAA,MAAC,GAID,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAL;AAAA,UACA,UAAQ;AAAA,UACR,qBAAqB,CAAC,EAAE,OAAAM,GAAO,GAAGC,EAAA,MAChC,gBAAAH,EAAC,OAAA,EAAI,OAAAE,GAAc,WAAU,8DAA8D,GAAGC,EAAA,CAAQ;AAAA,UAExG,qBAAqB,CAAC,EAAE,OAAAD,GAAO,GAAGC,EAAA;AAAA;AAAA;AAAA;AAAA,YAIhC,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,EAAE,GAAGE,GAAO,UAAU,YAAY,KAAK,GAAG,OAAO,EAAA;AAAA,gBACxD,WAAU;AAAA,gBACT,GAAGC;AAAA,cAAA;AAAA,YAAA;AAAA;AAAA,UAGR,uBAAuB,CAAC,EAAE,OAAAD,GAAO,GAAGC,EAAA,MAClC,gBAAAH,EAAC,OAAA,EAAI,OAAAE,GAAc,WAAU,iEAAiE,GAAGC,EAAA,CAAQ;AAAA,UAE3G,uBAAuB,CAAC,EAAE,OAAAD,GAAO,GAAGC,EAAA;AAAA;AAAA;AAAA,YAGlC,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,EAAE,GAAGE,GAAO,UAAU,YAAY,MAAM,GAAG,QAAQ,EAAA;AAAA,gBAC1D,WAAU;AAAA,gBACT,GAAGC;AAAA,cAAA;AAAA,YAAA;AAAA;AAAA,UAGR,YAAY,CAAC,EAAE,OAAOC,GAAU,GAAGD,QACjC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWK,EAAG,wCAAwChB,CAAmB;AAAA,cACzE,OAAO,EAAE,GAAGe,GAAU,aAAa,GAAG,cAAc,GAAG,gBAAgB,OAAA;AAAA,cACtE,GAAGD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGP,GAAGZ;AAAA,UACJ,OAAO;AAAA,YACL,GAAIA,EAAM,SAAS,CAAA;AAAA,YACnB,QAAQ;AAAA,YACR,GAAI,CAACA,EAAM,cAAc,CAACA,EAAM,OAAO,SAAS,EAAE,QAAQD,IAAa,SAASG,EAAA,IAAW,CAAA;AAAA,UAAC;AAAA,UAG7F,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAAA,EAAA;AAEJ;AAEAH,EAAgB,cAAc;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"2xs":"w-3 h-3 text-5xs font-semibold",xs:"w-5 h-5 text-4xs font-semibold",sm:"w-6 h-6 text-2xs font-semibold",md:"w-9 h-9 text-sm font-semibold",lg:"w-12 h-12 text-lg font-semibold",xl:"w-16 h-16 text-2xl font-semibold"},i={"
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"4xs":"w-5 h-5 text-4xs font-semibold","2xs":"w-3 h-3 text-5xs font-semibold",xs:"w-5 h-5 text-4xs font-semibold",sm:"w-6 h-6 text-2xs font-semibold",md:"w-9 h-9 text-sm font-semibold",lg:"w-12 h-12 text-lg font-semibold",xl:"w-16 h-16 text-2xl font-semibold"},i={"4xs":"!text-5xs","2xs":"!text-4xs",xs:"!text-3xs",sm:"!text-2xs",md:"!text-sm",lg:"!text-lg",xl:"!text-2xl"},x=s=>{if(!s)return"";const t=s?.split(" ");return t?.length===1?t[0]?.charAt(0)?.toUpperCase():t[0]?.charAt(0)?.toUpperCase()+t[t?.length-1]?.charAt(0)?.toUpperCase()};exports.getInitials=x;exports.initialsFontSizeClasses=i;exports.sizeClasses=e;
|
|
2
2
|
//# sourceMappingURL=constants.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '
|
|
1
|
+
{"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '4xs': 'w-5 h-5 text-4xs font-semibold',\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '4xs': '!text-5xs',\n '2xs': '!text-4xs',\n xs: '!text-3xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,iCACP,MAAO,iCACP,GAAI,iCACJ,GAAI,iCACJ,GAAI,gCACJ,GAAI,kCACJ,GAAI,kCACN,EAGaC,EAAoE,CAC/E,MAAO,YACP,MAAO,YACP,GAAI,YACJ,GAAI,YACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACN,EAEaC,EAAeC,GAAiB,CAC3C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAYD,GAAM,MAAM,GAAG,EAMjC,OAJEC,GAAW,SAAW,EAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAUA,GAAW,OAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,CAErD"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const x = {
|
|
2
|
+
"4xs": "w-5 h-5 text-4xs font-semibold",
|
|
2
3
|
"2xs": "w-3 h-3 text-5xs font-semibold",
|
|
3
4
|
xs: "w-5 h-5 text-4xs font-semibold",
|
|
4
5
|
sm: "w-6 h-6 text-2xs font-semibold",
|
|
@@ -6,7 +7,8 @@ const x = {
|
|
|
6
7
|
lg: "w-12 h-12 text-lg font-semibold",
|
|
7
8
|
xl: "w-16 h-16 text-2xl font-semibold"
|
|
8
9
|
}, l = {
|
|
9
|
-
"
|
|
10
|
+
"4xs": "!text-5xs",
|
|
11
|
+
"2xs": "!text-4xs",
|
|
10
12
|
xs: "!text-3xs",
|
|
11
13
|
sm: "!text-2xs",
|
|
12
14
|
md: "!text-sm",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '
|
|
1
|
+
{"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '4xs': 'w-5 h-5 text-4xs font-semibold',\n '2xs': 'w-3 h-3 text-5xs font-semibold',\n xs: 'w-5 h-5 text-4xs font-semibold',\n sm: 'w-6 h-6 text-2xs font-semibold',\n md: 'w-9 h-9 text-sm font-semibold',\n lg: 'w-12 h-12 text-lg font-semibold',\n xl: 'w-16 h-16 text-2xl font-semibold',\n};\n\n// Font size only (no width/height), for the Typography wrapping the avatar initials.\nexport const initialsFontSizeClasses: Record<keyof typeof sizeClasses, string> = {\n '4xs': '!text-5xs',\n '2xs': '!text-4xs',\n xs: '!text-3xs',\n sm: '!text-2xs',\n md: '!text-sm',\n lg: '!text-lg',\n xl: '!text-2xl',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","initialsFontSizeClasses","getInitials","name","nameArray"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAGaC,IAAoE;AAAA,EAC/E,OAAO;AAAA,EACP,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAc,CAACC,MAAiB;AAC3C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAYD,GAAM,MAAM,GAAG;AAMjC,SAJEC,GAAW,WAAW,IAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAUA,GAAW,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA;AAErD;"}
|