@ahrowe/ui 0.12.0 → 0.13.0
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/esm/common/alert/alert.mjs +2 -0
- package/dist/esm/common/alert/alert.mjs.map +1 -0
- package/dist/esm/common/alert/alert.module.mjs +2 -0
- package/dist/esm/common/alert/alert.module.mjs.map +1 -0
- package/dist/esm/common/alert/alert.types.mjs +2 -0
- package/dist/esm/common/alert/alert.types.mjs.map +1 -0
- package/dist/esm/common/breadcrumb/breadcrumb.mjs +2 -0
- package/dist/esm/common/breadcrumb/breadcrumb.mjs.map +1 -0
- package/dist/esm/common/breadcrumb/breadcrumb.module.mjs +2 -0
- package/dist/esm/common/breadcrumb/breadcrumb.module.mjs.map +1 -0
- package/dist/esm/common/carousel/carousel.mjs +2 -0
- package/dist/esm/common/carousel/carousel.mjs.map +1 -0
- package/dist/esm/common/carousel/carousel.module.mjs +2 -0
- package/dist/esm/common/carousel/carousel.module.mjs.map +1 -0
- package/dist/esm/common/klipyPicker/klipyPicker.mjs +1 -1
- package/dist/esm/common/rating/rating.mjs +2 -0
- package/dist/esm/common/rating/rating.mjs.map +1 -0
- package/dist/esm/common/rating/rating.module.mjs +2 -0
- package/dist/esm/common/rating/rating.module.mjs.map +1 -0
- package/dist/esm/common/virtualList/virtualList.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/alert/alert.d.ts +4 -0
- package/dist/types/package/common/alert/alert.types.d.ts +23 -0
- package/dist/types/package/common/alert/index.d.ts +2 -0
- package/dist/types/package/common/breadcrumb/breadcrumb.d.ts +4 -0
- package/dist/types/package/common/breadcrumb/breadcrumb.types.d.ts +26 -0
- package/dist/types/package/common/breadcrumb/index.d.ts +2 -0
- package/dist/types/package/common/carousel/carousel.d.ts +3 -0
- package/dist/types/package/common/carousel/carousel.types.d.ts +20 -0
- package/dist/types/package/common/carousel/index.d.ts +2 -0
- package/dist/types/package/common/configProvider/configProvider.types.d.ts +8 -0
- package/dist/types/package/common/rating/index.d.ts +2 -0
- package/dist/types/package/common/rating/rating.d.ts +4 -0
- package/dist/types/package/common/rating/rating.types.d.ts +19 -0
- package/dist/types/package/index.d.ts +8 -0
- package/docs/Alert.md +64 -0
- package/docs/Breadcrumb.md +106 -0
- package/docs/CLAUDE.md +4 -0
- package/docs/Carousel.md +67 -0
- package/docs/Rating.md +72 -0
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../actionIcon/actionIcon.mjs";import{AlertStyleType as n}from"./alert.types.mjs";import r from"./alert.module.mjs";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faBell as o,faCircleCheck as s,faCircleInfo as c,faCircleXmark as l,faTriangleExclamation as u,faXmark as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={[n.Default]:o,[n.Info]:c,[n.Success]:s,[n.Warn]:u,[n.Error]:l},h={[n.Default]:r.alertStyleDefault,[n.Info]:r.alertStyleInfo,[n.Success]:r.alertStyleSuccess,[n.Warn]:r.alertStyleWarn,[n.Error]:r.alertStyleError};function g(o){let{title:s,children:c=null,styleType:l=n.Default,icon:u,hideIcon:g=!1,onClose:_,className:v,style:y,classNames:b,styles:x,...S}=e(`Alert`,o);return p(`div`,{...S,role:`alert`,className:i(r.alert,h[l],b?.root,v),style:{...y,...x?.root},children:[!g&&f(a,{icon:u??m[l],className:i(r.alertIcon,b?.icon),style:x?.icon}),p(`div`,{className:i(r.alertContent,b?.content),style:x?.content,children:[s&&f(`div`,{className:i(r.alertTitle,b?.title),style:x?.title,children:s}),c&&f(`div`,{className:i(r.alertDescription,b?.description),style:x?.description,children:c})]}),_&&f(t,{icon:d,onClick:_,className:i(r.alertCloseButton,b?.closeButton),style:x?.closeButton,"aria-label":`Dismiss`})]})}export{g as default};
|
|
2
|
+
//# sourceMappingURL=alert.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { AlertStyleType } from './alert.types';\nimport type { AlertProps } from './alert.types';\nimport styles from './alert.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults } from '../configProvider';\n\nconst ICON_BY_STYLE: Record<AlertStyleType, typeof faBell> = {\n [AlertStyleType.Default]: faBell,\n [AlertStyleType.Info]: faCircleInfo,\n [AlertStyleType.Success]: faCircleCheck,\n [AlertStyleType.Warn]: faTriangleExclamation,\n [AlertStyleType.Error]: faCircleXmark,\n};\n\nconst CLASS_BY_STYLE: Record<AlertStyleType, string> = {\n [AlertStyleType.Default]: styles.alertStyleDefault,\n [AlertStyleType.Info]: styles.alertStyleInfo,\n [AlertStyleType.Success]: styles.alertStyleSuccess,\n [AlertStyleType.Warn]: styles.alertStyleWarn,\n [AlertStyleType.Error]: styles.alertStyleError,\n};\n\nfunction Alert(props: AlertProps): ReactElement {\n const {\n title,\n children = null,\n styleType = AlertStyleType.Default,\n icon,\n hideIcon = false,\n onClose,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Alert', props);\n\n return (\n <div\n {...rest}\n role=\"alert\"\n className={cx(styles.alert, CLASS_BY_STYLE[styleType], classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hideIcon && (\n <FontAwesomeIcon\n icon={icon ?? ICON_BY_STYLE[styleType]}\n className={cx(styles.alertIcon, classNames?.icon)}\n style={slotStyles?.icon as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n )}\n\n <div className={cx(styles.alertContent, classNames?.content)} style={slotStyles?.content}>\n {title && (\n <div className={cx(styles.alertTitle, classNames?.title)} style={slotStyles?.title}>\n {title}\n </div>\n )}\n {children && (\n <div className={cx(styles.alertDescription, classNames?.description)} style={slotStyles?.description}>\n {children}\n </div>\n )}\n </div>\n\n {onClose && (\n <ActionIcon\n icon={faXmark}\n onClick={onClose}\n className={cx(styles.alertCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label=\"Dismiss\"\n />\n )}\n </div>\n );\n}\n\nexport default Alert;\n"],"mappings":"2fAkBA,IAAM,EAAuD,EAC1D,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,OAAQ,CAC1B,EAEM,EAAiD,EACpD,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,OAAQ,EAAO,eACjC,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACN,QACA,WAAW,KACX,YAAY,EAAe,QAC3B,OACA,WAAW,GACX,UACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,QAAS,CAAK,EAEvC,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,QACL,UAAW,EAAG,EAAO,MAAO,EAAe,GAAY,GAAY,KAAM,CAAS,EAClF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAJzC,CAMG,CAAC,GACA,EAAC,EAAD,CACE,KAAM,GAAQ,EAAc,GAC5B,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACpB,CAAA,EAGH,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,iBAAjF,CACG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,GAAY,KAAK,EAAG,MAAO,GAAY,eAC1E,CACE,CAAA,EAEN,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAAG,MAAO,GAAY,YACtF,UACE,CAAA,CAEJ,IAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,QAAS,EACT,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,aAAW,SACZ,CAAA,CAEA,GAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={alert:`alert_nX-Fv`,"alert-icon":`alert-icon_mzjuj`,alertIcon:`alert-icon_mzjuj`,"alert-content":`alert-content_-94Ey`,alertContent:`alert-content_-94Ey`,"alert-title":`alert-title_TqdRL`,alertTitle:`alert-title_TqdRL`,"alert-description":`alert-description_N5LkS`,alertDescription:`alert-description_N5LkS`,"alert-closeButton":`alert-closeButton_RQvYS`,alertCloseButton:`alert-closeButton_RQvYS`,"alert-style-default":`alert-style-default_KFyzb`,alertStyleDefault:`alert-style-default_KFyzb`,"alert-style-info":`alert-style-info_P-XG-`,alertStyleInfo:`alert-style-info_P-XG-`,"alert-style-success":`alert-style-success_zomWm`,alertStyleSuccess:`alert-style-success_zomWm`,"alert-style-warn":`alert-style-warn_jRYe5`,alertStyleWarn:`alert-style-warn_jRYe5`,"alert-style-error":`alert-style-error_Nk4As`,alertStyleError:`alert-style-error_Nk4As`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=alert.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.module.mjs","names":[],"sources":["../../../../package/common/alert/alert.module.pcss"],"sourcesContent":[".alert {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n border-radius: var(--default-border-radius);\n background: var(--background-accent);\n color: var(--text-color);\n font-family: var(--default-font);\n box-sizing: border-box;\n\n &-icon {\n flex-shrink: 0;\n margin-top: 2px;\n font-size: 15px;\n }\n\n &-content {\n flex: 1;\n font-size: 14px;\n line-height: 1.4;\n }\n\n &-title {\n font-weight: var(--header-font-weight, 600);\n\n &:not(:only-child) {\n margin-bottom: 2px;\n }\n }\n\n &-description {\n color: var(--text-dark);\n }\n\n &-closeButton {\n flex-shrink: 0;\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 0;\n color: var(--text-dark);\n font-size: 13px;\n opacity: 0.6;\n transition: opacity 0.15s;\n margin-top: 2px;\n\n &:hover {\n opacity: 1;\n }\n }\n\n &-style {\n &-default {\n border-left: 3px solid var(--primary-color);\n\n .alert-icon {\n color: var(--primary-color);\n }\n }\n\n &-info {\n border-left: 3px solid var(--info-color, #3b82f6);\n\n .alert-icon {\n color: var(--info-color, #3b82f6);\n }\n }\n\n &-success {\n border-left: 3px solid var(--success-color);\n\n .alert-icon {\n color: var(--success-color);\n }\n }\n\n &-warn {\n border-left: 3px solid var(--warn-color);\n\n .alert-icon {\n color: var(--warn-color);\n }\n }\n\n &-error {\n border-left: 3px solid var(--error-color, #ef4444);\n\n .alert-icon {\n color: var(--error-color, #ef4444);\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AlertStyleType {\n Default = 'default',\n Info = 'info',\n Success = 'success',\n Warn = 'warn',\n Error = 'error',\n}\n\nexport type AlertSlots = 'root' | 'icon' | 'content' | 'title' | 'description' | 'closeButton';\n\nexport interface AlertProps extends HtmlProps {\n title?: ReactNode;\n children?: ReactNode;\n styleType?: AlertStyleType;\n icon?: IconDefinition;\n hideIcon?: boolean;\n onClose?: () => void;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<AlertSlots>;\n styles?: SlotStyles<AlertSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"../floatingMenu/floatingMenu.mjs";import i from"./breadcrumb.module.mjs";import{useState as a}from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faChevronRight as c,faEllipsis as l}from"@fortawesome/free-solid-svg-icons";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";function p(e,t){let n=e.map((e,t)=>({item:e,index:t}));if(!t||e.length<=t)return{leading:n,hidden:[],trailing:[]};let r=Math.max(1,t-2),i=e.length-1-r;return i<=0?{leading:n,hidden:[],trailing:[]}:{leading:n.slice(0,1),hidden:n.slice(1,1+i),trailing:n.slice(1+i)}}function m(t){let{items:u=[],separator:m,maxItems:g,"aria-label":_=`Breadcrumb`,className:v,style:y,classNames:b,styles:x,...S}=e(`Breadcrumb`,t),[C,w]=a(!1),{leading:T,hidden:E,trailing:D}=p(u,g),O=u.length-1;function k(e){return e===O?null:d(`span`,{className:o(i.breadcrumbSeparator,b?.separator),style:x?.separator,children:m??d(s,{icon:c})})}function A({item:e,index:t}){return f(`li`,{className:o(i.breadcrumbItem,b?.item),style:x?.item,children:[h(e,t===O,i,b,x),k(t)]},e.id??t)}return d(`nav`,{...S,"aria-label":_,className:o(i.breadcrumb,b?.root,v),style:{...y,...x?.root},children:f(`ol`,{className:o(i.breadcrumbList,b?.list),style:x?.list,children:[T.map(A),E.length>0&&f(`li`,{className:o(i.breadcrumbItem,b?.item),style:x?.item,children:[d(r,{isOpen:C,onOpenChange:w,content:d(`ul`,{className:o(i.breadcrumbHiddenList,b?.hiddenList),style:x?.hiddenList,children:E.map(({item:e,index:t})=>d(`li`,{className:o(i.breadcrumbHiddenItem,b?.hiddenItem),style:x?.hiddenItem,children:h({...e,onClick:t=>{e.onClick?.(t),w(!1)}},!1,i,b,x)},e.id??t))}),children:d(n,{icon:l,title:`Show hidden breadcrumbs`,"aria-label":`Show hidden breadcrumbs`,className:o(i.breadcrumbEllipsis,b?.ellipsis),style:x?.ellipsis})}),k(E[E.length-1].index)]}),D.map(A)]})})}function h(e,n,r,i,a){let c=f(u,{children:[e.icon&&d(s,{icon:e.icon,className:o(r.breadcrumbIcon,i?.icon),style:a?.icon}),e.label]});return n?d(`span`,{"aria-current":`page`,className:o(r.breadcrumbCurrent,i?.current),style:a?.current,children:c}):e.disabled?d(`span`,{className:o(r.breadcrumbLink,r.breadcrumbLinkDisabled,i?.link),style:a?.link,children:c}):e.href?d(`a`,{href:e.href,onClick:e.onClick,className:o(r.breadcrumbLink,i?.link),style:a?.link,children:c}):e.onClick?d(t,{onClick:e.onClick,className:o(r.breadcrumbLink,i?.link),style:a?.link,children:c}):d(`span`,{className:o(r.breadcrumbLink,r.breadcrumbLinkDisabled,i?.link),style:a?.link,children:c})}export{m as default};
|
|
2
|
+
//# sourceMappingURL=breadcrumb.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport FloatingMenu from '../floatingMenu';\nimport { useComponentDefaults } from '../configProvider';\nimport type { BreadcrumbItem, BreadcrumbProps } from './breadcrumb.types';\n\nimport styles from './breadcrumb.module.pcss';\n\ninterface IndexedItem {\n item: BreadcrumbItem;\n index: number;\n}\n\nfunction getGroups(items: BreadcrumbItem[], maxItems?: number) {\n const indexed = items.map((item, index) => ({ item, index }));\n if (!maxItems || items.length <= maxItems) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n const trailingCount = Math.max(1, maxItems - 2);\n const hiddenCount = items.length - 1 - trailingCount;\n if (hiddenCount <= 0) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n return {\n leading: indexed.slice(0, 1),\n hidden: indexed.slice(1, 1 + hiddenCount),\n trailing: indexed.slice(1 + hiddenCount),\n };\n}\n\nfunction Breadcrumb(props: BreadcrumbProps): ReactElement {\n const {\n items = [],\n separator,\n maxItems,\n 'aria-label': ariaLabel = 'Breadcrumb',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Breadcrumb', props);\n\n const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);\n const { leading, hidden, trailing } = getGroups(items, maxItems);\n const lastIndex = items.length - 1;\n\n function renderSeparatorAfter(index: number) {\n if (index === lastIndex) return null;\n return (\n <span className={cx(styles.breadcrumbSeparator, classNames?.separator)} style={slotStyles?.separator}>\n {separator ?? <FontAwesomeIcon icon={faChevronRight} />}\n </span>\n );\n }\n\n function renderItem({ item, index }: IndexedItem) {\n return (\n <li key={item.id ?? index} className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n {renderCrumb(item, index === lastIndex, styles, classNames, slotStyles)}\n {renderSeparatorAfter(index)}\n </li>\n );\n }\n\n return (\n <nav\n {...rest}\n aria-label={ariaLabel}\n className={cx(styles.breadcrumb, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <ol className={cx(styles.breadcrumbList, classNames?.list)} style={slotStyles?.list}>\n {leading.map(renderItem)}\n\n {hidden.length > 0 && (\n <li className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n <FloatingMenu\n isOpen={isHiddenMenuOpen}\n onOpenChange={setIsHiddenMenuOpen}\n content={\n <ul className={cx(styles.breadcrumbHiddenList, classNames?.hiddenList)} style={slotStyles?.hiddenList}>\n {hidden.map(({ item, index }) => (\n <li\n key={item.id ?? index}\n className={cx(styles.breadcrumbHiddenItem, classNames?.hiddenItem)}\n style={slotStyles?.hiddenItem}\n >\n {renderCrumb(\n {\n ...item,\n onClick: (event) => {\n item.onClick?.(event);\n setIsHiddenMenuOpen(false);\n },\n },\n false,\n styles,\n classNames,\n slotStyles\n )}\n </li>\n ))}\n </ul>\n }\n >\n <ActionIcon\n icon={faEllipsis}\n title=\"Show hidden breadcrumbs\"\n aria-label=\"Show hidden breadcrumbs\"\n className={cx(styles.breadcrumbEllipsis, classNames?.ellipsis)}\n style={slotStyles?.ellipsis}\n />\n </FloatingMenu>\n {renderSeparatorAfter(hidden[hidden.length - 1].index)}\n </li>\n )}\n\n {trailing.map(renderItem)}\n </ol>\n </nav>\n );\n}\n\nfunction renderCrumb(\n item: BreadcrumbItem,\n isCurrent: boolean,\n styles: Record<string, string>,\n classNames: BreadcrumbProps['classNames'],\n slotStyles: BreadcrumbProps['styles']\n) {\n const content = (\n <>\n {item.icon && (\n <FontAwesomeIcon\n icon={item.icon}\n className={cx(styles.breadcrumbIcon, classNames?.icon)}\n style={slotStyles?.icon as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n )}\n {item.label}\n </>\n );\n\n if (isCurrent) {\n return (\n <span\n aria-current=\"page\"\n className={cx(styles.breadcrumbCurrent, classNames?.current)}\n style={slotStyles?.current}\n >\n {content}\n </span>\n );\n }\n\n if (item.disabled) {\n return (\n <span className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)} style={slotStyles?.link}>\n {content}\n </span>\n );\n }\n\n if (item.href) {\n return (\n <a\n href={item.href}\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </a>\n );\n }\n\n if (item.onClick) {\n return (\n <InteractableDiv\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </InteractableDiv>\n );\n }\n\n return (\n <span className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)} style={slotStyles?.link}>\n {content}\n </span>\n );\n}\n\nexport default Breadcrumb;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={breadcrumb:`breadcrumb_yQM0Q`,"breadcrumb-list":`breadcrumb-list_2ah0w`,breadcrumbList:`breadcrumb-list_2ah0w`,"breadcrumb-item":`breadcrumb-item_gBLc-`,breadcrumbItem:`breadcrumb-item_gBLc-`,"breadcrumb-icon":`breadcrumb-icon_wFm8s`,breadcrumbIcon:`breadcrumb-icon_wFm8s`,"breadcrumb-link":`breadcrumb-link_eBWl3`,breadcrumbLink:`breadcrumb-link_eBWl3`,"breadcrumb-link-disabled":`breadcrumb-link-disabled_Ca-E6`,breadcrumbLinkDisabled:`breadcrumb-link-disabled_Ca-E6`,"breadcrumb-current":`breadcrumb-current_8tlun`,breadcrumbCurrent:`breadcrumb-current_8tlun`,"breadcrumb-separator":`breadcrumb-separator_akfqn`,breadcrumbSeparator:`breadcrumb-separator_akfqn`,"breadcrumb-ellipsis":`breadcrumb-ellipsis_6fvn8`,breadcrumbEllipsis:`breadcrumb-ellipsis_6fvn8`,"breadcrumb-hiddenList":`breadcrumb-hiddenList_5reEH`,breadcrumbHiddenList:`breadcrumb-hiddenList_5reEH`,"breadcrumb-hiddenItem":`breadcrumb-hiddenItem_ZGRnB`,breadcrumbHiddenItem:`breadcrumb-hiddenItem_ZGRnB`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=breadcrumb.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumb.module.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.module.pcss"],"sourcesContent":[".breadcrumb {\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n\n &-list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n &-icon {\n margin-right: 6px;\n font-size: 0.9em;\n }\n\n &-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: color 0.15s;\n\n /* Explicit :link/:visited beats the browser default a:visited { color: purple } on\n specificity, otherwise every crumb using the same href (e.g. \"#\") turns purple as\n soon as any one of them is clicked. */\n &:link,\n &:visited {\n color: var(--text-dark);\n }\n\n &:hover {\n color: var(--primary-color);\n }\n\n &-disabled {\n color: var(--text-dark);\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n }\n }\n\n &-current {\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-weight: var(--header-font-weight, 600);\n }\n\n &-separator {\n display: flex;\n align-items: center;\n color: var(--text-dark);\n font-size: 0.75em;\n opacity: 0.7;\n }\n\n &-ellipsis {\n width: 1.8em;\n height: 1.8em;\n font-size: 1em;\n color: var(--text-dark);\n\n &:hover {\n color: var(--primary-color);\n }\n }\n\n &-hiddenList {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin: 0;\n padding: 6px;\n list-style: none;\n min-width: 160px;\n }\n\n &-hiddenItem {\n display: flex;\n\n .breadcrumb-link {\n width: 100%;\n padding: 6px 8px;\n border-radius: var(--default-border-radius);\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as l,jsxs as u}from"react/jsx-runtime";var d=10,re=.2;function f(f){let{children:ie,currentIndex:m,defaultIndex:ae=0,onChange:h=()=>{},loop:oe=!0,autoPlay:g=!1,autoPlayInterval:_=4e3,pauseOnHover:v=!0,showArrows:y=!0,showDots:se=!0,swipeable:ce=!0,className:le,style:ue,classNames:b,styles:x,...de}=e(`Carousel`,f),S=i.Children.toArray(ie),C=S.length,w=oe&&C>1,T=+!!w,E=w?[S[C-1],...S,S[0]]:S,D=m!==void 0,[O,k]=s(()=>p(ae,C,w)),A=p(D?m:O,C,w),[j,M]=s(A+T),[fe,N]=s(!0),P=o(A),[F,I]=s(!1),[L,R]=s(!1),[z,B]=s(!1),[V,H]=s(0),U=o(null);a(()=>{let e=P.current;if(P.current=A,e===A)return;let t=w&&e===C-1&&A===0,n=w&&e===0&&A===C-1;N(!0),M(t?e=>e+1:n?e=>e-1:A+T)},[A]);function W(e){let t=p(e,C,w);D||k(t),h(t)}function G(){!w&&A>=C-1||W(A+1)}function K(){!w&&A<=0||W(A-1)}function pe(e){e.target!==e.currentTarget||!w||(j===0?(N(!1),M(C)):j===E.length-1&&(N(!1),M(1)))}let q=v&&(F||L)||z;a(()=>{if(!g||C<=1||q)return;let e=setInterval(G,_);return()=>clearInterval(e)},[g,_,q,A,C]);let J=o(null);function me(e){!ce||C<=1||(J.current={startX:e.clientX,startY:e.clientY,axisLocked:!1,active:!0},e.currentTarget.setPointerCapture?.(e.pointerId))}function he(e){let t=J.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<d&&Math.abs(r)<d)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,B(!0),N(!1)}H(n/(U.current?.getBoundingClientRect().width||1)*100)}function Y(){let e=J.current;if(J.current=null,!e||!e.axisLocked){B(!1);return}let t=Math.abs(V)>=re*100;H(0),N(!0),B(!1),t&&(V<0?G():K())}function X(e){e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G())}let Z=!w&&A<=0,Q=!w&&A>=C-1,$=E.length>0?100/E.length:100,ge=`translateX(calc(${-j*$}% + ${$/100*V}%))`;return u(`div`,{...de,ref:U,role:`region`,"aria-roledescription":`carousel`,className:c(r.carousel,b?.root,le),style:{...ue,...x?.root},onMouseEnter:v?()=>I(!0):void 0,onMouseLeave:v?()=>I(!1):void 0,onFocus:v?()=>R(!0):void 0,onBlur:v?()=>R(!1):void 0,onKeyDown:X,children:[l(`div`,{className:c(r.carouselTrack,b?.track),style:{width:`${E.length*100}%`,transform:ge,transition:fe?void 0:`none`,...x?.track},onTransitionEnd:pe,onPointerDown:me,onPointerMove:he,onPointerUp:Y,onPointerCancel:Y,children:E.map((e,t)=>{let n=w&&(t===0||t===E.length-1),i=t-T,a=!n&&i===A;return l(`div`,{className:c(r.carouselSlide,b?.slide),style:{width:`${100/E.length}%`,...x?.slide},inert:a?void 0:!0,children:e},`carousel-slide-${t}`)})}),y&&C>1&&u(ne,{children:[l(n,{icon:ee,title:`Previous slide`,"aria-label":`Previous slide`,"aria-disabled":Z||void 0,onClick:()=>!Z&&K(),className:c(r.carouselPrevButton,Z&&r.carouselButtonDisabled,b?.prevButton),style:x?.prevButton}),l(n,{icon:te,title:`Next slide`,"aria-label":`Next slide`,"aria-disabled":Q||void 0,onClick:()=>!Q&&G(),className:c(r.carouselNextButton,Q&&r.carouselButtonDisabled,b?.nextButton),style:x?.nextButton})]}),se&&C>1&&l(`div`,{className:c(r.carouselDots,b?.dots),style:x?.dots,children:S.map((e,n)=>l(t,{"aria-label":`Go to slide ${n+1}`,"aria-current":n===A,onClick:()=>W(n),className:c(r.carouselDot,n===A&&r.carouselDotActive,b?.dot),style:x?.dot},`carousel-dot-${n}`))})]})}function p(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{f as default};
|
|
2
|
+
//# sourceMappingURL=carousel.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n const [dragOffsetPercent, setDragOffsetPercent] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n setTransitionEnabled(true);\n if (forwardWrap) {\n setDisplayIndex((d) => d + 1);\n } else if (backwardWrap) {\n setDisplayIndex((d) => d - 1);\n } else {\n setDisplayIndex(realIndex + offset);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget || !canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n const isPaused = (pauseOnHover && (hovered || focused)) || dragging;\n useEffect(() => {\n if (!autoPlay || count <= 1 || isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n const dragRef = useRef<{\n startX: number;\n startY: number;\n axisLocked: boolean;\n active: boolean;\n } | null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable || count <= 1) return;\n dragRef.current = { startX: event.clientX, startY: event.clientY, axisLocked: false, active: true };\n event.currentTarget.setPointerCapture?.(event.pointerId);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag || !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n const width = containerRef.current?.getBoundingClientRect().width || 1;\n setDragOffsetPercent((deltaX / width) * 100);\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag || !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n const committed = Math.abs(dragOffsetPercent) >= DRAG_COMMIT_RATIO * 100;\n setDragOffsetPercent(0);\n setTransitionEnabled(true);\n setDragging(false);\n if (committed) {\n if (dragOffsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n const trackTransform = `translateX(calc(${-displayIndex * slideWidthPercent}% + ${dragOffsetPercent * (slideWidthPercent / 100)}%))`;\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n className={cx(styles.carousel, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n onMouseEnter={pauseOnHover ? () => setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cx(styles.carouselTrack, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {slide}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title=\"Previous slide\"\n aria-label=\"Previous slide\"\n aria-disabled={isPrevDisabled || undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(styles.carouselPrevButton, isPrevDisabled && styles.carouselButtonDisabled, classNames?.prevButton)}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title=\"Next slide\"\n aria-label=\"Next slide\"\n aria-disabled={isNextDisabled || undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(styles.carouselNextButton, isNextDisabled && styles.carouselButtonDisabled, classNames?.nextButton)}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {showDots && count > 1 && (\n <div className={cx(styles.carouselDots, classNames?.dots)} style={slotStyles?.dots}>\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === realIndex}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={carousel:`carousel_-oOBA`,"carousel-track":`carousel-track_tmtQz`,carouselTrack:`carousel-track_tmtQz`,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:`carousel-slide_Qpgjn`,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:`carousel-prevButton_P9QsH`,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:`carousel-nextButton_FgVo7`,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:`carousel-buttonDisabled_rGyW-`,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:`carousel-dots_xyfSx`,"carousel-dot":`carousel-dot_kPnww`,carouselDot:`carousel-dot_kPnww`,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:`carousel-dot-active_f9EJ1`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=carousel.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.module.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.module.pcss"],"sourcesContent":[".carousel {\n position: relative;\n overflow: hidden;\n border-radius: var(--default-border-radius);\n\n &-track {\n display: flex;\n align-items: stretch;\n transition: transform 0.4s ease;\n touch-action: pan-y;\n user-select: none;\n }\n\n &-slide {\n flex-shrink: 0;\n box-sizing: border-box;\n }\n\n &-prevButton,\n &-nextButton {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--background-accent);\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-buttonDisabled {\n opacity: 0.35;\n pointer-events: none;\n }\n\n &-prevButton {\n left: 12px;\n }\n\n &-nextButton {\n right: 12px;\n }\n\n &-dots {\n position: absolute;\n bottom: 12px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n display: flex;\n gap: 8px;\n }\n\n &-dot {\n width: 8px;\n height: 8px;\n border-radius: 2000px;\n background: var(--background-accent);\n opacity: 0.6;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s, width 0.15s;\n\n &:hover {\n opacity: 0.85;\n }\n\n &-active {\n background: var(--primary-color);\n opacity: 1;\n width: 20px;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import r
|
|
1
|
+
import e from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../chip/chip.mjs";import o from"../chip/chipContainer.mjs";import s from"../modal/modal.mjs";import c from"../../services/klipy.mjs";import l from"../searchInput/searchInput.mjs";import u from"./components/gifPreview/gifPreview.mjs";import d from"./components/gifView/gifView.mjs";import f from"./klipyPicker.module.mjs";import{useMemo as p,useState as m}from"react";import h from"classnames";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({className:y,token:b=``,isModal:x=!1,onSelect:S=()=>void 0,selected:C=null}){let w=p(()=>new c(b),[b]),[T,E]=m(``),[D,O]=m([]),[k,A]=m([]),[j,M]=m(null),[N,P]=m(!1);async function F(e){if(E(e),!e.trim()){O([]),A([]),M(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([w.search(e,{limit:18,contentfilter:`medium`}),w.searchSuggestions(e)]);O(t),M(n),A(r)}async function I(){let{results:e=[],next:t=null}=await w.search(T,{limit:36,pos:j??void 0,contentfilter:`medium`});M(t),O(t=>[...t,...e])}async function L(e){await S(e),P(!1),e&&w.registerShare(T,e.id)}function R(){return _(o,{inline:!0,className:f.klipyPickerSuggestionsContainer,children:k.map(e=>_(a,{className:f.klipyPickerSuggestionsItem,text:e,onClick:()=>F(e)},e))})}function z(){return _(u,{previewItems:D,onSelect:L,onLoadAdditional:I})}function B(){return _(l,{label:`Pick gif`,value:T,onDebounce:F,onChange:E})}return x?v(`div`,{className:h(f.klipyPicker,y),children:[v(`div`,{className:e.actionButtons,children:[_(n,{onClick:()=>P(!0),children:`Pick gif`}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`})]}),C&&_(d,{className:f.klipyPickerSelected,src:C}),_(s,{isOpen:N,onClose:()=>P(!1),children:v(`div`,{className:f.klipyPickerModalContent,children:[B(),R(),z()]})})]}):v(`div`,{className:h(f.klipyPicker,y),children:[_(i,{align:r.Left,isOpen:D.length>0&&N,onOpenChange:P,content:v(g,{children:[R(),z()]}),children:B()}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`}),C&&_(d,{className:f.klipyPickerSelected,src:C})]})}export{y as default};
|
|
2
2
|
//# sourceMappingURL=klipyPicker.mjs.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./rating.module.mjs";import{useRef as n,useState as r}from"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faStar as o}from"@fortawesome/free-solid-svg-icons";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=4;function u(e,t){return Math.max(0,Math.min(t,e))}function d(d){let{value:f,defaultValue:p=0,onChange:m=()=>{},max:h=5,allowHalf:g=!1,allowClear:_=!0,readOnly:v=!1,disabled:y=!1,icon:b=o,"aria-label":x=`Rating`,className:S,style:C,classNames:w,styles:T,...E}=e(`Rating`,d),D=f!==void 0,[O,k]=r(p),A=u(D?f:O,h),[j,M]=r(null),N=!v&&!y,P=j??A,F=n(null),I=n(A),L=n(!1),R=n(0),z=n(!1);function B(e){let t=u(e,h);D||k(t),m(t)}function V(e){let t=F.current?.getBoundingClientRect();if(!t||t.width===0)return null;let n=u((e-t.left)/t.width,1)*h;return g?Math.round(n*2)/2:Math.ceil(n)}function H(e){if(!N)return;e.currentTarget.setPointerCapture?.(e.pointerId),L.current=!0,z.current=!1,R.current=e.clientX,I.current=A;let t=V(e.clientX);t!==null&&M(t)}function U(e){if(!N)return;let t=V(e.clientX);t!==null&&(L.current&&(e.preventDefault(),Math.abs(e.clientX-R.current)>l&&(z.current=!0)),M(t))}function W(e){if(!N||!L.current)return;e.currentTarget.releasePointerCapture?.(e.pointerId),L.current=!1;let t=V(e.clientX)??j;t!==null&&B(!z.current&&_&&t===I.current?0:t),M(null)}function G(){!N||L.current||M(null)}function K(e){let t=g?.5:1;e.key===`ArrowRight`||e.key===`ArrowUp`?(e.preventDefault(),B(A+t)):e.key===`ArrowLeft`||e.key===`ArrowDown`?(e.preventDefault(),B(A-t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(h))}return s(`div`,{...E,ref:F,role:`slider`,"aria-label":x,"aria-valuemin":0,"aria-valuemax":h,"aria-valuenow":A,"aria-valuetext":`${A} out of ${h}`,"aria-readonly":v||void 0,"aria-disabled":y||void 0,tabIndex:N?0:-1,className:i(t.rating,y&&t.ratingDisabled,v&&t.ratingReadOnly,w?.root,S),style:{...C,...T?.root},onKeyDown:N?K:void 0,onPointerDown:N?H:void 0,onPointerMove:N?U:void 0,onPointerUp:N?W:void 0,onPointerCancel:N?W:void 0,onPointerLeave:N?G:void 0,children:Array.from({length:h},(e,n)=>{let r=Math.round(Math.max(0,Math.min(1,P-n))*100);return c(`div`,{className:i(t.ratingItem,w?.item),style:T?.item,children:[s(a,{icon:b,className:i(t.ratingIconEmpty,w?.iconEmpty),style:T?.iconEmpty}),s(`div`,{className:t.ratingIconFilledClip,style:{width:`${r}%`},children:s(a,{icon:b,className:i(t.ratingIconFilled,w?.iconFilled),style:T?.iconFilled})})]},n)})})}export{d as default};
|
|
2
|
+
//# sourceMappingURL=rating.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.mjs","names":[],"sources":["../../../../package/common/rating/rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faStar } from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { RatingProps } from './rating.types';\n\nimport styles from './rating.module.pcss';\n\nconst DRAG_THRESHOLD = 4;\n\nfunction clampValue(value: number, max: number): number {\n return Math.max(0, Math.min(max, value));\n}\n\nfunction Rating(props: RatingProps): ReactElement {\n const {\n value: controlledValue,\n defaultValue = 0,\n onChange = () => {},\n max = 5,\n allowHalf = false,\n allowClear = true,\n readOnly = false,\n disabled = false,\n icon = faStar,\n 'aria-label': ariaLabel = 'Rating',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Rating', props);\n\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = clampValue(isControlled ? controlledValue! : internalValue, max);\n\n const [hoverValue, setHoverValue] = useState<number | null>(null);\n const isInteractive = !readOnly && !disabled;\n const displayValue = hoverValue ?? value;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const valueBeforeGestureRef = useRef(value);\n const draggingRef = useRef(false);\n const gestureStartXRef = useRef(0);\n const hasDraggedRef = useRef(false);\n\n function commit(nextValue: number) {\n const clamped = clampValue(nextValue, max);\n if (!isControlled) setInternalValue(clamped);\n onChange(clamped);\n }\n\n function getValueFromClientX(clientX: number): number | null {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect || rect.width === 0) return null;\n const fraction = clampValue((clientX - rect.left) / rect.width, 1);\n const raw = fraction * max;\n return allowHalf ? Math.round(raw * 2) / 2 : Math.ceil(raw);\n }\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive) return;\n event.currentTarget.setPointerCapture?.(event.pointerId);\n draggingRef.current = true;\n hasDraggedRef.current = false;\n gestureStartXRef.current = event.clientX;\n valueBeforeGestureRef.current = value;\n const next = getValueFromClientX(event.clientX);\n if (next !== null) setHoverValue(next);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive) return;\n const next = getValueFromClientX(event.clientX);\n if (next === null) return;\n if (draggingRef.current) {\n event.preventDefault();\n if (Math.abs(event.clientX - gestureStartXRef.current) > DRAG_THRESHOLD) {\n hasDraggedRef.current = true;\n }\n }\n setHoverValue(next);\n }\n\n function handlePointerUp(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive || !draggingRef.current) return;\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n draggingRef.current = false;\n const next = getValueFromClientX(event.clientX) ?? hoverValue;\n if (next !== null) {\n const isClick = !hasDraggedRef.current;\n commit(isClick && allowClear && next === valueBeforeGestureRef.current ? 0 : next);\n }\n setHoverValue(null);\n }\n\n function handlePointerLeave() {\n if (!isInteractive || draggingRef.current) return;\n setHoverValue(null);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n const step = allowHalf ? 0.5 : 1;\n if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n event.preventDefault();\n commit(value + step);\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n event.preventDefault();\n commit(value - step);\n } else if (event.key === 'Home') {\n event.preventDefault();\n commit(0);\n } else if (event.key === 'End') {\n event.preventDefault();\n commit(max);\n }\n }\n\n return (\n <div\n {...rest}\n ref={rootRef}\n role=\"slider\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-valuetext={`${value} out of ${max}`}\n aria-readonly={readOnly || undefined}\n aria-disabled={disabled || undefined}\n tabIndex={isInteractive ? 0 : -1}\n className={cx(\n styles.rating,\n disabled && styles.ratingDisabled,\n readOnly && styles.ratingReadOnly,\n classNames?.root,\n className\n )}\n style={{ ...style, ...slotStyles?.root }}\n onKeyDown={isInteractive ? handleKeyDown : undefined}\n onPointerDown={isInteractive ? handlePointerDown : undefined}\n onPointerMove={isInteractive ? handlePointerMove : undefined}\n onPointerUp={isInteractive ? handlePointerUp : undefined}\n onPointerCancel={isInteractive ? handlePointerUp : undefined}\n onPointerLeave={isInteractive ? handlePointerLeave : undefined}\n >\n {Array.from({ length: max }, (_, index) => {\n const fillPercent = Math.round(Math.max(0, Math.min(1, displayValue - index)) * 100);\n\n return (\n <div key={index} className={cx(styles.ratingItem, classNames?.item)} style={slotStyles?.item}>\n <FontAwesomeIcon\n icon={icon}\n className={cx(styles.ratingIconEmpty, classNames?.iconEmpty)}\n style={slotStyles?.iconEmpty as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n <div className={styles.ratingIconFilledClip} style={{ width: `${fillPercent}%` }}>\n <FontAwesomeIcon\n icon={icon}\n className={cx(styles.ratingIconFilled, classNames?.iconFilled)}\n style={slotStyles?.iconFilled as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default Rating;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={rating:`rating_eDKeX`,"rating-disabled":`rating-disabled_Xk0cI`,ratingDisabled:`rating-disabled_Xk0cI`,"rating-readOnly":`rating-readOnly_o8Kx1`,ratingReadOnly:`rating-readOnly_o8Kx1`,"rating-item":`rating-item_4tqx2`,ratingItem:`rating-item_4tqx2`,"rating-iconEmpty":`rating-iconEmpty_3uk2A`,ratingIconEmpty:`rating-iconEmpty_3uk2A`,"rating-iconFilledClip":`rating-iconFilledClip_4aNxG`,ratingIconFilledClip:`rating-iconFilledClip_4aNxG`,"rating-iconFilled":`rating-iconFilled_-rQ58`,ratingIconFilled:`rating-iconFilled_-rQ58`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=rating.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: 20px;\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n width: 1em;\n height: 1em;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../loading/spinnerLoading/index.mjs";import t
|
|
1
|
+
import e from"../loading/spinnerLoading/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../checkbox/checkbox.mjs";import i from"./virtualList.module.mjs";import ee from"./virtualRow.mjs";import"./virtualList.utils.mjs";import{useVirtualWindow as a}from"./useVirtualWindow.mjs";import{useSelection as o}from"./useSelection.mjs";import{useColumns as s}from"./useColumns.mjs";import{useRowDrag as te}from"./useRowDrag.mjs";import c,{useCallback as l,useImperativeHandle as ne,useMemo as u}from"react";import d from"classnames";import{FontAwesomeIcon as re}from"@fortawesome/react-fontawesome";import{faGear as ie}from"@fortawesome/free-solid-svg-icons";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";function h({items:c,renderRow:h,columns:g,height:_=`100%`,estimatedRowHeight:ae=40,overscan:oe=3,rowGap:se=0,rowPadding:v,selectedKey:y,getItemKey:b,onRowClick:ce,visibleColumnKeys:le,onVisibleColumnsChange:ue,persistColumnsKey:de,showColumnToggle:fe,onLoadMore:x,loadMoreThreshold:pe=100,isLoading:me=!1,multiSelect:S=!1,selectedKeys:he,onSelectionChange:ge,reorderable:_e=!1,onReorder:ve,longPressDelay:ye=400,treeReorder:C=!1,getItemDepth:w,isGroup:T,onTreeDrop:E,treeIndentPx:D=24,dragHandle:O=!1,showDivider:k=!0,rowHover:A=!0,className:j,style:M,classNames:N,styles:P,...be},xe){let F=l((e,t)=>b?b(e,t):t,[b]),I=u(()=>c.map((e,t)=>F(e,t)),[c,F]),L=u(()=>w?c.map((e,t)=>w(e,t)):[],[c,w]),Se=l(e=>T?T(c[e],e):!1,[T,c]),R=a({items:c,keys:I,getItemKey:b,estimatedRowHeight:ae,rowGap:se,overscan:oe,onLoadMore:x,loadMoreThreshold:pe}),{rootRef:z,headerRef:Ce,rowObserver:we,keysRef:Te,offsets:Ee,totalHeight:De,startIndex:B,endIndex:V}=R,H=o({items:c,getKey:F,multiSelect:S,selectedKeys:he,onSelectionChange:ge}),{effectiveSelectedKeys:U}=H,{hasColumns:W,visibleColumns:G,columnTemplate:K,shouldShowToggle:q,effectiveVisible:Oe,manuallyHiddenCount:J,toggleOpen:ke,setToggleOpen:Ae,handleToggleColumn:je,recalculateColumns:Y}=s({columns:g,items:c,multiSelect:S,visibleColumnKeys:le,onVisibleColumnsChange:ue,persistColumnsKey:de,showColumnToggle:fe,rootRef:z,startIndex:B,endIndex:V,containerHeight:R.containerHeight,containerWidth:R.containerWidth});ne(xe,()=>({...R.scrollApi,recalculateColumns:Y}),[R.scrollApi,Y]);let X=te({reorderable:_e,treeReorder:C,onReorder:ve,onTreeDrop:E,longPressDelay:ye,dragHandle:O,treeIndentPx:D,keys:I,depths:L,isGroupAt:Se,rootRef:z,keysRef:Te}),Me=typeof v==`number`?`${v}px`:v,Z=e=>{let t=c[e],n=F(t,e),a=y!=null&&n===y||U.has(n),o=X.getRowDragProps(e,n);return p(ee,{index:e,top:Ee[e],padding:Me,columnTemplate:K,isSelected:a,showDivider:k,hover:A,onClick:()=>{X.consumeSuppressedClick()||ce?.(t,e)},observer:we,ariaRowIndex:W?e+2:void 0,ariaPosInSet:W?void 0:e+1,ariaSetSize:W?void 0:c.length,rowRole:W?`row`:`listitem`,reserveToggleGutter:q,...o,dropIndicatorClassName:N?.dropIndicator,dropIndicatorStyle:P?.dropIndicator,rowClassName:N?.row,rowStyle:P?.row,children:W?m(f,{children:[S&&p(`div`,{className:d(i.virtualListSelectCell,N?.selectCell),style:P?.selectCell,role:`gridcell`,onClick:e=>e.stopPropagation(),children:p(r,{selected:U.has(n),onToggle:()=>H.handleRowSelect(n),"aria-label":`Select row`})}),G.map(n=>p(`div`,{className:d(i.virtualListCell,N?.cell),style:P?.cell,role:`gridcell`,"data-fit-key":n.width.type===`fit`?n.key:void 0,children:n.renderCell(t,e)},n.key))]}):h?.(t,e)},n)},Q=[];for(let e=B;e<=V;e++)Q.push(Z(e));let $=X.draggingKey==null?-1:I.indexOf(X.draggingKey);return $>=0&&($<B||$>V)&&Q.push(Z($)),m(`div`,{...be,ref:z,className:d(i.virtualList,X.draggingKey!=null&&i.virtualListReordering,j,N?.root),style:{height:_,...M,...P?.root},onScroll:R.handleScroll,role:W?`grid`:`list`,"aria-rowcount":W?c.length+1:void 0,children:[W&&m(`div`,{ref:Ce,className:d(i.virtualListHeader,N?.header),style:{gridTemplateColumns:K,...q?{paddingRight:32}:{},...P?.header},role:`row`,"aria-rowindex":1,children:[S&&p(`div`,{className:d(i.virtualListSelectCell,N?.selectCell),style:P?.selectCell,role:`columnheader`,children:p(r,{selected:H.allSelected||H.someSelected,onToggle:H.handleSelectAll,"aria-label":`Select all rows`})}),G.map(e=>p(`div`,{className:d(i.virtualListHeaderCell,N?.headerCell),style:P?.headerCell,role:`columnheader`,"data-fit-key":e.width.type===`fit`?e.key:void 0,children:e.label},e.key)),q&&m(`div`,{className:i.virtualListToggleWrapper,children:[p(n,{isOpen:ke,onOpenChange:Ae,align:t.Right,content:p(`div`,{className:d(i.virtualListTogglePopover,N?.togglePopover),style:P?.togglePopover,children:g.filter(e=>!e.hideFromToggle).map(e=>p(r,{className:d(i.virtualListToggleItem,N?.toggleItem),style:P?.toggleItem,selected:Oe.has(e.key),onToggle:()=>je(e.key),disabled:e.lockVisible,cursorDefault:!1,children:e.toggleLabel??e.label},e.key))}),children:p(`button`,{type:`button`,className:d(i.virtualListHeaderToggle,N?.headerToggle),style:P?.headerToggle,"aria-label":`Toggle column visibility`,children:p(re,{icon:ie,style:P?.headerToggle})})}),J>0&&p(`span`,{className:d(i.virtualListColumnChip,N?.columnChip),style:P?.columnChip,"data-column-hidden-count":J,"aria-label":`${J} columns hidden`,children:J})]})]}),me?p(`div`,{className:i.virtualListLoadingFull,children:p(e,{className:i.virtualListSpinner})}):p(`div`,{className:d(i.virtualListBody,N?.body),style:{height:De,...P?.body},children:Q}),R.showLoadMoreSpinner&&p(`div`,{className:d(i.virtualListLoadingIndicator,N?.loadingIndicator),style:P?.loadingIndicator,children:p(e,{className:i.virtualListSpinner})})]})}var g=c.forwardRef(h);export{g as default};
|
|
2
2
|
//# sourceMappingURL=virtualList.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualList.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useImperativeHandle } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faGear } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './virtualList.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport Checkbox from '../checkbox';\nimport FloatingMenu, { Align } from '../floatingMenu';\nimport VirtualRow from './virtualRow';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport { useSelection } from './useSelection';\nimport { useColumns } from './useColumns';\nimport { useRowDrag } from './useRowDrag';\nimport type { VirtualListProps, VirtualListHandle } from './virtualList.types';\n\n// Pure helpers live in ./virtualList.utils; re-exported here so existing\n// imports (and unit tests) keep working against the component entry point.\nexport {\n buildOffsets,\n findStartIndex,\n getVisibleRange,\n resolveReorderTarget,\n resolveTreeDropTarget,\n lastDescendantIndex,\n buildColumnTemplate,\n} from './virtualList.utils';\n\n// ─── Orchestrator ─────────────────────────────────────────────────────────────\n// VirtualListInner wires four focused hooks together and renders. Each concern\n// lives in its own module:\n// useVirtualWindow — generic scroll / measurement / windowing (all modes)\n// useSelection — multi-row selection\n// useColumns — table mode: columns, visibility, persistence, fit widths\n// useRowDrag — reorder + tree drag-and-drop (mouse + touch)\n\nfunction VirtualListInner<T>({\n items,\n renderRow,\n columns,\n height = '100%',\n estimatedRowHeight = 40,\n overscan = 3,\n rowGap = 0,\n rowPadding,\n selectedKey,\n getItemKey,\n onRowClick,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n showColumnToggle,\n onLoadMore,\n loadMoreThreshold = 100,\n isLoading = false,\n multiSelect = false,\n selectedKeys,\n onSelectionChange,\n reorderable = false,\n onReorder,\n longPressDelay = 400,\n treeReorder = false,\n getItemDepth,\n isGroup,\n onTreeDrop,\n treeIndentPx = 24,\n dragHandle = false,\n showDivider = true,\n rowHover = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListHandle>) {\n const getKey = useCallback(\n (item: T, index: number): string | number => (getItemKey ? getItemKey(item, index) : index),\n [getItemKey],\n );\n const keys = useMemo(() => items.map((item, i) => getKey(item, i)), [items, getKey]);\n const depths = useMemo(\n () => (getItemDepth ? items.map((item, i) => getItemDepth(item, i)) : []),\n [items, getItemDepth],\n );\n const isGroupAt = useCallback(\n (i: number) => (isGroup ? isGroup(items[i], i) : false),\n [isGroup, items],\n );\n\n const win = useVirtualWindow<T>({\n items, keys, getItemKey, estimatedRowHeight, rowGap, overscan,\n onLoadMore, loadMoreThreshold,\n });\n const { rootRef, headerRef, rowObserver, keysRef, offsets, totalHeight, startIndex, endIndex } = win;\n\n const selection = useSelection<T>({ items, getKey, multiSelect, selectedKeys, onSelectionChange });\n const { effectiveSelectedKeys } = selection;\n\n const cols = useColumns<T>({\n columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey,\n showColumnToggle, rootRef, startIndex, endIndex,\n containerHeight: win.containerHeight, containerWidth: win.containerWidth,\n });\n const {\n hasColumns, visibleColumns, columnTemplate, shouldShowToggle, effectiveVisible, manuallyHiddenCount,\n toggleOpen, setToggleOpen, handleToggleColumn, recalculateColumns,\n } = cols;\n\n // Compose the forwarded handle from both hooks: scroll methods come from the\n // windowing engine, column controls from the column hook.\n useImperativeHandle(\n ref,\n () => ({ ...win.scrollApi, recalculateColumns }),\n [win.scrollApi, recalculateColumns],\n );\n\n const drag = useRowDrag({\n reorderable, treeReorder, onReorder, onTreeDrop, longPressDelay, dragHandle, treeIndentPx,\n keys, depths, isGroupAt, rootRef, keysRef,\n });\n\n const rowPaddingValue = typeof rowPadding === 'number' ? `${rowPadding}px` : rowPadding;\n\n const renderRowAt = (i: number) => {\n const item = items[i];\n const key = getKey(item, i);\n const isSelected = (selectedKey != null && key === selectedKey) || effectiveSelectedKeys.has(key);\n const dragProps = drag.getRowDragProps(i, key);\n\n return (\n <VirtualRow\n key={key}\n index={i}\n top={offsets[i]}\n padding={rowPaddingValue}\n columnTemplate={columnTemplate}\n isSelected={isSelected}\n showDivider={showDivider}\n hover={rowHover}\n onClick={() => {\n if (drag.consumeSuppressedClick()) return;\n onRowClick?.(item, i);\n }}\n observer={rowObserver}\n ariaRowIndex={hasColumns ? i + 2 : undefined}\n ariaPosInSet={hasColumns ? undefined : i + 1}\n ariaSetSize={hasColumns ? undefined : items.length}\n rowRole={hasColumns ? 'row' : 'listitem'}\n reserveToggleGutter={shouldShowToggle}\n {...dragProps}\n dropIndicatorClassName={classNames?.dropIndicator}\n dropIndicatorStyle={slotStyles?.dropIndicator}\n rowClassName={classNames?.row}\n rowStyle={slotStyles?.row}\n >\n {hasColumns\n ? <>\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role=\"gridcell\"\n onClick={(e) => e.stopPropagation()}\n >\n <Checkbox\n selected={effectiveSelectedKeys.has(key)}\n onToggle={() => selection.handleRowSelect(key)}\n aria-label=\"Select row\"\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListCell, classNames?.cell)}\n style={slotStyles?.cell}\n role=\"gridcell\"\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.renderCell(item, i)}\n </div>\n ))}\n </>\n : renderRow?.(item, i)}\n </VirtualRow>\n );\n };\n\n const visibleRows: React.ReactNode[] = [];\n for (let i = startIndex; i <= endIndex; i++) visibleRows.push(renderRowAt(i));\n\n // Keep the row being touch-dragged mounted even if it scrolls out of the\n // window. Touch events are dispatched to the element under the finger at\n // touchstart; if that row unmounts, the browser stops delivering touchmove\n // and the drag freezes. Pinning its DOM node keeps the gesture alive.\n const draggedIndex = drag.draggingKey != null ? keys.indexOf(drag.draggingKey) : -1;\n if (draggedIndex >= 0 && (draggedIndex < startIndex || draggedIndex > endIndex)) {\n visibleRows.push(renderRowAt(draggedIndex));\n }\n\n return (\n <div\n {...rest}\n ref={rootRef}\n className={cx(styles.virtualList, drag.draggingKey != null && styles.virtualListReordering, className, classNames?.root)}\n style={{ height, ...style, ...slotStyles?.root }}\n onScroll={win.handleScroll}\n role={hasColumns ? 'grid' : 'list'}\n aria-rowcount={hasColumns ? items.length + 1 : undefined}\n >\n {hasColumns && (\n <div\n ref={headerRef}\n className={cx(styles.virtualListHeader, classNames?.header)}\n style={{ gridTemplateColumns: columnTemplate, ...(shouldShowToggle ? { paddingRight: 32 } : {}), ...slotStyles?.header }}\n role=\"row\"\n aria-rowindex={1}\n >\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role=\"columnheader\"\n >\n <Checkbox\n selected={selection.allSelected || selection.someSelected}\n onToggle={selection.handleSelectAll}\n aria-label=\"Select all rows\"\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListHeaderCell, classNames?.headerCell)}\n style={slotStyles?.headerCell}\n role=\"columnheader\"\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.label}\n </div>\n ))}\n {shouldShowToggle && (\n <div className={styles.virtualListToggleWrapper}>\n <FloatingMenu\n isOpen={toggleOpen}\n onOpenChange={setToggleOpen}\n align={Align.Right}\n content={\n <div\n className={cx(styles.virtualListTogglePopover, classNames?.togglePopover)}\n style={slotStyles?.togglePopover}\n >\n {columns!.filter((col) => !col.hideFromToggle).map((col) => (\n <Checkbox\n key={col.key}\n className={cx(styles.virtualListToggleItem, classNames?.toggleItem)}\n style={slotStyles?.toggleItem}\n selected={effectiveVisible.has(col.key)}\n onToggle={() => handleToggleColumn(col.key)}\n disabled={col.lockVisible}\n cursorDefault={false}\n >\n {col.toggleLabel ?? col.label}\n </Checkbox>\n ))}\n </div>\n }\n >\n <button\n type=\"button\"\n className={cx(styles.virtualListHeaderToggle, classNames?.headerToggle)}\n style={slotStyles?.headerToggle}\n aria-label=\"Toggle column visibility\"\n >\n <FontAwesomeIcon\n icon={faGear}\n style={slotStyles?.headerToggle as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n </button>\n </FloatingMenu>\n {manuallyHiddenCount > 0 && (\n <span\n className={cx(styles.virtualListColumnChip, classNames?.columnChip)}\n style={slotStyles?.columnChip}\n data-column-hidden-count={manuallyHiddenCount}\n aria-label={`${manuallyHiddenCount} columns hidden`}\n >\n {manuallyHiddenCount}\n </span>\n )}\n </div>\n )}\n </div>\n )}\n {isLoading ? (\n <div className={styles.virtualListLoadingFull}>\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n ) : (\n <div\n className={cx(styles.virtualListBody, classNames?.body)}\n style={{ height: totalHeight, ...slotStyles?.body }}\n >\n {visibleRows}\n </div>\n )}\n {win.showLoadMoreSpinner && (\n <div\n className={cx(styles.virtualListLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n >\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n )}\n </div>\n );\n}\n\n// forwardRef erases the generic, so cast back to a generic-preserving signature.\nconst VirtualList = React.forwardRef(VirtualListInner) as <T>(\n props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },\n) => React.ReactElement | null;\n\nexport default VirtualList;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"virtualList.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useImperativeHandle } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faGear } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './virtualList.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport Checkbox from '../checkbox';\nimport FloatingMenu, { Align } from '../floatingMenu';\nimport VirtualRow from './virtualRow';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport { useSelection } from './useSelection';\nimport { useColumns } from './useColumns';\nimport { useRowDrag } from './useRowDrag';\nimport type { VirtualListProps, VirtualListHandle } from './virtualList.types';\n\n// Pure helpers live in ./virtualList.utils; re-exported here so existing\n// imports (and unit tests) keep working against the component entry point.\nexport {\n buildOffsets,\n findStartIndex,\n getVisibleRange,\n resolveReorderTarget,\n resolveTreeDropTarget,\n lastDescendantIndex,\n buildColumnTemplate,\n} from './virtualList.utils';\n\n// ─── Orchestrator ─────────────────────────────────────────────────────────────\n// VirtualListInner wires four focused hooks together and renders. Each concern\n// lives in its own module:\n// useVirtualWindow — generic scroll / measurement / windowing (all modes)\n// useSelection — multi-row selection\n// useColumns — table mode: columns, visibility, persistence, fit widths\n// useRowDrag — reorder + tree drag-and-drop (mouse + touch)\n\nfunction VirtualListInner<T>({\n items,\n renderRow,\n columns,\n height = '100%',\n estimatedRowHeight = 40,\n overscan = 3,\n rowGap = 0,\n rowPadding,\n selectedKey,\n getItemKey,\n onRowClick,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n showColumnToggle,\n onLoadMore,\n loadMoreThreshold = 100,\n isLoading = false,\n multiSelect = false,\n selectedKeys,\n onSelectionChange,\n reorderable = false,\n onReorder,\n longPressDelay = 400,\n treeReorder = false,\n getItemDepth,\n isGroup,\n onTreeDrop,\n treeIndentPx = 24,\n dragHandle = false,\n showDivider = true,\n rowHover = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListHandle>) {\n const getKey = useCallback(\n (item: T, index: number): string | number => (getItemKey ? getItemKey(item, index) : index),\n [getItemKey],\n );\n const keys = useMemo(() => items.map((item, i) => getKey(item, i)), [items, getKey]);\n const depths = useMemo(\n () => (getItemDepth ? items.map((item, i) => getItemDepth(item, i)) : []),\n [items, getItemDepth],\n );\n const isGroupAt = useCallback(\n (i: number) => (isGroup ? isGroup(items[i], i) : false),\n [isGroup, items],\n );\n\n const win = useVirtualWindow<T>({\n items, keys, getItemKey, estimatedRowHeight, rowGap, overscan,\n onLoadMore, loadMoreThreshold,\n });\n const { rootRef, headerRef, rowObserver, keysRef, offsets, totalHeight, startIndex, endIndex } = win;\n\n const selection = useSelection<T>({ items, getKey, multiSelect, selectedKeys, onSelectionChange });\n const { effectiveSelectedKeys } = selection;\n\n const cols = useColumns<T>({\n columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey,\n showColumnToggle, rootRef, startIndex, endIndex,\n containerHeight: win.containerHeight, containerWidth: win.containerWidth,\n });\n const {\n hasColumns, visibleColumns, columnTemplate, shouldShowToggle, effectiveVisible, manuallyHiddenCount,\n toggleOpen, setToggleOpen, handleToggleColumn, recalculateColumns,\n } = cols;\n\n // Compose the forwarded handle from both hooks: scroll methods come from the\n // windowing engine, column controls from the column hook.\n useImperativeHandle(\n ref,\n () => ({ ...win.scrollApi, recalculateColumns }),\n [win.scrollApi, recalculateColumns],\n );\n\n const drag = useRowDrag({\n reorderable, treeReorder, onReorder, onTreeDrop, longPressDelay, dragHandle, treeIndentPx,\n keys, depths, isGroupAt, rootRef, keysRef,\n });\n\n const rowPaddingValue = typeof rowPadding === 'number' ? `${rowPadding}px` : rowPadding;\n\n const renderRowAt = (i: number) => {\n const item = items[i];\n const key = getKey(item, i);\n const isSelected = (selectedKey != null && key === selectedKey) || effectiveSelectedKeys.has(key);\n const dragProps = drag.getRowDragProps(i, key);\n\n return (\n <VirtualRow\n key={key}\n index={i}\n top={offsets[i]}\n padding={rowPaddingValue}\n columnTemplate={columnTemplate}\n isSelected={isSelected}\n showDivider={showDivider}\n hover={rowHover}\n onClick={() => {\n if (drag.consumeSuppressedClick()) return;\n onRowClick?.(item, i);\n }}\n observer={rowObserver}\n ariaRowIndex={hasColumns ? i + 2 : undefined}\n ariaPosInSet={hasColumns ? undefined : i + 1}\n ariaSetSize={hasColumns ? undefined : items.length}\n rowRole={hasColumns ? 'row' : 'listitem'}\n reserveToggleGutter={shouldShowToggle}\n {...dragProps}\n dropIndicatorClassName={classNames?.dropIndicator}\n dropIndicatorStyle={slotStyles?.dropIndicator}\n rowClassName={classNames?.row}\n rowStyle={slotStyles?.row}\n >\n {hasColumns\n ? <>\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role=\"gridcell\"\n onClick={(e) => e.stopPropagation()}\n >\n <Checkbox\n selected={effectiveSelectedKeys.has(key)}\n onToggle={() => selection.handleRowSelect(key)}\n aria-label=\"Select row\"\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListCell, classNames?.cell)}\n style={slotStyles?.cell}\n role=\"gridcell\"\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.renderCell(item, i)}\n </div>\n ))}\n </>\n : renderRow?.(item, i)}\n </VirtualRow>\n );\n };\n\n const visibleRows: React.ReactNode[] = [];\n for (let i = startIndex; i <= endIndex; i++) visibleRows.push(renderRowAt(i));\n\n // Keep the row being touch-dragged mounted even if it scrolls out of the\n // window. Touch events are dispatched to the element under the finger at\n // touchstart; if that row unmounts, the browser stops delivering touchmove\n // and the drag freezes. Pinning its DOM node keeps the gesture alive.\n const draggedIndex = drag.draggingKey != null ? keys.indexOf(drag.draggingKey) : -1;\n if (draggedIndex >= 0 && (draggedIndex < startIndex || draggedIndex > endIndex)) {\n visibleRows.push(renderRowAt(draggedIndex));\n }\n\n return (\n <div\n {...rest}\n ref={rootRef}\n className={cx(styles.virtualList, drag.draggingKey != null && styles.virtualListReordering, className, classNames?.root)}\n style={{ height, ...style, ...slotStyles?.root }}\n onScroll={win.handleScroll}\n role={hasColumns ? 'grid' : 'list'}\n aria-rowcount={hasColumns ? items.length + 1 : undefined}\n >\n {hasColumns && (\n <div\n ref={headerRef}\n className={cx(styles.virtualListHeader, classNames?.header)}\n style={{ gridTemplateColumns: columnTemplate, ...(shouldShowToggle ? { paddingRight: 32 } : {}), ...slotStyles?.header }}\n role=\"row\"\n aria-rowindex={1}\n >\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role=\"columnheader\"\n >\n <Checkbox\n selected={selection.allSelected || selection.someSelected}\n onToggle={selection.handleSelectAll}\n aria-label=\"Select all rows\"\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListHeaderCell, classNames?.headerCell)}\n style={slotStyles?.headerCell}\n role=\"columnheader\"\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.label}\n </div>\n ))}\n {shouldShowToggle && (\n <div className={styles.virtualListToggleWrapper}>\n <FloatingMenu\n isOpen={toggleOpen}\n onOpenChange={setToggleOpen}\n align={Align.Right}\n content={\n <div\n className={cx(styles.virtualListTogglePopover, classNames?.togglePopover)}\n style={slotStyles?.togglePopover}\n >\n {columns!.filter((col) => !col.hideFromToggle).map((col) => (\n <Checkbox\n key={col.key}\n className={cx(styles.virtualListToggleItem, classNames?.toggleItem)}\n style={slotStyles?.toggleItem}\n selected={effectiveVisible.has(col.key)}\n onToggle={() => handleToggleColumn(col.key)}\n disabled={col.lockVisible}\n cursorDefault={false}\n >\n {col.toggleLabel ?? col.label}\n </Checkbox>\n ))}\n </div>\n }\n >\n <button\n type=\"button\"\n className={cx(styles.virtualListHeaderToggle, classNames?.headerToggle)}\n style={slotStyles?.headerToggle}\n aria-label=\"Toggle column visibility\"\n >\n <FontAwesomeIcon\n icon={faGear}\n style={slotStyles?.headerToggle as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n </button>\n </FloatingMenu>\n {manuallyHiddenCount > 0 && (\n <span\n className={cx(styles.virtualListColumnChip, classNames?.columnChip)}\n style={slotStyles?.columnChip}\n data-column-hidden-count={manuallyHiddenCount}\n aria-label={`${manuallyHiddenCount} columns hidden`}\n >\n {manuallyHiddenCount}\n </span>\n )}\n </div>\n )}\n </div>\n )}\n {isLoading ? (\n <div className={styles.virtualListLoadingFull}>\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n ) : (\n <div\n className={cx(styles.virtualListBody, classNames?.body)}\n style={{ height: totalHeight, ...slotStyles?.body }}\n >\n {visibleRows}\n </div>\n )}\n {win.showLoadMoreSpinner && (\n <div\n className={cx(styles.virtualListLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n >\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n )}\n </div>\n );\n}\n\n// forwardRef erases the generic, so cast back to a generic-preserving signature.\nconst VirtualList = React.forwardRef(VirtualListInner) as <T>(\n props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },\n) => React.ReactElement | null;\n\nexport default VirtualList;\n"],"mappings":"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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import p from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as
|
|
1
|
+
import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import{AlertStyleType as p}from"./common/alert/alert.types.mjs";import m from"./common/alert/alert.mjs";import h from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as g,AnimatedTextVariant as _}from"./common/animatedText/animatedText.types.mjs";import v from"./common/animatedText/animatedText.mjs";import{BadgePosition as y,BadgeStyleType as b}from"./common/badge/badge.types.mjs";import x from"./common/badge/badge.mjs";import S from"./common/avatar/avatar.mjs";import C from"./common/avatar/avatarGroup.mjs";import w from"./common/bodyEnd/bodyEnd.mjs";import{Align as T}from"./common/floatingMenu/floatingMenu.types.mjs";import E from"./common/floatingMenu/floatingMenu.mjs";import D from"./common/breadcrumb/breadcrumb.mjs";import{CardStyleType as O}from"./common/card/card.types.mjs";import k from"./common/card/Card.mjs";import A from"./common/card/CardHeader.mjs";import j from"./common/card/CardMedia.mjs";import M from"./common/card/CardContent.mjs";import N from"./common/card/CardActions.mjs";import P from"./common/carousel/carousel.mjs";import F from"./common/checkbox/checkbox.mjs";import{ChipStyleType as I}from"./common/chip/chip.types.mjs";import L from"./common/chip/chip.mjs";import R from"./common/chip/chipContainer.mjs";import z from"./common/tooltip/tooltip.mjs";import{InputType as B}from"./common/input/input.types.mjs";import V from"./common/input/input.mjs";import H from"./common/colorPicker/colorPicker.mjs";import U from"./common/modal/modal.mjs";import W from"./common/confirmModal/confirmModal.mjs";import{getLocale as G,mapLocale as K,setLocale as q}from"./services/localization.mjs";import J from"./common/infiniteBlock/infiniteBlock.mjs";import Y from"./common/dropdown/dropdown.mjs";import X from"./common/datePicker/datePicker.mjs";import{DividerTextPosition as Z}from"./common/divider/divider.types.mjs";import Q from"./common/divider/divider.mjs";import $ from"./common/drawer/drawer.mjs";import{DropZoneReturnType as ee,DropZoneStatus as te}from"./common/dropZone/dropZone.types.mjs";import ne from"./common/dropZone/dropZone.mjs";import re from"./common/emptyState/emptyState.mjs";import ie from"./common/fab/fab.mjs";import ae from"./common/iconPicker/iconPicker.mjs";import oe from"./common/idleManager/idleManager.mjs";import se from"./common/inputDropdown/inputDropdown.mjs";import ce from"./common/kanbanBoard/KanbanColumn.mjs";import le from"./common/kanbanBoard/KanbanBoard.mjs";import ue from"./common/searchInput/searchInput.mjs";import de from"./common/klipyPicker/klipyPicker.mjs";import fe from"./common/loading/iconLoading/index.mjs";import pe from"./common/numberInput/index.mjs";import me from"./common/optionPicker/optionPicker.mjs";import he from"./common/overscroll/overscroll.mjs";import{PopoverAlign as ge,PopoverPlacement as _e,PopoverTrigger as ve}from"./common/popover/popover.types.mjs";import ye from"./common/popover/popover.mjs";import be from"./common/progressBar/progressBar.mjs";import{RadioGroupOrientation as xe}from"./common/radioGroup/radioGroup.types.mjs";import Se from"./common/radioGroup/radioGroup.mjs";import Ce from"./common/rating/rating.mjs";import we from"./common/roomDrawer/roomDrawer.mjs";import Te from"./common/roomViewer/roomViewer.mjs";import Ee from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as De}from"./common/sectionHeader/sectionHeader.types.mjs";import Oe from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as ke,SkeletonVariant as Ae}from"./common/skeleton/skeleton.types.mjs";import je from"./common/skeleton/skeleton.mjs";import Me from"./common/slider/slider.mjs";import{StepperAlignment as Ne,StepperCollapse as Pe,StepperLabelPlacement as Fe,StepperStyleType as Ie}from"./common/stepper/stepper.types.mjs";import Le from"./common/stepper/stepper.mjs";import Re from"./common/sticky/sticky.mjs";import ze from"./common/switch/switch.mjs";import Be from"./common/tabHeader/tabHeader.mjs";import Ve from"./common/textarea/textarea.mjs";import{defaultTheme as He}from"./common/themeProvider/defaultTheme.mjs";import Ue from"./common/themeProvider/themeProvider.mjs";import{useTheme as We}from"./common/themeProvider/useTheme.mjs";import Ge from"./common/timeInput/timeInput.mjs";import{showToast as Ke}from"./common/toast/toastService.mjs";import qe from"./common/toast/toastProvider.mjs";import Je from"./common/virtualList/virtualList.mjs";import Ye from"./common/wizard/wizard.mjs";import Xe from"./services/formValidation/FormValidatorGroupWithForm.mjs";import Ze from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as Qe}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as $e,Validators as et,useFormValidator as tt}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as nt,hasOnePasswordDigit as rt,hasOnePasswordLetter as it,isBic as at,isDate as ot,isEmail as st,isISODate as ct,isNumber as lt,isPassword as ut,isURL as dt}from"@ahrowe/form-validation";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,m as Alert,p as AlertStyleType,T as Align,h as AnimatedLogo,v as AnimatedText,g as AnimatedTextUnit,_ as AnimatedTextVariant,S as Avatar,C as AvatarGroup,x as Badge,y as BadgePosition,b as BadgeStyleType,w as BodyEnd,D as Breadcrumb,l as Button,a as ButtonSize,o as ButtonStyleType,s as ButtonType,k as Card,N as CardActions,M as CardContent,A as CardHeader,j as CardMedia,O as CardStyleType,P as Carousel,F as Checkbox,L as Chip,R as ChipContainer,I as ChipStyleType,H as ColorPicker,t as ConfigProvider,W as ConfirmModal,X as DatePicker,Q as Divider,Z as DividerTextPosition,$ as Drawer,ne as DropZone,ee as DropZoneReturnType,te as DropZoneStatus,Y as Dropdown,re as EmptyState,ie as Fab,E as FloatingMenu,$e as FormValidator,Xe as FormValidatorGroup,fe as IconLoading,ae as IconPicker,oe as IdleManager,J as InfiniteBlock,V as Input,se as InputDropdown,B as InputType,d as InteractableDiv,le as KanbanBoard,ce as KanbanColumn,de as KlipyPicker,U as Modal,pe as NumberInput,me as OptionPicker,he as Overscroll,ye as Popover,ge as PopoverAlign,_e as PopoverPlacement,ve as PopoverTrigger,be as ProgressBar,Se as RadioGroup,xe as RadioGroupOrientation,Ce as Rating,c as Ripple,we as RoomDrawer,Te as RoomViewer,Ee as ScrollbarProvider,ue as SearchInput,Oe as SectionHeader,De as SectionHeaderSize,je as Skeleton,ke as SkeletonAnimation,Ae as SkeletonVariant,Me as Slider,i as SpinnerLoading,Le as Stepper,Ne as StepperAlignment,Pe as StepperCollapse,Fe as StepperLabelPlacement,Ie as StepperStyleType,Re as Sticky,ze as Switch,Be as TabHeader,Ve as Textarea,Ue as ThemeProvider,Ge as TimeInput,qe as ToastProvider,z as Tooltip,Ze as ValidatableComponent,et as Validators,Je as VirtualList,Ye as Wizard,He as defaultTheme,G as getLocale,nt as hasEightPasswordChars,rt as hasOnePasswordDigit,it as hasOnePasswordLetter,at as isBic,ot as isDate,st as isEmail,ct as isISODate,lt as isNumber,ut as isPassword,dt as isURL,K as mapLocale,q as setLocale,Ke as showToast,n as useComponentDefaults,tt as useFormValidator,Qe as useFormValidatorGroup,We as useTheme};
|