@mittwald/flow-react-components 1.6.0-next.55 → 1.6.0-next.57
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/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Action/lib/ariaLive.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs +5 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/InlineCode/InlineCode.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Kbd/Kbd.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/model/List.mjs +3 -2
- package/dist/js/packages/components/src/components/List/model/List.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/model/loading/IncrementalLoader.mjs +9 -6
- package/dist/js/packages/components/src/components/List/model/loading/IncrementalLoader.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs +4 -0
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs +3 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Options/Options.mjs +4 -1
- package/dist/js/packages/components/src/components/Options/Options.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/lib/ariaAnnounce.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SettingsProvider/SettingsProvider.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.module.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Form/Form.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/controller/overlay/OverlayController.mjs +7 -5
- package/dist/js/packages/components/src/lib/controller/overlay/OverlayController.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/dom/useMakeFocusable.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useOnChange.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/mobx/useSelector.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/remote/useControlledHostValueProps.mjs +1 -1
- package/dist/js/packages/components/src/lib/remote/useControlledHostValueProps.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +75 -9
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +75 -9
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +62 -0
- package/package.json +10 -10
- package/dist/types/lib/mobx/useAutorunEffect.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ariaLive.mjs","names":["locales"],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n isPendingText?: string;\n isSucceededText?: string;\n isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n actionState: ActionStateValue,\n options: Options = {},\n): void => {\n const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n const {\n isPendingText = formatter.format(\"action.isPending\"),\n isSucceededText = formatter.format(\"action.isSucceeded\"),\n isFailedText = formatter.format(\"action.isFailed\"),\n } = options;\n\n useEffect(() => {\n if (actionState === \"isPending\") {\n announce(isPendingText, \"polite\");\n } else if (actionState === \"isSucceeded\") {\n announce(isSucceededText, \"polite\");\n } else if (actionState === \"isFailed\") {\n announce(isFailedText, \"polite\");\n }\n }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n const isPendingText = formatter.format(\"suspense.isPending\");\n announce(isPendingText, \"polite\");\n }, 750);\n\n return () => {\n clearTimeout(timeout);\n };\n }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;
|
|
1
|
+
{"version":3,"file":"ariaLive.mjs","names":["locales"],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n isPendingText?: string;\n isSucceededText?: string;\n isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n actionState: ActionStateValue,\n options: Options = {},\n): void => {\n const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n const {\n isPendingText = formatter.format(\"action.isPending\"),\n isSucceededText = formatter.format(\"action.isSucceeded\"),\n isFailedText = formatter.format(\"action.isFailed\"),\n } = options;\n\n useEffect(() => {\n if (actionState === \"isPending\") {\n announce(isPendingText, \"polite\");\n } else if (actionState === \"isSucceeded\") {\n announce(isSucceededText, \"polite\");\n } else if (actionState === \"isFailed\") {\n announce(isFailedText, \"polite\");\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- announce on state changes only, not when the texts change\n }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n const isPendingText = formatter.format(\"suspense.isPending\");\n announce(isPendingText, \"polite\");\n }, 750);\n\n return () => {\n clearTimeout(timeout);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- announce once per mount\n }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;CAGnC,GAAG,CAAC,WAAW,CAAC;AAClB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,MAAM,gBAAgB,UAAU,OAAO,oBAAoB;GAC3D,SAAS,eAAe,QAAQ;EAClC,GAAG,GAAG;EAEN,aAAa;GACX,aAAa,OAAO;EACtB;CAEF,GAAG,CAAC,CAAC;AACP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n position: relative;\n font-family:
|
|
1
|
+
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n position: relative;\n font-family: var(--font-family--default);\n font-size: var(--font-size-text--m);\n font-weight: var(--font-weight--bold);\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n /* Fade the label out when a state icon (pending/success/fail) takes over. */\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n /* Subtle tactile press feedback: a slight inward scale while pressed.\n A muted button ignores the press, so it does not scale. Overlay triggers\n keep data-pressed while their overlay is open, so an expanded trigger is\n excluded. */\n &[data-pressed]:where(\n :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n ) {\n transform: scale(0.97);\n }\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n /* Success/failure icon pops in when it replaces the label. The pending\n spinner is left alone — it has its own animation. */\n &.isSucceeded,\n &.isFailed {\n .stateIcon {\n animation: state-icon-pop var(--transition--duration--default)\n cubic-bezier(0.34, 1.35, 0.5, 1);\n }\n }\n\n /* Size */\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n /* Variants */\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n /* Outline */\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n\n /* SkeletonMode — after the variants, so the surface wins over their colors */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--button--corner-radius);\n\n &:where(.size-s) {\n --skeleton-radius: var(--button--corner-radius-s);\n }\n\n &:where(:has(.avatar)) {\n --skeleton-radius: var(--corner-radius--round);\n }\n }\n}\n\n@include skeleton.keyframes;\n\n@keyframes state-icon-pop {\n from {\n transform: scale(0.6);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. */\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width:
|
|
1
|
+
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. */\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: var(--calendar--preset-menu-max-width);\n\n /*\n * With an auto width, WebKit resolved the menu one item padding wider on\n * every layout. Each reposition of the popover then resized it again,\n * inside react-aria's resize observer on the popover: a\n * \"ResizeObserver loop\" error per step.\n */\n width: max-content;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n\n .presetMenu {\n width: auto;\n }\n\n /* The presets move below the grid, so the separator turns horizontal. */\n .presetSeparator {\n border-inline-end: 0;\n border-top: var(--separator--height) var(--separator--border-style)\n var(--separator--color);\n width: 100%;\n }\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n // Reaches across the border spacing into the next cell\n width: calc(100% + var(--calendar--spacing) * 1.5);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n }\n}\n\n@include skeleton.keyframes;\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.cartesianChart {\n font-family:
|
|
1
|
+
{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.cartesianChart {\n font-family: var(--font-family--default);\n isolation: isolate;\n\n *:focus:not(:focus-visible) {\n outline: none !important;\n }\n\n .emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n // recharts renders every svg here; only its outermost surface is classed.\n // stylelint-disable-next-line selector-max-type -- third-party svgs\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n\n/* SkeletonMode */\n\n.skeleton {\n @include skeleton.surface;\n\n width: 100%;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
|
|
3
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
5
|
// src/components/CartesianChart/components/AreaDot/AreaDot.tsx
|
|
5
6
|
var AreaDot = ({ cx, cy, color }) => {
|
|
7
|
+
const tokens = useDesignTokens();
|
|
6
8
|
if (cx === void 0 || cy === void 0) return null;
|
|
9
|
+
const backgroundColor = tokens.area["dot-background-color"].value;
|
|
7
10
|
return /* @__PURE__ */ jsxs("svg", {
|
|
8
11
|
x: cx - 7,
|
|
9
12
|
y: cy - 7,
|
|
@@ -16,14 +19,14 @@ var AreaDot = ({ cx, cy, color }) => {
|
|
|
16
19
|
cx: "7",
|
|
17
20
|
cy: "7",
|
|
18
21
|
r: "7",
|
|
19
|
-
fill:
|
|
22
|
+
fill: backgroundColor
|
|
20
23
|
}), /* @__PURE__ */ jsx("circle", {
|
|
21
24
|
cx: "7",
|
|
22
25
|
cy: "7",
|
|
23
26
|
r: "4",
|
|
24
27
|
stroke: color,
|
|
25
28
|
strokeWidth: "2",
|
|
26
|
-
fill:
|
|
29
|
+
fill: backgroundColor
|
|
27
30
|
})]
|
|
28
31
|
});
|
|
29
32
|
};
|
package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaDot.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport interface AreaDotProps extends Recharts.DotProps {\n color: string;\n}\n\nexport const AreaDot: FC<AreaDotProps> = ({ cx, cy, color }) => {\n if (cx === undefined || cy === undefined) return null;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill
|
|
1
|
+
{"version":3,"file":"AreaDot.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface AreaDotProps extends Recharts.DotProps {\n color: string;\n}\n\nexport const AreaDot: FC<AreaDotProps> = ({ cx, cy, color }) => {\n const tokens = useDesignTokens();\n\n if (cx === undefined || cy === undefined) return null;\n\n const backgroundColor = tokens.area[\"dot-background-color\"].value;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill={backgroundColor} />\n <circle\n cx=\"7\"\n cy=\"7\"\n r=\"4\"\n stroke={color}\n strokeWidth=\"2\"\n fill={backgroundColor}\n />\n </svg>\n );\n};\n\nexport default AreaDot;\n"],"mappings":";;;;;AAQA,IAAa,WAA6B,EAAE,IAAI,IAAI,YAAY;CAC9D,MAAM,SAAS,gBAAgB;CAE/B,IAAI,OAAO,KAAA,KAAa,OAAO,KAAA,GAAW,OAAO;CAEjD,MAAM,kBAAkB,OAAO,KAAK,uBAAuB,CAAC;CAE5D,OACE,qBAAC,OAAD;EACE,GAAG,KAAK;EACR,GAAG,KAAK;EACR,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAM;EAPR,UAAA,CASE,oBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAI,GAAE;GAAI,MAAM;EAAkB,CAAA,GACpD,oBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAQ;GACR,aAAY;GACZ,MAAM;EACP,CAAA,CACE;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.module.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss"],"sourcesContent":[":global(.recharts-tooltip-wrapper-right) {\n margin-inline-start: calc(var(--popover--tip-height) + var(--chart-tooltip--spacing));\n}\n\n:global(.recharts-tooltip-wrapper-left) {\n margin-inline-start: calc(\n calc(var(--popover--tip-height) + var(--chart-tooltip--spacing)) * -1\n );\n}\n\n.chartTooltip {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n padding: var(--popover--padding--m);\n\n &:has(.progressBar) {\n min-width:
|
|
1
|
+
{"version":3,"file":"ChartTooltip.module.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss"],"sourcesContent":[":global(.recharts-tooltip-wrapper-right) {\n margin-inline-start: calc(\n var(--popover--tip-height) + var(--chart-tooltip--spacing)\n );\n}\n\n:global(.recharts-tooltip-wrapper-left) {\n margin-inline-start: calc(\n calc(var(--popover--tip-height) + var(--chart-tooltip--spacing)) * -1\n );\n}\n\n.chartTooltip {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n padding: var(--popover--padding--m);\n\n &:has(.progressBar) {\n min-width: var(--chart-tooltip--progress-bar-min-width);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IllustratedMessage.module.mjs","names":[],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.module.scss"],"sourcesContent":[".illustratedMessage {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--illustrated-message--padding);\n row-gap: var(--illustrated-message--spacing);\n\n /* Elements */\n\n :where(.icon) {\n color: var(--illustrated-message--content-color);\n }\n\n .text,\n .heading {\n max-width: var(--max-text-width);\n text-align: center;\n }\n\n .actionGroup {\n justify-content: center;\n }\n\n .progressBar {\n max-width:
|
|
1
|
+
{"version":3,"file":"IllustratedMessage.module.mjs","names":[],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.module.scss"],"sourcesContent":[".illustratedMessage {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--illustrated-message--padding);\n row-gap: var(--illustrated-message--spacing);\n\n /* Elements */\n\n :where(.icon) {\n color: var(--illustrated-message--content-color);\n }\n\n .text,\n .heading {\n max-width: var(--max-text-width);\n text-align: center;\n }\n\n .actionGroup {\n justify-content: center;\n }\n\n .progressBar {\n max-width: var(--illustrated-message--progress-bar-max-width);\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n :where(.icon) {\n color: var(--illustrated-message--#{$color}-content-color);\n }\n }\n }\n\n @include color(danger);\n @include color(unavailable);\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineCode.module.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.module.scss"],"sourcesContent":[".inlineCode {\n font-family:
|
|
1
|
+
{"version":3,"file":"InlineCode.module.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.module.scss"],"sourcesContent":[".inlineCode {\n font-family: var(--font-family--code);\n font-size: var(--inline-code--font-size);\n overflow-wrap: anywhere;\n padding-inline: var(--inline-code--padding-x);\n padding-block: var(--inline-code--padding-y);\n border-radius: var(--inline-code--corner-radius);\n display: inline;\n width: fit-content;\n max-width: 100%;\n min-width: 0;\n color: var(--inline-code--content-color);\n background-color: var(--inline-code--background-color);\n\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--inline-code--#{$color}-content-color);\n background-color: var(--inline-code--#{$color}-background-color);\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.kbd {\n font-family:
|
|
1
|
+
{"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.kbd {\n font-family: var(--font-family--default);\n font-size: var(--font-size-text--s);\n}\n\n:not(.kbd) > .kbd {\n &.soft {\n display: inline-block;\n line-height: var(--font-size-text--m);\n color: var(--kbd--content-color--default);\n background-color: var(--kbd--background-color--default);\n padding: var(--kbd--padding);\n padding-top: var(--kbd--padding-y-start);\n border-radius: var(--kbd--corner-radius);\n border-inline-start: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n border-inline-end: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--default);\n width: fit-content;\n height: fit-content;\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--default);\n }\n\n &.disabled {\n &.soft {\n color: var(--kbd--content-color--disabled);\n background-color: var(--kbd--background-color--disabled);\n border-inline-start-color: var(--kbd--inner-shadow-color--disabled);\n border-inline-end-color: var(--kbd--inner-shadow-color--disabled);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--disabled);\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--disabled);\n }\n }\n\n /* SkeletonMode — after the variants, and as specific as the disabled ones,\n so the surface wins over their colors */\n\n &.skeleton,\n &.skeleton.disabled {\n @include skeleton.shape;\n\n --skeleton-radius: var(--kbd--corner-radius);\n\n /* An inline box clips no overflow, so the shimmer would run past it. */\n display: inline-block;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightBoxGallery.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps extends PropsWithClassName {\n children: ReactNode[];\n defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n const { children, className, defaultIndex = 0 } = props;\n\n const [currentIndex, setIndex] = useState(defaultIndex);\n\n const count = React.Children.count(children);\n\n const isFirst = currentIndex === 0;\n const isLast = currentIndex === count - 1;\n\n const pointerStartX = useRef<number | null>(null);\n const swipeThreshold = 50;\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n containerRef.current?.focus();\n }, [containerRef.current]);\n\n const paginate = (direction: number) => {\n setIndex((prev) => {\n const next = prev + direction;\n\n if (next < 0) return 0;\n if (next >= count) return count - 1;\n\n return next;\n });\n };\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!e.isPrimary) return;\n pointerStartX.current = e.clientX;\n };\n\n const handlePointerUp = (e: React.PointerEvent) => {\n if (pointerStartX.current === null) return;\n\n const distance = pointerStartX.current - e.clientX;\n\n if (Math.abs(distance) > swipeThreshold) {\n paginate(distance > 0 ? 1 : -1);\n }\n\n pointerStartX.current = null;\n };\n\n const handlePointerCancel = () => {\n pointerStartX.current = null;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n switch (e.key) {\n case \"ArrowLeft\":\n if (!isFirst) paginate(-1);\n break;\n case \"ArrowRight\":\n if (!isLast) paginate(1);\n break;\n }\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n return (\n <div className={clsx(styles.lightBoxGallery, className)}>\n <div\n ref={containerRef}\n className={styles.content}\n onPointerDown={handlePointerDown}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerCancel}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={stringFormatter.format(\"gallery\")}\n >\n <div className={styles.galleryItem} key={currentIndex}>\n {children[currentIndex]}\n </div>\n\n <div className={styles.controls}>\n <Button\n aria-label={stringFormatter.format(\"previous\")}\n onPress={() => paginate(-1)}\n color=\"light-static\"\n className={styles.previousButton}\n isDisabled={isFirst}\n >\n <IconChevronLeft />\n </Button>\n\n <Controls count={count} currentIndex={currentIndex} />\n\n <Button\n aria-label={stringFormatter.format(\"next\")}\n onPress={() => paginate(1)}\n color=\"light-static\"\n className={styles.nextButton}\n isDisabled={isLast}\n >\n <IconChevronRight />\n </Button>\n </div>\n </div>\n </div>\n );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,MAAM;CAElD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAEhD,gBAAgB;EACd,aAAa,SAAS,MAAM;
|
|
1
|
+
{"version":3,"file":"LightBoxGallery.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps extends PropsWithClassName {\n children: ReactNode[];\n defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n const { children, className, defaultIndex = 0 } = props;\n\n const [currentIndex, setIndex] = useState(defaultIndex);\n\n const count = React.Children.count(children);\n\n const isFirst = currentIndex === 0;\n const isLast = currentIndex === count - 1;\n\n const pointerStartX = useRef<number | null>(null);\n const swipeThreshold = 50;\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n containerRef.current?.focus();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- rerunning once the ref is set takes the focus back from the dialog's autofocus\n }, [containerRef.current]);\n\n const paginate = (direction: number) => {\n setIndex((prev) => {\n const next = prev + direction;\n\n if (next < 0) return 0;\n if (next >= count) return count - 1;\n\n return next;\n });\n };\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!e.isPrimary) return;\n pointerStartX.current = e.clientX;\n };\n\n const handlePointerUp = (e: React.PointerEvent) => {\n if (pointerStartX.current === null) return;\n\n const distance = pointerStartX.current - e.clientX;\n\n if (Math.abs(distance) > swipeThreshold) {\n paginate(distance > 0 ? 1 : -1);\n }\n\n pointerStartX.current = null;\n };\n\n const handlePointerCancel = () => {\n pointerStartX.current = null;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n switch (e.key) {\n case \"ArrowLeft\":\n if (!isFirst) paginate(-1);\n break;\n case \"ArrowRight\":\n if (!isLast) paginate(1);\n break;\n }\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n return (\n <div className={clsx(styles.lightBoxGallery, className)}>\n <div\n ref={containerRef}\n className={styles.content}\n onPointerDown={handlePointerDown}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerCancel}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={stringFormatter.format(\"gallery\")}\n >\n <div className={styles.galleryItem} key={currentIndex}>\n {children[currentIndex]}\n </div>\n\n <div className={styles.controls}>\n <Button\n aria-label={stringFormatter.format(\"previous\")}\n onPress={() => paginate(-1)}\n color=\"light-static\"\n className={styles.previousButton}\n isDisabled={isFirst}\n >\n <IconChevronLeft />\n </Button>\n\n <Controls count={count} currentIndex={currentIndex} />\n\n <Button\n aria-label={stringFormatter.format(\"next\")}\n onPress={() => paginate(1)}\n color=\"light-static\"\n className={styles.nextButton}\n isDisabled={isLast}\n >\n <IconChevronRight />\n </Button>\n </div>\n </div>\n </div>\n );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,MAAM;CAElD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAEhD,gBAAgB;EACd,aAAa,SAAS,MAAM;CAE9B,GAAG,CAAC,aAAa,OAAO,CAAC;CAEzB,MAAM,YAAY,cAAsB;EACtC,UAAU,SAAS;GACjB,MAAM,OAAO,OAAO;GAEpB,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,QAAQ,OAAO,OAAO,QAAQ;GAElC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,qBAAqB,MAA0B;EACnD,IAAI,CAAC,EAAE,WAAW;EAClB,cAAc,UAAU,EAAE;CAC5B;CAEA,MAAM,mBAAmB,MAA0B;EACjD,IAAI,cAAc,YAAY,MAAM;EAEpC,MAAM,WAAW,cAAc,UAAU,EAAE;EAE3C,IAAI,KAAK,IAAI,QAAQ,IAAI,gBACvB,SAAS,WAAW,IAAI,IAAI,EAAE;EAGhC,cAAc,UAAU;CAC1B;CAEA,MAAM,4BAA4B;EAChC,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAI,CAAC,SAAS,SAAS,EAAE;IACzB;GACF,KAAK,cACH,IAAI,CAAC,QAAQ,SAAS,CAAC;EAE3B;CACF;CAEA,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,OAAD;EAAK,WAAW,KAAKC,+BAAO,iBAAiB,SAAS;EACpD,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAWA,+BAAO;GAClB,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,UAAU;GACV,WAAW;GACX,MAAK;GACL,wBAAqB;GACrB,cAAY,gBAAgB,OAAO,SAAS;GAV9C,UAAA,CAYE,oBAAC,OAAD;IAAK,WAAWA,+BAAO;IACpB,UAAA,SAAS;GACP,GAFoC,YAEpC,GAEL,qBAAC,OAAD;IAAK,WAAWA,+BAAO;IAAvB,UAAA;KACE,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,UAAU;MAC7C,eAAe,SAAS,EAAE;MAC1B,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA;KAER,oBAAC,UAAD;MAAiB;MAAqB;KAAe,CAAA;KAErD,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,MAAM;MACzC,eAAe,SAAS,CAAC;MACzB,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;KACb,CAAA;IACL;GACF,CAAA,CAAA;;CACF,CAAA;AAET,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width:
|
|
1
|
+
{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width: var(--list--search-field-max-width);\n margin-inline-start: auto;\n flex-grow: 1;\n\n // The list's search field can be swapped out by the consumer's\n // `search.render`, so this has to match whatever input that renders.\n // stylelint-disable-next-line selector-max-type -- replaceable field\n input {\n width: var(--list--search-field-input-width);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n onAction?: (data: never) => void;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n const { data, onAction, children: childrenFromProps } = props;\n const itemView = list.itemView;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,sBAAsB;CACxD,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;
|
|
1
|
+
{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n onAction?: (data: never) => void;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n const { data, onAction, children: childrenFromProps } = props;\n const itemView = list.itemView;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- re-run once the grid item element is attached\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,sBAAsB;CACxD,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;CAEF,GAAG;EAAC;EAAY;EAAkB,QAAQ;EAAS;CAAS,CAAC;CAE7D,IAAI,CAAC,WACH,OAAO;EACL,eAAe,EACb,UAAU,iBACA;GACJ,WAAW,IAAI;EACjB,IACA,KAAA,EACN;EACA;CACF;CAGF,MAAM,wBAAwB;EAC5B,eAAe,YAAY,CAAC,OAAO;EACnC,WAAW,IAAI;CACjB;CAEA,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,CAAU;EACvE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;EACb,CAAA,IACC,KAAA,CACN;CACF,EACF;CAEA,OAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;EACZ;EACA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,UAAU;GAE1C;EACmB,CAAA;CAE1B;AACF"}
|
package/dist/js/packages/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnounceSearchState.mjs","names":["locales"],"sources":["../../../../../../../../src/components/List/hooks/useAriaAnnounceSearchState.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport { useEffect } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\n\nconst announceDebounceMs = 600;\n\nexport const useAriaAnnounceSearchState = (): void => {\n const formatter = useLocalizedStringFormatter(locales, \"List\");\n const list = useList();\n const debouncedAnnounce = useDebounceCallback(announce, announceDebounceMs);\n\n const searchTerm = list.search?.value;\n const resultCount = list.batches.getTotalItemsCount();\n const isLoading = list.loader.loaderState.useIsLoading();\n\n useEffect(() => {\n if (isLoading || !searchTerm) {\n debouncedAnnounce.cancel();\n return;\n }\n\n const text = formatter.format(\n resultCount > 0 ? \"search.announce.result\" : \"search.announce.noResult\",\n {\n resultCount,\n searchTerm,\n },\n );\n\n debouncedAnnounce(text, \"polite\");\n }, [searchTerm, resultCount, isLoading]);\n};\n"],"mappings":";;;;;;;;;AAOA,IAAM,qBAAqB;AAE3B,IAAa,mCAAyC;CACpD,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAC7D,MAAM,OAAO,QAAQ;CACrB,MAAM,oBAAoB,oBAAoB,UAAU,kBAAkB;CAE1E,MAAM,aAAa,KAAK,QAAQ;CAChC,MAAM,cAAc,KAAK,QAAQ,mBAAmB;CACpD,MAAM,YAAY,KAAK,OAAO,YAAY,aAAa;CAEvD,gBAAgB;EACd,IAAI,aAAa,CAAC,YAAY;GAC5B,kBAAkB,OAAO;GACzB;EACF;EAEA,MAAM,OAAO,UAAU,OACrB,cAAc,IAAI,2BAA2B,4BAC7C;GACE;GACA;EACF,CACF;EAEA,kBAAkB,MAAM,QAAQ;
|
|
1
|
+
{"version":3,"file":"useAriaAnnounceSearchState.mjs","names":["locales"],"sources":["../../../../../../../../src/components/List/hooks/useAriaAnnounceSearchState.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport { useEffect } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\n\nconst announceDebounceMs = 600;\n\nexport const useAriaAnnounceSearchState = (): void => {\n const formatter = useLocalizedStringFormatter(locales, \"List\");\n const list = useList();\n const debouncedAnnounce = useDebounceCallback(announce, announceDebounceMs);\n\n const searchTerm = list.search?.value;\n const resultCount = list.batches.getTotalItemsCount();\n const isLoading = list.loader.loaderState.useIsLoading();\n\n useEffect(() => {\n if (isLoading || !searchTerm) {\n debouncedAnnounce.cancel();\n return;\n }\n\n const text = formatter.format(\n resultCount > 0 ? \"search.announce.result\" : \"search.announce.noResult\",\n {\n resultCount,\n searchTerm,\n },\n );\n\n debouncedAnnounce(text, \"polite\");\n // eslint-disable-next-line react-hooks/exhaustive-deps -- announce on search changes only, not when the formatter changes\n }, [searchTerm, resultCount, isLoading]);\n};\n"],"mappings":";;;;;;;;;AAOA,IAAM,qBAAqB;AAE3B,IAAa,mCAAyC;CACpD,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAC7D,MAAM,OAAO,QAAQ;CACrB,MAAM,oBAAoB,oBAAoB,UAAU,kBAAkB;CAE1E,MAAM,aAAa,KAAK,QAAQ;CAChC,MAAM,cAAc,KAAK,QAAQ,mBAAmB;CACpD,MAAM,YAAY,KAAK,OAAO,YAAY,aAAa;CAEvD,gBAAgB;EACd,IAAI,aAAa,CAAC,YAAY;GAC5B,kBAAkB,OAAO;GACzB;EACF;EAEA,MAAM,OAAO,UAAU,OACrB,cAAc,IAAI,2BAA2B,4BAC7C;GACE;GACA;EACF,CACF;EAEA,kBAAkB,MAAM,QAAQ;CAElC,GAAG;EAAC;EAAY;EAAa;CAAS,CAAC;AACzC"}
|
|
@@ -71,9 +71,10 @@ var List = class List {
|
|
|
71
71
|
this.viewMode = ListViewMode.useNew(this, { defaultViewMode });
|
|
72
72
|
this.emptyView = emptyView;
|
|
73
73
|
this.emptySearchResultView = emptySearchResultView;
|
|
74
|
+
const listFilters = this.filters;
|
|
74
75
|
useEffect(() => {
|
|
75
|
-
|
|
76
|
-
}, [
|
|
76
|
+
listFilters.forEach((f) => f.deleteUnknownFilterValues());
|
|
77
|
+
}, [listFilters]);
|
|
77
78
|
}
|
|
78
79
|
get dataTable() {
|
|
79
80
|
return this.reactTable.table;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.mjs","names":["BatchesController"],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n EmptyViewType,\n GetItemId,\n ItemActionFn,\n ListSettingsStorageDefaults,\n ListShape,\n ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n ListModelContext,\n ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\nimport type { Table as ReactTableInstance } from \"@tanstack/table-core\";\n\nexport class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {\n public readonly filters: (\n Filter<T, never, never> | DateRangeFilter<T, never>\n )[];\n public readonly itemView?: ItemView<T>;\n public readonly table?: Table<T>;\n public readonly search?: Search<T>;\n public readonly sorting: Sorting<T>[];\n public readonly items: ItemCollection<T>;\n public readonly reactTable: ReactTable<T>;\n public readonly batches: BatchesController<T>;\n public readonly loader: IncrementalLoader<T>;\n public readonly onAction?: ItemActionFn<T>;\n public readonly accordion: boolean;\n public readonly infiniteScroll: boolean;\n public readonly getItemId?: GetItemId<T>;\n public readonly componentProps: ListSupportedComponentProps;\n public metadata?: TMeta;\n public readonly settingsStorage?: ListSettingsStore<T>;\n public readonly loadingItemsCount;\n public readonly viewMode: ListViewMode<T>;\n public readonly emptyView?: ReactNode;\n public readonly emptySearchResultView?: ReactNode;\n public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n public constructor(shape: ListShape<T, TMeta>) {\n const {\n settingStorageKey,\n itemView,\n table,\n filters = [],\n sorting = [],\n batchesController,\n onChange,\n loader,\n search,\n onAction,\n getItemId,\n defaultViewMode,\n accordion = false,\n infiniteScroll = false,\n loadingItemsCount = 5,\n settingsStorageDefaults,\n emptyView,\n emptySearchResultView,\n ...componentProps\n } = shape;\n\n const warnDeprecation = useWarnDeprecation();\n if (itemView?.fallback !== undefined) {\n warnDeprecation(\n \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n );\n }\n if (itemView?.dependencies !== undefined) {\n warnDeprecation(\n \"The 'dependencies' prop of 'List.Item' is deprecated and will be removed in a future release. Use 'renderDependencies' instead.\",\n );\n }\n\n this.settingsStorageDefaults = settingsStorageDefaults;\n const generalSettingsStore = useSettings();\n\n this.settingsStorage =\n settingStorageKey && generalSettingsStore\n ? new ListSettingsStore(this, generalSettingsStore, {\n storageKey: settingStorageKey,\n })\n : undefined;\n\n this.items = new ItemCollection(this);\n this.filters = filters.map((shape) =>\n shape.mode === \"dateRange\"\n ? new DateRangeFilter(this, shape)\n : new Filter(this, shape),\n );\n this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n this.search = search ? new Search(this, search) : undefined;\n this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n this.accordion = accordion;\n this.infiniteScroll = infiniteScroll;\n this.table = table ? new Table(this, table) : undefined;\n this.batches = new BatchesController(this, batchesController);\n\n /*\n * The controller no longer subscribes itself: the filters and the search\n * are this list's, and handing a list of concrete filters to a shared\n * model is the `Table<never>` variance trap. `IncrementalLoader` still\n * subscribes in its own constructor, which runs right after this, so the\n * order of the two resets is unchanged.\n */\n this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));\n this.search?.onUpdated(() => this.batches.reset());\n this.componentProps = componentProps;\n /*\n * Before the loader: its state takes `getItemId` over in its constructor,\n * and a loader built first would never deduplicate.\n */\n this.getItemId = getItemId;\n this.loader = IncrementalLoader.useNew<T>(this, loader);\n this.onAction = onAction;\n this.loadingItemsCount = loadingItemsCount;\n this.reactTable = ReactTable.useNew(this, onChange, {\n manualFiltering: this.loader.manualFiltering,\n manualPagination: this.loader.manualPagination,\n manualSorting: this.loader.manualSorting,\n });\n this.viewMode = ListViewMode.useNew(this, { defaultViewMode });\n this.emptyView = emptyView;\n this.emptySearchResultView = emptySearchResultView;\n\n useEffect(() => {\n this.filters.forEach((f) => f.deleteUnknownFilterValues());\n }, [this.filters]);\n }\n\n /*\n * `ListModelContext` — what the shared model in\n * `@mittwald/flow-components-base` reaches for, so `Sorting` and `Search` can\n * keep being handed the list itself. Getters, because the model is built\n * before the table is.\n */\n public get dataTable(): ReactTableInstance<T> {\n return this.reactTable.table;\n }\n\n public get settings(): ListSettingsPort | undefined {\n return this.settingsStorage;\n }\n\n public get settingsDefaults(): ListSettingsStorageDefaults | undefined {\n return this.settingsStorageDefaults;\n }\n\n public getEmptyViewType(): EmptyViewType {\n return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n }\n\n public get hasActiveFilters(): boolean {\n return this.filters.some((f) => f.isActive());\n }\n\n public get visibleSorting() {\n return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n }\n\n public static useNew<T, TMeta = unknown>(\n shape: ListShape<T, TMeta>,\n ): List<T, TMeta> {\n return new List<T, TMeta>(shape);\n }\n\n public getSorting(id: string): Sorting<T> {\n const sorting = this.sorting.find((s) => s.id === id);\n invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n return sorting;\n }\n\n public clearSorting(): void {\n return this.sorting.forEach((s) => s.clear());\n }\n\n public resetFilters(): void {\n return this.filters.forEach((f) => f.resetValues());\n }\n\n public clearFilters(): void {\n return this.filters.forEach((f) => f.clear());\n }\n\n public useIsEmpty(): boolean {\n return !this.loader.useIsLoading() && this.items.entries.length === 0;\n }\n}\n\nexport default List;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"List.mjs","names":["BatchesController"],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n EmptyViewType,\n GetItemId,\n ItemActionFn,\n ListSettingsStorageDefaults,\n ListShape,\n ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n ListModelContext,\n ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\nimport type { Table as ReactTableInstance } from \"@tanstack/table-core\";\n\nexport class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {\n public readonly filters: (\n Filter<T, never, never> | DateRangeFilter<T, never>\n )[];\n public readonly itemView?: ItemView<T>;\n public readonly table?: Table<T>;\n public readonly search?: Search<T>;\n public readonly sorting: Sorting<T>[];\n public readonly items: ItemCollection<T>;\n public readonly reactTable: ReactTable<T>;\n public readonly batches: BatchesController<T>;\n public readonly loader: IncrementalLoader<T>;\n public readonly onAction?: ItemActionFn<T>;\n public readonly accordion: boolean;\n public readonly infiniteScroll: boolean;\n public readonly getItemId?: GetItemId<T>;\n public readonly componentProps: ListSupportedComponentProps;\n public metadata?: TMeta;\n public readonly settingsStorage?: ListSettingsStore<T>;\n public readonly loadingItemsCount;\n public readonly viewMode: ListViewMode<T>;\n public readonly emptyView?: ReactNode;\n public readonly emptySearchResultView?: ReactNode;\n public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n public constructor(shape: ListShape<T, TMeta>) {\n const {\n settingStorageKey,\n itemView,\n table,\n filters = [],\n sorting = [],\n batchesController,\n onChange,\n loader,\n search,\n onAction,\n getItemId,\n defaultViewMode,\n accordion = false,\n infiniteScroll = false,\n loadingItemsCount = 5,\n settingsStorageDefaults,\n emptyView,\n emptySearchResultView,\n ...componentProps\n } = shape;\n\n const warnDeprecation = useWarnDeprecation();\n if (itemView?.fallback !== undefined) {\n warnDeprecation(\n \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n );\n }\n if (itemView?.dependencies !== undefined) {\n warnDeprecation(\n \"The 'dependencies' prop of 'List.Item' is deprecated and will be removed in a future release. Use 'renderDependencies' instead.\",\n );\n }\n\n this.settingsStorageDefaults = settingsStorageDefaults;\n const generalSettingsStore = useSettings();\n\n this.settingsStorage =\n settingStorageKey && generalSettingsStore\n ? new ListSettingsStore(this, generalSettingsStore, {\n storageKey: settingStorageKey,\n })\n : undefined;\n\n this.items = new ItemCollection(this);\n this.filters = filters.map((shape) =>\n shape.mode === \"dateRange\"\n ? new DateRangeFilter(this, shape)\n : new Filter(this, shape),\n );\n this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n this.search = search ? new Search(this, search) : undefined;\n this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n this.accordion = accordion;\n this.infiniteScroll = infiniteScroll;\n this.table = table ? new Table(this, table) : undefined;\n this.batches = new BatchesController(this, batchesController);\n\n /*\n * The controller no longer subscribes itself: the filters and the search\n * are this list's, and handing a list of concrete filters to a shared\n * model is the `Table<never>` variance trap. `IncrementalLoader` still\n * subscribes in its own constructor, which runs right after this, so the\n * order of the two resets is unchanged.\n */\n this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));\n this.search?.onUpdated(() => this.batches.reset());\n this.componentProps = componentProps;\n /*\n * Before the loader: its state takes `getItemId` over in its constructor,\n * and a loader built first would never deduplicate.\n */\n this.getItemId = getItemId;\n this.loader = IncrementalLoader.useNew<T>(this, loader);\n this.onAction = onAction;\n this.loadingItemsCount = loadingItemsCount;\n this.reactTable = ReactTable.useNew(this, onChange, {\n manualFiltering: this.loader.manualFiltering,\n manualPagination: this.loader.manualPagination,\n manualSorting: this.loader.manualSorting,\n });\n this.viewMode = ListViewMode.useNew(this, { defaultViewMode });\n this.emptyView = emptyView;\n this.emptySearchResultView = emptySearchResultView;\n\n const listFilters = this.filters;\n useEffect(() => {\n listFilters.forEach((f) => f.deleteUnknownFilterValues());\n }, [listFilters]);\n }\n\n /*\n * `ListModelContext` — what the shared model in\n * `@mittwald/flow-components-base` reaches for, so `Sorting` and `Search` can\n * keep being handed the list itself. Getters, because the model is built\n * before the table is.\n */\n public get dataTable(): ReactTableInstance<T> {\n return this.reactTable.table;\n }\n\n public get settings(): ListSettingsPort | undefined {\n return this.settingsStorage;\n }\n\n public get settingsDefaults(): ListSettingsStorageDefaults | undefined {\n return this.settingsStorageDefaults;\n }\n\n public getEmptyViewType(): EmptyViewType {\n return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n }\n\n public get hasActiveFilters(): boolean {\n return this.filters.some((f) => f.isActive());\n }\n\n public get visibleSorting() {\n return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n }\n\n public static useNew<T, TMeta = unknown>(\n shape: ListShape<T, TMeta>,\n ): List<T, TMeta> {\n return new List<T, TMeta>(shape);\n }\n\n public getSorting(id: string): Sorting<T> {\n const sorting = this.sorting.find((s) => s.id === id);\n invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n return sorting;\n }\n\n public clearSorting(): void {\n return this.sorting.forEach((s) => s.clear());\n }\n\n public resetFilters(): void {\n return this.filters.forEach((f) => f.resetValues());\n }\n\n public clearFilters(): void {\n return this.filters.forEach((f) => f.clear());\n }\n\n public useIsEmpty(): boolean {\n return !this.loader.useIsLoading() && this.items.entries.length === 0;\n }\n}\n\nexport default List;\n"],"mappings":"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"}
|
|
@@ -66,10 +66,13 @@ var IncrementalLoader = class IncrementalLoader {
|
|
|
66
66
|
getUseData() {
|
|
67
67
|
const dataSource = this.dataSource;
|
|
68
68
|
return (options) => {
|
|
69
|
-
if ("staticData" in dataSource)
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
if ("staticData" in dataSource) {
|
|
70
|
+
const staticData = dataSource.staticData;
|
|
71
|
+
return useMemo(() => ({
|
|
72
|
+
data: staticData,
|
|
73
|
+
itemTotalCount: staticData.length
|
|
74
|
+
}), [staticData]);
|
|
75
|
+
}
|
|
73
76
|
if ("useData" in dataSource) return dataSource.useData(options);
|
|
74
77
|
if ("asyncLoader" in dataSource) {
|
|
75
78
|
const asyncLoader = dataSource.asyncLoader;
|
|
@@ -91,8 +94,8 @@ var IncrementalLoader = class IncrementalLoader {
|
|
|
91
94
|
useLoadBatch: () => {
|
|
92
95
|
const loaderOptions = this.getDataLoaderOptions(batchIndex);
|
|
93
96
|
const loaderResult = useData(loaderOptions);
|
|
94
|
-
const { data, itemTotalCount, metadata } = loaderResult;
|
|
95
97
|
useEffect(() => {
|
|
98
|
+
const { data, itemTotalCount, metadata } = loaderResult;
|
|
96
99
|
this.loaderState.setDataBatch(batchIndex, data);
|
|
97
100
|
if (itemTotalCount !== void 0) this.list.batches.updateItemTotalCount(itemTotalCount);
|
|
98
101
|
this.loaderState.setMetadata(metadata);
|
|
@@ -102,7 +105,7 @@ var IncrementalLoader = class IncrementalLoader {
|
|
|
102
105
|
useRenderSuspense: () => {
|
|
103
106
|
useEffect(() => {
|
|
104
107
|
this.loaderState.setBatchLoadingState(batchIndex, "loading");
|
|
105
|
-
}, [
|
|
108
|
+
}, []);
|
|
106
109
|
}
|
|
107
110
|
}));
|
|
108
111
|
}
|
package/dist/js/packages/components/src/components/List/model/loading/IncrementalLoader.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IncrementalLoader.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoader.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n DataLoaderOptions,\n DataLoaderResult,\n DataSource,\n IncrementalLoaderShape,\n LoaderInvocationHook,\n} from \"@/components/List/model/loading/types\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { getAsyncResource, usePromise } from \"@mittwald/react-use-promise\";\nimport { useEffect } from \"react\";\nimport { times } from \"remeda\";\nimport { IncrementalLoaderState } from \"@/components/List/model/loading/IncrementalLoaderState\";\nimport { getListDataLoaderOptions } from \"@mittwald/flow-components-base\";\nimport { hash } from \"object-code\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport { useMemo } from \"react\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\n\nconst emptyData: never[] = [];\n\nexport class IncrementalLoader<T> {\n private readonly list: List<T>;\n private readonly dataSource: DataSource<T>;\n public readonly manualSorting: boolean;\n public readonly manualFiltering: boolean;\n public readonly manualPagination: boolean;\n public readonly disableInitialSuspenseBoundary: boolean;\n public readonly loaderState: IncrementalLoaderState<T>;\n public readonly staticDataProperties: PropertyName<T>[] = [];\n\n private constructor(list: List<T>, shape: IncrementalLoaderShape<T> = {}) {\n const { source } = shape;\n\n this.dataSource = source ?? { staticData: emptyData };\n\n const {\n disableInitialSuspenseBoundary: disableInitialSuspenseBoundaryDefault,\n } = useComponentDefaults(\"List\");\n\n this.disableInitialSuspenseBoundary =\n \"disableInitialSuspenseBoundary\" in this.dataSource\n ? (this.dataSource.disableInitialSuspenseBoundary ??\n disableInitialSuspenseBoundaryDefault)\n : disableInitialSuspenseBoundaryDefault;\n\n const manualPagination =\n \"manualPagination\" in this.dataSource\n ? this.dataSource.manualPagination\n : undefined;\n\n const manualFiltering =\n \"manualFiltering\" in this.dataSource\n ? this.dataSource.manualFiltering\n : undefined;\n\n const manualSorting =\n \"manualSorting\" in this.dataSource\n ? this.dataSource.manualSorting\n : undefined;\n\n this.list = list;\n this.loaderState = IncrementalLoaderState.useNew<T>(list);\n\n this.manualPagination = manualPagination ?? false;\n this.manualFiltering = manualFiltering ?? this.manualPagination;\n this.manualSorting = manualSorting ?? this.manualPagination;\n this.list.filters.forEach((f) => f.onFilterUpdated(() => this.reset()));\n this.list.search?.onUpdated(() => this.reset());\n\n this.initStaticDataProperties();\n }\n\n public static useNew<T>(\n list: List<T>,\n shape: IncrementalLoaderShape<T> = {},\n ): IncrementalLoader<T> {\n return new IncrementalLoader(list, shape);\n }\n\n private initStaticDataProperties() {\n const addPropertiesOfDataEntry = (data: unknown) => {\n if (typeof data !== \"object\" || data === null) {\n return;\n }\n\n (Object.keys(data) as PropertyName<T>[])\n .filter((p) => !this.staticDataProperties.includes(p))\n .forEach((p) => {\n this.staticDataProperties.push(p);\n });\n };\n\n if (\"staticData\" in this.dataSource) {\n this.dataSource.staticData\n // collect properties from just the first 100 items\n .slice(0, 100)\n .forEach(addPropertiesOfDataEntry);\n }\n }\n\n private reset(): void {\n this.loaderState.reset();\n }\n\n public useIsLoading(): boolean {\n return this.loaderState.useIsLoading();\n }\n\n public useIsInitiallyLoading(): boolean {\n return this.loaderState.useIsInitiallyLoading();\n }\n\n public useIsLoadingMore(): boolean {\n return this.loaderState.useIsLoadingMore();\n }\n\n public useData(): T[] {\n return this.loaderState.useMergedData();\n }\n\n private getUseData(): (options: DataLoaderOptions<T>) => DataLoaderResult<T> {\n const dataSource = this.dataSource;\n\n return (options: DataLoaderOptions<T>) => {\n if (\"staticData\" in dataSource) {\n return useMemo(\n () => ({\n data: dataSource.staticData,\n itemTotalCount: dataSource.staticData.length,\n }),\n [dataSource.staticData],\n );\n }\n\n if (\"useData\" in dataSource) {\n return dataSource.useData(options);\n }\n\n if (\"asyncLoader\" in dataSource) {\n const asyncLoader = dataSource.asyncLoader;\n const dependencies = dataSource.dependencies;\n const loaderId = dependencies\n ? hash(dependencies).toString()\n : undefined;\n\n return usePromise(asyncLoader, [options], {\n loaderId,\n });\n }\n\n if (\"asyncResourceFactory\" in dataSource) {\n return dataSource.asyncResourceFactory(options).use();\n }\n\n return useMemo(\n () => ({\n data: [],\n itemTotalCount: 0,\n }),\n [],\n );\n };\n }\n\n public getLoaderInvocationHooks(): LoaderInvocationHook[] {\n const batchesCount = times(this.list.batches.getBatchIndex() + 1, (i) => i);\n const useData = this.getUseData();\n\n return batchesCount.map((batchIndex) => ({\n useLoadBatch: () => {\n const loaderOptions = this.getDataLoaderOptions(batchIndex);\n const loaderResult = useData(loaderOptions);\n const { data, itemTotalCount, metadata } = loaderResult;\n\n useEffect(() => {\n this.loaderState.setDataBatch(batchIndex, data);\n\n if (itemTotalCount !== undefined) {\n this.list.batches.updateItemTotalCount(itemTotalCount);\n }\n\n this.loaderState.setMetadata(metadata);\n\n this.loaderState.setBatchLoadingState(batchIndex, \"loaded\");\n }, [loaderResult]);\n },\n\n useRenderSuspense: () => {\n useEffect(() => {\n this.loaderState.setBatchLoadingState(batchIndex, \"loading\");\n }, [batchIndex]);\n },\n }));\n }\n\n private getDataLoaderOptions(batchIndex: number): DataLoaderOptions<T> {\n return getListDataLoaderOptions<T>(\n {\n batchSize: this.list.batches.batchSize,\n modes: this,\n sorting: this.list.sorting,\n filters: this.list.filters,\n searchString: this.list.reactTable.searchString,\n },\n batchIndex,\n );\n }\n\n private getBatchDataAsyncResource(\n batchIndex: number,\n ): AsyncResource<DataLoaderResult<T>> {\n const dataSource = this.dataSource;\n const loaderOptions = this.getDataLoaderOptions(batchIndex);\n\n if (\"staticData\" in dataSource) {\n return getAsyncResource(\n async (staticData) => ({\n data: staticData as T[],\n itemTotalCount: staticData.length,\n }),\n [dataSource.staticData],\n );\n }\n\n if (\"asyncLoader\" in dataSource) {\n const asyncLoader = dataSource.asyncLoader;\n const dependencies = dataSource.dependencies;\n const loaderId = dependencies ? hash(dependencies).toString() : undefined;\n return getAsyncResource(asyncLoader, [loaderOptions], {\n loaderId,\n });\n }\n\n if (\"asyncResourceFactory\" in dataSource) {\n const asyncResourceFactory = dataSource.asyncResourceFactory;\n return asyncResourceFactory(loaderOptions);\n }\n\n throw new Error(\"Unknown data source\");\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IncrementalLoader.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/loading/IncrementalLoader.ts"],"sourcesContent":["import type List from \"@/components/List/model/List\";\nimport type {\n DataLoaderOptions,\n DataLoaderResult,\n DataSource,\n IncrementalLoaderShape,\n LoaderInvocationHook,\n} from \"@/components/List/model/loading/types\";\nimport type { AsyncResource } from \"@mittwald/react-use-promise\";\nimport { getAsyncResource, usePromise } from \"@mittwald/react-use-promise\";\nimport { useEffect } from \"react\";\nimport { times } from \"remeda\";\nimport { IncrementalLoaderState } from \"@/components/List/model/loading/IncrementalLoaderState\";\nimport { getListDataLoaderOptions } from \"@mittwald/flow-components-base\";\nimport { hash } from \"object-code\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport { useMemo } from \"react\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\n\nconst emptyData: never[] = [];\n\nexport class IncrementalLoader<T> {\n private readonly list: List<T>;\n private readonly dataSource: DataSource<T>;\n public readonly manualSorting: boolean;\n public readonly manualFiltering: boolean;\n public readonly manualPagination: boolean;\n public readonly disableInitialSuspenseBoundary: boolean;\n public readonly loaderState: IncrementalLoaderState<T>;\n public readonly staticDataProperties: PropertyName<T>[] = [];\n\n private constructor(list: List<T>, shape: IncrementalLoaderShape<T> = {}) {\n const { source } = shape;\n\n this.dataSource = source ?? { staticData: emptyData };\n\n const {\n disableInitialSuspenseBoundary: disableInitialSuspenseBoundaryDefault,\n } = useComponentDefaults(\"List\");\n\n this.disableInitialSuspenseBoundary =\n \"disableInitialSuspenseBoundary\" in this.dataSource\n ? (this.dataSource.disableInitialSuspenseBoundary ??\n disableInitialSuspenseBoundaryDefault)\n : disableInitialSuspenseBoundaryDefault;\n\n const manualPagination =\n \"manualPagination\" in this.dataSource\n ? this.dataSource.manualPagination\n : undefined;\n\n const manualFiltering =\n \"manualFiltering\" in this.dataSource\n ? this.dataSource.manualFiltering\n : undefined;\n\n const manualSorting =\n \"manualSorting\" in this.dataSource\n ? this.dataSource.manualSorting\n : undefined;\n\n this.list = list;\n this.loaderState = IncrementalLoaderState.useNew<T>(list);\n\n this.manualPagination = manualPagination ?? false;\n this.manualFiltering = manualFiltering ?? this.manualPagination;\n this.manualSorting = manualSorting ?? this.manualPagination;\n this.list.filters.forEach((f) => f.onFilterUpdated(() => this.reset()));\n this.list.search?.onUpdated(() => this.reset());\n\n this.initStaticDataProperties();\n }\n\n public static useNew<T>(\n list: List<T>,\n shape: IncrementalLoaderShape<T> = {},\n ): IncrementalLoader<T> {\n return new IncrementalLoader(list, shape);\n }\n\n private initStaticDataProperties() {\n const addPropertiesOfDataEntry = (data: unknown) => {\n if (typeof data !== \"object\" || data === null) {\n return;\n }\n\n (Object.keys(data) as PropertyName<T>[])\n .filter((p) => !this.staticDataProperties.includes(p))\n .forEach((p) => {\n this.staticDataProperties.push(p);\n });\n };\n\n if (\"staticData\" in this.dataSource) {\n this.dataSource.staticData\n // collect properties from just the first 100 items\n .slice(0, 100)\n .forEach(addPropertiesOfDataEntry);\n }\n }\n\n private reset(): void {\n this.loaderState.reset();\n }\n\n public useIsLoading(): boolean {\n return this.loaderState.useIsLoading();\n }\n\n public useIsInitiallyLoading(): boolean {\n return this.loaderState.useIsInitiallyLoading();\n }\n\n public useIsLoadingMore(): boolean {\n return this.loaderState.useIsLoadingMore();\n }\n\n public useData(): T[] {\n return this.loaderState.useMergedData();\n }\n\n private getUseData(): (options: DataLoaderOptions<T>) => DataLoaderResult<T> {\n const dataSource = this.dataSource;\n\n return (options: DataLoaderOptions<T>) => {\n if (\"staticData\" in dataSource) {\n const staticData = dataSource.staticData;\n return useMemo(\n () => ({\n data: staticData,\n itemTotalCount: staticData.length,\n }),\n [staticData],\n );\n }\n\n if (\"useData\" in dataSource) {\n return dataSource.useData(options);\n }\n\n if (\"asyncLoader\" in dataSource) {\n const asyncLoader = dataSource.asyncLoader;\n const dependencies = dataSource.dependencies;\n const loaderId = dependencies\n ? hash(dependencies).toString()\n : undefined;\n\n return usePromise(asyncLoader, [options], {\n loaderId,\n });\n }\n\n if (\"asyncResourceFactory\" in dataSource) {\n return dataSource.asyncResourceFactory(options).use();\n }\n\n return useMemo(\n () => ({\n data: [],\n itemTotalCount: 0,\n }),\n [],\n );\n };\n }\n\n public getLoaderInvocationHooks(): LoaderInvocationHook[] {\n const batchesCount = times(this.list.batches.getBatchIndex() + 1, (i) => i);\n const useData = this.getUseData();\n\n return batchesCount.map((batchIndex) => ({\n useLoadBatch: () => {\n const loaderOptions = this.getDataLoaderOptions(batchIndex);\n const loaderResult = useData(loaderOptions);\n\n useEffect(() => {\n const { data, itemTotalCount, metadata } = loaderResult;\n this.loaderState.setDataBatch(batchIndex, data);\n\n if (itemTotalCount !== undefined) {\n this.list.batches.updateItemTotalCount(itemTotalCount);\n }\n\n this.loaderState.setMetadata(metadata);\n\n this.loaderState.setBatchLoadingState(batchIndex, \"loaded\");\n }, [loaderResult]);\n },\n\n useRenderSuspense: () => {\n useEffect(() => {\n this.loaderState.setBatchLoadingState(batchIndex, \"loading\");\n }, []);\n },\n }));\n }\n\n private getDataLoaderOptions(batchIndex: number): DataLoaderOptions<T> {\n return getListDataLoaderOptions<T>(\n {\n batchSize: this.list.batches.batchSize,\n modes: this,\n sorting: this.list.sorting,\n filters: this.list.filters,\n searchString: this.list.reactTable.searchString,\n },\n batchIndex,\n );\n }\n\n private getBatchDataAsyncResource(\n batchIndex: number,\n ): AsyncResource<DataLoaderResult<T>> {\n const dataSource = this.dataSource;\n const loaderOptions = this.getDataLoaderOptions(batchIndex);\n\n if (\"staticData\" in dataSource) {\n return getAsyncResource(\n async (staticData) => ({\n data: staticData as T[],\n itemTotalCount: staticData.length,\n }),\n [dataSource.staticData],\n );\n }\n\n if (\"asyncLoader\" in dataSource) {\n const asyncLoader = dataSource.asyncLoader;\n const dependencies = dataSource.dependencies;\n const loaderId = dependencies ? hash(dependencies).toString() : undefined;\n return getAsyncResource(asyncLoader, [loaderOptions], {\n loaderId,\n });\n }\n\n if (\"asyncResourceFactory\" in dataSource) {\n const asyncResourceFactory = dataSource.asyncResourceFactory;\n return asyncResourceFactory(loaderOptions);\n }\n\n throw new Error(\"Unknown data source\");\n }\n}\n"],"mappings":"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"}
|
|
@@ -102,6 +102,10 @@ var Markdown = (props) => {
|
|
|
102
102
|
...props,
|
|
103
103
|
children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
|
|
104
104
|
}),
|
|
105
|
+
table: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: Markdown_module_default.tableContainer,
|
|
107
|
+
children: /* @__PURE__ */ jsx("table", { ...props })
|
|
108
|
+
}),
|
|
105
109
|
th: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("th", {
|
|
106
110
|
...props,
|
|
107
111
|
children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement, useId, useMemo } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport { isExternalHref } from \"@/components/Markdown/lib/isExternalHref\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n /* Footnote ids are per document, so two instances on one page would share\n them and a back link would jump into the other one. */\n const clobberPrefix = `user-content-${useId().replace(/[^\\w-]/g, \"\")}-`;\n\n /* react-markdown uses the renderers as element types: new ones on every\n render would remount the whole tree. */\n const defaultComponents = useMemo<Components>(\n () => ({\n /* GFM footnotes link through `id` (the back link's target), `aria-label`\n and `aria-describedby`. */\n a: (props) => (\n <Link\n id={props.id}\n aria-label={props[\"aria-label\"]}\n aria-describedby={props[\"aria-describedby\"]}\n target={isExternalHref(props.href) ? \"_blank\" : undefined}\n color={color}\n href={props.href}\n >\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={color}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? (preElementContent.props.className.replace(\n \"language-\",\n \"\",\n ) as CodeEditorLanguage)\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n ).trim()}\n />\n );\n },\n ul: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ul {...props} />\n </SkeletonBlockText>\n ),\n ol: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ol {...props} />\n </SkeletonBlockText>\n ),\n li: ({ node: ignoredNode, children, ...props }) => (\n <li {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </li>\n ),\n th: ({ node: ignoredNode, children, ...props }) => (\n <th {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </th>\n ),\n td: ({ node: ignoredNode, children, ...props }) => (\n <td {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </td>\n ),\n /* A text bar resets the mode for its content, so the image reads it\n from here. A skeleton issues no request. */\n img: ({ node: ignoredNode, ...props }) =>\n isSkeleton ? null : <img {...props} />,\n blockquote: (props) => (\n <SkeletonBlockText color={color}>\n <blockquote>{props.children}</blockquote>\n </SkeletonBlockText>\n ),\n }),\n [color, headingOffset, isSkeleton],\n );\n\n const textContent = extractTextFromFirstChild(children);\n const mergedComponents = useMemo<Components>(\n () => ({\n ...defaultComponents,\n ...customComponents,\n }),\n [defaultComponents, customComponents],\n );\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n <ReactMarkdown\n allowElement={allowElement}\n allowedElements={allowedElements}\n disallowedElements={disallowedElements}\n rehypePlugins={rehypePlugins}\n remarkPlugins={remarkPlugins ?? [remarkGfm]}\n remarkRehypeOptions={{ clobberPrefix, ...remarkRehypeOptions }}\n skipHtml={skipHtml}\n unwrapDisallowed={unwrapDisallowed}\n urlTransform={urlTransform}\n components={mergedComponents}\n >\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement, useId, useMemo } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport { isExternalHref } from \"@/components/Markdown/lib/isExternalHref\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n /* Footnote ids are per document, so two instances on one page would share\n them and a back link would jump into the other one. */\n const clobberPrefix = `user-content-${useId().replace(/[^\\w-]/g, \"\")}-`;\n\n /* react-markdown uses the renderers as element types: new ones on every\n render would remount the whole tree. */\n const defaultComponents = useMemo<Components>(\n () => ({\n /* GFM footnotes link through `id` (the back link's target), `aria-label`\n and `aria-describedby`. */\n a: (props) => (\n <Link\n id={props.id}\n aria-label={props[\"aria-label\"]}\n aria-describedby={props[\"aria-describedby\"]}\n target={isExternalHref(props.href) ? \"_blank\" : undefined}\n color={color}\n href={props.href}\n >\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={color}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? (preElementContent.props.className.replace(\n \"language-\",\n \"\",\n ) as CodeEditorLanguage)\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n ).trim()}\n />\n );\n },\n ul: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ul {...props} />\n </SkeletonBlockText>\n ),\n ol: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ol {...props} />\n </SkeletonBlockText>\n ),\n li: ({ node: ignoredNode, children, ...props }) => (\n <li {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </li>\n ),\n /* A table cannot shrink below its content, so the box around it scrolls\n instead of the table overflowing the markdown. */\n table: ({ node: ignoredNode, ...props }) => (\n <div className={styles.tableContainer}>\n <table {...props} />\n </div>\n ),\n th: ({ node: ignoredNode, children, ...props }) => (\n <th {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </th>\n ),\n td: ({ node: ignoredNode, children, ...props }) => (\n <td {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </td>\n ),\n /* A text bar resets the mode for its content, so the image reads it\n from here. A skeleton issues no request. */\n img: ({ node: ignoredNode, ...props }) =>\n isSkeleton ? null : <img {...props} />,\n blockquote: (props) => (\n <SkeletonBlockText color={color}>\n <blockquote>{props.children}</blockquote>\n </SkeletonBlockText>\n ),\n }),\n [color, headingOffset, isSkeleton],\n );\n\n const textContent = extractTextFromFirstChild(children);\n const mergedComponents = useMemo<Components>(\n () => ({\n ...defaultComponents,\n ...customComponents,\n }),\n [defaultComponents, customComponents],\n );\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n <ReactMarkdown\n allowElement={allowElement}\n allowedElements={allowedElements}\n disallowedElements={disallowedElements}\n rehypePlugins={rehypePlugins}\n remarkPlugins={remarkPlugins ?? [remarkGfm]}\n remarkRehypeOptions={{ clobberPrefix, ...remarkRehypeOptions }}\n skipHtml={skipHtml}\n unwrapDisallowed={unwrapDisallowed}\n urlTransform={urlTransform}\n components={mergedComponents}\n >\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"mappings":"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"}
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
// src/components/Markdown/Markdown.module.scss
|
|
4
4
|
var markdown = "flow--markdown";
|
|
5
|
+
var tableContainer = "flow--markdown--table-container";
|
|
5
6
|
var skeletonBlock = "flow--markdown--skeleton-block";
|
|
6
7
|
var Markdown_module_default = {
|
|
7
8
|
markdown,
|
|
9
|
+
tableContainer,
|
|
8
10
|
skeletonBlock
|
|
9
11
|
};
|
|
10
|
-
export { Markdown_module_default as default, markdown, skeletonBlock };
|
|
12
|
+
export { Markdown_module_default as default, markdown, skeletonBlock, tableContainer };
|
|
11
13
|
|
|
12
14
|
//# sourceMappingURL=Markdown.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n /* Everything below styles react-markdown's output. Consumers can replace any\n renderer through the `components` prop, so these rules have to match the\n element, not a Flow class that a replacement would not carry. */\n // stylelint-disable-next-line selector-max-type -- react-markdown output\n p {\n white-space: break-spaces;\n }\n\n
|
|
1
|
+
{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n@use \"@/styles/mixins/skeleton\";\n\n.markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n /* Everything below styles react-markdown's output. Consumers can replace any\n renderer through the `components` prop, so these rules have to match the\n element, not a Flow class that a replacement would not carry. */\n // stylelint-disable-next-line selector-max-type -- react-markdown output\n p {\n white-space: break-spaces;\n }\n\n /* Only scrolls, like `Table`: a replaced `table` renderer has no container\n and keeps the table's own look. */\n .tableContainer {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n }\n\n // stylelint-disable selector-max-type -- react-markdown table output\n table {\n min-inline-size: 100%;\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n thead {\n font-weight: var(--table--header-font-weight);\n }\n\n th,\n td {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n }\n\n th {\n border-block-end-width: var(--table--header-border-width);\n }\n\n tbody tr {\n &:nth-of-type(odd) td {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) td {\n border-block-end-width: var(--table--border-width);\n }\n }\n }\n // stylelint-enable selector-max-type\n}\n\n/* SkeletonMode: a list or quote whose items became bars. The bullets take the\n bar color, so no real glyph shows. */\n.skeletonBlock ::marker {\n color: skeleton.$background-color;\n}\n"],"mappings":""}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
4
|
+
import all_light_default from "../../../../design-tokens/dist/json-runtime/all-light.mjs";
|
|
4
5
|
import { Popover } from "../Popover/Popover.mjs";
|
|
5
6
|
import Options_module_default from "./Options.module.mjs";
|
|
6
7
|
import clsx from "clsx";
|
|
@@ -8,13 +9,15 @@ import "react";
|
|
|
8
9
|
import { jsx } from "react/jsx-runtime";
|
|
9
10
|
import * as Aria from "react-aria-components";
|
|
10
11
|
// src/components/Options/Options.tsx
|
|
12
|
+
/** `Popover`'s `maxHeight` is a number, so it cannot read the CSS variable. */
|
|
13
|
+
var maxHeight = Number.parseFloat(all_light_default.options["max-height"].value);
|
|
11
14
|
var Options = flowComponent("Options", (props) => {
|
|
12
15
|
const { className, children, controller, renderEmptyState, onAction, ...restPopoverProps } = props;
|
|
13
16
|
const rootClassName = clsx(Options_module_default.options, className);
|
|
14
17
|
return /* @__PURE__ */ jsx(Popover, {
|
|
15
18
|
className: Options_module_default.popover,
|
|
16
19
|
controller,
|
|
17
|
-
maxHeight
|
|
20
|
+
maxHeight,
|
|
18
21
|
...restPopoverProps,
|
|
19
22
|
children: /* @__PURE__ */ jsx(Aria.ListBox, {
|
|
20
23
|
onAction,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Options.mjs","names":["styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={
|
|
1
|
+
{"version":3,"file":"Options.mjs","names":["tokens","styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/** `Popover`'s `maxHeight` is a number, so it cannot read the CSS variable. */\nconst maxHeight = Number.parseFloat(tokens.options[\"max-height\"].value);\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={maxHeight}\n {...restPopoverProps}\n >\n <Aria.ListBox\n onAction={onAction}\n className={rootClassName}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </Aria.ListBox>\n </Popover>\n );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,YAAY,OAAO,WAAWA,kBAAO,QAAQ,aAAa,CAAC,KAAK;AAStE,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAKC,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAWA,uBAAO;EACN;EACD;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexityIndicator.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss"],"sourcesContent":["@use \"complexity\";\n\n.complexityIndicator {\n width: 100%;\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n height: var(--progress-bar--height--s);\n overflow: hidden;\n border-top: var(--form-control--border-width) solid\n var(--progress-bar--border-color);\n\n @include complexity.animation-in(\"height\");\n @include complexity.animation-in(\"border-top-color\");\n\n &.hide {\n transition-duration: #{complexity.$animation-out-duration};\n height: 0;\n border-top-color: transparent;\n overflow: hidden;\n }\n\n & .bar {\n position: relative;\n display: block;\n height: 100%;\n width: calc(var(--complexity-indicator--percentage) * 1%);\n border-radius: calc(var(--form-control--corner-radius) - 1px);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n transition:\n width #{complexity.$animation-width-responsiveness},\n background-color #{complexity.$animation-background-color-change};\n\n &.running {\n border-end-end-radius: 0;\n }\n\n &.bar-background-status-danger {\n background-color: var(--progress-bar--danger-fill-background-color);\n }\n\n &.bar-background-status-success {\n background-color: var(--progress-bar--success-fill-background-color);\n }\n\n &.bar-background-status-warning {\n background-color: var(--progress-bar--warning-fill-background-color);\n }\n\n &.bar-background-status-indeterminate {\n background-color: var(\n --progress-bar--indeterminate-fill-background-color\n );\n }\n\n &.loading {\n &::after {\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n
|
|
1
|
+
{"version":3,"file":"ComplexityIndicator.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss"],"sourcesContent":["@use \"complexity\";\n\n.complexityIndicator {\n width: 100%;\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n height: var(--progress-bar--height--s);\n overflow: hidden;\n border-top: var(--form-control--border-width) solid\n var(--progress-bar--border-color);\n\n @include complexity.animation-in(\"height\");\n @include complexity.animation-in(\"border-top-color\");\n\n &.hide {\n transition-duration: #{complexity.$animation-out-duration};\n height: 0;\n border-top-color: transparent;\n overflow: hidden;\n }\n\n & .bar {\n position: relative;\n display: block;\n height: 100%;\n width: calc(var(--complexity-indicator--percentage) * 1%);\n border-radius: calc(var(--form-control--corner-radius) - 1px);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n transition:\n width #{complexity.$animation-width-responsiveness},\n background-color #{complexity.$animation-background-color-change};\n\n &.running {\n border-end-end-radius: 0;\n }\n\n &.bar-background-status-danger {\n background-color: var(--progress-bar--danger-fill-background-color);\n }\n\n &.bar-background-status-success {\n background-color: var(--progress-bar--success-fill-background-color);\n }\n\n &.bar-background-status-warning {\n background-color: var(--progress-bar--warning-fill-background-color);\n }\n\n &.bar-background-status-indeterminate {\n background-color: var(\n --progress-bar--indeterminate-fill-background-color\n );\n }\n\n &.loading {\n &::after {\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n var(--password-creation-field--complexity-shimmer-color) 20%,\n transparent 40%\n );\n animation: shimmer\n var(--password-creation-field--complexity-shimmer-duration) infinite;\n content: \"\";\n }\n }\n }\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}\n"],"mappings":""}
|