@rjsf/semantic-ui 5.11.2 → 5.12.0

package/lib/Widgets/Widgets.d.ts

@@ -0,0 +1,4 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+export declare function generateWidgets<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(): RegistryWidgetsType<T, S, F>;
+declare const _default: RegistryWidgetsType<any, RJSFSchema, any>;
+export default _default;

package/lib/Widgets/Widgets.js

@@ -0,0 +1,18 @@
+import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';
+import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
+import RadioWidget from '../RadioWidget/RadioWidget';
+import RangeWidget from '../RangeWidget/RangeWidget';
+import SelectWidget from '../SelectWidget/SelectWidget';
+import TextareaWidget from '../TextareaWidget/TextareaWidget';
+export function generateWidgets() {
+    return {
+        CheckboxWidget,
+        CheckboxesWidget,
+        RadioWidget,
+        RangeWidget,
+        SelectWidget,
+        TextareaWidget,
+    };
+}
+export default generateWidgets();
+//# sourceMappingURL=Widgets.js.map

package/lib/Widgets/Widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widgets.js","sourceRoot":"","sources":["../../src/Widgets/Widgets.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,MAAM,UAAU,eAAe;IAK7B,OAAO;QACL,cAAc;QACd,gBAAgB;QAChB,WAAW;QACX,WAAW;QACX,YAAY;QACZ,cAAc;KACf,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,EAAE,CAAC"}

package/lib/Widgets/index.d.ts

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

package/lib/Widgets/index.js

@@ -0,0 +1,3 @@
+export { default } from './Widgets';
+export * from './Widgets';
+//# sourceMappingURL=index.js.map

package/lib/Widgets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC"}

package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: WrapIfAdditionalTemplateProps<T, S, F>): JSX.Element;

