@ssa-ui-kit/core 2.8.2 → 2.9.0-canary-07014b1-20250414

package/dist/index.js

@@ -110,6 +110,7 @@ __webpack_require__.d(__webpack_exports__, {
   FormRadioGroup: () => (/* reexport */ FormRadioGroup_FormRadioGroup),
   FullscreenModeContext: () => (/* reexport */ FullscreenModeContext),
   FullscreenModeProvider: () => (/* reexport */ FullscreenModeProvider),
+  GaugeChart: () => (/* reexport */ GaugeChart),
   Icon: () => (/* reexport */ Icon_Icon),
   ImageItem: () => (/* reexport */ ImageItem),
   Indicator: () => (/* reexport */ Indicator_Indicator),
@@ -935,10 +936,12 @@ __webpack_require__.d(colorPalettes_namespaceObject, {
 var JsonSchemaForm_namespaceObject = {};
 __webpack_require__.r(JsonSchemaForm_namespaceObject);
 __webpack_require__.d(JsonSchemaForm_namespaceObject, {
+  Fields: () => (fields),
   Form: () => (JsonSchemaForm_Form),
   Templates: () => (templates),
   Theme: () => (Theme),
   Widgets: () => (widgets),
+  generateFields: () => (generateFields),
   generateForm: () => (generateForm),
   generateTemplates: () => (generateTemplates),
   generateTheme: () => (generateTheme),
@@ -7645,8 +7648,8 @@ const useAccordionGroupContext = () => (0,external_react_namespaceObject.useCont
 const useAccordionGroup = () => {
   const [openedAccordions, setOpenedAccordions] = (0,external_react_namespaceObject.useState)([]);
   const [stayOpen, setStayOpen] = (0,external_react_namespaceObject.useState)(false);
-  const toggleOpenedAccordion = accordion => {
-    const isOpened = !!openedAccordions.find(activeAccordion => activeAccordion.id === accordion.id);
+  const toggleOpenedAccordion = (accordion, opened) => {
+    const isOpened = opened ?? !!openedAccordions.find(activeAccordion => activeAccordion.id === accordion.id);
     if (stayOpen) {
       const newOpenedAccordions = isOpened ? openedAccordions.filter(activeAccordion => activeAccordion.id !== accordion.id) : openedAccordions.concat([accordion]);
       setOpenedAccordions(newOpenedAccordions);
@@ -7731,20 +7734,15 @@ const AccordionGroup = ({
     children: external_react_namespaceObject.Children.map(children, child => {
       if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child)) {
         const {
-          renderContent,
-          renderTitle,
-          ...rest
+          id
         } = child.props;
-        const id = rest.id;
         const isOpened = !!openedAccordions?.find(activeAccordion => activeAccordion.id === id);
         return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
           key: id,
           isOpened,
           size,
           onClick: () => toggleOpenedAccordion({
-            id,
-            renderContent: renderContent.bind(null, rest),
-            renderTitle: renderTitle.bind(null, rest)
+            id
           })
         });
       }
@@ -7822,7 +7820,8 @@ const AccordionTitle = ({
   isOpened,
   ariaControls,
   className,
-  onClick
+  onClick,
+  ...props
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const styles = createTitleStyles(theme, isOpened);
@@ -7839,6 +7838,7 @@ const AccordionTitle = ({
         onClick();
       }
     },
+    ...props,
     children: (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
       children: [title, isOpened ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-down"
@@ -15716,7 +15716,6 @@ function TreeMapChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-
 var TreeMapChart_ref =  true ? {
   name: "1qkt16r",
   styles: "position:relative;height:100%;width:100%"
@@ -15782,6 +15781,429 @@ const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
 
 ;// ./src/components/Charts/hooks/index.ts
 
+;// ./src/components/Charts/GaugeChart/components/GaugeChartHeader.tsx
+
+function GaugeChartHeader_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+const GaugeChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1mg237f0"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var GaugeChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var GaugeChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const GaugeChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: GaugeChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: GaugeChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartCanvas.tsx
+
+function GaugeChartCanvas_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const GaugeChartCanvas = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e838210"
+} : 0)( true ? {
+  name: "1f0ps9l",
+  styles: "position:relative;width:100%;max-height:100%;aspect-ratio:3"
+} : 0);
+;// ./src/components/Charts/GaugeChart/components/GaugeChartLayer.tsx
+
+function GaugeChartLayer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const GaugeChartLayer = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ecz750w0"
+} : 0)( true ? {
+  name: "xyyuvf",
+  styles: "position:absolute;height:100%;width:100%"
+} : 0);
+;// ./src/components/Charts/GaugeChart/components/GaugeChartBase.tsx
+
+
+
+const GaugeChartBase = ({
+  ...props
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(pie_namespaceObject.ResponsivePie, {
+    startAngle: -90,
+    endAngle: 90,
+    innerRadius: 0.8,
+    padAngle: 1,
+    cornerRadius: 100,
+    enableArcLabels: false,
+    enableArcLinkLabels: false,
+    colors: ({
+      data
+    }) => data.color ?? theme.colors.greyLighter,
+    isInteractive: false,
+    animate: false,
+    sortByValue: false,
+    fit: true,
+    layers: ['arcs', 'legends'],
+    ...props
+  });
+};
+;// ./src/components/Charts/GaugeChart/utils/math.ts
+const scaleFromBase = (baseValue, base, current) => {
+  return current / base * baseValue;
+};
+const normalizeToRange = (value, min, max, targetMin = 0, targetMax = 100) => {
+  if (max === min) return targetMin;
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const ratio = (clampedValue - min) / (max - min);
+  return ratio * (targetMax - targetMin) + targetMin;
+};
+const calculateFittedSize = (container, aspectRatio) => {
+  const containerRatio = container.width / container.height;
+  if (containerRatio < aspectRatio) {
+    // container is too tall → constrain by width
+    const width = container.width;
+    return {
+      width,
+      height: width / aspectRatio
+    };
+  } else {
+    // container is too wide → constrain by height
+    const height = container.height;
+    return {
+      width: height * aspectRatio,
+      height
+    };
+  }
+};
+const centeredOffset = (container, content) => {
+  return {
+    x: (container.width - content.width) / 2,
+    y: (container.height - content.height) / 2
+  };
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartTickers.tsx
+
+
+
+const GaugeChartTickers = ({
+  pieOffset,
+  pieSize,
+  minValue,
+  maxValue,
+  ticks = []
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  if (pieSize.height <= 0) {
+    return;
+  }
+  const radius = pieSize.width / 2;
+  const labelRadius = radius * 1.05;
+  const pieBottomCenter = {
+    x: pieOffset.x + pieSize.width / 2,
+    y: pieOffset.y + pieSize.height
+  };
+  const tickLabels = ticks.map(tick => {
+    const {
+      value,
+      label
+    } = typeof tick === 'number' ? {
+      value: tick,
+      label: tick
+    } : tick;
+    const normalizedValue = normalizeToRange(value, minValue, maxValue, 0, 100);
+    const angle = (-90 + normalizedValue / 100 * 180) * (Math.PI / 180);
+    const x = pieBottomCenter.x + labelRadius * Math.sin(angle);
+    const y = pieBottomCenter.y - labelRadius * Math.cos(angle);
+    const align = normalizedValue > 50 ? 'left' : 'right';
+    return {
+      x,
+      y,
+      normalizedValue,
+      label: label ?? value,
+      align
+    };
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+    children: tickLabels.map(({
+      normalizedValue,
+      label,
+      align,
+      x,
+      y
+    }, index) => {
+      let translateX = '-50%'; // center
+      if (align === 'right') {
+        translateX = '-100%';
+      }
+      if (align === 'left') {
+        translateX = '0%';
+      }
+      return (0,jsx_runtime_namespaceObject.jsx)("div", {
+        // prevents class creation for each label
+        style: {
+          left: `${x}px`,
+          top: `${y}px`,
+          transform: `translate(${translateX}, -50%)`
+        },
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          color: theme.colors.greyDarker60,
+          position: 'absolute',
+          fontSize: 12,
+          fontWeight: 500
+        },  true ? "" : 0,  true ? "" : 0),
+        children: label
+      }, normalizedValue + index);
+    })
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartNeedle.tsx
+
+
+const GaugeChartNeedle = ({
+  pieSize,
+  pieOffset,
+  needleAngle
+}) => {
+  if (pieSize.height <= 0) {
+    return;
+  }
+  const needle = {
+    x: pieOffset.x + pieSize.width / 2,
+    y: pieOffset.y + pieSize.height - scaleFromBase(10, 100, pieSize.height),
+    width: scaleFromBase(40, 100, pieSize.width) - scaleFromBase(10, 100, pieSize.height),
+    height: scaleFromBase(8, 100, pieSize.height)
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    style: {
+      position: 'absolute',
+      top: `${needle.y}px`,
+      left: `${needle.x}px`,
+      width: `${needle.width}px`,
+      borderRadius: needle.height / 2,
+      height: `${needle.height}px`,
+      backgroundColor: '#73767B',
+      transformOrigin: 'left center',
+      transform: `rotate(${needleAngle}deg)`
+    }
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartLabels.tsx
+
+
+function GaugeChartLabels_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+const GaugeChartLabel = /*#__PURE__*/base_default()("span",  true ? {
+  target: "e1hn6mi60"
+} : 0)("line-height:0;color:", ({
+  theme
+}) => theme.colors.greyDarker60, ";" + ( true ? "" : 0));
+var GaugeChartLabels_ref =  true ? {
+  name: "1azakc",
+  styles: "text-align:center"
+} : 0;
+var GaugeChartLabels_ref2 =  true ? {
+  name: "5bhc30",
+  styles: "margin-bottom:8px"
+} : 0;
+var GaugeChartLabels_ref3 =  true ? {
+  name: "6r7ers",
+  styles: "font-size:28px;font-weight:700;white-space:nowrap;color:unset"
+} : 0;
+const GaugeChartLabels = ({
+  width,
+  withLabels,
+  value,
+  unitLabel,
+  minLabel,
+  maxLabel,
+  totalLabel
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      width,
+      justifyContent: 'space-between'
+    },  true ? "" : 0,  true ? "" : 0),
+    children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+      children: withLabels && minLabel
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: GaugeChartLabels_ref,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: GaugeChartLabels_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+          children: withLabels && totalLabel
+        })
+      }), (0,jsx_runtime_namespaceObject.jsxs)(GaugeChartLabel, {
+        css: GaugeChartLabels_ref3,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)("span", {
+          children: [value, " "]
+        }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+          css: /*#__PURE__*/(0,react_namespaceObject.css)({
+            fontSize: 18,
+            fontWeight: 500,
+            color: theme.colors.greyDarker80
+          },  true ? "" : 0,  true ? "" : 0),
+          children: unitLabel
+        })]
+      })]
+    }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+      children: withLabels && maxLabel
+    })]
+  });
+};
+;// ./src/components/Charts/GaugeChart/GaugeChart.tsx
+function GaugeChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+
+var GaugeChart_ref =  true ? {
+  name: "13udsys",
+  styles: "height:100%"
+} : 0;
+var GaugeChart_ref2 =  true ? {
+  name: "67cb9k",
+  styles: "justify-content:center;height:100%"
+} : 0;
+const GaugeChartComponent = ({
+  minLabel,
+  maxLabel,
+  totalLabel,
+  unitLabel,
+  minValue,
+  maxValue,
+  value,
+  title,
+  chartProps,
+  trackProps,
+  widgetCardProps,
+  withLabels = true,
+  withTrack = true,
+  withNeedle = true,
+  features = [],
+  segments = [],
+  ticks = []
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    ref: containerRef,
+    ...containerSize
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const normalizedValue = normalizeToRange(value, minValue, maxValue, 0, 100);
+  const normalizedSegments = segments.map((segment, index) => {
+    const prev = segments[index - 1];
+    const start = normalizeToRange(prev?.value ?? minValue, minValue, maxValue, 0, 100);
+    const end = normalizeToRange(segment.value, minValue, maxValue, 0, 100);
+    return {
+      ...segment,
+      value: end - start
+    };
+  });
+  if (normalizedSegments.length === 0) {
+    normalizedSegments.push({
+      value: normalizedValue,
+      color: theme.colors.blueLight
+    });
+  }
+
+  // ensure normalized segments value sum to 100
+  const totalValue = normalizedSegments.reduce((acc, segment) => acc + segment.value, 0);
+  if (totalValue !== 100) {
+    normalizedSegments.push({
+      value: 100 - totalValue,
+      color: 'transparent'
+    });
+  }
+  const needleAngle = 180 + normalizedValue / 100 * 180;
+  const trackSize = 100;
+  const pieAspectRatio = 2;
+  const pieSize = calculateFittedSize(containerSize, pieAspectRatio);
+  const pieOffset = centeredOffset(containerSize, pieSize);
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: GaugeChart_ref,
+    children: (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+      features: features,
+      cardProps: {
+        title,
+        headerContent: (0,jsx_runtime_namespaceObject.jsx)(GaugeChartHeader, {
+          features: features
+        }),
+        ...widgetCardProps
+      },
+      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+        direction: "column",
+        css: GaugeChart_ref2,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)(GaugeChartCanvas, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartLayer, {
+            children: withTrack && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartBase, {
+              data: [{
+                value: trackSize
+              }],
+              colors: theme.colors.greyLighter,
+              layers: ['arcs'],
+              ...trackProps
+            })
+          }), (0,jsx_runtime_namespaceObject.jsxs)(GaugeChartLayer, {
+            ref: containerRef,
+            children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartBase, {
+              data: normalizedSegments,
+              ...chartProps
+            }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartTickers, {
+              pieOffset: pieOffset,
+              pieSize: pieSize,
+              minValue: minValue,
+              maxValue: maxValue,
+              ticks: ticks
+            }), withNeedle && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartNeedle, {
+              needleAngle: needleAngle,
+              pieOffset: pieOffset,
+              pieSize: pieSize
+            })]
+          })]
+        }), pieSize.height > 0 && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabels, {
+          withLabels: withLabels,
+          width: `${pieSize.width}px`,
+          value: value,
+          unitLabel: unitLabel,
+          minLabel: minLabel,
+          maxLabel: maxLabel,
+          totalLabel: totalLabel
+        })]
+      })
+    })
+  });
+};
+const GaugeChart = WithFullscreenMode(GaugeChartComponent);
+;// ./src/components/Charts/GaugeChart/index.ts
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -15789,6 +16211,7 @@ const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -16181,6 +16604,10 @@ const useTypeahead = ({
   }, [selectedItems, children]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setSelected(selectedItems || []);
+    if (!selectedItems?.length) {
+      setInputValue('');
+      setFirstSuggestion('');
+    }
   }, [selectedItems]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
