@mittwald/flow-react-components 0.2.0-alpha.247 → 0.2.0-alpha.249
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/CHANGELOG.md +13 -0
- package/dist/assets/doc-properties.json +167 -148
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs +1 -4
- package/dist/js/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs.map +1 -1
- package/dist/js/components/src/components/ProgressBar/ProgressBar.mjs +5 -3
- package/dist/js/components/src/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarLegend.mjs +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarLegend.mjs.map +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarValue.mjs +11 -3
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarValue.mjs.map +1 -1
- package/dist/types/components/MenuItem/components/MenuItemContent/MenuItemContent.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.d.ts +1 -0
- package/dist/types/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/components/ProgressBarValue.d.ts +3 -2
- package/dist/types/components/ProgressBar/components/ProgressBarValue.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/stories/Default.stories.d.ts +2 -0
- package/dist/types/components/ProgressBar/stories/Default.stories.d.ts.map +1 -1
- package/package.json +4 -4
package/dist/js/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs
CHANGED
|
@@ -26,9 +26,6 @@ const MenuItemContent = (props) => {
|
|
|
26
26
|
Icon: {
|
|
27
27
|
className: styles.icon
|
|
28
28
|
},
|
|
29
|
-
Text: {
|
|
30
|
-
className: styles.text
|
|
31
|
-
},
|
|
32
29
|
Avatar: {
|
|
33
30
|
className: styles.avatar
|
|
34
31
|
}
|
|
@@ -41,7 +38,7 @@ const MenuItemContent = (props) => {
|
|
|
41
38
|
className: clsx(styles.controlIcon, styles.switch)
|
|
42
39
|
}
|
|
43
40
|
};
|
|
44
|
-
const selectionIcon = selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch"
|
|
41
|
+
const selectionIcon = selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch" ? /* @__PURE__ */ jsx(Switch, { isReadOnly: true, isSelected }) : selectionMode === "single" && isSelected ? /* @__PURE__ */ jsx(IconRadioOn, {}) : selectionMode === "single" && !isSelected ? /* @__PURE__ */ jsx(IconRadioOff, {}) : selectionMode === "multiple" && isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, {}) : /* @__PURE__ */ jsx(IconCheckboxEmpty, {});
|
|
45
42
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
46
43
|
/* @__PURE__ */ jsx(PropsContextProvider, { props: controlIconPropsContext, children: selectionIcon }),
|
|
47
44
|
/* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemContent.mjs","sources":["../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n
|
|
1
|
+
{"version":3,"file":"MenuItemContent.mjs","sources":["../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n Avatar: {\n className: styles.avatar,\n },\n };\n\n const controlIconPropsContext: PropsContext = {\n Icon: {\n className: clsx(styles.controlIcon, styles.icon),\n },\n Switch: {\n className: clsx(styles.controlIcon, styles.switch),\n },\n };\n\n const selectionIcon =\n selectionMode === \"none\" ||\n selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n <Switch isReadOnly isSelected={isSelected} />\n ) : selectionMode === \"single\" && isSelected ? (\n <IconRadioOn />\n ) : selectionMode === \"single\" && !isSelected ? (\n <IconRadioOff />\n ) : selectionMode === \"multiple\" && isSelected ? (\n <IconCheckboxChecked />\n ) : (\n <IconCheckboxEmpty />\n );\n\n return (\n <>\n <PropsContextProvider props={controlIconPropsContext}>\n {selectionIcon}\n </PropsContextProvider>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBa,MAAA,eAAA,GAA6B,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAmB,GAAA,SAAA;AAAA,IACnB;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,uBAAwC,GAAA;AAAA,IAC5C,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,IAAI;AAAA,KACjD;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,MAAM;AAAA;AACnD,GACF;AAEA,EAAA,MAAM,aACJ,GAAA,aAAA,KAAkB,MAClB,IAAA,gBAAA,KAAqB,eAAe,IAAO,GAAA,gBAAA,KAAqB,QAC9D,mBAAA,GAAA,CAAC,UAAO,UAAU,EAAA,IAAA,EAAC,UAAwB,EAAA,CAAA,GACzC,kBAAkB,QAAY,IAAA,UAAA,mBAC/B,GAAA,CAAA,WAAA,EAAA,EAAY,CACX,GAAA,aAAA,KAAkB,QAAY,IAAA,CAAC,6BAChC,GAAA,CAAA,YAAA,EAAA,EAAa,CACZ,GAAA,aAAA,KAAkB,cAAc,UAClC,mBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,CAAA,uBAEpB,iBAAkB,EAAA,EAAA,CAAA;AAGvB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,uBAAA,EAC1B,QACH,EAAA,aAAA,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -25,6 +25,7 @@ const ProgressBar = flowComponent("ProgressBar", (props) => {
|
|
|
25
25
|
formatOptions,
|
|
26
26
|
showLegend = true,
|
|
27
27
|
maxValue,
|
|
28
|
+
valueLabel,
|
|
28
29
|
...rest
|
|
29
30
|
} = props;
|
|
30
31
|
const rootClassName = clsx(
|
|
@@ -48,15 +49,16 @@ const ProgressBar = flowComponent("ProgressBar", (props) => {
|
|
|
48
49
|
formatOptions,
|
|
49
50
|
maxValue,
|
|
50
51
|
...rest,
|
|
51
|
-
children: ({ percentage
|
|
52
|
+
children: ({ percentage }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
|
|
52
53
|
children,
|
|
53
54
|
/* @__PURE__ */ jsx(
|
|
54
55
|
ProgressBarValue,
|
|
55
56
|
{
|
|
56
57
|
showMaxValue,
|
|
57
58
|
maxValue,
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
formatOptions,
|
|
60
|
+
value: segmentsTotalValue ?? value,
|
|
61
|
+
valueLabel
|
|
60
62
|
}
|
|
61
63
|
),
|
|
62
64
|
/* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\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 { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ProgressBarProps\n extends PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n PropsWithStatus,\n FlowComponentProps {\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?: {
|
|
1
|
+
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\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 { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ProgressBarProps\n extends PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n PropsWithStatus,\n FlowComponentProps {\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?: CategoricalColors;\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/**\n * @flr-generate all\n * @flr-clear-props-context\n */\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 className,\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\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 <>\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\n percentage={percentage}\n segmentsTotalValue={segmentsTotalValue}\n segments={segments}\n />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n </>\n );\n});\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2CO,MAAM,WAAc,GAAA,aAAA,CAAc,aAAe,EAAA,CAAC,KAAU,KAAA;AACjE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,YAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAa,GAAA,IAAA;AAAA,IACb,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,SAAA;AAAA,IACA,MAAO,CAAA,WAAA;AAAA,IACP,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IACrB,OAAO,MAAM;AAAA,GACf;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,qBAAqB,QACvB,GAAA,QAAA,CAAS,GAAI,CAAA,CAAC,MAAM,CAAE,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,CAAC,CAAG,EAAA,CAAA,KAAM,CAAI,GAAA,CAAA,EAAG,CAAC,CACtD,GAAA,MAAA;AAEJ,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,WAAA;AAAA,IAAL;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,OAAO,kBAAsB,IAAA,KAAA;AAAA,MAC7B,aAAA;AAAA,MACA,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,WAAC,EAAE,UAAA,uBACD,IAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAED,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,YAAA;AAAA,YACA,QAAA;AAAA,YACA,aAAA;AAAA,YACA,OAAO,kBAAsB,IAAA,KAAA;AAAA,YAC7B;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AACF,OACF,EAAA;AAAA;AAAA,GAGN,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -18,7 +18,7 @@ const ProgressBarLegend = (props) => {
|
|
|
18
18
|
LegendItem,
|
|
19
19
|
{
|
|
20
20
|
color: s.color ?? getCategoricalColorByIndex(i),
|
|
21
|
-
children: `${s.title} (${formatOptions ? formatter.format(s.value) : `${s.value} %`})`
|
|
21
|
+
children: `${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`
|
|
22
22
|
}
|
|
23
23
|
)) });
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${formatOptions ? formatter.format(s.value) : `${s.value} %`})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAA;AAAA,MAC9C,QAAG,EAAA,CAAA,EAAA,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,
|
|
1
|
+
{"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAA;AAAA,MAC9C,QAAG,EAAA,CAAA,EAAA,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,EAAE,SAAc,KAAA,aAAA,GAAgB,SAAU,CAAA,MAAA,CAAO,EAAE,KAAK,CAAA,GAAI,CAAG,EAAA,CAAA,CAAE,KAAK,CAAK,EAAA,CAAA,CAAA,CAAA,CAAA;AAAA;AAAA,GAC7F,CACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -7,11 +7,19 @@ import { useNumberFormatter, useLocalizedStringFormatter } from 'react-aria';
|
|
|
7
7
|
import locales from '../../../../../_virtual/_.locale.json@162914df08c90e5e10d2f78b03d9d768.mjs';
|
|
8
8
|
|
|
9
9
|
const ProgressBarValue = (props) => {
|
|
10
|
-
const {
|
|
10
|
+
const {
|
|
11
|
+
showMaxValue,
|
|
12
|
+
maxValue,
|
|
13
|
+
value = 0,
|
|
14
|
+
formatOptions,
|
|
15
|
+
valueLabel
|
|
16
|
+
} = props;
|
|
11
17
|
const formatter = useNumberFormatter(formatOptions);
|
|
12
18
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
13
|
-
const maxValueText = showMaxValue
|
|
14
|
-
|
|
19
|
+
const maxValueText = !showMaxValue || !maxValue ? void 0 : formatOptions ? formatter.format(maxValue) : `${maxValue} %`;
|
|
20
|
+
const valueText = formatOptions ? formatter.format(value) : `${value} %`;
|
|
21
|
+
const textWithMaxValue = `${value} ${stringFormatter.format("progressBar.of")} ${maxValueText}`;
|
|
22
|
+
return /* @__PURE__ */ jsx("span", { className: styles.value, children: valueLabel ?? (maxValueText ? textWithMaxValue : valueText) });
|
|
15
23
|
};
|
|
16
24
|
|
|
17
25
|
export { ProgressBarValue };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n
|
|
1
|
+
{"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue || !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${value} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;AAea,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,YACJ,GAAA,CAAC,YAAgB,IAAA,CAAC,QACd,GAAA,MAAA,GACA,aACE,GAAA,SAAA,CAAU,MAAO,CAAA,QAAQ,CACzB,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,aAAgB,GAAA,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEpE,EAAM,MAAA,gBAAA,GAAmB,GAAG,KAAK,CAAA,CAAA,EAAI,gBAAgB,MAAO,CAAA,gBAAgB,CAAC,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA;AAE7F,EACE,uBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,OACrB,QAAe,EAAA,UAAA,KAAA,YAAA,GAAe,mBAAmB,SACpD,CAAA,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAanD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,iBAAiB;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"MenuItemContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAanD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,iBAAiB;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAkDrC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,gBACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,EAChE,eAAe,EACf,kBAAkB;IACpB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,gBACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,EAChE,eAAe,EACf,kBAAkB;IACpB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,iBAAiB,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,iFAuEtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { ProgressBarProps } from '..';
|
|
3
3
|
interface Props extends Pick<ProgressBarProps, "showMaxValue" | "maxValue" | "formatOptions"> {
|
|
4
|
-
|
|
4
|
+
value?: number;
|
|
5
|
+
valueLabel?: ReactNode;
|
|
5
6
|
}
|
|
6
7
|
export declare const ProgressBarValue: FC<Props>;
|
|
7
8
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarValue.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBarValue.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,UAAU,KACR,SAAQ,IAAI,CACV,gBAAgB,EAChB,cAAc,GAAG,UAAU,GAAG,eAAe,CAC9C;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA6BtC,CAAC"}
|
|
@@ -11,4 +11,6 @@ export declare const Small: Story;
|
|
|
11
11
|
export declare const WithSegments: Story;
|
|
12
12
|
export declare const WithSegmentsAndUnit: Story;
|
|
13
13
|
export declare const WithSegmentsAndWithoutLegend: Story;
|
|
14
|
+
export declare const WithValueHigherThanMaxValue: Story;
|
|
15
|
+
export declare const WithValueLabel: Story;
|
|
14
16
|
//# sourceMappingURL=Default.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAyBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAiB1C,CAAC"}
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAyBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAiB1C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAazC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.249",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@chakra-ui/live-region": "^2.1.0",
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "^2.1.4",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.249",
|
|
62
62
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
63
63
|
"@react-aria/form": "^3.0.16",
|
|
64
64
|
"@react-aria/utils": "^3.29.0",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"@faker-js/faker": "^9.8.0",
|
|
100
100
|
"@internationalized/date": "^3.8.1",
|
|
101
101
|
"@mittwald/flow-core": "",
|
|
102
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
102
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.249",
|
|
103
103
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
104
104
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
105
105
|
"@mittwald/typescript-config": "",
|
|
@@ -181,5 +181,5 @@
|
|
|
181
181
|
"optional": true
|
|
182
182
|
}
|
|
183
183
|
},
|
|
184
|
-
"gitHead": "
|
|
184
|
+
"gitHead": "7511196c4579fc5fd7da783977a35abc0c71077a"
|
|
185
185
|
}
|