@insticc/genericform 2.0.8 → 2.1.0

package/build/Demo.js

@@ -85,25 +85,25 @@ var Demo = function Demo() {
   }, {
     name: "lbl1",
     type: "label",
-    displayName: "① Text inputs"
+    label: "① Text inputs"
   }, {
     name: "firstName",
     type: "text",
-    displayName: "First name",
+    label: "First name",
     required: false,
     inline: true,
     value: ""
   }, {
     name: "lastName",
     type: "text",
-    displayName: "Last name",
+    label: "Last name",
     required: false,
     inline: true,
     value: ""
   }, {
     name: "email",
     type: "email",
-    displayName: "Email",
+    label: "Email",
     required: false,
     value: "",
     validate: function validate(v) {
@@ -112,14 +112,14 @@ var Demo = function Demo() {
   }, {
     name: "age",
     type: "int",
-    displayName: "Age",
+    label: "Age",
     value: "",
     min: 0,
     max: 120
   }, {
     name: "score",
     type: "number",
-    displayName: "Score (0–100)",
+    label: "Score (0–100)",
     value: "",
     min: 0,
     max: 100,
@@ -127,7 +127,7 @@ var Demo = function Demo() {
   }, {
     name: "bio",
     type: "textArea",
-    displayName: "Biography",
+    label: "Biography",
     value: "",
     rows: 4,
     maxLength: 300,
@@ -140,13 +140,13 @@ var Demo = function Demo() {
   }, {
     name: "lbl2",
     type: "label",
-    displayName: "② Select / dropdown"
+    label: "② Select / dropdown"
   },
   // select with { value, text } options — returns full object
   {
     name: "country",
     type: "select",
-    displayName: "Country (value/text)",
+    label: "Country (value/text)",
     required: false,
     value: "",
     options: COUNTRIES,
@@ -158,7 +158,7 @@ var Demo = function Demo() {
   {
     name: "role",
     type: "select",
-    displayName: "Role (id/label)",
+    label: "Role (id/label)",
     value: "",
     options: ROLES
   },
@@ -166,7 +166,7 @@ var Demo = function Demo() {
   {
     name: "framework",
     type: "select",
-    displayName: "Framework (name/text)",
+    label: "Framework (name/text)",
     value: "",
     options: TAGS
   },
@@ -174,7 +174,7 @@ var Demo = function Demo() {
   {
     name: "langs",
     type: "multipleDropdown",
-    displayName: "Languages (multi)",
+    label: "Languages (multi)",
     value: [],
     options: [{
       value: "js",
@@ -197,26 +197,26 @@ var Demo = function Demo() {
   }, {
     name: "lbl3",
     type: "label",
-    displayName: "③ Date / time pickers"
+    label: "③ Date / time pickers"
   }, {
     name: "dob",
     type: "date",
-    displayName: "Date of birth",
+    label: "Date of birth",
     value: ""
   }, {
     name: "meeting",
     type: "datetime",
-    displayName: "Meeting at",
+    label: "Meeting at",
     value: ""
   }, {
     name: "alarm",
     type: "time",
-    displayName: "Alarm time",
+    label: "Alarm time",
     value: ""
   }, {
     name: "startYear",
     type: "year",
-    displayName: "Start year",
+    label: "Start year",
     value: "",
     minYear: 2000,
     maxYear: 2030
@@ -228,17 +228,17 @@ var Demo = function Demo() {
   }, {
     name: "lbl4",
     type: "label",
-    displayName: "④ Boolean controls"
+    label: "④ Boolean controls"
   }, {
     name: "terms",
     type: "checkbox",
-    displayName: "I accept the terms",
+    label: "I accept the terms",
     value: false,
     required: false
   }, {
     name: "newsletter",
     type: "toggle",
-    displayName: "Subscribe to newsletter",
+    label: "Subscribe to newsletter",
     value: false
   },
   // ── Radio ─────────────────────────────────────────────────────────────
@@ -248,13 +248,13 @@ var Demo = function Demo() {
   }, {
     name: "lbl5",
     type: "label",
-    displayName: "⑤ Radio buttons"
+    label: "⑤ Radio buttons"
   },
   // Radio group (controlled by options)
   {
     name: "priority",
     type: "radioGroup",
-    displayName: "Priority",
+    label: "Priority",
     value: "medium",
     options: [{
       value: "low",
@@ -271,7 +271,7 @@ var Demo = function Demo() {
   {
     name: "size",
     type: "radioGroupInline",
-    displayName: "Size",
+    label: "Size",
     value: "md",
     options: [{
       value: "sm",
@@ -291,13 +291,13 @@ var Demo = function Demo() {
   }, {
     name: "lbl6",
     type: "label",
-    displayName: "⑥ Checkbox groups"
+    label: "⑥ Checkbox groups"
   },
   // checkboxGroup — option-level onChange
   {
     name: "perms",
     type: "checkboxGroup",
-    displayName: "Permissions",
+    label: "Permissions",
     value: ["read"],
     options: [{
       name: "read",
@@ -312,7 +312,7 @@ var Demo = function Demo() {
   }, {
     name: "interests",
     type: "checkboxGroup",
-    displayName: "Interests",
+    label: "Interests",
     value: [],
     options: [{
       name: "tech",
@@ -333,11 +333,11 @@ var Demo = function Demo() {
   }, {
     name: "lbl7",
     type: "label",
-    displayName: "⑦ JSON editor"
+    label: "⑦ JSON editor"
   }, {
     name: "config",
     type: "json",
-    displayName: "Config object",
+    label: "Config object",
     datatype: "object",
     value: "",
     allowModeSwitch: false,
@@ -347,7 +347,7 @@ var Demo = function Demo() {
   }, {
     name: "tags",
     type: "json",
-    displayName: "Tags (string)",
+    label: "Tags (string)",
     datatype: "string",
     value: "",
     allowModeSwitch: true,
@@ -360,7 +360,7 @@ var Demo = function Demo() {
   }, {
     name: "lbl8",
     type: "label",
-    displayName: "⑧ Accordion"
+    label: "⑧ Accordion"
   }, {
     name: "advanced",
     type: "accordion",
@@ -415,11 +415,11 @@ var Demo = function Demo() {
   }, {
     name: "lbl9",
     type: "label",
-    displayName: "⑨ Custom component"
+    label: "⑨ Custom component"
   }, {
     name: "avatar",
     type: "component",
-    displayName: "Avatar preview",
+    label: "Avatar preview",
     component: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         width: 64,
@@ -443,11 +443,11 @@ var Demo = function Demo() {
   }, {
     name: "lbl10",
     type: "label",
-    displayName: "⑩ Conditional visibility (hide a field when newsletter is off)"
+    label: "⑩ Conditional visibility (hide a field when newsletter is off)"
   }, {
     name: "newsletterFreq",
     type: "radioGroupInline",
-    displayName: "Frequency",
+    label: "Frequency",
     value: "weekly",
     options: [{
       value: "daily",
@@ -470,11 +470,11 @@ var Demo = function Demo() {
   }, {
     name: "lbl11",
     type: "label",
-    displayName: "⑪ Validation (minLength, maxLength, custom)"
+    label: "⑪ Validation (minLength, maxLength, custom)"
   }, {
     name: "username",
     type: "text",
-    displayName: "Username",
+    label: "Username",
     value: "",
     required: false,
     minLength: 3,
@@ -486,7 +486,7 @@ var Demo = function Demo() {
   }, {
     name: "website",
     type: "text",
-    displayName: "Website URL",
+    label: "Website URL",
     value: "",
     validate: function validate(v) {
       return v && !v.startsWith("https://") ? "Must start with https://" : null;

package/build/Demo2.js

@@ -152,25 +152,25 @@ var Demo2 = function Demo2() {
   }, {
     name: 'lbl0',
     type: 'label',
-    displayName: 'Personal info'
+    label: 'Personal info'
   }, {
     name: 'firstName',
     type: 'text',
-    displayName: 'First name',
+    label: 'First name',
     required: true,
     inline: true,
     value: formState.firstName
   }, {
     name: 'lastName',
     type: 'text',
-    displayName: 'Last name',
+    label: 'Last name',
     required: true,
     inline: true,
     value: formState.lastName
   }, {
     name: 'email',
     type: 'email',
-    displayName: 'Email',
+    label: 'Email',
     required: true,
     value: formState.email,
     validate: function validate(v) {
@@ -179,7 +179,7 @@ var Demo2 = function Demo2() {
   }, {
     name: 'age',
     type: 'int',
-    displayName: 'Age',
+    label: 'Age',
     value: formState.age,
     min: 0,
     max: 120
@@ -189,35 +189,35 @@ var Demo2 = function Demo2() {
   }, {
     name: 'lbl1',
     type: 'label',
-    displayName: 'Preferences'
+    label: 'Preferences'
   }, {
     name: 'country',
     type: 'select',
-    displayName: 'Country',
+    label: 'Country',
     required: true,
     value: formState.country,
     options: COUNTRIES
   }, {
     name: 'city',
     type: 'text',
-    displayName: 'City (auto-filled)',
+    label: 'City (auto-filled)',
     value: formState.city,
     disabled: true
   }, {
     name: 'priority',
     type: 'radioGroup',
-    displayName: 'Priority',
+    label: 'Priority',
     value: formState.priority,
     options: PRIORITY_OPTIONS
   }, {
     name: 'notify',
     type: 'toggle',
-    displayName: 'Enable notifications',
+    label: 'Enable notifications',
     value: formState.notify
   }, {
     name: 'notifyEmail',
     type: 'email',
-    displayName: 'Notification email',
+    label: 'Notification email',
     value: formState.notifyEmail,
     hide: function hide(fd) {
       return !fd.notify;
@@ -231,7 +231,7 @@ var Demo2 = function Demo2() {
   }, {
     name: 'notes',
     type: 'textArea',
-    displayName: 'Notes',
+    label: 'Notes',
     value: formState.notes,
     rows: 3,
     maxLength: 500
@@ -241,11 +241,11 @@ var Demo2 = function Demo2() {
   }, {
     name: 'lbl3',
     type: 'label',
-    displayName: 'Access'
+    label: 'Access'
   }, {
     name: 'perms',
     type: 'checkboxGroup',
-    displayName: 'Permissions',
+    label: 'Permissions',
     value: formState.perms,
     options: [{
       name: 'read',
@@ -263,7 +263,7 @@ var Demo2 = function Demo2() {
   }, {
     name: 'lbl4',
     type: 'label',
-    displayName: 'Advanced'
+    label: 'Advanced'
   }, {
     name: 'advanced',
     type: 'accordion',

package/build/FormFields/CustomAction.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CustomAction = function CustomAction(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    style = _ref.style,
+    icon = _ref.icon,
+    tooltip = _ref.tooltip;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    type: "button",
+    className: "ufg-button ".concat(className || 'ufg-button-primary'),
+    onClick: onClick,
+    disabled: !!disabled,
+    style: style,
+    title: tooltip,
+    children: [icon, label || name]
+  }, name);
+};
+CustomAction.propTypes = {
+  onClick: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  disabled: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  tooltip: _propTypes["default"].string
+};
+var _default = exports["default"] = CustomAction;

package/build/FormFields/CustomCheckbox.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var CustomCheckbox = function CustomCheckbox(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     _ref$disabled = _ref.disabled,
@@ -60,13 +60,21 @@ var CustomCheckbox = function CustomCheckbox(_ref) {
       required: required,
       style: inputStyle,
       onChange: handleChange
-    }), (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+    }), (0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
   });
 };
 CustomCheckbox.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomCheckboxGroup.js

@@ -52,7 +52,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     name = _ref2.name,
     _ref2$checked = _ref2.checked,
     checked = _ref2$checked === void 0 ? [] : _ref2$checked,
-    displayName = _ref2.displayName,
+    label = _ref2.label,
     _ref2$options = _ref2.options,
     options = _ref2$options === void 0 ? [] : _ref2$options,
     _ref2$required = _ref2.required,
@@ -134,7 +134,14 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      disableHtmlFor: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ufg-checkbox-group",
       style: groupInputStyle,
       children: options.map(function (opt, idx) {
@@ -230,7 +237,7 @@ CustomCheckboxGroup.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   onOptionChange: _propTypes["default"].func,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   options: _propTypes["default"].array.isRequired,
   required: _propTypes["default"].bool,
   grouped: _propTypes["default"].bool,

package/build/FormFields/CustomComponent.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
  * No onChange / value — purely structural.
  */var CustomComponent = function CustomComponent(_ref) {
   var name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     component = _ref.component,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
@@ -28,12 +28,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     className: "ufg-component-wrapper",
     id: name,
     style: mainDivStyle,
-    children: [displayName && (0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle), component, (0, _defaults.errorJsx)(error)]
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      disableHtmlFor: true
+    }), component, (0, _defaults.errorJsx)(error)]
   });
 };
 CustomComponent.propTypes = {
   name: _propTypes["default"].string,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   component: _propTypes["default"].node,
   required: _propTypes["default"].bool,
   error: _propTypes["default"].string,

package/build/FormFields/CustomDatePicker.js

@@ -24,7 +24,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var CustomDatePicker = function CustomDatePicker(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     value = _ref.value,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -57,13 +57,27 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
   var handleChange = (0, _react.useCallback)(function (date) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(date, name);
   }, [onChange, name]);
+  var formatDate = function formatDate(value) {
+    if (!value) return "";
+    var date = new Date(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return date.toLocaleDateString("sv-SE");
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: "form-dateDiv-".concat(name),
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatetime["default"], {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatetime["default"], {
       id: "form-date-".concat(name),
-      value: value,
+      value: value || "",
       dateFormat: dateFormat,
       timeFormat: timeFormat,
       input: true,
@@ -73,6 +87,8 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
       isValidDate: isValidDate,
       renderInput: function renderInput(props, openCalendar) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          id: "form-input-".concat(name),
+          value: formatDate(value),
           readOnly: true
         }, props), {}, {
           placeholder: placeholder,
@@ -82,13 +98,13 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
         }));
       },
       onChange: handleChange
-    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+    }, value || "empty"), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
   });
 };
 CustomDatePicker.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].any,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomDropdown.js

@@ -14,7 +14,7 @@ var CustomDropdown = function CustomDropdown(_ref) {
   var _value$optionProp;
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     placeholder = _ref.placeholder,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
@@ -97,11 +97,20 @@ var CustomDropdown = function CustomDropdown(_ref) {
       className: "ufg-field-group",
       id: name,
       style: mainDivStyle,
-      children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      children: [(0, _defaults.labelJsx)({
+        name: name,
+        labelStyle: labelStyle,
+        label: label,
+        required: required,
+        spanStyle: spanStyle,
+        showHelp: showHelp,
+        helpText: helpText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
         id: "form-input-".concat(name),
         name: name,
         value: selectValue,
         disabled: disabled,
+        required: required,
         multiple: multiple,
         className: "ufg-select".concat(error ? " error" : ""),
         style: inputStyle,
@@ -122,7 +131,12 @@ var CustomDropdown = function CustomDropdown(_ref) {
       className: "ufg-field-group",
       id: "".concat(name, "_content"),
       style: mainDivStyle,
-      children: [contentLabel && (0, _defaults.labelJsx)("".concat(name, "_content"), labelStyle, contentLabel, false, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+      children: [(0, _defaults.labelJsx)({
+        name: "".concat(name, "_content"),
+        labelStyle: labelStyle,
+        label: contentLabel,
+        spanStyle: spanStyle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
         className: "ufg-select-content",
         style: contentStyle,
         children: contentValue
@@ -133,7 +147,7 @@ var CustomDropdown = function CustomDropdown(_ref) {
 CustomDropdown.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].object]),
   options: _propTypes["default"].array,
   placeholder: _propTypes["default"].string,