package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ADDITIONAL_PROPERTY_FLAG, TranslatableString, } from '@rjsf/utils';
+import { Form, Grid } from 'semantic-ui-react';
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate(props) {
+    const { children, classNames, style, disabled, id, label, onDropPropertyClick, onKeyChange, readonly, required, schema, uiSchema, registry, } = props;
+    const { templates, translateString } = registry;
+    // Button templates are not overridden in the uiSchema
+    const { RemoveButton } = templates.ButtonTemplates;
+    const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+    const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
+    const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+    if (!additional) {
+        return (_jsx("div", Object.assign({ className: classNames, style: style }, { children: children })));
+    }
+    const handleBlur = ({ target }) => onKeyChange(target.value);
+    return (_jsx("div", Object.assign({ className: classNames, style: style }, { children: _jsx(Grid, Object.assign({ columns: 'equal' }, { children: _jsxs(Grid.Row, { children: [_jsx(Grid.Column, Object.assign({ className: 'form-additional' }, { children: _jsx(Form.Group, Object.assign({ widths: 'equal', grouped: true }, { children: _jsx(Form.Input, { className: 'form-group', hasFeedback: true, fluid: true, htmlFor: `${id}`, label: keyLabel, required: required, defaultValue: label, disabled: disabled || (readonlyAsDisabled && readonly), id: `${id}`, name: `${id}`, onBlur: !readonly ? handleBlur : undefined, style: wrapperStyle, type: 'text' }) })) })), _jsx(Grid.Column, Object.assign({ className: 'form-additional', verticalAlign: 'middle' }, { children: children })), _jsx(Grid.Column, { children: _jsx(RemoveButton, { iconType: 'mini', className: 'array-item-remove', disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) })] }) })) }), `${id}-key`));
+}
+//# sourceMappingURL=WrapIfAdditionalTemplate.js.map

package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapIfAdditionalTemplate.js","sourceRoot":"","sources":["../../src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,wBAAwB,EAIxB,kBAAkB,GAEnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAI9C,KAA6C;IAC7C,MAAM,EACJ,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,EACR,EAAE,EACF,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAC;IAChD,sDAAsD;IACtD,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC,eAAe,CAAC;IACnD,MAAM,QAAQ,GAAG,eAAe,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvE,MAAM,EAAE,kBAAkB,GAAG,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC;IAEzE,MAAM,UAAU,GAAG,wBAAwB,IAAI,MAAM,CAAC;IAEtD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CACL,4BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,gBACrC,QAAQ,IACL,CACP,CAAC;KACH;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3F,OAAO,CACL,4BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,gBACtC,KAAC,IAAI,kBAAC,OAAO,EAAC,OAAO,gBACnB,MAAC,IAAI,CAAC,GAAG,eACP,KAAC,IAAI,CAAC,MAAM,kBAAC,SAAS,EAAC,iBAAiB,gBACtC,KAAC,IAAI,CAAC,KAAK,kBAAC,MAAM,EAAC,OAAO,EAAC,OAAO,sBAChC,KAAC,IAAI,CAAC,KAAK,IACT,SAAS,EAAC,YAAY,EACtB,WAAW,QACX,KAAK,QACL,OAAO,EAAE,GAAG,EAAE,EAAE,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,QAAQ,IAAI,CAAC,kBAAkB,IAAI,QAAQ,CAAC,EACtD,EAAE,EAAE,GAAG,EAAE,EAAE,EACX,IAAI,EAAE,GAAG,EAAE,EAAE,EACb,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,MAAM,GACC,IACH,IACD,EACd,KAAC,IAAI,CAAC,MAAM,kBAAC,SAAS,EAAC,iBAAiB,EAAC,aAAa,EAAC,QAAQ,gBAC5D,QAAQ,IACG,EACd,KAAC,IAAI,CAAC,MAAM,cACV,KAAC,YAAY,IACX,QAAQ,EAAC,MAAM,EACf,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,GACU,IACL,IACN,KApCsC,GAAG,EAAE,MAAM,CAqCpD,CACP,CAAC;AACJ,CAAC"}

package/lib/WrapIfAdditionalTemplate/index.d.ts

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

package/lib/WrapIfAdditionalTemplate/index.js

@@ -0,0 +1,3 @@
+export { default } from './WrapIfAdditionalTemplate';
+export * from './WrapIfAdditionalTemplate';
+//# sourceMappingURL=index.js.map

package/lib/WrapIfAdditionalTemplate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/WrapIfAdditionalTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,cAAc,4BAA4B,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import SemanticUIForm from './SemanticUIForm/SemanticUIForm';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Form, generateForm } from './SemanticUIForm';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export default SemanticUIForm;

package/lib/index.js

@@ -0,0 +1,7 @@
+import SemanticUIForm from './SemanticUIForm/SemanticUIForm';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Form, generateForm } from './SemanticUIForm';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export default SemanticUIForm;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEhE,eAAe,cAAc,CAAC"}

package/lib/util.d.ts

