@rjsf/semantic-ui 6.6.2 → 6.7.0

package/lib/util.js

@@ -34,10 +34,11 @@ export function getSemanticProps({ formContext = {}, uiSchema = {}, options = {}
  * @returns {any}
  */
 export function getSemanticErrorProps({ formContext = {}, uiSchema = {}, options = {}, defaultProps = { size: 'small', pointing: 'above' }, }) {
-    const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+    var _a, _b;
+    const formContextProps = (_a = formContext.semantic) === null || _a === void 0 ? void 0 : _a.errorOptions;
     const semanticOptions = getUiOptions(uiSchema).semantic;
-    const schemaProps = semanticOptions && semanticOptions.errorOptions;
-    const optionProps = options.semantic && options.semantic.errorOptions;
+    const schemaProps = semanticOptions === null || semanticOptions === void 0 ? void 0 : semanticOptions.errorOptions;
+    const optionProps = (_b = options.semantic) === null || _b === void 0 ? void 0 : _b.errorOptions;
     return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }
 /**

package/lib/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA0B3C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAoF,EAClH,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EACrD,mBAAmB,GAAG,EAAE,GACI;IAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC9C,MAAM,WAAW,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC,QAAQ,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC;IACrC,+CAA+C;IAC/C,OAAO;QACL,GAAG,kBAAkB;QACrB,GAAG,mBAAmB;QACtB,GAAG,WAAW;QACd,GAAG,WAAW;QACd,GAAG,gBAAgB;KACpB,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAInC,EACA,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GACnB;IAChC,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC;IACnF,MAAM,eAAe,GAAsB,YAAY,CAAU,QAAQ,CAAC,CAAC,QAA6B,CAAC;IACzG,MAAM,WAAW,GAAG,eAAe,IAAI,eAAe,CAAC,YAAY,CAAC;IACpE,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,IAAK,OAAO,CAAC,QAA8B,CAAC,YAAY,CAAC;IAE7F,OAAO,EAAE,GAAG,YAAY,EAAE,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,YAAoC,EAAE,OAAiB,EAAE;IACvF,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,SAAS,GAAG,YAAY;SAC3B,MAAM,CAAC,OAAO,CAAC;SACf,MAAM,CAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,oEAAoE;IACpE,6BAA6B;IAC7B,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAa;IACnF,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC1D,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA0B3C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAoF,EAClH,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EACrD,mBAAmB,GAAG,EAAE,GACI;IAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC9C,MAAM,WAAW,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC,QAAQ,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC;IACrC,+CAA+C;IAC/C,OAAO;QACL,GAAG,kBAAkB;QACrB,GAAG,mBAAmB;QACtB,GAAG,WAAW;QACd,GAAG,WAAW;QACd,GAAG,gBAAgB;KACpB,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAInC,EACA,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GACnB;;IAChC,MAAM,gBAAgB,GAAG,MAAA,WAAW,CAAC,QAAQ,0CAAE,YAAY,CAAC;IAC5D,MAAM,eAAe,GAAsB,YAAY,CAAU,QAAQ,CAAC,CAAC,QAA6B,CAAC;IACzG,MAAM,WAAW,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,YAAY,CAAC;IAClD,MAAM,WAAW,GAAG,MAAC,OAAO,CAAC,QAA8B,0CAAE,YAAY,CAAC;IAE1E,OAAO,EAAE,GAAG,YAAY,EAAE,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,YAAoC,EAAE,OAAiB,EAAE;IACvF,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,SAAS,GAAG,YAAY;SAC3B,MAAM,CAAC,OAAO,CAAC;SACf,MAAM,CAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,oEAAoE;IACpE,6BAA6B;IAC7B,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAa;IACnF,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "6.6.2",
+  "version": "6.7.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -42,19 +42,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
-    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/semantic-ui.esm.js --sourcemap --packages=external --format=esm",
-    "build:umd": "rollup dist/semantic-ui.esm.js --format=umd --file=dist/semantic-ui.umd.js --name=@rjsf/semantic-ui",
-    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
-    "cs-check": "oxfmt --check \"{src,test}/**/*.{ts,tsx}\"",
-    "cs-format": "oxfmt \"{src,test}/**/*.{ts,tsx}\"",
-    "lint": "oxlint src test",
-    "precommit": "lint-staged",
-    "test": "vitest run",
-    "test:update": "vitest run --update"
-  },
   "lint-staged": {
     "{src,test}/**/*.ts(x)": [
       "oxlint --fix",
@@ -62,18 +49,18 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.6.x",
-    "@rjsf/utils": "^6.6.x",
     "react": ">=18",
-    "semantic-ui-react": "^2.1.3"
+    "semantic-ui-react": "^2.1.3",
+    "@rjsf/core": "^6.7.0",
+    "@rjsf/utils": "^6.7.0"
   },
   "devDependencies": {
-    "@rjsf/core": "6.6.2",
-    "@rjsf/snapshot-tests": "6.6.2",
-    "@rjsf/utils": "6.6.2",
-    "@rjsf/validator-ajv8": "6.6.2",
     "atob": "^2.1.2",
-    "semantic-ui-react": "^2.1.5"
+    "semantic-ui-react": "^2.1.5",
+    "@rjsf/snapshot-tests": "^6.7.0",
+    "@rjsf/core": "^6.7.0",
+    "@rjsf/utils": "^6.7.0",
+    "@rjsf/validator-ajv8": "^6.7.0"
   },
   "publishConfig": {
     "access": "public"
@@ -100,6 +87,21 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@fluentui/react-component-ref": "^0.63.1",
+    "lodash": "^4.18.1",
     "semantic-ui-css": "^2.5.0"
+  },
+  "scripts": {
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/semantic-ui.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/semantic-ui.esm.js --format=umd --file=dist/semantic-ui.umd.js --name=@rjsf/semantic-ui",
+    "build": "pnpm run build:ts && pnpm run build:cjs && pnpm run build:esm && pnpm run build:umd",
+    "cs-check": "oxfmt --check \"{src,test}/**/*.{ts,tsx}\"",
+    "cs-format": "oxfmt \"{src,test}/**/*.{ts,tsx}\"",
+    "lint": "oxlint src test",
+    "precommit": "lint-staged",
+    "test": "vitest run",
+    "test:update": "vitest run --update"
   }
-}
+}

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -49,8 +49,8 @@ export default function BaseInputTemplate<
   });
   const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
     onChange(newValue === '' ? options.emptyValue : newValue);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => onFocus && onFocus(id, value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
   const handleClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -22,7 +22,7 @@ export default function CheckboxWidget<
     value,
     disabled,
     readonly,
-    label = '',
+    label,
     hideLabel,
     autofocus,
     onChange,
@@ -52,9 +52,9 @@ export default function CheckboxWidget<
   // "const" or "enum" keywords
   const required = schemaRequiresTrueValue<S>(schema);
   const checked = value === 'true' || value === true;
-  const handleChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.checked);
-  const handleBlur: React.FocusEventHandler<HTMLInputElement> = () => onBlur && onBlur(id, value);
-  const handleFocus: React.FocusEventHandler<HTMLInputElement> = () => onFocus && onFocus(id, value);
+  const handleChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange?.(data.checked);
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = () => onBlur?.(id, value);
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = () => onFocus?.(id, value);
   const description = options.description ?? schema.description;
 
   return (

package/src/CyclicSchemaExpandTemplate/CyclicSchemaExpandTemplate.tsx

@@ -0,0 +1,25 @@
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+import { Button } from 'semantic-ui-react';
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `CyclicSchemaExpandProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+  return (
+    <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+      <p style={{ color: 'red' }}>{translateString(TranslatableString.CycleDetected, [name])}</p>
+      <Button id={buttonId} type='button' size='mini' onClick={() => onExpand(fieldPathId[ID_KEY])}>
+        {translateString(TranslatableString.ExpandButton)}
+      </Button>
+    </div>
+  );
+}

package/src/CyclicSchemaExpandTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CyclicSchemaExpandTemplate';
+export * from './CyclicSchemaExpandTemplate';

package/src/RangeWidget/RangeWidget.tsx

@@ -39,9 +39,9 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 
   // oxlint-disable-next-line no-shadow
   const handleChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange && onChange(value === '' ? options.emptyValue : value);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => onFocus && onFocus(id, value);
+    onChange?.(value === '' ? options.emptyValue : value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
 
   return (
     <>

package/src/SelectWidget/SelectWidget.tsx

@@ -15,6 +15,8 @@ import {
   enumOptionValueEncoder,
   getOptionValueFormat,
   labelValue,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription,
 } from '@rjsf/utils';
 import map from 'lodash/map';
 import type { DropdownProps, DropdownItemProps } from 'semantic-ui-react';
@@ -95,6 +97,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const emptyValue = multiple ? [] : '';
   const optionValueFormat = getOptionValueFormat(options);
   const showPlaceholderOption = !multiple && schema.default === undefined;
+  logUnsupportedDefaultForEnum<S>(id, schema, enumOptions, multiple);
   const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
     enumOptions,
     enumDisabled,
@@ -105,29 +108,32 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const handleChange = (_: SyntheticEvent<HTMLElement>, { value: enumValue }: DropdownProps) =>
     onChange(enumOptionValueDecoder<S>(enumValue as string[], enumOptions, optionValueFormat, optEmptyVal));
   const handleBlur = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+    onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, optEmptyVal));
   const handleFocus = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+    onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, optEmptyVal));
   return (
-    <Form.Dropdown
-      key={id}
-      id={id}
-      name={htmlName || id}
-      label={labelValue(label || undefined, hideLabel, false)}
-      multiple={typeof multiple === 'undefined' ? false : multiple}
-      value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
-      error={rawErrors.length > 0}
-      disabled={disabled}
-      placeholder={placeholder}
-      {...semanticProps}
-      required={required}
-      autoFocus={autofocus}
-      readOnly={readonly}
-      options={dropdownOptions}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      aria-describedby={ariaDescribedByIds(id)}
-    />
+    <>
+      <Form.Dropdown
+        key={id}
+        id={id}
+        name={htmlName || id}
+        label={labelValue(label || undefined, hideLabel, false)}
+        multiple={typeof multiple === 'undefined' ? false : multiple}
+        value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
+        error={rawErrors.length > 0}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...semanticProps}
+        required={required}
+        autoFocus={autofocus}
+        readOnly={readonly}
+        options={dropdownOptions}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        aria-describedby={ariaDescribedByIds(id)}
+      />
+      <SelectedOptionDescription {...props} />
+    </>
   );
 }

package/src/Templates/Templates.ts

@@ -4,6 +4,7 @@ import AddButton from '../AddButton';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
 import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../BaseInputTemplate';
+import CyclicSchemaExpandTemplate from '../CyclicSchemaExpandTemplate';
 import DescriptionField from '../DescriptionField';
 import ErrorList from '../ErrorList';
 import FieldErrorTemplate from '../FieldErrorTemplate';
@@ -27,6 +28,7 @@ export function generateTemplates<
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       AddButton,
       CopyButton,

package/src/TextareaWidget/TextareaWidget.tsx

@@ -39,9 +39,9 @@ export default function TextareaWidget<
   });
   // oxlint-disable-next-line no-shadow
   const handleChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange && onChange(value === '' ? options.emptyValue : value);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => onFocus && onFocus(id, value);
+    onChange?.(value === '' ? options.emptyValue : value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
   return (
     <Form.TextArea
       id={id}

package/src/util.tsx

@@ -83,10 +83,10 @@ export function getSemanticErrorProps<
   options = {},
   defaultProps = { size: 'small', pointing: 'above' },
 }: SemanticErrorPropsType<T, S, F>) {
-  const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+  const formContextProps = formContext.semantic?.errorOptions;
   const semanticOptions: GenericObjectType = getUiOptions<T, S, F>(uiSchema).semantic as GenericObjectType;
-  const schemaProps = semanticOptions && semanticOptions.errorOptions;
-  const optionProps = options.semantic && (options.semantic as GenericObjectType).errorOptions;
+  const schemaProps = semanticOptions?.errorOptions;
+  const optionProps = (options.semantic as GenericObjectType)?.errorOptions;
 
   return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }