@k-int/stripes-kint-components 2.6.3 → 2.6.6

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.6.6 2022-06-23
+  * Fix aria label null safety in ActionList
+
+## 2.6.5 2022-06-22
+  * Added label override ability for custom property types. Also documentation
+
+## 2.6.4 2022-06-21
+  * Custom property weight sorting not working as expected
+
 ## 2.6.3 2022-06-21
   * Null safety issue
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -255,12 +255,24 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
           actionFunction = function actionFunction() {
             return toggleEditing(data.id);
           };
+        }
+
+        var ariaLabel = "action-".concat(action.name, "[").concat(data.rowIndex, "]");
+
+        if (action !== null && action !== void 0 && action.ariaLabel) {
+          if (typeof action.ariaLabel === 'function') {
+            ariaLabel = action.ariaLabel(data);
+          } else if (typeof action.ariaLabel === 'string') {
+            ariaLabel = action.ariaLabel;
+          } else {
+            throw new Error("Provided ariaLabel for action \"".concat(action.name, "\" must be a function or a string."));
+          }
         } // If we're handed an icon, use that for the action button
 
 
         if (action.icon) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-            ariaLabel: action === null || action === void 0 ? void 0 : action.ariaLabel(data),
+            ariaLabel: ariaLabel,
             disabled: editing,
             icon: action.icon,
             onClick: function onClick() {
@@ -274,6 +286,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
 
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          ariaLabel: ariaLabel,
           disabled: editing,
           marginBottom0: true,
           onClick: function onClick() {

package/es/lib/CustomProperties/Config/CustomPropertiesLookup.js

@@ -175,7 +175,9 @@ var CustomPropertiesLookup = function CustomPropertiesLookup(_ref) {
           }
         },
         type: function type(data) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+          var _labelOverrides$data$;
+
+          return (_labelOverrides$data$ = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[data === null || data === void 0 ? void 0 : data.type]) !== null && _labelOverrides$data$ !== void 0 ? _labelOverrides$data$ : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-kint-components.customProperties.type.".concat(data === null || data === void 0 ? void 0 : data.type)
           });
         },

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -64,7 +64,7 @@ var CREATING = 'create';
 var VIEWING = 'view'; // A default option for setting up panes manually
 
 var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
-  var _labelOverrides$paneT, _ref3, _renderViewPaneTitle, _customProperty$categ, _labelOverrides$modal, _labelOverrides$modal2, _labelOverrides$confi, _labelOverrides$confi2, _labelOverrides$confi3;
+  var _labelOverrides$paneT, _ref3, _renderViewPaneTitle, _customProperty$categ, _labelOverrides$modal, _labelOverrides$modal2, _labelOverrides$confi;
 
   var afterQueryCalls = _ref.afterQueryCalls,
       catchQueryCalls = _ref.catchQueryCalls,
@@ -326,14 +326,14 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConfirmationModal, {
       buttonStyle: "danger",
-      confirmLabel: (_labelOverrides$confi = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmLabel) !== null && _labelOverrides$confi !== void 0 ? _labelOverrides$confi : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-kint-components.customProperties.delete.confirmLabel"
+      confirmLabel: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+        id: "stripes-kint-components.delete"
       }),
-      heading: (_labelOverrides$confi2 = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmHeading) !== null && _labelOverrides$confi2 !== void 0 ? _labelOverrides$confi2 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      heading: (_labelOverrides$confi = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmHeading) !== null && _labelOverrides$confi !== void 0 ? _labelOverrides$confi : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
         id: "stripes-kint-components.customProperties.delete.confirmHeading"
       }),
       id: "delete-job-confirmation",