@@ -0,0 +1,60 @@
+import { ElementType } from 'react';
+import { UiSchema, GenericObjectType, FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType } from '@rjsf/utils';
+export type SemanticPropsTypes<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = {
+    formContext?: F;
+    uiSchema?: UiSchema<T, S, F>;
+    options?: UIOptionsType<T, S, F>;
+    defaultSchemaProps?: GenericObjectType;
+    defaultContextProps?: GenericObjectType;
+};
+export type SemanticErrorPropsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = {
+    formContext?: F;
+    uiSchema?: UiSchema<T, S, F>;
+    options?: UIOptionsType<T, S, F>;
+    defaultProps?: GenericObjectType;
+};
+export type WrapProps = GenericObjectType & {
+    wrap: boolean;
+    component?: ElementType;
+};
+/**
+ * Extract props meant for semantic UI components from props that are
+ * passed to Widgets, Templates and Fields.
+ * @param {Object} params
+ * @param {Object?} params.formContext
+ * @param {Object?} params.uiSchema
+ * @param {Object?} params.options
+ * @param {Object?} params.defaultSchemaProps
+ * @param {Object?} params.defaultContextProps
+ * @returns {any}
+ */
+export declare function getSemanticProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ formContext, uiSchema, options, defaultSchemaProps, defaultContextProps, }: SemanticPropsTypes<T, S, F>): any;
+/**
+ * Extract error props meant for semantic UI components from props that are
+ * passed to Widgets, Templates and Fields.
+ * @param {Object} params
+ * @param {Object?} params.formContext
+ * @param {Object?} params.uiSchema
+ * @param {Object?} params.defaultProps
+ * @returns {any}
+ */
+export declare function getSemanticErrorProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ formContext, uiSchema, options, defaultProps, }: SemanticErrorPropsType<T, S, F>): any;
+/**
+ * Combine multiple strings containing class names into a single string,
+ * removing duplicates. E.g.
+ * cleanClassNames('bar', 'baz bar', 'x y ', undefined)
+ * // 'bar baz x y'
+ * @param {Array} classNameArr
+ * @param {Array} omit
+ * @returns {string}
+ */
+export declare function cleanClassNames(classNameArr: Array<string | undefined>, omit?: string[]): string;
+/**
+ *
+ * @param {boolean} wrap
+ * @param Component
+ * @param {Object} props
+ * @returns {*}
+ * @constructor
+ */
+export declare function MaybeWrap({ wrap, component: Component, ...props }: WrapProps): any;

package/lib/util.js

@@ -0,0 +1,69 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getUiOptions, } from '@rjsf/utils';
+/**
+ * Extract props meant for semantic UI components from props that are
+ * passed to Widgets, Templates and Fields.
+ * @param {Object} params
+ * @param {Object?} params.formContext
+ * @param {Object?} params.uiSchema
+ * @param {Object?} params.options
+ * @param {Object?} params.defaultSchemaProps
+ * @param {Object?} params.defaultContextProps
+ * @returns {any}
+ */
+export function getSemanticProps({ formContext = {}, uiSchema = {}, options = {}, defaultSchemaProps = { fluid: true, inverted: false }, defaultContextProps = {}, }) {
+    const formContextProps = formContext.semantic;
+    const schemaProps = getUiOptions(uiSchema).semantic;
+    const optionProps = options.semantic;
+    // formContext props should overide other props
+    return Object.assign({}, Object.assign({}, defaultSchemaProps), Object.assign({}, defaultContextProps), schemaProps, optionProps, formContextProps);
+}
+/**
+ * Extract error props meant for semantic UI components from props that are
+ * passed to Widgets, Templates and Fields.
+ * @param {Object} params
+ * @param {Object?} params.formContext
+ * @param {Object?} params.uiSchema
+ * @param {Object?} params.defaultProps
+ * @returns {any}
+ */
+export function getSemanticErrorProps({ formContext = {}, uiSchema = {}, options = {}, defaultProps = { size: 'small', pointing: 'above' }, }) {
+    const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+    const semanticOptions = getUiOptions(uiSchema).semantic;
+    const schemaProps = semanticOptions && semanticOptions.errorOptions;
+    const optionProps = options.semantic && options.semantic.errorOptions;
+    return Object.assign({}, Object.assign({}, defaultProps), schemaProps, optionProps, formContextProps);
+}
+/**
+ * Combine multiple strings containing class names into a single string,
+ * removing duplicates. E.g.
+ * cleanClassNames('bar', 'baz bar', 'x y ', undefined)
+ * // 'bar baz x y'
+ * @param {Array} classNameArr
+ * @param {Array} omit
+ * @returns {string}
+ */
+export function cleanClassNames(classNameArr, omit = []) {
+    // Split each arg on whitespace, and add it to an array. Skip false-y args
+    // like "" and undefined.
+    const classList = classNameArr
+        .filter(Boolean)
+        .reduce((previous, current) => previous.concat(current.trim().split(/\s+/)), []);
+    // Remove any class names from omit, and make the rest unique before
+    // returning them as a string
+    return [...new Set(classList.filter((cn) => !omit.includes(cn)))].join(' ');
+}
+/**
+ *
+ * @param {boolean} wrap
+ * @param Component
+ * @param {Object} props
+ * @returns {*}
+ * @constructor
+ */
+export function MaybeWrap(_a) {
+    var { wrap, component: Component = 'div' } = _a, props = __rest(_a, ["wrap", "component"]);
+    return wrap ? _jsx(Component, Object.assign({}, props)) : props.children;
+}
+//# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.tsx"],"names":[],"mappings":";;AACA,OAAO,EAGL,YAAY,GAKb,MAAM,aAAa,CAAC;AA0BrB;;;;;;;;;;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,MAAM,CAAC,MAAM,CAClB,EAAE,oBACG,kBAAkB,qBAClB,mBAAmB,GACxB,WAAW,EACX,WAAW,EACX,gBAAgB,CACjB,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,MAAM,CAAC,MAAM,CAAC,EAAE,oBAAO,YAAY,GAAI,WAAW,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC;AAC5F,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,YAAuC,EAAE,OAAiB,EAAE;IAC1F,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,EAA2D;QAA3D,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,OAAuB,EAAlB,KAAK,cAA9C,qBAAgD,CAAF;IACtE,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC1D,CAAC"}

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "5.11.2",
+  "version": "5.12.0",
   "main": "dist/index.js",
