@elliemae/ds-ribbon 3.80.0-next.20 → 3.80.0-next.22

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.
@@ -47,6 +47,7 @@ const DSRibbonCard = (props) => {
47
47
  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
48
48
  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
49
49
  const labelId = `${instanceUid}-label`;
50
+ const labelledBy = label ? labelId : void 0;
50
51
  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
51
52
  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
52
53
  if (additionalValue)
@@ -66,7 +67,8 @@ const DSRibbonCard = (props) => {
66
67
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67
68
  import_styled.StyledBlockValue,
68
69
  {
69
- "aria-labelledby": label ? labelId : void 0,
70
+ role: labelledBy ? "group" : void 0,
71
+ "aria-labelledby": labelledBy,
70
72
  getOwnerProps,
71
73
  getOwnerPropsArguments,
72
74
  children: value
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n aria-labelledby={label ? labelId : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBZ;AAlBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBZ;AAnBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,aAAa,UAAU;AAAA,YAC7B,mBAAiB;AAAA,YACjB;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
@@ -74,6 +74,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
74
74
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
75
  import_styled.StyledBlockValue,
76
76
  {
77
+ role: labelledBy ? "group" : void 0,
77
78
  "aria-labelledby": labelledBy,
78
79
  getOwnerProps,
79
80
  getOwnerPropsArguments,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AAnCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCf;AAjCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,aAAa,UAAU;AAAA,sBAC7B,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -67,27 +67,13 @@ const DSRibbonCardWithAdditionalValue = (props) => {
67
67
  {
68
68
  center,
69
69
  className: "ribbon-block-col",
70
+ role: labelledBy ? "group" : void 0,
71
+ "aria-labelledby": labelledBy,
70
72
  getOwnerProps,
71
73
  getOwnerPropsArguments,
72
74
  children: [
73
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
- import_styled.StyledBlockValue,
75
- {
76
- "aria-labelledby": labelledBy,
77
- getOwnerProps,
78
- getOwnerPropsArguments,
79
- children: value
80
- }
81
- ),
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
83
- import_styled.StyledBlockValue,
84
- {
85
- "aria-labelledby": labelledBy,
86
- getOwnerProps,
87
- getOwnerPropsArguments,
88
- children: additionalValue
89
- }
90
- )
75
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
91
77
  ]
92
78
  }
93
79
  )
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // One label, two values: it names both.\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCf;AAjCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCf;AAhCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV,MAAM,aAAa,UAAU;AAAA,gBAC7B,mBAAiB;AAAA,gBACjB;AAAA,gBACA;AAAA,gBAEA;AAAA,8DAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,4CAAC,kCAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -13,6 +13,7 @@ const DSRibbonCard = (props) => {
13
13
  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
14
14
  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
15
15
  const labelId = `${instanceUid}-label`;
16
+ const labelledBy = label ? labelId : void 0;
16
17
  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
17
18
  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
18
19
  if (additionalValue)
@@ -32,7 +33,8 @@ const DSRibbonCard = (props) => {
32
33
  /* @__PURE__ */ jsx(
33
34
  StyledBlockValue,
34
35
  {
35
- "aria-labelledby": label ? labelId : void 0,
36
+ role: labelledBy ? "group" : void 0,
37
+ "aria-labelledby": labelledBy,
36
38
  getOwnerProps,
37
39
  getOwnerPropsArguments,
38
40
  children: value
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n aria-labelledby={label ? labelId : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmBZ,cAYL,YAZK;AAlBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n const ribbonCardConfig = useRibbonCard(props);\n const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n if (additionalValue)\n return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n if (additionalLabel)\n return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockValue\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoBZ,cAYL,YAZK;AAnBX,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAA6B,mCAAmC;AAChE,SAAS,aAAa,gBAAgB,wBAAwB;AAC9D,SAAS,uCAAuC;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,cAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,oBAAC,mCAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,+BAAC,kBAAe,QAAgB,eAA8B,wBAC5D;AAAA,4BAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,aAAa,UAAU;AAAA,YAC7B,mBAAiB;AAAA,YACjB;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
@@ -41,6 +41,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
41
41
  /* @__PURE__ */ jsx(
42
42
  StyledBlockValue,
43
43
  {
44
+ role: labelledBy ? "group" : void 0,
44
45
  "aria-labelledby": labelledBy,
45
46
  getOwnerProps,
46
47
  getOwnerPropsArguments,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmCf,cACA,YADA;AAnCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const labelId = `${instanceUid}-label`;\n const additionalLabelId = `${instanceUid}-additional-label`;\n const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValueLabel\n id={additionalLabelId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalLabel}\n </StyledBlockValueLabel>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACiCf,cACA,YADA;AAjCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,kBAAkB,6BAA6B;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,aAAa,UAAU;AAAA,sBAC7B,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -34,27 +34,13 @@ const DSRibbonCardWithAdditionalValue = (props) => {
34
34
  {
35
35
  center,
36
36
  className: "ribbon-block-col",
37
+ role: labelledBy ? "group" : void 0,
38
+ "aria-labelledby": labelledBy,
37
39
  getOwnerProps,
38
40
  getOwnerPropsArguments,
39
41
  children: [
40
- /* @__PURE__ */ jsx(
41
- StyledBlockValue,
42
- {
43
- "aria-labelledby": labelledBy,
44
- getOwnerProps,
45
- getOwnerPropsArguments,
46
- children: value
47
- }
48
- ),
49
- /* @__PURE__ */ jsx(
50
- StyledBlockValue,
51
- {
52
- "aria-labelledby": labelledBy,
53
- getOwnerProps,
54
- getOwnerPropsArguments,
55
- children: additionalValue
56
- }
57
- )
42
+ /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
43
+ /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
58
44
  ]
59
45
  }
60
46
  )
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n // One label, two values: it names both.\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledBlockValue>\n <StyledBlockValue\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiCf,cACA,YADA;AAjCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n const {\n getOwnerProps,\n ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n } = props;\n const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n const labelId = `${instanceUid}-label`;\n const labelledBy = label ? labelId : undefined;\n return (\n <StyledBlock\n {...containerProps}\n {...globalProps}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockRow\n className=\"ribbon-block-row\"\n style={{ alignItems: 'flex-start' }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n <StyledBlockCol\n center={center}\n className=\"ribbon-block-col\"\n role={labelledBy ? 'group' : undefined}\n aria-labelledby={labelledBy}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n </StyledBlockValue>\n <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {additionalValue}\n </StyledBlockValue>\n </StyledBlockCol>\n </StyledBlockRow>\n </StyledBlock>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgCf,cACA,YADA;AAhCR,OAAOA,YAAW;AAElB,SAAS,sBAAsB;AAE/B,SAAS,aAAa,gBAAgB,gBAAgB,wBAAwB;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,kBAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV,MAAM,aAAa,UAAU;AAAA,gBAC7B,mBAAiB;AAAA,gBACjB;AAAA,gBACA;AAAA,gBAEA;AAAA,sCAAC,oBAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,oBAAC,oBAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-ribbon",
3
- "version": "3.80.0-next.20",
3
+ "version": "3.80.0-next.22",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Ribbon",
6
6
  "files": [
@@ -36,13 +36,13 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-props-helpers": "3.80.0-next.20",
40
- "@elliemae/ds-system": "3.80.0-next.20"
39
+ "@elliemae/ds-props-helpers": "3.80.0-next.22",
40
+ "@elliemae/ds-system": "3.80.0-next.22"
41
41
  },
42
42
  "devDependencies": {
43
- "@elliemae/ds-monorepo-devops": "3.80.0-next.20",
44
- "@elliemae/ds-test-utils": "3.80.0-next.20",
45
- "@elliemae/ds-typescript-helpers": "3.80.0-next.20",
43
+ "@elliemae/ds-monorepo-devops": "3.80.0-next.22",
44
+ "@elliemae/ds-test-utils": "3.80.0-next.22",
45
+ "@elliemae/ds-typescript-helpers": "3.80.0-next.22",
46
46
  "jest": "^30.0.0",
47
47
  "styled-components": "~5.3.11"
48
48
  },