@abgov/jsonforms-components 2.82.0 → 2.82.1

package/index.esm.js

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { toDataPath, INIT, UPDATE_CORE, isEnabled, isVisible, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, or, isOneOfEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, schemaTypeIs, formatIs, getAjv, schemaMatches, isObjectArrayControl, isPrimitiveArrayControl, composePaths, hasType, isCategorization, isLayout } from '@jsonforms/core';
-import * as _$c from 'lodash';
+import * as _$d from 'lodash';
 import ___default, { isEqual as isEqual$1, isEmpty, isObject as isObject$o } from 'lodash';
 import isEqual from 'lodash/isEqual';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
@@ -6051,16 +6051,16 @@ const ensureGoaDatePointerCursor = host => {
   sr.appendChild(style);
 };
 
-let _$b = t => t,
-  _t$c,
+let _$c = t => t,
+  _t$d,
   _t2$7;
-styled.div(_t$c || (_t$c = _$b`
+styled.div(_t$d || (_t$d = _$c`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$c`
   display: ${0};
   width: 100%;
 `), p => p.$visible !== false ? 'block' : 'none');
@@ -7553,8 +7553,8 @@ const useRegisterUser = () => {
   return ctx.user;
 };
 
-let _$a = t => t,
-  _t$b,
+let _$b = t => t,
+  _t$c,
   _t2$6,
   _t3$4,
   _t4$4,
@@ -7568,10 +7568,10 @@ let _$a = t => t,
   _t10$2,
   _t11$2,
   _t12$2;
-const FormFieldWrapper$1 = styled.div(_t$b || (_t$b = _$a`
+const FormFieldWrapper$1 = styled.div(_t$c || (_t$c = _$b`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$b`
   display: flex;
   align-items: flex-start;
   gap: var(--goa-space-2xs);
@@ -7579,32 +7579,32 @@ const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
   color: var(--goa-form-item-error-message-color);
   margin-top: var(--goa-form-item-message-margin-top);
 `));