-  "module": "dist/semantic-ui.esm.js",
-  "typings": "dist/index.d.ts",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
   "description": "Semantic UI theme, fields and widgets for react-jsonschema-form",
   "files": [
-    "dist"
+    "dist",
+    "lib",
+    "src"
   ],
   "engineStrict": false,
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "build": "rimraf dist && dts build --rollupTypes --format cjs,es,umd",
+    "build:ts": "rimraf lib && tsc",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --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": "rimraf dist && npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
     "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
     "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
     "lint": "eslint src test",
@@ -40,24 +46,26 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@rjsf/core": "^5.11.2",
-    "@rjsf/utils": "^5.11.2",
-    "@rjsf/validator-ajv8": "^5.11.2",
-    "@types/lodash": "^4.14.195",
+    "@rjsf/core": "^5.12.0",
+    "@rjsf/utils": "^5.12.0",
+    "@rjsf/validator-ajv8": "^5.12.0",
+    "@types/lodash": "^4.14.196",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/react-test-renderer": "^17.0.2",
     "atob": "^2.1.2",
-    "babel-jest": "^29.6.1",
-    "dts-cli": "^1.6.3",
-    "eslint": "^8.44.0",
-    "jest": "^29.6.1",
+    "babel-jest": "^29.6.2",
+    "esbuild": "^0.18.19",
+    "eslint": "^8.46.0",
+    "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.1",
     "nanoid": "^3.3.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "rollup": "^3.27.2",
+    "typescript": "^4.9.5"
   },
   "publishConfig": {
     "access": "public"
@@ -87,5 +95,5 @@
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^1.3.1"
   },
-  "gitHead": "2fafced84e18aa2cd487715d11d2730cd23333f3"
+  "gitHead": "bab797c43a34e5ec68a84b2bdabb3c377e46b092"
 }

package/src/AddButton/AddButton.tsx

@@ -0,0 +1,24 @@
+import { Button, Icon, ButtonProps } from 'semantic-ui-react';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  uiSchema,
+  registry,
+  color,
+  ...props
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <Button
+      title={translateString(TranslatableString.AddItemButton)}
+      color={color as ButtonProps['color']}
+      {...props}
+      icon
+      size='tiny'
+    >
+      <Icon name='plus' />
+    </Button>
+  );
+}

