@ahrowe/ui 0.19.4 → 0.21.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/actionIcon/actionIcon.mjs +1 -1
- package/dist/esm/common/actionIcon/actionIcon.mjs.map +1 -1
- package/dist/esm/common/alert/alert.mjs +1 -1
- package/dist/esm/common/alert/alert.mjs.map +1 -1
- package/dist/esm/common/alert/alert.types.mjs.map +1 -1
- package/dist/esm/common/avatar/avatar.mjs +1 -1
- package/dist/esm/common/avatar/avatar.mjs.map +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs.map +1 -1
- package/dist/esm/common/button/button.mjs +1 -1
- package/dist/esm/common/button/button.mjs.map +1 -1
- package/dist/esm/common/button/button.types.mjs.map +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs.map +1 -1
- package/dist/esm/common/fab/fab.mjs +1 -1
- package/dist/esm/common/fab/fab.mjs.map +1 -1
- package/dist/esm/common/otpInput/otpInput.mjs +2 -0
- package/dist/esm/common/otpInput/otpInput.mjs.map +1 -0
- package/dist/esm/common/otpInput/otpInput.module.mjs +2 -0
- package/dist/esm/common/otpInput/otpInput.module.mjs.map +1 -0
- package/dist/esm/common/otpInput/otpInput.types.mjs +2 -0
- package/dist/esm/common/otpInput/otpInput.types.mjs.map +1 -0
- package/dist/esm/common/rating/rating.mjs +1 -1
- package/dist/esm/common/rating/rating.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.types.mjs.map +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.mjs +1 -1
- package/dist/esm/common/stepper/stepper.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.module.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.types.mjs.map +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.mjs +1 -1
- package/dist/esm/common/timeline/timeline.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.module.mjs +1 -1
- package/dist/esm/common/timeline/timeline.module.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.types.mjs.map +1 -1
- package/dist/esm/common/timer/timer.chime.mjs +2 -0
- package/dist/esm/common/timer/timer.chime.mjs.map +1 -0
- package/dist/esm/common/timer/timer.mjs +2 -0
- package/dist/esm/common/timer/timer.mjs.map +1 -0
- package/dist/esm/common/timer/timer.module.mjs +2 -0
- package/dist/esm/common/timer/timer.module.mjs.map +1 -0
- package/dist/esm/common/utils/renderIcon.mjs +2 -0
- package/dist/esm/common/utils/renderIcon.mjs.map +1 -0
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/actionButtons/actionButtons.types.d.ts +3 -3
- package/dist/types/package/common/actionIcon/actionIcon.types.d.ts +2 -2
- package/dist/types/package/common/alert/alert.types.d.ts +2 -2
- package/dist/types/package/common/avatar/avatar.types.d.ts +2 -2
- package/dist/types/package/common/breadcrumb/breadcrumb.types.d.ts +2 -2
- package/dist/types/package/common/button/button.types.d.ts +2 -2
- package/dist/types/package/common/configProvider/configProvider.types.d.ts +4 -0
- package/dist/types/package/common/emptyState/emptyState.types.d.ts +2 -2
- package/dist/types/package/common/fab/fab.types.d.ts +2 -2
- package/dist/types/package/common/otpInput/index.d.ts +2 -0
- package/dist/types/package/common/otpInput/otpInput.d.ts +4 -0
- package/dist/types/package/common/otpInput/otpInput.types.d.ts +49 -0
- package/dist/types/package/common/rating/rating.types.d.ts +2 -2
- package/dist/types/package/common/sectionHeader/sectionHeader.types.d.ts +2 -2
- package/dist/types/package/common/splitButton/splitButton.types.d.ts +2 -2
- package/dist/types/package/common/stepper/stepper.types.d.ts +3 -3
- package/dist/types/package/common/tabHeader/tabHeader.types.d.ts +2 -2
- package/dist/types/package/common/themeProvider/theme.types.d.ts +14 -0
- package/dist/types/package/common/timeline/timeline.types.d.ts +3 -3
- package/dist/types/package/common/timer/index.d.ts +2 -0
- package/dist/types/package/common/timer/timer.chime.d.ts +1 -0
- package/dist/types/package/common/timer/timer.d.ts +3 -0
- package/dist/types/package/common/timer/timer.types.d.ts +101 -0
- package/dist/types/package/common/types/actions.types.d.ts +2 -2
- package/dist/types/package/common/types/icon.types.d.ts +17 -0
- package/dist/types/package/common/utils/renderIcon.d.ts +29 -0
- package/dist/types/package/index.d.ts +4 -0
- package/docs/ActionIcon.md +1 -1
- package/docs/Alert.md +1 -1
- package/docs/Avatar.md +1 -1
- package/docs/Breadcrumb.md +1 -1
- package/docs/Button.md +1 -1
- package/docs/CLAUDE.md +24 -0
- package/docs/ConfigProvider.md +2 -2
- package/docs/EmptyState.md +1 -1
- package/docs/OtpInput.md +92 -0
- package/docs/Rating.md +1 -1
- package/docs/SectionHeader.md +2 -2
- package/docs/Stepper.md +1 -1
- package/docs/TabHeader.md +1 -1
- package/docs/Timeline.md +1 -1
- package/docs/Timer.md +141 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../interactableDiv/index.mjs";import
|
|
1
|
+
import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"../interactableDiv/index.mjs";import n from"./actionIcon.module.mjs";import"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";function a({icon:a,className:o=``,style:s,title:c=``,onClick:l=()=>{},classNames:u,styles:d,...f}){return i(t,{...f,className:r(n.actionIcon,o,u?.root),style:{...s,...d?.root},title:c,onClick:l,children:e(a,{className:u?.icon,style:d?.icon})})}export{a as default};
|
|
2
2
|
//# sourceMappingURL=actionIcon.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actionIcon.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"actionIcon.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport InteractableDiv from '../interactableDiv';\nimport type { ActionIconProps } from './actionIcon.types';\nimport styles from './actionIcon.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction ActionIcon({\n icon,\n className = '',\n style,\n title = '',\n onClick = () => {},\n classNames,\n styles: slotStyles,\n ...rest\n}: ActionIconProps): ReactElement {\n return (\n <InteractableDiv\n {...rest}\n className={cx(styles.actionIcon, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n title={title}\n onClick={onClick}\n >\n {renderIcon(icon, { className: classNames?.icon, style: slotStyles?.icon })}\n </InteractableDiv>\n );\n}\n\nexport default ActionIcon;\n"],"mappings":"wNASA,SAAS,EAAW,CAClB,OACA,YAAY,GACZ,QACA,QAAQ,GACR,cAAgB,CAAC,EACjB,aACA,OAAQ,EACR,GAAG,GAC6B,CAChC,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAW,GAAY,IAAI,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAChC,QACE,mBAER,EAAW,EAAM,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,CAC3D,CAAA,CAErB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../actionIcon/actionIcon.mjs";import{AlertStyleType as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../actionIcon/actionIcon.mjs";import{AlertStyleType as r}from"./alert.types.mjs";import i from"./alert.module.mjs";import a from"classnames";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={[r.Default]:o,[r.Info]:c,[r.Success]:s,[r.Warn]:u,[r.Error]:l},h={[r.Default]:i.alertStyleDefault,[r.Info]:i.alertStyleInfo,[r.Success]:i.alertStyleSuccess,[r.Warn]:i.alertStyleWarn,[r.Error]:i.alertStyleError};function g(o){let{title:s,children:c=null,styleType:l=r.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:a(i.alert,h[l],b?.root,v),style:{...y,...x?.root},children:[!g&&t(u??m[l],{className:a(i.alertIcon,b?.icon),style:x?.icon}),p(`div`,{className:a(i.alertContent,b?.content),style:x?.content,children:[s&&f(`div`,{className:a(i.alertTitle,b?.title),style:x?.title,children:s}),c&&f(`div`,{className:a(i.alertDescription,b?.description),style:x?.description,children:c})]}),_&&f(n,{icon:d,onClick:_,className:a(i.alertCloseButton,b?.closeButton),style:x?.closeButton,"aria-label":`Dismiss`})]})}export{g as default};
|
|
2
2
|
//# sourceMappingURL=alert.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\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';\nimport { renderIcon } from '../utils/renderIcon';\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 renderIcon(icon ?? ICON_BY_STYLE[styleType], {\n className: cx(styles.alertIcon, classNames?.icon),\n style: slotStyles?.icon,\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":"+eAkBA,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,EAAW,GAAQ,EAAc,GAAY,CAC3C,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACrB,CAAC,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"}
|
|
@@ -1 +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 {
|
|
1
|
+
{"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\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?: IconContent;\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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{BadgePosition as
|
|
1
|
+
import{renderIcon as e}from"../utils/renderIcon.mjs";import{BadgePosition as t,BadgeStyleType as n}from"../badge/badge.types.mjs";import r from"../badge/badge.mjs";import i from"./avatar.module.mjs";import{useState as a}from"react";import o from"classnames";import{faUser as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c}from"react/jsx-runtime";var l={online:n.Success,away:n.Warn,busy:n.Error,offline:n.Default};function u(e){if(!e)return``;let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?``:t.length===1?t[0].slice(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}function d({src:n,alt:d,name:f,icon:p=s,content:m,status:h,className:g,style:_,classNames:v,styles:y,...b}){let[x,S]=a(!1),[C,w]=a(n);n!==C&&(w(n),S(!1));let T=u(f),E=n&&!x?c(`img`,{className:o(i.avatarImage,v?.image),style:y?.image,src:n,alt:d??f??``,onError:()=>S(!0)}):c(`span`,{className:o(i.avatarFallback,v?.fallback),style:y?.fallback,children:m??(T||e(p))});return h?c(r,{...b,dot:!0,position:t.BottomRight,styleType:l[h],className:g,style:_,classNames:{badge:o(i.avatarStatusBadge,v?.status)},styles:{badge:y?.status},children:c(`span`,{className:i.avatar,children:E})}):c(`span`,{...b,className:o(i.avatar,g),style:_,children:E})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=avatar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.mjs","names":[],"sources":["../../../../package/common/avatar/avatar.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"file":"avatar.mjs","names":[],"sources":["../../../../package/common/avatar/avatar.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faUser } from '@fortawesome/free-solid-svg-icons';\nimport Badge, { BadgeStyleType, BadgePosition } from '../badge';\n\nimport type { AvatarProps, AvatarStatus } from './avatar.types';\nimport styles from './avatar.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst STATUS_STYLE: Record<AvatarStatus, BadgeStyleType> = {\n online: BadgeStyleType.Success,\n away: BadgeStyleType.Warn,\n busy: BadgeStyleType.Error,\n offline: BadgeStyleType.Default,\n};\n\nfunction getInitials(name?: string): string {\n if (!name) return '';\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) return '';\n if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nfunction Avatar({\n src,\n alt,\n name,\n icon = faUser,\n content,\n status,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: AvatarProps): ReactElement {\n const [hasError, setHasError] = useState(false);\n const [prevSrc, setPrevSrc] = useState(src);\n\n if (src !== prevSrc) {\n setPrevSrc(src);\n setHasError(false);\n }\n\n const initials = getInitials(name);\n const showImage = !!src && !hasError;\n\n const rendered = showImage ? (\n <img\n className={cx(styles.avatarImage, classNames?.image)}\n style={slotStyles?.image}\n src={src}\n alt={alt ?? name ?? ''}\n onError={() => setHasError(true)}\n />\n ) : (\n <span className={cx(styles.avatarFallback, classNames?.fallback)} style={slotStyles?.fallback}>\n {content ?? (initials || renderIcon(icon))}\n </span>\n );\n\n if (!status) {\n return (\n <span {...rest} className={cx(styles.avatar, className)} style={style}>\n {rendered}\n </span>\n );\n }\n\n return (\n <Badge\n {...rest}\n dot\n position={BadgePosition.BottomRight}\n styleType={STATUS_STYLE[status]}\n className={className}\n style={style}\n classNames={{ badge: cx(styles.avatarStatusBadge, classNames?.status) }}\n styles={{ badge: slotStyles?.status }}\n >\n <span className={styles.avatar}>{rendered}</span>\n </Badge>\n );\n}\n\nexport default Avatar;\n"],"mappings":"qWASA,IAAM,EAAqD,CACzD,OAAQ,EAAe,QACvB,KAAM,EAAe,KACrB,KAAM,EAAe,MACrB,QAAS,EAAe,OAC1B,EAEA,SAAS,EAAY,EAAuB,CAC1C,GAAI,CAAC,EAAM,MAAO,GAClB,IAAM,EAAQ,EAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,EAGrD,OAFI,EAAM,SAAW,EAAU,GAC3B,EAAM,SAAW,EAAU,EAAM,GAAG,MAAM,EAAG,CAAC,EAAE,YAAY,GACxD,EAAM,GAAG,GAAK,EAAM,EAAM,OAAS,GAAG,IAAI,YAAY,CAChE,CAEA,SAAS,EAAO,CACd,MACA,MACA,OACA,OAAO,EACP,UACA,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACyB,CAC5B,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EACxC,CAAC,EAAS,GAAc,EAAS,CAAG,EAEtC,IAAQ,IACV,EAAW,CAAG,EACd,EAAY,EAAK,GAGnB,IAAM,EAAW,EAAY,CAAI,EAG3B,EAFc,GAAO,CAAC,EAG1B,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,YAAa,GAAY,KAAK,EACnD,MAAO,GAAY,MACd,MACL,IAAK,GAAO,GAAQ,GACpB,YAAe,EAAY,EAAI,CAChC,CAAA,EAED,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,eAAgB,GAAY,QAAQ,EAAG,MAAO,GAAY,kBAClF,IAAY,GAAY,EAAW,CAAI,EACpC,CAAA,EAWR,OARK,EASH,EAAC,EAAD,CACE,GAAI,EACJ,IAAA,GACA,SAAU,EAAc,YACxB,UAAW,EAAa,GACb,YACJ,QACP,WAAY,CAAE,MAAO,EAAG,EAAO,kBAAmB,GAAY,MAAM,CAAE,EACtE,OAAQ,CAAE,MAAO,GAAY,MAAO,WAEpC,EAAC,OAAD,CAAM,UAAW,EAAO,gBAAS,CAAe,CAAA,CAC3C,CAAA,EAlBL,EAAC,OAAD,CAAM,GAAI,EAAM,UAAW,EAAG,EAAO,OAAQ,CAAS,EAAU,iBAC7D,CACG,CAAA,CAkBZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"./breadcrumb.module.mjs";import{useState as o}from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faChevronRight as l,faEllipsis as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";function m(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 h(t){let{items:n=[],separator:d,maxItems:h,"aria-label":_=`Breadcrumb`,className:v,style:y,classNames:b,styles:x,...S}=e(`Breadcrumb`,t),[C,w]=o(!1),{leading:T,hidden:E,trailing:D}=m(n,h),O=n.length-1;function k(e){return e===O?null:f(`span`,{className:s(a.breadcrumbSeparator,b?.separator),style:x?.separator,children:d??f(c,{icon:l})})}function A({item:e,index:t}){return p(`li`,{className:s(a.breadcrumbItem,b?.item),style:x?.item,children:[g(e,t===O,a,b,x),k(t)]},e.id??t)}return f(`nav`,{...S,"aria-label":_,className:s(a.breadcrumb,b?.root,v),style:{...y,...x?.root},children:p(`ol`,{className:s(a.breadcrumbList,b?.list),style:x?.list,children:[T.map(A),E.length>0&&p(`li`,{className:s(a.breadcrumbItem,b?.item),style:x?.item,children:[f(i,{isOpen:C,onOpenChange:w,dontCloseOnChildClick:!0,content:f(`ul`,{className:s(a.breadcrumbHiddenList,b?.hiddenList),style:x?.hiddenList,children:E.map(({item:e,index:t})=>f(`li`,{className:s(a.breadcrumbHiddenItem,b?.hiddenItem),style:x?.hiddenItem,children:g({...e,onClick:t=>{e.onClick?.(t),w(!1)}},!1,a,b,x)},e.id??t))}),children:f(r,{icon:u,title:`Show hidden breadcrumbs`,"aria-label":`Show hidden breadcrumbs`,className:s(a.breadcrumbEllipsis,b?.ellipsis),style:x?.ellipsis})}),k(E[E.length-1].index)]}),D.map(A)]})})}function g(e,r,i,a,o){let c=p(d,{children:[e.icon?t(e.icon,{className:s(i.breadcrumbIcon,a?.icon),style:o?.icon}):null,e.label]});return r?f(`span`,{"aria-current":`page`,className:s(i.breadcrumbCurrent,a?.current),style:o?.current,children:c}):e.disabled?f(`span`,{className:s(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:c}):e.href?f(`a`,{href:e.href,onClick:e.onClick,className:s(i.breadcrumbLink,a?.link),style:o?.link,children:c}):e.onClick?f(n,{onClick:e.onClick,className:s(i.breadcrumbLink,a?.link),style:o?.link,children:c}):f(`span`,{className:s(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:c})}export{h as default};
|
|
2
2
|
//# sourceMappingURL=breadcrumb.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { 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';\nimport { renderIcon } from '../utils/renderIcon';\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 dontCloseOnChildClick\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 ? renderIcon(item.icon, {\n className: cx(styles.breadcrumbIcon, classNames?.icon),\n style: slotStyles?.icon,\n })\n : null}\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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./button.module.mjs";import n from"../loading/spinnerLoading/index.mjs";import{ButtonSize as r,ButtonStyleType as i,ButtonType as a}from"./button.types.mjs";import o from"../ripple/ripple.mjs";import s
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./button.module.mjs";import n from"../loading/spinnerLoading/index.mjs";import{ButtonSize as r,ButtonStyleType as i,ButtonType as a}from"./button.types.mjs";import o from"../ripple/ripple.mjs";import{renderIcon as s}from"../utils/renderIcon.mjs";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={default:t.buttonStyleDefault,primary:t.buttonStylePrimary,delete:t.buttonStyleDelete},f={default:t.buttonSizeDefault,small:t.buttonSizeSmall,medium:t.buttonSizeMedium,large:t.buttonSizeLarge};function p(p){let{className:m,style:h,type:g=a.Button,styleType:_=i.Default,size:v=r.Default,onClick:y=()=>{},children:b,icon:x,isLoading:S=!1,disabled:C=!1,title:w=void 0,ref:T,classNames:E,styles:D,...O}=e(`Button`,p);return l(`button`,{...O,className:c(t.button,d[_],f[v],{[t.buttonNotAllowed]:S||C},m),style:h,type:g,onClick:y,disabled:C||S,title:w,ref:T,children:l(o,{disabled:S||C,children:l(`div`,{className:c(t.buttonBackground,E?.background),style:D?.background,children:u(`div`,{className:c(t.buttonContent,E?.content),style:D?.content,children:[S?l(`div`,{className:c(t.buttonLoadingContainer,E?.loadingContainer),style:D?.loadingContainer,children:l(n,{className:t.buttonLoadingIcon})}):null,u(`div`,{className:c(E?.label,{[t.buttonLoading]:S,[t.buttonWithIcon]:!!x}),style:D?.label,children:[x?s(x):null,b]})]})})})})}p.StyleType=i,p.Size=r,p.Type=a;export{p as default};
|
|
2
2
|
//# sourceMappingURL=button.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport styles from './button.module.pcss';\nimport SpinnerLoading from 'components/common/loading/spinnerLoading';\nimport { ButtonStyleType, ButtonSize, ButtonType } from './button.types';\nimport type { ButtonProps } from './button.types';\nimport Ripple from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst CLASS_BY_STYLE: Record<ButtonStyleType, string> = {\n default: styles.buttonStyleDefault,\n primary: styles.buttonStylePrimary,\n delete: styles.buttonStyleDelete,\n};\n\nconst CLASS_BY_SIZE: Record<ButtonSize, string> = {\n default: styles.buttonSizeDefault,\n small: styles.buttonSizeSmall,\n medium: styles.buttonSizeMedium,\n large: styles.buttonSizeLarge,\n};\n\nfunction Button(props: ButtonProps): ReactElement {\n const {\n className,\n style,\n type = ButtonType.Button,\n styleType = ButtonStyleType.Default,\n size = ButtonSize.Default,\n onClick = (): void => {},\n children,\n icon,\n isLoading = false,\n disabled = false,\n title = undefined,\n ref,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Button', props);\n return (\n <button\n {...rest}\n className={cx(\n styles.button,\n CLASS_BY_STYLE[styleType],\n CLASS_BY_SIZE[size],\n {\n [styles.buttonNotAllowed]: isLoading || disabled,\n },\n className\n )}\n style={style}\n type={type}\n onClick={onClick}\n disabled={disabled || isLoading}\n title={title}\n ref={ref}\n >\n <Ripple disabled={isLoading || disabled}>\n <div className={cx(styles.buttonBackground, classNames?.background)} style={slotStyles?.background}>\n <div className={cx(styles.buttonContent, classNames?.content)} style={slotStyles?.content}>\n {isLoading ? (\n <div className={cx(styles.buttonLoadingContainer, classNames?.loadingContainer)} style={slotStyles?.loadingContainer}>\n <SpinnerLoading className={styles.buttonLoadingIcon} />\n </div>\n ) : null}\n <div\n className={cx(classNames?.label, {\n [styles.buttonLoading]: isLoading,\n [styles.buttonWithIcon]: !!icon,\n })}\n style={slotStyles?.label}\n >\n {icon ? renderIcon(icon) : null}\n {children}\n </div>\n </div>\n </div>\n </Ripple>\n </button>\n );\n}\n\nButton.StyleType = ButtonStyleType;\nButton.Size = ButtonSize;\nButton.Type = ButtonType;\n\nexport default Button;\n"],"mappings":"kaAWA,IAAM,EAAkD,CACtD,QAAS,EAAO,mBAChB,QAAS,EAAO,mBAChB,OAAQ,EAAO,iBACjB,EAEM,EAA4C,CAChD,QAAS,EAAO,kBAChB,MAAO,EAAO,gBACd,OAAQ,EAAO,iBACf,MAAO,EAAO,eAChB,EAEA,SAAS,EAAO,EAAkC,CAChD,GAAM,CACN,YACA,QACA,OAAO,EAAW,OAClB,YAAY,EAAgB,QAC5B,OAAO,EAAW,QAClB,cAAsB,CAAC,EACvB,WACA,OACA,YAAY,GACZ,WAAW,GACX,QAAQ,IAAA,GACR,MACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,SAAU,CAAK,EACxC,OACE,EAAC,SAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,OACP,EAAe,GACf,EAAc,GACd,EACG,EAAO,kBAAmB,GAAa,CAC1C,EACA,CACF,EACO,QACD,OACG,UACT,SAAU,GAAY,EACf,QACF,eAEL,EAAC,EAAD,CAAQ,SAAU,GAAa,WAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,UAAU,EAAG,MAAO,GAAY,oBACtF,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,OAAO,EAAG,MAAO,GAAY,iBAAlF,CACG,EACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,uBAAwB,GAAY,gBAAgB,EAAG,MAAO,GAAY,0BAClG,EAAC,EAAD,CAAgB,UAAW,EAAO,iBAAoB,CAAA,CACnD,CAAA,EACH,KACJ,EAAC,MAAD,CACE,UAAW,EAAG,GAAY,MAAO,EAC9B,EAAO,eAAgB,GACvB,EAAO,gBAAiB,CAAC,CAAC,CAC7B,CAAC,EACD,MAAO,GAAY,eALrB,CAOG,EAAO,EAAW,CAAI,EAAI,KAC1B,CACE,GACF,GACF,CAAA,CACC,CAAA,CACF,CAAA,CAEZ,CAEA,EAAO,UAAY,EACnB,EAAO,KAAO,EACd,EAAO,KAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.types.mjs","names":[],"sources":["../../../../package/common/button/button.types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"button.types.mjs","names":[],"sources":["../../../../package/common/button/button.types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum ButtonStyleType {\n Primary = 'primary',\n Default = 'default',\n Delete = 'delete',\n}\n\nexport enum ButtonSize {\n Default = 'default',\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport enum ButtonType {\n Button = 'button',\n Reset = 'reset',\n Submit = 'submit',\n}\n\nexport type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';\n\nexport interface ButtonProps extends HtmlProps {\n className?: string;\n style?: CSSProperties;\n type?: ButtonType;\n styleType?: ButtonStyleType;\n size?: ButtonSize;\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n children?: React.ReactNode;\n icon?: IconContent;\n isLoading?: boolean;\n disabled?: boolean;\n title?: string;\n ref?: React.Ref<HTMLButtonElement>;\n classNames?: SlotClassNames<ButtonSlots>;\n styles?: SlotStyles<ButtonSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,OAAA,SACA,EAAA,MAAA,QACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"./emptyState.module.mjs";import n from"classnames";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({className:a,icon:o,children:s,...c}){return i(`div`,{...c,className:n(t.emptyState,a),children:[o?e(o):null,r(`div`,{children:s??`No entries available`})]})}export{a as default};
|
|
2
2
|
//# sourceMappingURL=emptyState.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emptyState.mjs","names":[],"sources":["../../../../package/common/emptyState/emptyState.tsx"],"sourcesContent":["import cx from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"emptyState.mjs","names":[],"sources":["../../../../package/common/emptyState/emptyState.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\nimport type { EmptyStateProps } from './emptyState.types';\nimport styles from './emptyState.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nexport default function EmptyState({ className, icon, children, ...rest }: EmptyStateProps): ReactElement {\n return (\n <div {...rest} className={cx(styles.emptyState, className)}>\n {icon ? renderIcon(icon) : null}\n <div>{children ?? 'No entries available'}</div>\n </div>\n );\n}\n"],"mappings":"wKAMA,SAAwB,EAAW,CAAE,YAAW,OAAM,WAAU,GAAG,GAAuC,CACxG,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,WAAY,CAAS,WAAzD,CACG,EAAO,EAAW,CAAI,EAAI,KAC3B,EAAC,MAAD,CAAA,SAAM,GAAY,sBAA4B,CAAA,CAC3C,GAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ButtonStyleType as e}from"../button/button.types.mjs";import t from"./components/fabBase/fabBase.mjs";import
|
|
1
|
+
import{ButtonStyleType as e}from"../button/button.types.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./components/fabBase/fabBase.mjs";import r from"./fab.module.mjs";import{useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faPlus as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,size:d=`default`,menuEntries:f=[],onMenuEntryClicked:p=()=>{},onClick:m=()=>{},closeMenuOnEntryClicked:h=!0,...g}){let[_,v]=i(!1);function y(){f.length>0&&v(e=>!e),m()}function b(e,t){e.stopPropagation(),h&&v(!1),p(t)}return l(`div`,{...g,className:r.fabContainer,children:[c(`div`,{className:a(r.fabMenuBackdrop,_&&r.fabMenuBackdropOpen),onClick:e=>{e.stopPropagation(),v(!1)}}),c(`div`,{onClick:e=>e.stopPropagation(),children:c(n,{className:r.fab,size:d,onClick:y,children:l(`div`,{className:a(r.fabIcon,_&&r.fabIconMenuOpen),children:[c(`div`,{className:a(r.fabIconContent,!_&&r.fabIconContentShown),children:u}),c(`div`,{className:a(r.fabIconContent,_&&r.fabIconContentShown),children:c(o,{icon:s})})]})})}),c(`div`,{className:r.fabMenu,children:f.map(({id:i,label:o,icon:s})=>l(`div`,{className:a(r.fabMenuEntry,_&&r.fabMenuEntryShown),onClick:e=>b(e,i),children:[o&&c(`div`,{className:r.fabMenuEntryLabelContainer,children:c(`div`,{className:r.fabMenuEntryLabel,children:o})}),c(n,{size:`mini`,styleType:e.Default,children:t(s)})]},i))})]})}export{u as default};
|
|
2
2
|
//# sourceMappingURL=fab.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\n\nfunction Fab({\n children = null,\n size = 'default',\n menuEntries = [],\n onMenuEntryClicked = () => {},\n onClick = () => {},\n closeMenuOnEntryClicked = true,\n ...rest\n}: FabProps) {\n const [menuOpen, setMenuOpen] = useState(false);\n\n function handleFabClick() {\n if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n onClick();\n }\n\n function handleEntryClick(e: React.MouseEvent, id: string) {\n e.stopPropagation();\n if (closeMenuOnEntryClicked) setMenuOpen(false);\n onMenuEntryClicked(id);\n }\n\n return (\n <div {...rest} className={styles.fabContainer}>\n <div\n className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen)}\n onClick={(e) => { e.stopPropagation(); setMenuOpen(false); }}\n />\n <div onClick={(e) => e.stopPropagation()}>\n <FabBase className={styles.fab} size={size} onClick={handleFabClick}>\n <div className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen)}>\n <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>\n {children}\n </div>\n <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n <FontAwesomeIcon icon={addIcon} />\n </div>\n </div>\n </FabBase>\n </div>\n <div className={styles.fabMenu}>\n {menuEntries.map(({ id, label, icon }) => (\n <div\n key={id}\n className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown)}\n onClick={(e) => handleEntryClick(e, id)}\n >\n {label && (\n <div className={styles.fabMenuEntryLabelContainer}>\n <div className={styles.fabMenuEntryLabel}>{label}</div>\n </div>\n )}\n <FabBase size=\"mini\" styleType={ButtonStyleType.Default}>\n
|
|
1
|
+
{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction Fab({\n children = null,\n size = 'default',\n menuEntries = [],\n onMenuEntryClicked = () => {},\n onClick = () => {},\n closeMenuOnEntryClicked = true,\n ...rest\n}: FabProps) {\n const [menuOpen, setMenuOpen] = useState(false);\n\n function handleFabClick() {\n if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n onClick();\n }\n\n function handleEntryClick(e: React.MouseEvent, id: string) {\n e.stopPropagation();\n if (closeMenuOnEntryClicked) setMenuOpen(false);\n onMenuEntryClicked(id);\n }\n\n return (\n <div {...rest} className={styles.fabContainer}>\n <div\n className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen)}\n onClick={(e) => { e.stopPropagation(); setMenuOpen(false); }}\n />\n <div onClick={(e) => e.stopPropagation()}>\n <FabBase className={styles.fab} size={size} onClick={handleFabClick}>\n <div className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen)}>\n <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>\n {children}\n </div>\n <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n <FontAwesomeIcon icon={addIcon} />\n </div>\n </div>\n </FabBase>\n </div>\n <div className={styles.fabMenu}>\n {menuEntries.map(({ id, label, icon }) => (\n <div\n key={id}\n className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown)}\n onClick={(e) => handleEntryClick(e, id)}\n >\n {label && (\n <div className={styles.fabMenuEntryLabelContainer}>\n <div className={styles.fabMenuEntryLabel}>{label}</div>\n </div>\n )}\n <FabBase size=\"mini\" styleType={ButtonStyleType.Default}>\n {renderIcon(icon)}\n </FabBase>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nexport default Fab;\n"],"mappings":"2aAYA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAO,sBAAjC,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,mBAAmB,EAC5E,QAAU,GAAM,CAAE,EAAE,gBAAgB,EAAG,EAAY,EAAK,CAAG,CAC5D,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,WACrC,EAAC,EAAD,CAAS,UAAW,EAAO,IAAW,OAAM,QAAS,WACnD,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,eAAe,WAArE,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAC9E,UACE,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,WAC9E,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAO,iBACpB,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,iBAAiB,EACvE,QAAU,GAAM,EAAiB,EAAG,CAAE,WAHxC,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,oCACrB,EAAC,MAAD,CAAK,UAAW,EAAO,2BAAoB,CAAW,CAAA,CACnD,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,iBAC7C,EAAW,CAAI,CACT,CAAA,CACN,GAZE,CAYF,CACN,CACE,CAAA,CACF,GAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{OtpInputCharset as n}from"./otpInput.types.mjs";import r from"./otpInput.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=/[0-9]/g,d=/[a-zA-Z0-9]/g;function f(e,t){let r=t===n.Alphanumeric?d:u;return(e.match(r)||[]).join(``)}function p(u){let{length:d=6,value:p,onChange:m=()=>{},onComplete:h=()=>{},formValidator:g=null,charset:_=n.Numeric,masked:v=!1,groupAfter:y=[],label:b=``,isValid:x=!0,errorMessage:S=``,isRequired:C=!1,clearOnError:w=!1,clearErrorDelay:T=900,disabled:E=!1,autoFocus:D=!1,className:O=``,style:k,classNames:A,styles:j,...M}=e(`OtpInput`,u),N=(g?g.value:p)??``,[,P]=o(0),[F,I]=o(!1),[L,R]=o(!1),[z,B]=o(!1),V=a([]),H=a(!1);i(()=>{if(!g)return;g.validate();let e=()=>P(e=>e+1);return g.registerOnUpdateListener(e),()=>g.removeOnUpdateListener(e)},[g]),i(()=>{if(!D)return;let e=Math.min(N.length,d-1);V.current[e]?.focus()},[]);let U=g?g.touched&&g.hasError():!x||!!S,W=g?g.getCurrentErrorMessage():S||``;i(()=>{let e=U&&!H.current;if(H.current=U,!e)return;I(!0);let t=window.setTimeout(()=>I(!1),400),n=w?window.setTimeout(()=>{G(``),V.current[0]?.focus()},T):null;return()=>{window.clearTimeout(t),n!=null&&window.clearTimeout(n)}},[U,w,T]);function G(e){let t=N.length===d,n=f(e,_).slice(0,d);g&&g.set(n),m?.(n),n.length===d&&!t&&h?.(n)}function K(e,t){let n=N.split(``);n[e]=t,G(n.join(``))}function q(e,t){if(E)return;if(t===``){K(e,``);return}let n=f(t,_);if(!n)return;let r=Math.min(e,N.length);if(t.length>1){J(r,n);return}K(r,n),r<d-1?V.current[r+1]?.focus():V.current[r]?.blur()}function J(e,t){let n=f(t,_);if(!n)return;let r=N.padEnd(d,` `).split(``),i=e;for(let e of n){if(i>=d)break;r[i]=e,i+=1}G(r.join(``).trimEnd());let a=Math.min(i,d-1);V.current[a]?.focus(),i>=d&&V.current[d-1]?.blur()}function Y(e,t){if(E)return;let n=t.clipboardData.getData(`text`);n&&(t.preventDefault(),J(Math.min(e,N.length),n))}function X(e,t){if(!E){if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey){let n=f(t.key,_);if(n&&N[e]===n){t.preventDefault(),K(e,n),e<d-1?V.current[e+1]?.focus():V.current[e]?.blur();return}}if(t.key===`Backspace`){if(N[e]){K(e,``);return}e>0&&(t.preventDefault(),K(e-1,``),V.current[e-1]?.focus());return}if(t.key===`Delete`){N[e]&&K(e,``);return}if(t.key===`ArrowLeft`&&e>0){t.preventDefault(),V.current[e-1]?.focus();return}t.key===`ArrowRight`&&e<d-1&&(t.preventDefault(),V.current[e+1]?.focus())}}function Z(e){e.target.select()}function Q(){R(!0)}function $(e){e.currentTarget.contains(e.relatedTarget)||(R(!1),g&&(g.touched=!0))}return l(`div`,{...M,className:s(r.otpInput,E&&r.otpInputDisabled,O),style:k,children:[b&&l(`div`,{className:s(r.otpInputLabel,A?.label),style:j?.label,children:[b,C&&c(`span`,{className:r.otpInputRequiredMark,children:` *`})]}),c(`div`,{role:`group`,"aria-label":b||`One-time code`,className:s(r.otpInputBoxes,F&&r.otpInputBoxesShake,A?.inputs),style:j?.inputs,onFocus:Q,onBlur:$,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),children:Array.from({length:d},(e,t)=>{let i=N[t]||``;return l(`div`,{className:r.otpInputBoxWrapper,children:[c(`input`,{ref:e=>{V.current[t]=e},type:v?`password`:`text`,inputMode:_===n.Numeric?`numeric`:`text`,pattern:_===n.Numeric?`[0-9]*`:void 0,autoComplete:t===0?`one-time-code`:`off`,maxLength:1,disabled:E,value:i,"aria-label":`Digit ${t+1} of ${d}`,"aria-invalid":U||void 0,className:s(r.otpInputBox,U&&r.otpInputBoxError,i&&r.otpInputBoxFilled,A?.input),style:j?.input,onChange:e=>q(t,e.target.value),onKeyDown:e=>X(t,e),onPaste:e=>Y(t,e),onFocus:Z}),y.includes(t+1)&&t<d-1&&c(`span`,{className:s(r.otpInputSeparator,A?.separator),style:j?.separator})]},t)})}),c(t,{variant:`error`,message:W,isVisible:U&&(L||z)})]})}export{p as default};
|
|
2
|
+
//# sourceMappingURL=otpInput.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"otpInput.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults } from '../configProvider';\n\nimport { OtpInputCharset, type OtpInputProps } from './otpInput.types';\nimport styles from './otpInput.module.pcss';\n\nconst NUMERIC_RE = /[0-9]/g;\nconst ALPHANUMERIC_RE = /[a-zA-Z0-9]/g;\n\nfunction filterChars(raw: string, charset: OtpInputCharset): string {\n const re = charset === OtpInputCharset.Alphanumeric ? ALPHANUMERIC_RE : NUMERIC_RE;\n return (raw.match(re) || []).join('');\n}\n\nfunction OtpInput(props: OtpInputProps): ReactElement {\n const {\n length = 6,\n value,\n onChange = () => {},\n onComplete = () => {},\n formValidator = null,\n charset = OtpInputCharset.Numeric,\n masked = false,\n groupAfter = [],\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n clearOnError = false,\n clearErrorDelay = 900,\n disabled = false,\n autoFocus = false,\n className = '',\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('OtpInput', props);\n\n const currentValue = (formValidator ? (formValidator.value as string) : value) ?? '';\n const [, forceUpdate] = useState(0);\n const [isShaking, setIsShaking] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n const wasErrorRef = useRef(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n useEffect(() => {\n if (!autoFocus) return;\n const firstEmpty = Math.min(currentValue.length, length - 1);\n inputRefs.current[firstEmpty]?.focus();\n // Only run once, on mount.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const showError = formValidator\n ? formValidator.touched && formValidator.hasError()\n : !isValid || !!errorMessage;\n const displayedErrorMessage = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n useEffect(() => {\n const justErrored = showError && !wasErrorRef.current;\n wasErrorRef.current = showError;\n if (!justErrored) return;\n\n setIsShaking(true);\n const shakeTimeoutId = window.setTimeout(() => setIsShaking(false), 400);\n const clearTimeoutId = clearOnError\n ? window.setTimeout(() => {\n commit('');\n inputRefs.current[0]?.focus();\n }, clearErrorDelay)\n : null;\n\n return () => {\n window.clearTimeout(shakeTimeoutId);\n if (clearTimeoutId != null) window.clearTimeout(clearTimeoutId);\n };\n // Only re-evaluate on an actual error-state or config change, not on every value/render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showError, clearOnError, clearErrorDelay]);\n\n function commit(next: string) {\n const wasComplete = currentValue.length === length;\n const clipped = filterChars(next, charset).slice(0, length);\n if (formValidator) {\n formValidator.set(clipped);\n }\n onChange?.(clipped);\n // Only fire once per genuinely new completion (going from partial to full), not on every\n // keystroke made while correcting an already-full code.\n if (clipped.length === length && !wasComplete) {\n onComplete?.(clipped);\n }\n }\n\n function setCharAt(index: number, char: string) {\n const chars = currentValue.split('');\n chars[index] = char;\n commit(chars.join(''));\n }\n\n function handleChange(index: number, rawInput: string) {\n if (disabled) return;\n if (rawInput === '') {\n // Box was cleared (e.g. select + delete) — Backspace itself is handled in onKeyDown.\n setCharAt(index, '');\n return;\n }\n\n const filtered = filterChars(rawInput, charset);\n if (!filtered) {\n // Typed an invalid/disallowed character — the controlled `value` re-render discards it.\n return;\n }\n\n // Clicking straight into a box past the contiguous filled prefix (skipping ahead of\n // empty boxes) fills the next expected slot instead, rather than leaving a gap before it\n // that setCharAt/distributeFrom can't represent in a plain string and would silently collapse.\n const targetIndex = Math.min(index, currentValue.length);\n\n if (rawInput.length > 1) {\n // Mobile autofill / SMS suggestions can drop the whole code into one box, bypassing maxLength.\n distributeFrom(targetIndex, filtered);\n return;\n }\n\n setCharAt(targetIndex, filtered);\n if (targetIndex < length - 1) {\n inputRefs.current[targetIndex + 1]?.focus();\n } else {\n inputRefs.current[targetIndex]?.blur();\n }\n }\n\n function distributeFrom(startIndex: number, chars: string) {\n const clean = filterChars(chars, charset);\n if (!clean) return;\n const existing = currentValue.padEnd(length, ' ').split('');\n let cursor = startIndex;\n for (const char of clean) {\n if (cursor >= length) break;\n existing[cursor] = char;\n cursor += 1;\n }\n commit(existing.join('').trimEnd());\n const nextFocus = Math.min(cursor, length - 1);\n inputRefs.current[nextFocus]?.focus();\n if (cursor >= length) {\n inputRefs.current[length - 1]?.blur();\n }\n }\n\n function handlePaste(index: number, event: React.ClipboardEvent<HTMLInputElement>) {\n if (disabled) return;\n const pasted = event.clipboardData.getData('text');\n if (!pasted) return;\n event.preventDefault();\n // Same clamp as handleChange — pasting into a box past the filled prefix starts at the\n // next expected slot instead of leaving an unrepresentable gap before it.\n distributeFrom(Math.min(index, currentValue.length), pasted);\n }\n\n function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {\n if (disabled) return;\n\n // React's controlled-input onChange never fires when the resulting value is identical to\n // what's already rendered (its value tracker sees no change) — so retyping the exact digit\n // already in a box would otherwise silently do nothing. keydown always fires, so handle that\n // one case here and skip the native edit entirely.\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n const typed = filterChars(event.key, charset);\n if (typed && currentValue[index] === typed) {\n event.preventDefault();\n setCharAt(index, typed);\n if (index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n } else {\n inputRefs.current[index]?.blur();\n }\n return;\n }\n }\n\n if (event.key === 'Backspace') {\n if (currentValue[index]) {\n setCharAt(index, '');\n return;\n }\n if (index > 0) {\n event.preventDefault();\n setCharAt(index - 1, '');\n inputRefs.current[index - 1]?.focus();\n }\n return;\n }\n if (event.key === 'Delete') {\n if (currentValue[index]) setCharAt(index, '');\n return;\n }\n if (event.key === 'ArrowLeft' && index > 0) {\n event.preventDefault();\n inputRefs.current[index - 1]?.focus();\n return;\n }\n if (event.key === 'ArrowRight' && index < length - 1) {\n event.preventDefault();\n inputRefs.current[index + 1]?.focus();\n }\n }\n\n function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n event.target.select();\n }\n\n function handleGroupFocus() {\n setIsFocused(true);\n }\n\n function handleGroupBlur(event: React.FocusEvent<HTMLDivElement>) {\n // Auto-advance moves focus between boxes constantly while typing — only treat this as\n // leaving the group once focus actually lands outside it, not on the next box.\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n setIsFocused(false);\n if (formValidator) formValidator.touched = true;\n }\n\n return (\n <div\n {...rest}\n className={cx(styles.otpInput, disabled && styles.otpInputDisabled, className)}\n style={style}\n >\n {label && (\n <div className={cx(styles.otpInputLabel, classNames?.label)} style={slotStyles?.label}>\n {label}\n {isRequired && <span className={styles.otpInputRequiredMark}> *</span>}\n </div>\n )}\n <div\n role=\"group\"\n aria-label={label || 'One-time code'}\n className={cx(styles.otpInputBoxes, isShaking && styles.otpInputBoxesShake, classNames?.inputs)}\n style={slotStyles?.inputs}\n onFocus={handleGroupFocus}\n onBlur={handleGroupBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {Array.from({ length }, (_, index) => {\n const char = currentValue[index] || '';\n return (\n <div key={index} className={styles.otpInputBoxWrapper}>\n <input\n ref={(el) => { inputRefs.current[index] = el; }}\n type={masked ? 'password' : 'text'}\n inputMode={charset === OtpInputCharset.Numeric ? 'numeric' : 'text'}\n pattern={charset === OtpInputCharset.Numeric ? '[0-9]*' : undefined}\n autoComplete={index === 0 ? 'one-time-code' : 'off'}\n maxLength={1}\n disabled={disabled}\n value={char}\n aria-label={`Digit ${index + 1} of ${length}`}\n aria-invalid={showError || undefined}\n className={cx(\n styles.otpInputBox,\n showError && styles.otpInputBoxError,\n char && styles.otpInputBoxFilled,\n classNames?.input\n )}\n style={slotStyles?.input}\n onChange={(e) => handleChange(index, e.target.value)}\n onKeyDown={(e) => handleKeyDown(index, e)}\n onPaste={(e) => handlePaste(index, e)}\n onFocus={handleFocus}\n />\n {groupAfter.includes(index + 1) && index < length - 1 && (\n <span className={cx(styles.otpInputSeparator, classNames?.separator)} style={slotStyles?.separator} />\n )}\n </div>\n );\n })}\n </div>\n <Tooltip\n variant=\"error\"\n message={displayedErrorMessage}\n isVisible={showError && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default OtpInput;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={otpInput:`otpInput_5-tug`,"otpInput-label":`otpInput-label_T9X7O`,otpInputLabel:`otpInput-label_T9X7O`,"otpInput-requiredMark":`otpInput-requiredMark_FNY2c`,otpInputRequiredMark:`otpInput-requiredMark_FNY2c`,"otpInput-boxes":`otpInput-boxes_FhhIF`,otpInputBoxes:`otpInput-boxes_FhhIF`,"otpInput-boxes-shake":`otpInput-boxes-shake_c50KX`,otpInputBoxesShake:`otpInput-boxes-shake_c50KX`,otpInputShake:`otpInputShake_TljCu`,"otpInput-boxWrapper":`otpInput-boxWrapper_ezHbo`,otpInputBoxWrapper:`otpInput-boxWrapper_ezHbo`,"otpInput-box":`otpInput-box_AB6Kx`,otpInputBox:`otpInput-box_AB6Kx`,"otpInput-box-filled":`otpInput-box-filled_npNOF`,otpInputBoxFilled:`otpInput-box-filled_npNOF`,"otpInput-box-error":`otpInput-box-error_8kLDb`,otpInputBoxError:`otpInput-box-error_8kLDb`,"otpInput-separator":`otpInput-separator_SArCq`,otpInputSeparator:`otpInput-separator_SArCq`,"otpInput-disabled":`otpInput-disabled_bzwE9`,otpInputDisabled:`otpInput-disabled_bzwE9`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=otpInput.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n 10%, 90% { transform: translateX(-1px); }\n 20%, 80% { transform: translateX(2px); }\n 30%, 50%, 70% { transform: translateX(-4px); }\n 40%, 60% { transform: translateX(4px); }\n}\n\n.otpInput {\n display: inline-flex;\n flex-direction: column;\n row-gap: 8px;\n\n &-label {\n font-size: var(--default-font-size);\n color: var(--text-color);\n }\n\n &-requiredMark {\n color: var(--required-mark-color, var(--error-color));\n }\n\n &-boxes {\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n &-shake {\n animation: otpInputShake 0.4s ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n &-boxWrapper {\n display: flex;\n align-items: center;\n column-gap: 8px;\n }\n\n &-box {\n width: 40px;\n height: 48px;\n text-align: center;\n font-size: 1.25rem;\n font-weight: 600;\n font-family: var(--themed-font, inherit);\n color: var(--text-color);\n background: var(--input-background, var(--background));\n border: 1.5px solid var(--border-color);\n border-radius: var(--default-border-radius);\n outline: none;\n transition:\n border-color 0.15s,\n box-shadow 0.15s;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n }\n\n &-filled {\n border-color: var(--primary-lighter, var(--border-color));\n }\n\n &-error {\n border-color: var(--error-color);\n\n &:focus {\n border-color: var(--error-color);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n }\n }\n\n &:disabled {\n color: var(--disabled-font-color);\n background: var(--disabled-input-color);\n cursor: not-allowed;\n }\n }\n\n &-separator {\n width: 10px;\n height: 1.5px;\n background: var(--border-color);\n flex-shrink: 0;\n }\n\n &-disabled &-label {\n color: var(--disabled-font-color);\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"otpInput.types.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type OtpInputSlots = 'root' | 'label' | 'inputs' | 'input' | 'separator';\n\nexport enum OtpInputCharset {\n /** Digits only (0-9). Shows a numeric mobile keyboard. */\n Numeric = 'numeric',\n /** Letters and digits. */\n Alphanumeric = 'alphanumeric',\n}\n\nexport interface OtpInputProps extends HtmlProps {\n /** Number of character boxes. Default 6. */\n length?: number;\n /** Current code as a plain string, e.g. \"123456\". */\n value?: string;\n /** Fired on every change with the full current code (may be shorter than `length`). */\n onChange?: ((value: string) => void) | null;\n /** Fired once, when the code reaches `length` characters. */\n onComplete?: ((value: string) => void) | null;\n formValidator?: FormValidator | null;\n\n /** Restricts which characters can be typed and picks the mobile keyboard. Default `numeric`. */\n charset?: OtpInputCharset;\n /** Render each box's value as a dot, like a password field. */\n masked?: boolean;\n /** Draw a small gap after these 1-based box indices, e.g. `[3]` to split 6 boxes into 3+3. */\n groupAfter?: number[];\n\n label?: string;\n isValid?: boolean;\n /** Shown in an error Tooltip on focus/hover once `isValid` is `false` (or, with a\n * `formValidator`, once it's touched and has an error). Persists until the value changes\n * `isValid`/`formValidator`'s error state itself — see `clearOnError` to auto-dismiss it. */\n errorMessage?: string;\n isRequired?: boolean;\n /** When an error newly appears (`isValid`/`formValidator` turning invalid), clear every box and\n * refocus the first one after `clearErrorDelay`, so the next attempt starts clean instead of the\n * user editing individual wrong digits (and re-triggering `onComplete` on every keystroke while\n * the code stays at full length). Default `false`. */\n clearOnError?: boolean;\n /** Delay in ms before `clearOnError` clears the boxes, so the wrong code and error message are\n * still visible for a moment first. Default `900`. */\n clearErrorDelay?: number;\n disabled?: boolean;\n /** Focuses the first empty box (or the first box) on mount. */\n autoFocus?: boolean;\n\n className?: string;\n style?: React.CSSProperties;\n classNames?: SlotClassNames<OtpInputSlots>;\n styles?: SlotStyles<OtpInputSlots>;\n}\n"],"mappings":"AAMA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,aAAA,gBACF,EAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./rating.module.mjs";import{useRef as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./rating.module.mjs";import{useRef as r,useState as i}from"react";import a from"classnames";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]=i(p),A=u(D?f:O,h),[j,M]=i(null),N=!v&&!y,P=j??A,F=r(null),I=r(A),L=r(!1),R=r(0),z=r(!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:a(n.rating,y&&n.ratingDisabled,v&&n.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,r)=>{let i=Math.round(Math.max(0,Math.min(1,P-r))*100);return c(`div`,{className:a(n.ratingItem,w?.item),style:T?.item,children:[t(b,{className:a(n.ratingIconEmpty,w?.iconEmpty),style:T?.iconEmpty}),s(`div`,{className:n.ratingIconFilledClip,style:{width:`${i}%`},children:t(b,{className:a(n.ratingIconFilled,w?.iconFilled),style:T?.iconFilled})})]},r)})})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=rating.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating.mjs","names":[],"sources":["../../../../package/common/rating/rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"rating.mjs","names":[],"sources":["../../../../package/common/rating/rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\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';\nimport { renderIcon } from '../utils/renderIcon';\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 {renderIcon(icon, {\n className: cx(styles.ratingIconEmpty, classNames?.iconEmpty),\n style: slotStyles?.iconEmpty,\n })}\n <div className={styles.ratingIconFilledClip} style={{ width: `${fillPercent}%` }}>\n {renderIcon(icon, {\n className: cx(styles.ratingIconFilled, classNames?.iconFilled),\n style: slotStyles?.iconFilled,\n })}\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default Rating;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../actionIcon/actionIcon.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"../divider/divider.mjs";import{SectionHeaderSize as i}from"./sectionHeader.types.mjs";import a from"./sectionHeader.module.mjs";import"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u={[i.Small]:a.sectionHeaderSizeSmall,[i.Medium]:a.sectionHeaderSizeMedium,[i.Large]:a.sectionHeaderSizeLarge};function d(d){let{title:f,subtitle:p,icon:m,thumbnail:h,left:g,center:_,actions:v,level:y=2,size:b=i.Medium,divider:x=!1,className:S,style:C,classNames:w,styles:T,...E}=e(`SectionHeader`,d),D=typeof h==`string`&&h.startsWith(`http`)?h:void 0,O=h!=null&&h!==``,k=O||m!=null,A=`h${y}`;return l(s,{children:[l(`div`,{...E,className:o(a.sectionHeader,u[b],S,w?.root),style:{...C,...T?.root},children:[k&&c(`div`,{className:o(a.sectionHeaderLeading,w?.leading),style:{...D?{backgroundImage:`url(${D})`}:{},...T?.leading},children:O?!D&&h:m?t(m):null}),l(`div`,{className:o(a.sectionHeaderTitles,w?.titles),style:T?.titles,children:[c(A,{className:o(a.sectionHeaderTitle,w?.title),style:T?.title,children:f}),p!=null&&p!==``&&c(`div`,{className:o(a.sectionHeaderSubtitle,w?.subtitle),style:T?.subtitle,children:p})]}),l(`div`,{className:o(a.sectionHeaderTrailing,w?.trailing),style:T?.trailing,children:[c(`div`,{className:o(a.sectionHeaderLeft,w?.left),style:T?.left,children:g}),c(`div`,{className:o(a.sectionHeaderCenter,w?.center),style:T?.center,children:_}),c(`div`,{className:o(a.sectionHeaderActions,w?.actions),style:T?.actions,children:Array.isArray(v)?v.map((e,t)=>c(n,{title:e.title,onClick:e.onClick?t=>{t.stopPropagation(),e.onClick?.(t)}:void 0,icon:e.icon},t)):v})]})]}),x&&c(r,{className:a.sectionHeaderDivider})]})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=sectionHeader.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionHeader.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\
|
|
1
|
+
{"version":3,"file":"sectionHeader.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { SectionHeaderSize } from './sectionHeader.types';\nimport type { SectionHeaderProps, SectionHeaderAction } from './sectionHeader.types';\nimport styles from './sectionHeader.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport Divider from '../divider';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst CLASS_BY_SIZE: Record<SectionHeaderSize, string> = {\n [SectionHeaderSize.Small]: styles.sectionHeaderSizeSmall,\n [SectionHeaderSize.Medium]: styles.sectionHeaderSizeMedium,\n [SectionHeaderSize.Large]: styles.sectionHeaderSizeLarge,\n};\n\nfunction SectionHeader(props: SectionHeaderProps): ReactElement {\n const {\n title,\n subtitle,\n icon,\n thumbnail,\n left,\n center,\n actions,\n level = 2,\n size = SectionHeaderSize.Medium,\n divider = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('SectionHeader', props);\n\n const thumbnailUrl =\n typeof thumbnail === 'string' && thumbnail.startsWith('http') ? thumbnail : undefined;\n const hasThumbnail = thumbnail != null && thumbnail !== '';\n const hasLeading = hasThumbnail || icon != null;\n\n const Heading = `h${level}` as keyof React.JSX.IntrinsicElements;\n\n return (\n <>\n <div\n {...rest}\n className={cx(\n styles.sectionHeader,\n CLASS_BY_SIZE[size],\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n >\n {hasLeading && (\n <div\n className={cx(styles.sectionHeaderLeading, classNames?.leading)}\n style={{\n ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n ...slotStyles?.leading,\n }}\n >\n {hasThumbnail\n ? !thumbnailUrl && thumbnail\n : icon ? renderIcon(icon) : null}\n </div>\n )}\n\n <div\n className={cx(styles.sectionHeaderTitles, classNames?.titles)}\n style={slotStyles?.titles}\n >\n <Heading\n className={cx(styles.sectionHeaderTitle, classNames?.title)}\n style={slotStyles?.title}\n >\n {title}\n </Heading>\n {subtitle != null && subtitle !== '' && (\n <div\n className={cx(styles.sectionHeaderSubtitle, classNames?.subtitle)}\n style={slotStyles?.subtitle}\n >\n {subtitle}\n </div>\n )}\n </div>\n\n <div\n className={cx(styles.sectionHeaderTrailing, classNames?.trailing)}\n style={slotStyles?.trailing}\n >\n <div className={cx(styles.sectionHeaderLeft, classNames?.left)} style={slotStyles?.left}>\n {left}\n </div>\n\n <div\n className={cx(styles.sectionHeaderCenter, classNames?.center)}\n style={slotStyles?.center}\n >\n {center}\n </div>\n\n <div\n className={cx(styles.sectionHeaderActions, classNames?.actions)}\n style={slotStyles?.actions}\n >\n {Array.isArray(actions)\n ? (actions as SectionHeaderAction[]).map((action, index) => (\n <ActionIcon\n key={index}\n title={action.title}\n onClick={\n action.onClick\n ? (e: React.MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n action.onClick?.(e);\n }\n : undefined\n }\n icon={action.icon}\n />\n ))\n : (actions as React.ReactNode)}\n </div>\n </div>\n </div>\n {divider && <Divider className={styles.sectionHeaderDivider} />}\n </>\n );\n}\n\nexport default SectionHeader;\n"],"mappings":"yaAYA,IAAM,EAAmD,EACtD,EAAkB,OAAQ,EAAO,wBACjC,EAAkB,QAAS,EAAO,yBAClC,EAAkB,OAAQ,EAAO,sBACpC,EAEA,SAAS,EAAc,EAAyC,CAC9D,GAAM,CACJ,QACA,WACA,OACA,YACA,OACA,SACA,UACA,QAAQ,EACR,OAAO,EAAkB,OACzB,UAAU,GACV,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,EAEzC,EACJ,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAI,EAAY,IAAA,GACxE,EAAe,GAAa,MAAQ,IAAc,GAClD,EAAa,GAAgB,GAAQ,KAErC,EAAU,IAAI,IAEpB,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,EAAc,GACd,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WARzC,CAUG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,OAAO,EAC9D,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,OACjB,WAEC,EACG,CAAC,GAAgB,EACjB,EAAO,EAAW,CAAI,EAAI,IAC3B,CAAA,EAGP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAY,MAAM,EAC5D,MAAO,GAAY,gBAFrB,CAIE,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,mBAAoB,GAAY,KAAK,EAC1D,MAAO,GAAY,eAElB,CACM,CAAA,EACR,GAAY,MAAQ,IAAa,IAChC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,QAAQ,EAChE,MAAO,GAAY,kBAElB,CACE,CAAA,CAEJ,IAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,QAAQ,EAChE,MAAO,GAAY,kBAFrB,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,IAAI,EAAG,MAAO,GAAY,cAChF,CACE,CAAA,EAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAY,MAAM,EAC5D,MAAO,GAAY,gBAElB,CACE,CAAA,EAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,OAAO,EAC9D,MAAO,GAAY,iBAElB,MAAM,QAAQ,CAAO,EACjB,EAAkC,KAAK,EAAQ,IAC9C,EAAC,EAAD,CAEE,MAAO,EAAO,MACd,QACE,EAAO,QACF,GAAwC,CACvC,EAAE,gBAAgB,EAClB,EAAO,UAAU,CAAC,CACpB,EACA,IAAA,GAEN,KAAM,EAAO,IACd,EAXM,CAWN,CACF,EACA,CACF,CAAA,CACF,GACF,IACJ,GAAW,EAAC,EAAD,CAAS,UAAW,EAAO,oBAAuB,CAAA,CAC9D,CAAA,CAAA,CAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionHeader.types.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"sectionHeader.types.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum SectionHeaderSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport type SectionHeaderAction = IconAction;\n\nexport type SectionHeaderSlots =\n | 'root'\n | 'leading'\n | 'titles'\n | 'title'\n | 'subtitle'\n | 'trailing'\n | 'left'\n | 'center'\n | 'actions';\n\nexport interface SectionHeaderProps extends HtmlProps {\n title?: ReactNode;\n subtitle?: ReactNode;\n icon?: IconContent;\n thumbnail?: string | ReactNode;\n left?: ReactNode;\n center?: ReactNode;\n actions?: SectionHeaderAction[] | ReactNode;\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n size?: SectionHeaderSize;\n divider?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<SectionHeaderSlots>;\n styles?: SlotStyles<SectionHeaderSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonSize as t,ButtonStyleType as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonSize as t,ButtonStyleType as n}from"../button/button.types.mjs";import{renderIcon as r}from"../utils/renderIcon.mjs";import i from"../button/button.mjs";import a from"../interactableDiv/index.mjs";import{Align as o}from"../floatingMenu/floatingMenu.types.mjs";import s from"../floatingMenu/floatingMenu.mjs";import c from"../buttonGroup/buttonGroup.mjs";import l from"./splitButton.module.mjs";import{useEffect as u,useRef as d,useState as f}from"react";import p from"classnames";import{faChevronDown as m}from"@fortawesome/free-solid-svg-icons";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _(e,t){return(e%t+t)%t}function v(v){let{children:y,onClick:b=()=>{},actions:x=[],styleType:S=n.Primary,size:C=t.Default,disabled:w=!1,isLoading:T=!1,align:E=o.Right,className:D,style:O,classNames:k,styles:A,...j}=e(`SplitButton`,v),[M,N]=f(!1),P=d([]),[F,I]=f(w);w!==F&&(I(w),w&&N(!1)),u(()=>{if(!M)return;let e=x.findIndex(e=>!e.disabled);e!==-1&&P.current[e]?.focus()},[M]);function L(e,t){let n=x.map((e,t)=>t).filter(e=>!x[e].disabled);if(n.length===0)return;let r=n.indexOf(e),i=r===-1?t===1?0:n.length-1:_(r+t,n.length);P.current[n[i]]?.focus()}function R(e){let t=P.current.findIndex(e=>e===document.activeElement);e.key===`ArrowDown`?(e.preventDefault(),L(t,1)):e.key===`ArrowUp`?(e.preventDefault(),L(t,-1)):e.key===`Home`?(e.preventDefault(),L(-1,1)):e.key===`End`&&(e.preventDefault(),L(-1,-1))}return g(c,{...j,className:p(l.splitButton,k?.root,D),style:{...O,...A?.root},children:[h(i,{styleType:S,size:C,disabled:w,isLoading:T,onClick:b,className:p(l.splitButtonPrimary,k?.primaryButton),style:A?.primaryButton,children:y}),h(s,{isOpen:M,onOpenChange:N,align:E,dontCloseOnChildClick:!0,content:h(`ul`,{className:p(l.splitButtonMenu,k?.menu),style:A?.menu,role:`menu`,onKeyDown:R,children:x.map((e,t)=>h(`li`,{role:`none`,children:g(a,{ref:e=>{P.current[t]=e},role:`menuitem`,tabIndex:e.disabled?-1:0,"aria-disabled":e.disabled,className:p(l.splitButtonMenuItem,{[l.splitButtonMenuItemDisabled]:e.disabled},k?.menuItem),style:A?.menuItem,onClick:()=>{w||e.disabled||(e.onClick(),N(!1))},children:[e.icon?r(e.icon,{className:l.splitButtonMenuItemIcon}):null,e.label]})},e.id))}),children:h(i,{styleType:S,size:C,disabled:w,icon:m,"aria-label":`More actions`,className:p(l.splitButtonTrigger,k?.triggerButton),style:A?.triggerButton})})]})}export{v as default};
|
|
2
2
|
//# sourceMappingURL=splitButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"splitButton.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\
|
|
1
|
+
{"version":3,"file":"splitButton.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport { ButtonStyleType, ButtonSize } from '../button/button.types';\nimport ButtonGroup from '../buttonGroup';\nimport FloatingMenu from '../floatingMenu';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { SplitButtonProps } from './splitButton.types';\n\nimport styles from './splitButton.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction mod(n: number, m: number) {\n return ((n % m) + m) % m;\n}\n\nfunction SplitButton(props: SplitButtonProps) {\n const {\n children,\n onClick = () => {},\n actions = [],\n styleType = ButtonStyleType.Primary,\n size = ButtonSize.Default,\n disabled = false,\n isLoading = false,\n align = Align.Right,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('SplitButton', props);\n\n const [isOpen, setIsOpen] = useState(false);\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n // Adjusting state during render (not in an effect) on a prop change is the documented React\n // pattern for this: closing the menu as soon as `disabled` becomes true, without an extra\n // render tick or a setState-in-effect lint violation.\n const [prevDisabled, setPrevDisabled] = useState(disabled);\n if (disabled !== prevDisabled) {\n setPrevDisabled(disabled);\n if (disabled) setIsOpen(false);\n }\n\n useEffect(() => {\n if (!isOpen) return;\n const firstEnabled = actions.findIndex((action) => !action.disabled);\n if (firstEnabled !== -1) itemRefs.current[firstEnabled]?.focus();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n function focusEnabledItem(fromIndex: number, direction: 1 | -1) {\n const enabledIndexes = actions\n .map((action, index) => index)\n .filter((index) => !actions[index].disabled);\n if (enabledIndexes.length === 0) return;\n\n const currentPos = enabledIndexes.indexOf(fromIndex);\n const nextPos = currentPos === -1\n ? (direction === 1 ? 0 : enabledIndexes.length - 1)\n : mod(currentPos + direction, enabledIndexes.length);\n itemRefs.current[enabledIndexes[nextPos]]?.focus();\n }\n\n function handleMenuKeyDown(event: KeyboardEvent<HTMLUListElement>) {\n const activeIndex = itemRefs.current.findIndex((el) => el === document.activeElement);\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusEnabledItem(activeIndex, 1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusEnabledItem(activeIndex, -1);\n } else if (event.key === 'Home') {\n event.preventDefault();\n focusEnabledItem(-1, 1);\n } else if (event.key === 'End') {\n event.preventDefault();\n focusEnabledItem(-1, -1);\n }\n // Escape and Tab-boundary handling live in FloatingMenu itself, since any menu content with\n // focusable elements needs the same treatment, not just this one.\n }\n\n return (\n <ButtonGroup\n {...rest}\n className={cx(styles.splitButton, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <Button\n styleType={styleType}\n size={size}\n disabled={disabled}\n isLoading={isLoading}\n onClick={onClick}\n className={cx(styles.splitButtonPrimary, classNames?.primaryButton)}\n style={slotStyles?.primaryButton}\n >\n {children}\n </Button>\n\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n align={align}\n dontCloseOnChildClick\n content={\n <ul\n className={cx(styles.splitButtonMenu, classNames?.menu)}\n style={slotStyles?.menu}\n role=\"menu\"\n onKeyDown={handleMenuKeyDown}\n >\n {actions.map((action, index) => (\n <li key={action.id} role=\"none\">\n <InteractableDiv\n ref={(el) => { itemRefs.current[index] = el; }}\n role=\"menuitem\"\n tabIndex={action.disabled ? -1 : 0}\n aria-disabled={action.disabled}\n className={cx(\n styles.splitButtonMenuItem,\n { [styles.splitButtonMenuItemDisabled]: action.disabled },\n classNames?.menuItem\n )}\n style={slotStyles?.menuItem}\n onClick={() => {\n if (disabled || action.disabled) return;\n action.onClick();\n setIsOpen(false);\n }}\n >\n {action.icon ? renderIcon(action.icon, { className: styles.splitButtonMenuItemIcon }) : null}\n {action.label}\n </InteractableDiv>\n </li>\n ))}\n </ul>\n }\n >\n <Button\n styleType={styleType}\n size={size}\n disabled={disabled}\n icon={faChevronDown}\n aria-label=\"More actions\"\n className={cx(styles.splitButtonTrigger, classNames?.triggerButton)}\n style={slotStyles?.triggerButton}\n />\n </FloatingMenu>\n </ButtonGroup>\n );\n}\n\nexport default SplitButton;\n"],"mappings":"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"}
|