-const RequiredTextLabel = styled.label(_t3$4 || (_t3$4 = _$a`
+const RequiredTextLabel = styled.label(_t3$4 || (_t3$4 = _$b`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.td(_t4$4 || (_t4$4 = _$a`
+styled.td(_t4$4 || (_t4$4 = _$b`
   width: 40%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
   vertical-align: top;
 `));
-styled.td(_t5$3 || (_t5$3 = _$a`
+styled.td(_t5$3 || (_t5$3 = _$b`
   width: 40%;
   text-align: left;
   vertical-align: top;
 `));
-const PageReviewContainer = styled.td(_t6$3 || (_t6$3 = _$a`
+const PageReviewContainer = styled.td(_t6$3 || (_t6$3 = _$b`
   padding: var(--goa-space-xs) var(--goa-space-m) var(--goa-space-xs);
   border-bottom: 1px solid #ccc;
   width: 100%;
   vertical-align: top;
 `));
-const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
+const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$b`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -7616,7 +7616,7 @@ const ReviewHeader = styled.div(_t7$2 || (_t7$2 = _$a`
     flex-wrap: wrap;
   }
 `));
-const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
+const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$b`
   font-weight: var(--goa-font-weight-bold);
   font-size: var(--goa-font-size-4);
   line-height: var(--goa-line-height-3);
@@ -7624,7 +7624,7 @@ const ReviewLabel = styled.div(_t8$2 || (_t8$2 = _$a`
   overflow-wrap: break-word;
   min-width: 0;
 `));
-const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
+const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$b`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-text-default);
   font-size: var(--goa-font-size-4);
@@ -7633,23 +7633,23 @@ const ReviewValue = styled.div(_t9$2 || (_t9$2 = _$a`
   overflow-wrap: anywhere;
 `));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$a`
+const CheckboxWrapper = styled.div(_t0$2 || (_t0$2 = _$b`
   min-height: 28px;
 `));
-const NoneGivenText = styled.span(_t1$2 || (_t1$2 = _$a`
+const NoneGivenText = styled.span(_t1$2 || (_t1$2 = _$b`
   color: var(--goa-color-greyscale-700);
   font-style: italic;
 `));
-const NoneGivenTableText = styled.span(_t10$2 || (_t10$2 = _$a`
+const NoneGivenTableText = styled.span(_t10$2 || (_t10$2 = _$b`
   padding-top: var(--goa-space-l);
   color: var(--goa-color-greyscale-700);
   font-style: italic;
 `));
-styled.h4(_t11$2 || (_t11$2 = _$a`
+styled.h4(_t11$2 || (_t11$2 = _$b`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t12$2 || (_t12$2 = _$a`
+styled.h4(_t12$2 || (_t12$2 = _$b`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -7966,7 +7966,7 @@ const collectPropertyValues = (obj, property, endWithType) => {
   Object.entries(obj).forEach(function ([key, value]) {
     if (key === property) {
       values.push(value);
-    } else if (_$c.isObject(value)) {
+    } else if (_$d.isObject(value)) {
       // if the object type is equal to end type, we are not going to continue the recursive approach
       if ((value == null ? void 0 : value.type) === endWithType) {
         if (property in value) {
@@ -7975,7 +7975,7 @@ const collectPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(value, property, endWithType)];
       }
-    } else if (_$c.isArray(value)) {
+    } else if (_$d.isArray(value)) {
       const nextValues = value.map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -9269,17 +9269,17 @@ const mergeAutoPopulatedData = (data, autoPopulatedData) => {
   const defaults = autoPopulatedData.reduce((values, {
     path,
     value
-  }) => _$c.set(values, path, value), {});
-  const normalizedData = _$c.cloneDeep(data != null ? data : {});
+  }) => _$d.set(values, path, value), {});
+  const normalizedData = _$d.cloneDeep(data != null ? data : {});
   autoPopulatedData.forEach(({
     path,
     value
   }) => {
-    if (isEmptyAutoPopulateTarget(_$c.get(normalizedData, path)) && value !== undefined && value !== null) {
-      _$c.unset(normalizedData, path);
+    if (isEmptyAutoPopulateTarget(_$d.get(normalizedData, path)) && value !== undefined && value !== null) {
+      _$d.unset(normalizedData, path);
     }
   });
-  return _$c.defaultsDeep({}, normalizedData, defaults);
+  return _$d.defaultsDeep({}, normalizedData, defaults);
 };
 const createAutoPopulateMiddleware = (uischema, user) => (state, action, defaultReducer) => {
   const newState = defaultReducer(state, action);
@@ -10950,6 +10950,71 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+const _excluded$7 = ["width"];
+let _$a = t => t,
+  _t$b;
+// Inline-size containment stops the dropdown's pixel width from counting towards its container's
+// minimum width, so the container can still shrink and the observer below sees the new width.
+const DropdownWidthWrapper = styled.div(_t$b || (_t$b = _$a`
+  contain: inline-size;
+`));
+/**
+ * goa-dropdown turns a percentage width into a pixel width that it measures only when its options
+ * mount or its menu opens, never when its container resizes. When the layout changes width after
+ * mount (list-with-details stacking its panes, a window resize, a phone rotating) the dropdown keeps
+ * its old width until it is clicked. This measures the wrapper instead and passes the dropdown a
+ * whole-pixel width (goa-dropdown rejects fractional values) that follows the container.
+ */
+const useFluidDropdownWidth = width => {
+  var _exec;
+  const ref = useRef(null);
+  const [measured, setMeasured] = useState();
+  const percent = width ? (_exec = /^(\d+(?:\.\d+)?)%$/.exec(width)) == null ? void 0 : _exec[1] : undefined;
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!percent || !el || typeof ResizeObserver === 'undefined') {
+      setMeasured(undefined);
+      return;
+    }
+    const update = containerWidth => {
+      const px = Math.floor(containerWidth * Number(percent) / 100);
+      setMeasured(px > 0 ? `${px}px` : undefined);
+    };
+    update(el.clientWidth);
+    const observer = new ResizeObserver(([entry]) => update(entry.contentRect.width));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [percent]);
+  return {
+    ref,
+    width: measured != null ? measured : width
+  };
+};
+/** GoabDropdown whose percentage width keeps following its container. */
+const FluidDropdown = _ref => {
+  let {
+      width
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  const fluid = useFluidDropdownWidth(width);
+  return jsx(DropdownWidthWrapper, {
+    ref: fluid.ref,
+    children: jsx(GoabDropdown, Object.assign({}, props, {
+      width: fluid.width
+    }))
+  });
+};
+
 function fetchRegisterConfigFromOptions$1(options) {
   if (!(options != null && options.url) && !(options != null && options.urn)) return undefined;
   const config = Object.assign({}, options);
@@ -11104,7 +11169,7 @@ const InnerGoAInputText = props => {
   const readOnly = (_uischema$options$com2 = uischema == null || (_uischema$options9 = uischema.options) == null || (_uischema$options9 = _uischema$options9.componentProps) == null ? void 0 : _uischema$options9.readOnly) != null ? _uischema$options$com2 : false;
   const formatPattern = uischema == null || (_uischema$options0 = uischema.options) == null ? void 0 : _uischema$options0.formatPattern;
   return jsx("div", {
-    children: mergedOptions.length > 1 ? jsx(GoabDropdown, {
+    children: mergedOptions.length > 1 ? jsx(FluidDropdown, {
       name: `jsonforms-${path}-dropdown`,
       value: data,
       disabled: !enabled,
@@ -11341,16 +11406,6 @@ const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assig
 const MultiLineTextControlTester = rankWith(3, and(isStringControl, optionIs('multi', true)));
 const MultiLineTextControl = withJsonFormsControlProps(MultiLineTextControlInput);
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$9;
 var toString$5 = toString$n;
 var requireObjectCoercible$3 = requireObjectCoercible$e;
@@ -12009,7 +12064,7 @@ const EnumSelect = props => {
   return jsx("div", {
     children: error.length > 0 ? callout({
       message: error
-    }) : jsx(GoabDropdown, {
+    }) : jsx(FluidDropdown, {
       name: `jsonforms-${path}-dropdown`,
       value: typeof data === 'object' ? ___default.get(data, valuePath) : data,
       disabled: !enabled,
@@ -19077,7 +19132,7 @@ const AddressInputs = ({
         children: [isAlbertaAddress && jsx(LabelDiv, {
           "data-testid": "address-form-province",
           children: "Alberta"
-        }), !isAlbertaAddress && jsx(GoabDropdown, {
+        }), !isAlbertaAddress && jsx(FluidDropdown, {
           name: "subdivisionCode",
           disabled: !enabled,
           testId: "address-form-province-dropdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.82.0",
+  "version": "2.82.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/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-11-06T17:47:04.234Z",
-  "sourceCommit": "05d11892b2ce9ed33dfda2105af0b756f5b15d1b",
+  "generatedAt": "2026-11-06T19:07:14.459Z",
+  "sourceCommit": "8ccfd9a42ee1c7472efaaae82d30478e942b691c",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 23,
   "renderers": [

package/src/lib/Components/FluidDropdown.d.ts

@@ -0,0 +1,14 @@
+import { GoabDropdownProps } from '@abgov/react-components-ds1';
+/**
+ * goa-dropdown turns a percentage width into a pixel width that it measures only when its options
+ * mount or its menu opens, never when its container resizes. When the layout changes width after
+ * mount (list-with-details stacking its panes, a window resize, a phone rotating) the dropdown keeps
+ * its old width until it is clicked. This measures the wrapper instead and passes the dropdown a
+ * whole-pixel width (goa-dropdown rejects fractional values) that follows the container.
+ */
+export declare const useFluidDropdownWidth: (width?: string) => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    width: string | undefined;
+};
+/** GoabDropdown whose percentage width keeps following its container. */
+export declare const FluidDropdown: ({ width, ...props }: GoabDropdownProps) => JSX.Element;