package/src/AddButton/index.ts

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

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,102 @@
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
+import { Button, Grid, Segment } from 'semantic-ui-react';
+
+import { MaybeWrap } from '../util';
+
+const gridStyle = (vertical: boolean) => ({
+  display: 'grid',
+  gridTemplateColumns: `1fr ${vertical ? 65 : 150}px`,
+});
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  // Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
+  const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic as GenericObjectType;
+  return (
+    <div className='array-item'>
+      <MaybeWrap wrap={wrapItem} component={Segment}>
+        <Grid style={{ ...gridStyle(!horizontalButtons), alignItems: 'center' }}>
+          <Grid.Column width={16} verticalAlign='middle'>
+            {children}
+          </Grid.Column>
+          {hasToolbar && (
+            <Grid.Column>
+              {(hasMoveUp || hasMoveDown || hasRemove) && (
+                <Button.Group size='mini' vertical={!horizontalButtons}>
+                  {(hasMoveUp || hasMoveDown) && (
+                    <MoveUpButton
+                      className='array-item-move-up'
+                      disabled={disabled || readonly || !hasMoveUp}
+                      onClick={onReorderClick(index, index - 1)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                  {(hasMoveUp || hasMoveDown) && (
+                    <MoveDownButton
+                      className='array-item-move-down'
+                      disabled={disabled || readonly || !hasMoveDown}
+                      onClick={onReorderClick(index, index + 1)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                  {hasCopy && (
+                    <CopyButton
+                      className='array-item-copy'
+                      disabled={disabled || readonly}
+                      onClick={onCopyIndexClick(index)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                  {hasRemove && (
+                    <RemoveButton
+                      className='array-item-remove'
+                      disabled={disabled || readonly}
+                      onClick={onDropIndexClick(index)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                </Button.Group>
+              )}
+            </Grid.Column>
+          )}
+        </Grid>
+      </MaybeWrap>
+    </div>
+  );
+}

package/src/ArrayFieldItemTemplate/index.ts

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

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -0,0 +1,114 @@
+import {
+  getTemplate,
+  getUiOptions,
+  isFixedItems,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  UI_OPTIONS_KEY,
+} from '@rjsf/utils';
+
+import { cleanClassNames, getSemanticProps } from '../util';
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    uiSchema,
+    idSchema,
+    canAdd,
+    className,
+    // classNames, This is not part of the type, so it is likely never passed in
+    disabled,
+    formContext,
+    items,
+    onAddClick,
+    // options, This is not part of the type, so it is likely never passed in
+    readonly,
+    required,
+    schema,
+    title,
+    registry,
+  } = props;
+  const semanticProps = getSemanticProps<T, S, F>({
+    uiSchema,
+    formContext,
+    defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
+  });
+  const { horizontalButtons, wrapItem } = semanticProps;
+  const semantic = { horizontalButtons, wrapItem };
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <div className={cleanClassNames([className, isFixedItems<S>(schema) ? '' : 'sortable-form-fields'])}>
+      <ArrayFieldTitleTemplate
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        schema={schema}
+        uiSchema={uiSchema}
+        required={required}
+        registry={registry}
+      />
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <div key={`array-item-list-${idSchema.$id}`}>
+        <div className='row array-item-list'>
+          {items &&
+            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldTemplateItemType<T, S, F>) => {
+              // Merge in the semantic props from the ArrayFieldTemplate into each of the items
+              const mergedUiSchema = {
+                ...itemUiSchema,
+                [UI_OPTIONS_KEY]: {
+                  ...itemUiSchema[UI_OPTIONS_KEY],
+                  semantic,
+                },
+              };
+              return <ArrayFieldItemTemplate key={key} {...props} uiSchema={mergedUiSchema} />;
+            })}
+        </div>
+        {canAdd && (
+          <div
+            style={{
+              marginTop: '1rem',
+              position: 'relative',
+              textAlign: 'right',
+            }}
+          >
+            <AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ArrayFieldTemplate/index.ts

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