@mittwald/flow-react-components 1.3.12 → 1.3.13
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/Calendar/Calendar.module.mjs +3 -1
- package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs +4 -3
- package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ColumnLayout/ColumnLayout.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DonutChart/components/DonutChartFill.mjs +13 -17
- package/dist/js/packages/components/src/components/DonutChart/components/DonutChartFill.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Message/Message.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs +1 -2
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.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/Popover/widthStyle.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.mjs +0 -1
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.module.mjs +3 -1
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs +5 -6
- package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs +2 -6
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextArea/TextArea.module.mjs.map +1 -1
- package/dist/types/components/ProgressBar/components/ProgressBarBar.d.ts +0 -1
- package/package.json +9 -9
|
@@ -5,15 +5,17 @@ var calendar = "flow--calendar";
|
|
|
5
5
|
var calendarHeader = "flow--calendar--calendar-header";
|
|
6
6
|
var container = "flow--calendar--container";
|
|
7
7
|
var presetMenu = "flow--calendar--preset-menu";
|
|
8
|
+
var presetSeparator = "flow--calendar--preset-separator";
|
|
8
9
|
var range = "flow--calendar--range";
|
|
9
10
|
var Calendar_module_default = {
|
|
10
11
|
calendar,
|
|
11
12
|
calendarHeader,
|
|
12
13
|
container,
|
|
13
14
|
presetMenu,
|
|
15
|
+
presetSeparator,
|
|
14
16
|
range
|
|
15
17
|
};
|
|
16
18
|
//#endregion
|
|
17
|
-
export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, range };
|
|
19
|
+
export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, presetSeparator, range };
|
|
18
20
|
|
|
19
21
|
//# sourceMappingURL=Calendar.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\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: 200px;\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 }\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 width: calc(100% + 0.375rem);\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\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\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: 200px;\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 width: calc(100% + 0.375rem);\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\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
|
|
@@ -9,11 +9,9 @@ import clsx from "clsx";
|
|
|
9
9
|
import "react";
|
|
10
10
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import * as Aria from "react-aria-components";
|
|
12
|
-
import { useMediaQuery } from "usehooks-ts";
|
|
13
12
|
//#region src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx
|
|
14
13
|
/** @internal */
|
|
15
14
|
var InnerRangeCalendar = ({ withDatePickerPresets }) => {
|
|
16
|
-
const isSmallViewport = useMediaQuery("(max-width: 530px)");
|
|
17
15
|
const predefinedDateHelperItems = useCalendarDateRangePresets(withDatePickerPresets).map((present) => {
|
|
18
16
|
return /* @__PURE__ */ jsx(MenuItem, {
|
|
19
17
|
isDisabled: present.disabled,
|
|
@@ -27,7 +25,10 @@ var InnerRangeCalendar = ({ withDatePickerPresets }) => {
|
|
|
27
25
|
children: [withDatePickerPresets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Aria.Menu, {
|
|
28
26
|
className: Calendar_module_default.presetMenu,
|
|
29
27
|
children: predefinedDateHelperItems
|
|
30
|
-
}), /* @__PURE__ */ jsx(Separator, {
|
|
28
|
+
}), /* @__PURE__ */ jsx(Separator, {
|
|
29
|
+
orientation: "vertical",
|
|
30
|
+
className: Calendar_module_default.presetSeparator
|
|
31
|
+
})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CalendarHeader, {}), /* @__PURE__ */ jsx(Aria.CalendarGrid, { children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })] })]
|
|
31
32
|
});
|
|
32
33
|
};
|
|
33
34
|
/** @flr-generate all */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeCalendar.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport
|
|
1
|
+
{"version":3,"file":"RangeCalendar.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport type { DateRangePickerProps } from \"@/components/DateRangePicker\";\n\nexport type RangeCalendarProps = Omit<\n Aria.RangeCalendarProps<Aria.DateValue>,\n \"children\"\n> &\n Pick<DateRangePickerProps, \"withDatePickerPresets\">;\n\n/** @internal */\nconst InnerRangeCalendar: FC<RangeCalendarProps> = ({\n withDatePickerPresets,\n}) => {\n const dateRangeHelper = useCalendarDateRangePresets(withDatePickerPresets);\n\n const predefinedDateHelperItems = dateRangeHelper.map((present) => {\n return (\n <MenuItem\n key={present.label}\n isDisabled={present.disabled}\n onPress={present.onPress}\n aria-label={present.label}\n >\n {present.label}\n </MenuItem>\n );\n });\n\n return (\n <div className={styles.container}>\n {withDatePickerPresets && (\n <>\n <Aria.Menu className={styles.presetMenu}>\n {predefinedDateHelperItems}\n </Aria.Menu>\n <Separator\n orientation=\"vertical\"\n className={styles.presetSeparator}\n />\n </>\n )}\n <div>\n <CalendarHeader />\n <Aria.CalendarGrid>\n {(date) => <Aria.CalendarCell date={date} />}\n </Aria.CalendarGrid>\n </div>\n </div>\n );\n};\n\n/** @flr-generate all */\nexport const RangeCalendar: FC<RangeCalendarProps> = (props) => {\n const { className, withDatePickerPresets, ...rest } = props;\n const rootClassName = clsx(styles.calendar, styles.range, className);\n\n return (\n <Aria.RangeCalendar {...rest} className={rootClassName}>\n <InnerRangeCalendar withDatePickerPresets={withDatePickerPresets} />\n </Aria.RangeCalendar>\n );\n};\n\nexport default RangeCalendar;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,sBAA8C,EAClD,4BACI;CAGJ,MAAM,4BAFkB,4BAA4B,qBAElB,CAAA,CAAgB,KAAK,YAAY;EACjE,OACE,oBAAC,UAAD;GAEE,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,cAAY,QAAQ;GAEnB,UAAA,QAAQ;EACD,GANH,QAAQ,KAML;CAEd,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,wBAAO;EAAvB,UAAA,CACG,yBACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN;GAAW,WAAW,wBAAO;GAC1B,UAAA;EACQ,CAAA,GACX,oBAAC,WAAD;GACE,aAAY;GACZ,WAAW,wBAAO;EACnB,CAAA,CACD,EAAA,CAAA,GAEJ,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN,EAAA,WACI,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA,EAC1B,CAAA,CAChB,EAAA,CAAA,CACF;;AAET;;AAGA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,WAAW,uBAAuB,GAAG,SAAS;CACtD,MAAM,gBAAgB,KAAK,wBAAO,UAAU,wBAAO,OAAO,SAAS;CAEnE,OACE,oBAAC,KAAK,eAAN;EAAoB,GAAI;EAAM,WAAW;EACvC,UAAA,oBAAC,oBAAD,EAA2C,sBAAwB,CAAA;CACjD,CAAA;AAExB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n > {\n /** The code displayed in the block. */\n code?: string;\n /**\n * Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n *\n * @default: false\n */\n truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n /* The full height, only while the toggle animates to or from it. */\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n {/* Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. */}\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const heightVariables = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n }
|
|
1
|
+
{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n > {\n /** The code displayed in the block. */\n code?: string;\n /**\n * Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n *\n * @default: false\n */\n truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n /* The full height, only while the toggle animates to or from it. */\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n {/* Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. */}\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const heightVariables: React.CSSProperties = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n };\n\n /* A height transition needs a length on both ends – `none` does not\n interpolate. So the full height is measured for the transition and\n released once it ended, and code that changes later is not clipped. */\n const toggleFolded = () => {\n const editor = editorRef.current;\n\n if (!editor) {\n setFolded((folded) => !folded);\n return;\n }\n\n const animates = getComputedStyle(editor)\n .transitionDuration.split(\",\")\n .some((duration) => parseFloat(duration) > 0);\n\n if (folded) {\n setExpandedHeight(animates ? editor.scrollHeight : undefined);\n setFolded(false);\n } else {\n flushSync(() => setExpandedHeight(editor.scrollHeight));\n // Applies the start height before the folded one replaces it.\n editor.getBoundingClientRect();\n setFolded(true);\n }\n };\n\n return (\n <div\n className={clsx(\n rootClassName,\n maxHeight && styles.truncated,\n folded && styles.folded,\n )}\n style={heightVariables}\n onTransitionEnd={(event) => {\n if (event.propertyName === \"max-height\") {\n setExpandedHeight(undefined);\n }\n }}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n editorRef.current = view.dom;\n\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight * visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={toggleFolded}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAa,yBAAO,WACpB,UAAU,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n extends\n PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. */\n s?: (number | null)[];\n /** Column layout for container size m. */\n m?: (number | null)[];\n /** Column layout for container size l. */\n l?: (number | null)[];\n /**\n * Size of the row and column gap between the content blocks inside the column\n * layout.\n *\n * @default \"m\"\n */\n gap?: GapSize;\n /** Size of the row gap between the content blocks inside the column layout. */\n rowGap?: GapSize;\n /** Size of the column gap between the content blocks inside the column layout. */\n columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n \"ColumnLayout\",\n (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n style: styleFromProps,\n } = props;\n\n let elementClassName: string = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-s-${i + 1}`),\n );\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-m-${i + 1}`),\n );\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-l-${i + 1}`),\n );\n }\n });\n\n const columnsS = getColumns(s ?? [1]);\n const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);\n const columnsL = l\n ? getColumns(l)\n : m || s\n ? columnsM\n : getColumns([1, 1, 1]);\n\n const style = {\n ...styleFromProps,\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n }
|
|
1
|
+
{"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n extends\n PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. */\n s?: (number | null)[];\n /** Column layout for container size m. */\n m?: (number | null)[];\n /** Column layout for container size l. */\n l?: (number | null)[];\n /**\n * Size of the row and column gap between the content blocks inside the column\n * layout.\n *\n * @default \"m\"\n */\n gap?: GapSize;\n /** Size of the row gap between the content blocks inside the column layout. */\n rowGap?: GapSize;\n /** Size of the column gap between the content blocks inside the column layout. */\n columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n \"ColumnLayout\",\n (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n style: styleFromProps,\n } = props;\n\n let elementClassName: string = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-s-${i + 1}`),\n );\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-m-${i + 1}`),\n );\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-l-${i + 1}`),\n );\n }\n });\n\n const columnsS = getColumns(s ?? [1]);\n const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);\n const columnsL = l\n ? getColumns(l)\n : m || s\n ? columnsM\n : getColumns([1, 1, 1]);\n\n const style: CSSProperties = {\n ...styleFromProps,\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n };\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,mBAA2B,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC;CACpC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,WAAW,CAAC,GAAG,CAAC,CAAC;CACrE,MAAM,WAAW,IACb,WAAW,CAAC,IACZ,KAAK,IACH,WACA,WAAW;EAAC;EAAG;EAAG;CAAC,CAAC;CAE1B,MAAM,QAAuB;EAC3B,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,KAAK,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,oBAAC,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .fill,\n .segment {\n transform: rotate(var(--donut-chart--
|
|
1
|
+
{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .fill,\n .segment {\n /* No `calc()`: with a unitless one on the dash, Firefox drew full circles. */\n stroke-dasharray: var(--donut-chart--percent) 100;\n transform: rotate(calc(var(--donut-chart--offset) * 3.6deg - 90deg));\n transform-box: fill-box;\n transform-origin: center;\n animation: donut-chart-fill var(--donut-chart--transition-duration) ease;\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n // Raw consumer markup inside the value slot — nothing to class.\n // stylelint-disable-next-line selector-max-type -- consumer markup\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants */\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n\n/* The implicit \"to\" keyframe picks up the fill's own dash and rotation. */\n@keyframes donut-chart-fill {\n from {\n stroke-dasharray: 0 100;\n transform: rotate(-90deg);\n }\n}\n"],"mappings":""}
|
|
@@ -6,43 +6,39 @@ import DonutChart_module_default from "../DonutChart.module.mjs";
|
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/DonutChart/components/DonutChartFill.tsx
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* too, to animate out of an empty circle.
|
|
9
|
+
* `pathLength="100"` measures the stroke in percent, so the stylesheet draws
|
|
10
|
+
* and rotates each circle from its share and its offset alone – and the load-in
|
|
11
|
+
* keyframes can grow every segment out of 12 o'clock.
|
|
13
12
|
*/
|
|
14
|
-
var fillStyle = (
|
|
15
|
-
"--donut-chart--
|
|
16
|
-
"--donut-chart--
|
|
13
|
+
var fillStyle = (percent, offsetPercent) => ({
|
|
14
|
+
"--donut-chart--percent": percent,
|
|
15
|
+
"--donut-chart--offset": offsetPercent
|
|
17
16
|
});
|
|
18
17
|
var DonutChartFill = (props) => {
|
|
19
18
|
const { center, value = 0, radius, segments, maxValue } = props;
|
|
20
|
-
const circumference = 2 * radius * Math.PI;
|
|
21
19
|
const percent = 100 / maxValue * value;
|
|
22
20
|
if (!segments) return /* @__PURE__ */ jsx("circle", {
|
|
23
21
|
className: DonutChart_module_default.fill,
|
|
24
22
|
cx: center,
|
|
25
23
|
cy: center,
|
|
26
24
|
r: radius,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
style: fillStyle(-90, circumference)
|
|
25
|
+
pathLength: 100,
|
|
26
|
+
style: fillStyle(percent, 0)
|
|
30
27
|
});
|
|
31
|
-
let
|
|
28
|
+
let offsetPercent = 0;
|
|
32
29
|
return segments.map((s, i) => {
|
|
33
30
|
const segmentPercent = 100 / maxValue * s.value;
|
|
34
|
-
const
|
|
35
|
-
|
|
31
|
+
const currentOffsetPercent = offsetPercent;
|
|
32
|
+
offsetPercent = offsetPercent + segmentPercent;
|
|
36
33
|
const color = !s.color || isCategoricalColor(s.color) ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})` : s.color;
|
|
37
34
|
return /* @__PURE__ */ jsx("circle", {
|
|
38
35
|
className: DonutChart_module_default.segment,
|
|
39
36
|
cx: center,
|
|
40
37
|
cy: center,
|
|
41
38
|
r: radius,
|
|
42
|
-
|
|
43
|
-
strokeDashoffset: circumference - segmentPercent / 100 * circumference,
|
|
39
|
+
pathLength: 100,
|
|
44
40
|
stroke: color,
|
|
45
|
-
style: fillStyle(
|
|
41
|
+
style: fillStyle(segmentPercent, currentOffsetPercent)
|
|
46
42
|
}, i);
|
|
47
43
|
});
|
|
48
44
|
};
|
package/dist/js/packages/components/src/components/DonutChart/components/DonutChartFill.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChartFill.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { CSSProperties, FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"DonutChartFill.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { CSSProperties, FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\n/**\n * `pathLength=\"100\"` measures the stroke in percent, so the stylesheet draws\n * and rotates each circle from its share and its offset alone – and the load-in\n * keyframes can grow every segment out of 12 o'clock.\n */\nconst fillStyle = (percent: number, offsetPercent: number): CSSProperties => ({\n \"--donut-chart--percent\": percent,\n \"--donut-chart--offset\": offsetPercent,\n});\n\nexport const DonutChartFill: FC<Props> = (props) => {\n const { center, value = 0, radius, segments, maxValue } = props;\n\n const percent = (100 / maxValue) * value;\n\n if (!segments) {\n return (\n <circle\n className={styles.fill}\n cx={center}\n cy={center}\n r={radius}\n pathLength={100}\n style={fillStyle(percent, 0)}\n />\n );\n }\n\n let offsetPercent = 0;\n\n return segments.map((s, i) => {\n const segmentPercent = (100 / maxValue) * s.value;\n\n const currentOffsetPercent = offsetPercent;\n\n offsetPercent = offsetPercent + segmentPercent;\n\n const color =\n !s.color || isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n : s.color;\n\n // Index keys: a segment added after mount animates alone out of 12 o'clock,\n // over the segments already there.\n return (\n <circle\n key={i}\n className={styles.segment}\n cx={center}\n cy={center}\n r={radius}\n pathLength={100}\n stroke={color}\n style={fillStyle(segmentPercent, currentOffsetPercent)}\n />\n );\n });\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,aAAa,SAAiB,mBAA0C;CAC5E,0BAA0B;CAC1B,yBAAyB;AAC3B;AAEA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAAa;CAE1D,MAAM,UAAW,MAAM,WAAY;CAEnC,IAAI,CAAC,UACH,OACE,oBAAC,UAAD;EACE,WAAW,0BAAO;EAClB,IAAI;EACJ,IAAI;EACJ,GAAG;EACH,YAAY;EACZ,OAAO,UAAU,SAAS,CAAC;CAC5B,CAAA;CAIL,IAAI,gBAAgB;CAEpB,OAAO,SAAS,KAAK,GAAG,MAAM;EAC5B,MAAM,iBAAkB,MAAM,WAAY,EAAE;EAE5C,MAAM,uBAAuB;EAE7B,gBAAgB,gBAAgB;EAEhC,MAAM,QACJ,CAAC,EAAE,SAAS,mBAAmB,EAAE,KAAK,IAClC,6BAA6B,EAAE,SAAS,2BAA2B,CAAC,EAAE,KACtE,EAAE;EAIR,OACE,oBAAC,UAAD;GAEE,WAAW,0BAAO;GAClB,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,YAAY;GACZ,QAAQ;GACR,OAAO,UAAU,gBAAgB,oBAAoB;EACtD,GARM,CAQN;CAEL,CAAC;AACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.mjs","names":[],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\n\nexport interface MessageProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n PropsWithElementType<\"article\" | \"li\"> {\n /** Determines the color and orientation of the message. @default \"responder\" */\n type?: \"responder\" | \"sender\";\n /** A custom background color of the message as a CSS color value. */\n color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const {\n type = \"responder\",\n children,\n className,\n color,\n elementType = \"article\",\n } = props;\n\n const Element = elementType;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style = color\n ?
|
|
1
|
+
{"version":3,"file":"Message.mjs","names":[],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\n\nexport interface MessageProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n PropsWithElementType<\"article\" | \"li\"> {\n /** Determines the color and orientation of the message. @default \"responder\" */\n type?: \"responder\" | \"sender\";\n /** A custom background color of the message as a CSS color value. */\n color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const {\n type = \"responder\",\n children,\n className,\n color,\n elementType = \"article\",\n } = props;\n\n const Element = elementType;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style: CSSProperties | undefined = color\n ? { \"--message-background\": color }\n : undefined;\n\n const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n const senderContext: PropsContext[\"Combine\"] = {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n Avatar: { Initials: { \"aria-hidden\": true } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tipBorder} aria-hidden />\n <div className={styles.tip} aria-hidden />\n {props.children}\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n \"aria-label\": formatter.format(\"options\"),\n },\n },\n Text: { className: styles.date },\n Combine: senderContext,\n // Deprecated alias of Combine — keep it arranged the same way.\n Align: senderContext,\n children: dynamic((props) => (\n <>\n <Aria.VisuallyHidden>\n {formatter.format(\"headerLabel\")}\n </Aria.VisuallyHidden>\n {props.children}\n </>\n )),\n },\n\n Button: {\n size: \"s\",\n className: styles.action,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n className: styles.actionGroup,\n Button: {\n className: styles.actionGroupAction,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} style={style}>\n {children}\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAK,uBAAO,SAAS,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4B,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAW,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAA,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAW,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAW,uBAAO;MAAK,eAAA;KAAa,CAAA;KACxC,MAAM;IACP,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAW,uBAAO;GAClB,QAAQ;IACN,WAAW,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAW,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAW,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAW,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAW,uBAAO;GAClB,QAAQ,EACN,WAAW,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
import ComplexityIndicator_module_default from "./ComplexityIndicator.module.mjs";
|
|
4
4
|
import getStatusFromPolicyValidationResult from "../../lib/getStatusFromPolicyValidationResult.mjs";
|
|
5
5
|
import clsx from "clsx";
|
|
6
|
-
import "react";
|
|
7
6
|
import { jsx } from "react/jsx-runtime";
|
|
8
7
|
//#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
|
|
9
8
|
/** @internal */
|
|
@@ -38,7 +37,7 @@ var ComplexityIndicator = (props) => {
|
|
|
38
37
|
"data-complexity-percentage": totalFulfilledPercentage,
|
|
39
38
|
className: clsx(ComplexityIndicator_module_default.complexityIndicator, { [ComplexityIndicator_module_default.hide]: !complexityVisible }),
|
|
40
39
|
children: /* @__PURE__ */ jsx("div", {
|
|
41
|
-
style: {
|
|
40
|
+
style: { "--complexity-indicator--percentage": totalFulfilledPercentage },
|
|
42
41
|
className: percentageClassName
|
|
43
42
|
})
|
|
44
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n isLoading: boolean;\n isEmptyValue: boolean;\n validationResultState: StateFromLatestPolicyValidationResult;\n policyValidationResult: ResolvedPolicyValidationResult;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n const {\n policyValidationResult,\n validationResultState,\n isLoading,\n isEmptyValue,\n } = props;\n\n let complexityVisible;\n let status: ComplexityStatus;\n\n const complexityScore = policyValidationResult?.complexity;\n const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n const complexityFulfilledPercentage = complexityScore\n ? Math.min(\n (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n 100,\n )\n : 0;\n\n const validRules = rulesResults.filter((r) => r.isValid).length;\n const rulesFulfilledPercentage =\n rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n let totalFulfilledPercentage = Math.round(\n complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n );\n\n if (isEmptyValue) {\n complexityVisible = false;\n totalFulfilledPercentage = 0;\n status = \"success\";\n } else {\n complexityVisible = true;\n status = getStatusFromPolicyValidationResult(\n validationResultState?.isValid ?? policyValidationResult.isValid,\n policyValidationResult,\n );\n }\n\n const complexityFulfilled = totalFulfilledPercentage === 100;\n\n const percentageClassName = clsx(\n styles.bar,\n !isEmptyValue &&\n status !== \"unavailable\" &&\n styles[`bar-background-status-${status}`],\n {\n [styles.loading as string]: isLoading,\n [styles.running as string]: !complexityFulfilled,\n },\n );\n\n return (\n <div\n aria-hidden={true}\n data-container=\"complexity\"\n data-complexity-visible={complexityVisible}\n data-complexity-status={status}\n data-complexity-percentage={totalFulfilledPercentage}\n className={clsx(styles.complexityIndicator, {\n [styles.hide as string]: !complexityVisible,\n })}\n >\n <div\n style={{\n \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n }}\n className={percentageClassName}\n />\n </div>\n );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAkBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,iBACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,oCACP,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACF;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1B,mCAAO,KACP,CAAC,gBACC,WAAW,iBACX,mCAAO,yBAAyB,WAClC;GACG,mCAAO,UAAoB;GAC3B,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAK,mCAAO,qBAAqB,GACzC,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}
|
|
@@ -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 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 rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0.8) 20%,\n rgba(255, 255, 255, 0) 40%\n );\n animation: shimmer 1s infinite;\n content: \"\";\n }\n }\n }\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}\n"],"mappings":""}
|
|
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 rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0.8) 20%,\n rgba(255, 255, 255, 0) 40%\n );\n animation: shimmer 1s infinite;\n content: \"\";\n }\n }\n }\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widthStyle.mjs","names":[],"sources":["../../../../../../../src/components/Popover/widthStyle.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * The inline style that carries a popover's `width`.\n *\n * A popover's content wrapper caps itself at a component default —\n * `--coach-mark--max-width`, `--contextual-help--max-width`. That cap shapes a\n * popover nobody sized, but it also outranks a `width`: the box widens while\n * the content stays at the cap, leaving empty background beside it. The\n * wrappers therefore read their cap through `--popover-content-max-width`, and\n * a given width unsets it.\n *\n * The cap on the popover itself stays — that one is the gap to the viewport\n * edge, not a default.\n *\n * @internal\n */\nexport const popoverWidthStyle = (\n width: string | number | undefined,\n): CSSProperties =>\n width === undefined
|
|
1
|
+
{"version":3,"file":"widthStyle.mjs","names":[],"sources":["../../../../../../../src/components/Popover/widthStyle.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * The inline style that carries a popover's `width`.\n *\n * A popover's content wrapper caps itself at a component default —\n * `--coach-mark--max-width`, `--contextual-help--max-width`. That cap shapes a\n * popover nobody sized, but it also outranks a `width`: the box widens while\n * the content stays at the cap, leaving empty background beside it. The\n * wrappers therefore read their cap through `--popover-content-max-width`, and\n * a given width unsets it.\n *\n * The cap on the popover itself stays — that one is the gap to the viewport\n * edge, not a default.\n *\n * @internal\n */\nexport const popoverWidthStyle = (\n width: string | number | undefined,\n): CSSProperties =>\n width === undefined ? {} : { width, \"--popover-content-max-width\": \"none\" };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAa,qBACX,UAEA,UAAU,KAAA,IAAY,CAAC,IAAI;CAAE;CAAO,+BAA+B;AAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface ProgressBarProps\n extends\n PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n FlowComponentProps {\n /** The status the progress bar is colored by. */\n status?: Exclude<Status, \"unavailable\">;\n /** Whether the max value should be displayed. */\n showMaxValue?: boolean;\n /** The size variant of the progress bar. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Divides the fill of the progress bar into segments */\n segments?: {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n }[];\n /**\n * Whether the legend component is shown when segments are used. @default:\n * true\n */\n showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar
|
|
1
|
+
{"version":3,"file":"ProgressBar.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface ProgressBarProps\n extends\n PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n FlowComponentProps {\n /** The status the progress bar is colored by. */\n status?: Exclude<Status, \"unavailable\">;\n /** Whether the max value should be displayed. */\n showMaxValue?: boolean;\n /** The size variant of the progress bar. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Divides the fill of the progress bar into segments */\n segments?: {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n }[];\n /**\n * Whether the legend component is shown when segments are used. @default:\n * true\n */\n showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar percentage={percentage} segments={segments} />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,2BAAO,aACP,2BAAO,QAAQ,SACf,2BAAO,SACP,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAW,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EAEF,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}
|
|
@@ -7,6 +7,7 @@ var label = "flow--progress-bar--label";
|
|
|
7
7
|
var value = "flow--progress-bar--value";
|
|
8
8
|
var bar = "flow--progress-bar--bar";
|
|
9
9
|
var fill = "flow--progress-bar--fill";
|
|
10
|
+
var segment = "flow--progress-bar--segment";
|
|
10
11
|
var info = "flow--progress-bar--info";
|
|
11
12
|
var success = "flow--progress-bar--success";
|
|
12
13
|
var danger = "flow--progress-bar--danger";
|
|
@@ -19,6 +20,7 @@ var ProgressBar_module_default = {
|
|
|
19
20
|
bar,
|
|
20
21
|
fill,
|
|
21
22
|
"progress-bar-fill": "flow--progress-bar--progress-bar-fill",
|
|
23
|
+
segment,
|
|
22
24
|
"size-s": "flow--progress-bar--size-s",
|
|
23
25
|
"size-m": "flow--progress-bar--size-m",
|
|
24
26
|
"size-l": "flow--progress-bar--size-l",
|
|
@@ -28,6 +30,6 @@ var ProgressBar_module_default = {
|
|
|
28
30
|
warning
|
|
29
31
|
};
|
|
30
32
|
//#endregion
|
|
31
|
-
export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, success, value, warning };
|
|
33
|
+
export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, success, value, warning };
|
|
32
34
|
|
|
33
35
|
//# sourceMappingURL=ProgressBar.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements */\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n /* Size */\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n /* Sizes */\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n /* Variants */\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements */\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n width: calc(var(--progress-bar--percentage) * 1%);\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n /* Segments share the fill in proportion to their values. */\n .segment {\n flex: var(--progress-bar--segment-value) 1 0;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n /* Size */\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n /* Sizes */\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n /* Variants */\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs
CHANGED
|
@@ -3,19 +3,18 @@
|
|
|
3
3
|
import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
|
|
4
4
|
import ProgressBar_module_default from "../ProgressBar.module.mjs";
|
|
5
5
|
import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
|
|
6
|
-
import "react";
|
|
7
6
|
import { jsx } from "react/jsx-runtime";
|
|
8
7
|
//#region src/components/ProgressBar/components/ProgressBarBar.tsx
|
|
9
8
|
var ProgressBarBar = (props) => {
|
|
10
|
-
const { segments,
|
|
11
|
-
const segmentFill =
|
|
9
|
+
const { segments, percentage } = props;
|
|
10
|
+
const segmentFill = segments && segments.length > 0 ? segments.map((s, i) => {
|
|
12
11
|
const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
|
|
13
12
|
return /* @__PURE__ */ jsx("div", {
|
|
14
13
|
"aria-hidden": true,
|
|
14
|
+
className: ProgressBar_module_default.segment,
|
|
15
15
|
style: {
|
|
16
16
|
backgroundColor,
|
|
17
|
-
|
|
18
|
-
height: "100%"
|
|
17
|
+
"--progress-bar--segment-value": s.value
|
|
19
18
|
}
|
|
20
19
|
}, s.title);
|
|
21
20
|
}) : null;
|
|
@@ -23,7 +22,7 @@ var ProgressBarBar = (props) => {
|
|
|
23
22
|
className: ProgressBar_module_default.bar,
|
|
24
23
|
children: /* @__PURE__ */ jsx("div", {
|
|
25
24
|
className: ProgressBar_module_default.fill,
|
|
26
|
-
style: {
|
|
25
|
+
style: { "--progress-bar--percentage": percentage },
|
|
27
26
|
children: segmentFill
|
|
28
27
|
})
|
|
29
28
|
});
|
package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarBar.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport {
|
|
1
|
+
{"version":3,"file":"ProgressBarBar.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, percentage } = props;\n\n const segmentFill =\n segments && segments.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n className={styles.segment}\n style={{\n backgroundColor,\n \"--progress-bar--segment-value\": s.value,\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div\n className={styles.fill}\n style={{ \"--progress-bar--percentage\": percentage }}\n >\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAEjC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAW,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAW,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAW,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}
|
|
@@ -36,9 +36,6 @@ var TextArea = flowComponent("TextArea", (props) => {
|
|
|
36
36
|
maxCount: props.maxLength ?? 0
|
|
37
37
|
});
|
|
38
38
|
const localRef = useObjectRef(ref);
|
|
39
|
-
const getHeight = (rows) => {
|
|
40
|
-
return `calc(var(--line-height-m) * ${rows} + (var(--form-control--padding-y) * 2))`;
|
|
41
|
-
};
|
|
42
39
|
const [resized, setResized] = useState(false);
|
|
43
40
|
const autoResizable = rows !== autoResizeMaxRows;
|
|
44
41
|
const verticallyResizable = allowResize && (!autoResizable || autoResizable && resized);
|
|
@@ -98,9 +95,8 @@ var TextArea = flowComponent("TextArea", (props) => {
|
|
|
98
95
|
className: inputClassName,
|
|
99
96
|
ref: localRef,
|
|
100
97
|
style: {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
|
|
98
|
+
"--text-area--rows": rows,
|
|
99
|
+
"--text-area--max-rows": verticallyResizable ? void 0 : autoResizeMaxRows
|
|
104
100
|
}
|
|
105
101
|
}),
|
|
106
102
|
showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n type PropsWithChildren,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n /**\n * Whether the text area should grow if its content gets longer than its\n * initial height.\n */\n autoResizeMaxRows?: number;\n /** Allows the user to manually resize the textArea horizontally. */\n allowResize?: boolean | \"horizontal\" | \"vertical\";\n /** @deprecated Use `allowResize` instead. */\n allowHorizontalResize?: boolean;\n /** @deprecated Use `allowResize` instead. */\n allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n value,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n // Derived, so that a value the field never saw typed is counted as well.\n const charactersCountDescription = translation.format(\"characters\", {\n count: value.length,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const
|
|
1
|
+
{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n type PropsWithChildren,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /** Whether a character count should be displayed inside the field description. */\n showCharacterCount?: boolean;\n /**\n * Whether the text area should grow if its content gets longer than its\n * initial height.\n */\n autoResizeMaxRows?: number;\n /** Allows the user to manually resize the textArea horizontally. */\n allowResize?: boolean | \"horizontal\" | \"vertical\";\n /** @deprecated Use `allowResize` instead. */\n allowHorizontalResize?: boolean;\n /** @deprecated Use `allowResize` instead. */\n allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n value,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n // Derived, so that a value the field never saw typed is counted as well.\n const charactersCountDescription = translation.format(\"characters\", {\n count: value.length,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable || (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking || resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n /*\n * The height depends on the rendered content, so it cannot be a style. It is\n * synced to the value instead of to the `change` event, because a value the\n * field never saw typed — an initial value, or a draft loaded into a\n * controlled field — has to resize it just the same.\n */\n useLayoutEffect(() => {\n const textArea = localRef.current;\n if (!textArea || !autoResizable || verticallyResizable) {\n return;\n }\n // https://stackoverflow.com/a/60795884\n textArea.style.height = \"0px\";\n // + 2 to add border height\n textArea.style.height = `${textArea.scrollHeight + 2}px`;\n }, [value, autoResizable, verticallyResizable]);\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n value={value}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n style={{\n \"--text-area--rows\": rows,\n \"--text-area--max-rows\": verticallyResizable\n ? undefined\n : autoResizeMaxRows,\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4B,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,qBAAqB;MACrB,yBAAyB,sBACrB,KAAA,IACA;KACN;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.module.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.input {\n @include scrollbar.scrollbar;\n\n resize: none;\n min-width: 100%;\n\n &.horizontalResize {\n resize: inline;\n }\n\n &.verticalResize {\n resize: block;\n }\n\n &.resize {\n resize: both;\n }\n\n @include formControl.formControl();\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TextArea.module.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n@function rows-height($rows) {\n $padding: calc(var(--form-control--padding-y) * 2);\n\n @return calc(var(--line-height-m) * #{$rows} + #{$padding});\n}\n\n.input {\n @include scrollbar.scrollbar;\n\n resize: none;\n min-width: 100%;\n min-height: rows-height(var(--text-area--rows));\n\n /* Unset while the user may resize vertically, which drops the cap. */\n max-height: rows-height(var(--text-area--max-rows));\n\n &[data-readonly] {\n caret-color: transparent;\n }\n\n &.horizontalResize {\n resize: inline;\n }\n\n &.verticalResize {\n resize: block;\n }\n\n &.resize {\n resize: both;\n }\n\n @include formControl.formControl();\n}\n"],"mappings":""}
|