@@ -16386,13 +16813,15 @@ function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+// TODO: automatically calculate max-height
+// https://github.com/ssagroup/ui-kit/issues/385
 const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1vig1dw6"
 } : 0)("padding:0;margin:0;list-style:none;background:#fff;border-radius:8px;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
-}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";" + ( true ? "" : 0));
+}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e1vig1dw5"
 } : 0)("display:flex;align-items:center;padding:8px 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:12px;height:40px;background:", ({
@@ -17037,14 +17466,9 @@ const core_namespaceObject = require("@rjsf/core");
 ;// external "@rjsf/utils"
 const external_rjsf_utils_namespaceObject = require("@rjsf/utils");
 ;// ./src/components/JsonSchemaForm/templates/SubmitButton.tsx
-function SubmitButton_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
-var SubmitButton_ref =  true ? {
-  name: "xda5ep",
-  styles: "margin-top:12px"
-} : 0;
 const SubmitButton = ({
   uiSchema
 }) => {
@@ -17058,7 +17482,6 @@ const SubmitButton = ({
   }
   return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
     type: "submit",
-    css: SubmitButton_ref,
     ...submitButtonProps,
     "data-testid": "rjsf-submit-button",
     children: submitText
@@ -17674,10 +18097,13 @@ const RadioWidget = props => {
 
 const SelectWidget = props => {
   const {
+    id,
+    name,
     disabled,
     options,
     placeholder,
     onChange,
+    onBlur,
     onChangeOverride,
     value
   } = props;
@@ -17686,24 +18112,49 @@ const SelectWidget = props => {
     enumDisabled = []
   } = options;
   const selectedIndex = (0,external_rjsf_utils_namespaceObject.enumOptionsIndexForValue)(value, enumOptions);
-  const handleChange = onChangeOverride ? onChangeOverride : ({
-    value
-  }) => onChange((0,external_rjsf_utils_namespaceObject.enumOptionsValueForIndex)(value, enumOptions));
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    children: (0,jsx_runtime_namespaceObject.jsx)(Dropdown_Dropdown, {
-      isDisabled: disabled,
-      onChange: handleChange,
-      placeholder: placeholder,
-      selectedItem: selectedIndex ? {
-        value: selectedIndex,
-        label: enumOptions[Number(selectedIndex)].label
-      } : undefined,
-      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => (0,jsx_runtime_namespaceObject.jsx)(DropdownOption_DropdownOption, {
-        value: String(i),
-        label: option.label,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1
-      }, i))
-    })
+  const handleChange = onChangeOverride ? onChangeOverride : value => {
+    onChange(value);
+  };
+  const handleBlur = ({
+    target
+  }) => onBlur(id, target && target.value);
+  const onEmptyChange = isEmpty => {
+    if (isEmpty) {
+      handleChange();
+    }
+  };
+  const register = fieldName => ({
+    onBlur: handleBlur,
+    onChange: handleChange,
+    name: fieldName,
+    ref: () => {}
+  });
+  const items = Array.isArray(enumOptions) ? enumOptions : [];
+  const selectedItems = selectedIndex ? [items[Number(selectedIndex)].value] : [];
+  return (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
+    width: "100%",
+    selectedItems: selectedItems,
+    isDisabled: disabled,
+    name: name
+    // RJSF provides placeholder as empty string
+    ,
+    placeholder: placeholder || undefined,
+    onChange: handleChange,
+    register: register,
+    onEmptyChange: onEmptyChange,
+    renderOption: ({
+      label,
+      input
+    }) => highlightInputMatch(label, input),
+    children: items.map(({
+      label,
+      value
+    }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+      value: value,
+      label: label || value,
+      isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
+      children: label || value
+    }, value))
   });
 };
 ;// ./src/components/JsonSchemaForm/widgets/PasswordWidget.tsx
@@ -17815,6 +18266,35 @@ const RangeWidget = props => {
     })
   });
 };