-      message: (_labelOverrides$confi3 = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmMessage) !== null && _labelOverrides$confi3 !== void 0 ? _labelOverrides$confi3 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      message: labelOverrides !== null && labelOverrides !== void 0 && labelOverrides.confirmMessage ? labelOverrides.confirmMessage(customProperty) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
         id: "stripes-kint-components.customProperties.delete.confirmMessage",
         values: {
           name: customProperty === null || customProperty === void 0 ? void 0 : customProperty.name

package/es/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -44,7 +44,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CustomPropertyForm = function CustomPropertyForm(_ref) {
-  var _labelOverrides$type, _labelOverrides$categ, _labelOverrides$label, _labelOverrides$name, _labelOverrides$descr, _labelOverrides$ctx, _labelOverrides$weigh, _labelOverrides$prima2, _labelOverrides$retir, _labelOverrides$defau;
+  var _labelOverrides$DECIM, _labelOverrides$INTEG, _labelOverrides$TEXT_, _labelOverrides$REFDA, _labelOverrides$MULTI, _labelOverrides$DATE_, _labelOverrides$type, _labelOverrides$categ, _labelOverrides$label, _labelOverrides$name, _labelOverrides$descr, _labelOverrides$ctx, _labelOverrides$weigh, _labelOverrides$prima2, _labelOverrides$retir, _labelOverrides$defau;
 
   var contextFilterOptions = _ref.contextFilterOptions,
       helpPopovers = _ref.helpPopovers,
@@ -124,32 +124,32 @@ var CustomPropertyForm = function CustomPropertyForm(_ref) {
             label: '',
             value: ''
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$DECIM = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.DECIMAL_CLASS_NAME]) !== null && _labelOverrides$DECIM !== void 0 ? _labelOverrides$DECIM : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.DECIMAL_CLASS_NAME)
             }),
             value: _customProperties.DECIMAL_CLASS_NAME
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$INTEG = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.INTEGER_CLASS_NAME]) !== null && _labelOverrides$INTEG !== void 0 ? _labelOverrides$INTEG : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.INTEGER_CLASS_NAME)
             }),
             value: _customProperties.INTEGER_CLASS_NAME
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$TEXT_ = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.TEXT_CLASS_NAME]) !== null && _labelOverrides$TEXT_ !== void 0 ? _labelOverrides$TEXT_ : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.TEXT_CLASS_NAME)
             }),
             value: _customProperties.TEXT_CLASS_NAME
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$REFDA = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.REFDATA_CLASS_NAME]) !== null && _labelOverrides$REFDA !== void 0 ? _labelOverrides$REFDA : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.REFDATA_CLASS_NAME)
             }),
             value: _customProperties.REFDATA_CLASS_NAME
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$MULTI = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.MULTI_REFDATA_CLASS_NAME]) !== null && _labelOverrides$MULTI !== void 0 ? _labelOverrides$MULTI : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.MULTI_REFDATA_CLASS_NAME)
             }),
             value: _customProperties.MULTI_REFDATA_CLASS_NAME
           }, {
-            label: intl.formatMessage({
+            label: (_labelOverrides$DATE_ = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[_customProperties.DATE_CLASS_NAME]) !== null && _labelOverrides$DATE_ !== void 0 ? _labelOverrides$DATE_ : intl.formatMessage({
               id: "stripes-kint-components.customProperties.type.".concat(_customProperties.DATE_CLASS_NAME)
             }),
             value: _customProperties.DATE_CLASS_NAME

package/es/lib/CustomProperties/Config/CustomPropertyView.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // A default option for CustProp view pane, with the ability to override labels for fields
 var CustomPropertyView = function CustomPropertyView(_ref) {
-  var _labelOverrides$label, _labelOverrides$name, _labelOverrides$descr, _labelOverrides$prima, _labelOverrides$retir, _labelOverrides$weigh, _labelOverrides$defau, _labelOverrides$ctx, _customProperty$ctx, _labelOverrides$type, _labelOverrides$categ, _customProperty$categ, _customProperty$categ2;
+  var _labelOverrides$label, _labelOverrides$name, _labelOverrides$descr, _labelOverrides$prima, _labelOverrides$retir, _labelOverrides$weigh, _labelOverrides$defau, _labelOverrides$ctx, _customProperty$ctx, _labelOverrides$type, _labelOverrides$custo, _labelOverrides$categ, _customProperty$categ, _customProperty$categ2;
 
   var customProperty = _ref.customProperty,
       helpPopovers = _ref.helpPopovers,
@@ -124,7 +124,7 @@ var CustomPropertyView = function CustomPropertyView(_ref) {
           label: (_labelOverrides$type = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.type) !== null && _labelOverrides$type !== void 0 ? _labelOverrides$type : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-kint-components.customProperties.type"
           }),
-          value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+          value: (_labelOverrides$custo = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides[customProperty === null || customProperty === void 0 ? void 0 : customProperty.type]) !== null && _labelOverrides$custo !== void 0 ? _labelOverrides$custo : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-kint-components.customProperties.type.".concat(customProperty === null || customProperty === void 0 ? void 0 : customProperty.type)
           })
         })

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -82,6 +82,9 @@ var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
       {
         path: 'retired'
       }, // Place retired custprops at the end
+      {
+        path: 'weight'
+      }, // Within those groups, sort by weight first
       {
         path: 'label'
       } // Within those groups, sort by label

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -85,9 +85,12 @@ var CustomPropertiesViewCtx = function CustomPropertiesViewCtx(_ref) {
         path: 'primary',
         direction: 'desc'
       }, // Primary properties should display before optional
+      {
+        path: 'weight'
+      }, // Within those groups, sort by weight
       {
         path: 'label'
-      } // Within those groups, sort by label
+      } // For those with the same weight, sort by label
       ]
     }
   }),

package/es/lib/hooks/useCustomProperties.js

