@abgov/jsonforms-components 2.22.0 → 2.22.1

package/index.esm.js

@@ -5193,7 +5193,7 @@ let _$9 = t => t,
   _t2$6,
   _t3$5,
   _t4$5,
-  _t5$4,
+  _t5$5,
   _t6$3,
   _t7$2,
   _t8$2;
@@ -5220,7 +5220,7 @@ const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$9`
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
 `));
-const PageReviewValueCol = styled.td(_t5$4 || (_t5$4 = _$9`
+const PageReviewValueCol = styled.td(_t5$5 || (_t5$5 = _$9`
   width: 20%;
   text-align: left;
 `));
@@ -5461,7 +5461,8 @@ let _$8 = t => t,
   _t$8,
   _t2$5,
   _t3$4,
-  _t4$4;
+  _t4$4,
+  _t5$4;
 const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
@@ -5534,6 +5535,9 @@ const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
     color: ${0};
   }
 `), p => p.isSelected ? '#fff' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? '#fff' : 'var(--goa-color-interactive-hover) !important');
+const LabelItem = styled.span(_t5$4 || (_t5$4 = _$8`
+  font: var(--goa-dropdown-typography);
+`));
 
 const isValidKey = keyCode => {
   if (keyCode === SHIFT_KEY || keyCode === ALT_KEY) return false;
@@ -5766,7 +5770,9 @@ const Dropdown = props => {
               onClick: e => {
                 updateDropDownData(item);
               },
-              children: item.label
+              children: jsx(LabelItem, {
+                children: item.label
+              })
             }, `${PREFIX}-${label}-${item.value}`)
           }, `${PREFIX}-option-${label}-${item.value}`);
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Components/styled-components.d.ts

@@ -3,3 +3,4 @@ export declare const GoADropdownTextbox: import("styled-components/dist/types").
 export declare const GoADropdownListContainerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GoADropdownListContainerWrapperProps>> & string;
 export declare const GoADropdownListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GoADropdownListContainerProps>> & string;
 export declare const GoADropdownListOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GoADropdownListOptionProps>> & string;
+export declare const LabelItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;