+;// ./src/components/JsonSchemaForm/widgets/DateWidget.tsx
+
+
+
+
+const DateWidget = props => {
+  const {
+    value,
+    name,
+    uiSchema,
+    onChange
+  } = props;
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const {
+    outputFormat = 'yyyy-MM-dd'
+  } = uiSchema?.['ui:options'] || {};
+  const onDateChange = date => {
+    const formattedDate = date && external_luxon_namespaceObject.DateTime.fromJSDate(date).toFormat(outputFormat);
+    onChange(formattedDate);
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
+    ...useFormResult,
+    children: (0,jsx_runtime_namespaceObject.jsx)(DatePicker, {
+      name: name,
+      defaultValue: value,
+      onChange: onDateChange
+    })
+  });
+};
 ;// ./src/components/JsonSchemaForm/widgets/index.ts
 
 
@@ -17822,6 +18302,7 @@ const RangeWidget = props => {
 
 
 
+
 function generateWidgets() {
   return {
     CheckboxWidget: CheckboxWidget,
@@ -17829,20 +18310,173 @@ function generateWidgets() {
     RadioWidget: RadioWidget,
     PasswordWidget: PasswordWidget,
     SelectWidget: SelectWidget,
-    RangeWidget: RangeWidget
+    RangeWidget: RangeWidget,
+    DateWidget: DateWidget
   };
 }
 /* harmony default export */ const widgets = (generateWidgets());
+;// ./src/components/JsonSchemaForm/fields/AccordionField.tsx
+
+function AccordionField_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+const StyledAccordionTitle = /*#__PURE__*/base_default()(AccordionTitle,  true ? {
+  target: "eilkhls0"
+} : 0)("color:", ({
+  theme
+}) => theme.colors.greyDarker, ";font-weight:700;padding:0;", ({
+  collapsed
+}) => !collapsed && `margin-bottom: 20px;`, " & svg{& path{stroke:", ({
+  theme
+}) => theme.colors.greyDarker80, ";}}" + ( true ? "" : 0));
+var AccordionField_ref =  true ? {
+  name: "1pc4ge5",
+  styles: "padding:0;border:none"
+} : 0;
+var AccordionField_ref2 =  true ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : 0;
+const AccordionField = props => {
+  const {
+    uiSchema,
+    idSchema,
+    name,
+    schema,
+    registry
+  } = props;
+  const accordionOptions = uiSchema?.['ui:options'] || {};
+  if (!accordionOptions.targetField) {
+    throw new Error('AccordionField: options.targetField is required to render AccordionField');
+  }
+  const title = uiSchema?.['ui:title'] ? uiSchema['ui:title'] : schema?.title ? schema.title : name;
+
+  // if `ui:widget` is set to 'hide', this field won't be mounted
+  // useAccordionGroupContext manages the open/close state of accordions across mounts
+  const {
+    openedAccordions,
+    toggleOpenedAccordion,
+    setStayOpen
+  } = useAccordionGroupContext();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    // prevent this accordion from being auto-collapsed when another one is opened
+    setStayOpen(true);
+  }, []);
+  const openedAccordion = openedAccordions.find(({
+    id
+  }) => id === idSchema.$id);
+  const collapsed = openedAccordion !== undefined ? false : !!accordionOptions.collapsed;
+  const onAccordionClick = () => {
+    toggleOpenedAccordion({
+      id: idSchema.$id
+    }, !collapsed);
+  };
+  const TargetField = registry.fields[accordionOptions.targetField];
+  const accordionId = `${idSchema.$id}.accordion`;
+  return (0,jsx_runtime_namespaceObject.jsx)(Accordion, {
+    id: accordionId,
+    size: "small",
+    ariaControls: `${accordionId}-content`,
+    title: title,
+    isOpened: !collapsed,
+    onClick: () => onAccordionClick(),
+    css: AccordionField_ref,
+    renderContent: contentProps => (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
+      ...contentProps,
+      css: AccordionField_ref2,
+      children: (0,jsx_runtime_namespaceObject.jsx)(TargetField, {
+        ...props,
+        schema: {
+          ...schema,
+          title: ''
+        }
+      })
+    }),
+    renderTitle: titleProps => (0,jsx_runtime_namespaceObject.jsx)(StyledAccordionTitle, {
+      ...titleProps,
+      collapsed: collapsed
+    })
+  });
+};
+;// ./src/components/JsonSchemaForm/fields/DateRangeField.tsx
+
+
+
+
+const DateRangeField = props => {
+  const {
+    idSchema,
+    uiSchema,
+    schema,
+    name,
+    formData,
+    disabled,
+    onChange
+  } = props;
+  if (schema.type !== 'object') {
+    throw new Error('DateRangeField: schema.type must be "object" to render DateRangeField');
+  }
+  if (!schema.properties?.start || !schema.properties?.end) {
+    throw new Error('DateRangeField: schema.properties.start and schema.properties.end are required to render DateRangeField');
+  }
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const {
+    outputFormat = 'yyyy-MM-dd'
+  } = uiSchema?.['ui:options'] || {};
+  const title = uiSchema?.['ui:title'] ? uiSchema['ui:title'] : schema?.title ? schema.title : name;
+  const id = idSchema.$id;
+  const {
+    start,
+    end
+  } = formData || {};
+  const onDateRangeChange = date => {
+    const [startDate, endDate] = date || [null, null];
+    const start = startDate && external_luxon_namespaceObject.DateTime.fromJSDate(startDate).toFormat(outputFormat);
+    const end = endDate && external_luxon_namespaceObject.DateTime.fromJSDate(endDate).toFormat(outputFormat);
+    const dateRangeChange = {
+      ...(start && {
+        start
+      }),
+      ...(end && {
+        end
+      })
+    };
+    onChange(dateRangeChange);
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
+    ...useFormResult,
+    children: (0,jsx_runtime_namespaceObject.jsx)(DateRangePicker, {
+      name: id,
+      label: title,
+      disabled: disabled,
+      defaultValue: [start, end],
+      onChange: onDateRangeChange
+    })
+  });
+};
+;// ./src/components/JsonSchemaForm/fields/index.ts
+
+
+const generateFields = () => {
+  return {
+    accordion: AccordionField,
+    daterange: DateRangeField
+  };
+};
+/* harmony default export */ const fields = (generateFields());
 ;// ./src/components/JsonSchemaForm/index.ts
 
 function JsonSchemaForm_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
+
 function generateTheme() {
   return {
     templates: generateTemplates(),
-    widgets: generateWidgets()
+    widgets: generateWidgets(),
+    fields: generateFields()
   };
 }
 const Theme = generateTheme();