@@ -42,6 +42,8 @@ var useCustomProperties = function useCustomProperties(_ref) {
     },
     sort: [{
       path: 'weight'
+    }, {
+      path: 'label'
     }],
     filters: [],
     stats: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "2.6.3",
+  "version": "2.6.6",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/ActionList/ActionListFieldArray.js

@@ -183,12 +183,23 @@ const ActionListFieldArray = forwardRef(({
             actionFunction = () => toggleEditing(data.id);
           }
 
+          let ariaLabel = `action-${action.name}[${data.rowIndex}]`;
+          if (action?.ariaLabel) {
+            if (typeof action.ariaLabel === 'function') {
+              ariaLabel = action.ariaLabel(data);
+            } else if (typeof action.ariaLabel === 'string') {
+              ariaLabel = action.ariaLabel;
+            } else {
+              throw new Error(`Provided ariaLabel for action "${action.name}" must be a function or a string.`);
+            }
+          }
+
           // If we're handed an icon, use that for the action button
           if (action.icon) {
             return (
               <IconButton
                 key={`action-${action.name}[${data.rowIndex}]`}
-                ariaLabel={action?.ariaLabel(data)}
+                ariaLabel={ariaLabel}
                 disabled={editing}
                 icon={action.icon}
                 onClick={() => (actionFunction ? actionFunction() : () => null)}
@@ -201,6 +212,7 @@ const ActionListFieldArray = forwardRef(({
           return (
             <Button
               key={`action-${action.name}[${data.rowIndex}]`}
+              ariaLabel={ariaLabel}
               disabled={editing}
               marginBottom0
               onClick={() => (actionFunction ? actionFunction() : () => null)}

package/src/lib/ActionList/README.md

@@ -89,7 +89,7 @@ const myRef = useRef();
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop will give the associated icon button an aria-label, including information about the associated content data. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
+actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
 actionCalls (DEPRECATED) | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.js

@@ -117,6 +117,7 @@ const CustomPropertiesLookup = ({
               }
             },
             type: data => (
+              labelOverrides?.[data?.type] ??
               <FormattedMessage id={`stripes-kint-components.customProperties.type.${data?.type}`} />
             ),
             category: data => data?.category?.desc

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -242,8 +242,7 @@ const CustomPropertiesSettings = ({
       <ConfirmationModal
         buttonStyle="danger"
         confirmLabel={
-          labelOverrides?.confirmLabel ??
-          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmLabel" />
+          <FormattedMessage id="stripes-kint-components.delete" />
         }
         heading={
           labelOverrides?.confirmHeading ??
@@ -251,7 +250,7 @@ const CustomPropertiesSettings = ({
         }
         id="delete-job-confirmation"
         message={
-          labelOverrides?.confirmMessage ??
+          labelOverrides?.confirmMessage ? labelOverrides.confirmMessage(customProperty) :
           <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} />
         }
         onCancel={() => setDeleteModal(false)}

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -70,37 +70,37 @@ const CustomPropertyForm = ({
             dataOptions={[
               { label: '', value: '' },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[DECIMAL_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${DECIMAL_CLASS_NAME}`,
                 }),
                 value: DECIMAL_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[INTEGER_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${INTEGER_CLASS_NAME}`,
                 }),
                 value: INTEGER_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[TEXT_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${TEXT_CLASS_NAME}`,
                 }),
                 value: TEXT_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[REFDATA_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${REFDATA_CLASS_NAME}`,
                 }),
                 value: REFDATA_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[MULTI_REFDATA_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${MULTI_REFDATA_CLASS_NAME}`,
                 }),
                 value: MULTI_REFDATA_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
+                label: labelOverrides?.[DATE_CLASS_NAME] ?? intl.formatMessage({
                   id: `stripes-kint-components.customProperties.type.${DATE_CLASS_NAME}`,
                 }),
                 value: DATE_CLASS_NAME,

package/src/lib/CustomProperties/Config/CustomPropertyView.js

@@ -148,7 +148,7 @@ const CustomPropertyView = ({
                 labelOverrides?.type ??
                 <FormattedMessage id="stripes-kint-components.customProperties.type" />
               }
-              value={<FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} />}
+              value={labelOverrides?.[customProperty?.type] ?? <FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} />}
             />
           )}
         </Col>

package/src/lib/CustomProperties/Config/README.md

@@ -0,0 +1,35 @@
+# CustomProperties Config components
+
+## Motivation
+These components, namely CustomPropertiesSettings, and its constituent components CustomPropertiesLookup, CustomPropertiesForm and CustomPropertyView are designed for use in a FOLIO settings context, as a way to search through, view, create and edit custom properties.
+
+## LabelOverrides
+These components can all be provided with a prop `labelOverrides` which allows the overriding of certain translation defaults provided by kint-components. These values must take a certain shape, which differs by translation key. A table is provided below.
+
+Key | Type | Description | default
+--- | --- | --- | ---
+category | node/string | Override for the display of field "category" | "Category" |
+confirmHeading | node/string | Override for the title of the confirmation modal which pops up on attempting to delete a custom property | "Delete custom property" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyDate (See customPropertyConstants) | string | Override for the "Date" type custom property display. Must be string in order to support display within the Select. | "Date" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal (See customPropertyConstants) | string | Override for the "Decimal" type custom property display. Must be string in order to support display within the Select. | "Decimal" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyInteger (See customPropertyConstants) | string | Override for the "Integer" type custom property display. Must be string in order to support display within the Select. | "Integer" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyMultiRefdata (See customPropertyConstants) | string | Override for the "MultiRefdata" type custom property display. Must be string in order to support display within the Select. | "Refdata (multi-select)" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata (See customPropertyConstants) | string | Override for the "Refdata" type custom property display. Must be string in order to support display within the Select. | "Refdata" |
+com.k_int.web.toolkit.custprops.types.CustomPropertyText (See customPropertyConstants) | string | Override for the "Text" type custom property display. Must be string in order to support display within the Select. | "Text" |
+confirmMessage | function | Override for the message displayed in the confirmation modal on trying to delete a custom property. Accepts a function which will be provided the custom property object in question. | "Custom property <strong>{name}</strong> will be <strong>deleted</strong>." |
+ctx | node/string | Override for the display of field "ctx" | "Context" |
+deleteError | function | Override for the default callout message shown when a custom property fails to delete. Accepts a function to which it will provide the error message and the customProperty in question. | "<strong>Error: {label}</strong> was not deleted. {error}" |
+defaultVisibility | node/string | Override for the display of field "defaultVisibility" | "Default visibility" |
+description | node/string | Override for the display of field "description" | "Description" |
+label | node/string | Override for the display of field "label" | "Label" |
+modalTitleEdit | node/string | Override for the modal header on editing a custom property | "New custom property" |
+modalTitleNew | node/string | Override for the modal header on attempting to create a custom property | "Edit custom property" |
+name | node/string | Override for the display of field "name" | "Name" |
+paneTitle | node/string | Override for the pane title displayed in the main lookup section. | "Custom properties" |
+primary | node/string | Override for the display of field "primary" | "Primary" |
+primaryRetired | node/string | Override for the warning message on validation, preventing a custom property being set both as primary AND as retired | "A custom property cannot be both primary and retired" |
+retired | node/string | Override for the display of field "retired" | "Retired" |
+searchAriaLabel | string | Override for the aria label provided by the search field in the main custom property lookup section | 'custom-property-search-field' |
+type | node/string | Override for the display of field "type" | "Type" |
+viewPaneTitle | node/string/function | Label override for the title of the custom property view pane once one has been selected. This override accepts any shape, if a function is provided it will provide the customProperty and expect a string/node in return: `(customProperty) => ("${customProperty.name}-example")` | customProperty label if exists, falls back to customProperty name |
+weight | node/string | Override for the display of field "weight" | ""Order weight" |

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -33,6 +33,7 @@ const CustomPropertiesFilter = ({
       sort: [
         { path: 'ctx' }, // Group by ctx
         { path: 'retired' }, // Place retired custprops at the end
+        { path: 'weight' }, // Within those groups, sort by weight first
         { path: 'label' } // Within those groups, sort by label
       ],
     }

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -50,7 +50,9 @@ const CustomPropertiesViewCtx = ({
       sort: [
         { path: 'retired' }, // Place retired custprops at the end
         { path: 'primary', direction: 'desc' }, // Primary properties should display before optional
-        { path: 'label' } // Within those groups, sort by label
+        { path: 'weight' }, // Within those groups, sort by weight
+        { path: 'label' } // For those with the same weight, sort by label
+
       ]
     }
   });

package/src/lib/hooks/useCustomProperties.js

@@ -23,9 +23,8 @@ const useCustomProperties = ({
       ContextKey: 'ctx'
     },
     sort: [
-      {
-        path: 'weight'
-      }
+      { path: 'weight' },
+      { path: 'label' }
     ],
     filters: [],
     stats: false,

package/translations/stripes-kint-components/en.json

@@ -72,7 +72,6 @@
   "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate": "Date",
   "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyMultiRefdata": "Refdata (multi-select)",
 
-  "customProperties.delete.confirmLabel": "Delete",
   "customProperties.delete.confirmHeading": "Delete custom property",
   "customProperties.delete.confirmMessage": "Custom property <strong>{name}</strong> will be <strong>deleted</strong>.",
   "customPropertiesSettings.deleteCustomProperty.errorMessage": "<strong>Error: {label}</strong> was not deleted. {error}",