@ssa-ui-kit/core 2.2.0 → 2.2.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 SSA Group
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 SSA Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -1,6 +1,6 @@
-import { UseDrawerStore } from './useDrawer';
-export interface DrawerProps {
-    children: React.ReactElement;
+import { UseDrawerStore, UseDrawerOptions } from './useDrawer';
+export interface DrawerProps extends UseDrawerOptions {
+    children?: React.ReactElement;
     store?: UseDrawerStore;
 }
-export declare const Drawer: ({ children, store: controlledStore }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Drawer: ({ children, store: controlledStore, ...drawerProps }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Field/FieldProvider.d.ts

@@ -8,9 +8,5 @@ export interface FieldContextValue {
 }
 export declare const FieldProvider: ({ children, value, }: {
     value: FieldContextValue;
-    children: React.
-    /**
-     * If true, ReactElement children will be focused if FieldControl is clicked.
-     */
-    ReactNode;
+    children: React.ReactNode;
 }) => import("react").FunctionComponentElement<import("react").ProviderProps<FieldContextValue | null>>, useFieldContext: () => FieldContextValue;

package/dist/components/Field/FieldRoot.d.ts

@@ -1,6 +1,7 @@
 import { type HTMLAttributes } from 'react';
 import { FieldContextValue } from './FieldProvider';
 export interface FieldRootProps extends Partial<FieldContextValue>, HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
     children: React.ReactNode;
 }
 export declare const FieldRoot: ({ children, ...props }: FieldRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/FiltersMultiSelect/FiltersMultiSelect.d.ts

@@ -9,6 +9,7 @@ export interface FiltersMultiSelectProps extends Pick<FieldProps, 'status' | 'di
     error?: string;
     icon?: React.ReactNode;
     inputProps?: InputProps['inputProps'];
+    fieldProps?: FieldProps;
     label?: string;
     placeholder?: string;
     searchable?: boolean;
@@ -21,4 +22,4 @@ export interface FiltersMultiSelectProps extends Pick<FieldProps, 'status' | 'di
     onChange?: (value: SelectedFilter[]) => void;
     register?: UseFormReturn['register'];
 }
-export declare const FiltersMultiSelect: ({ children, description, disabled, emptyNode: controlledEmptyNode, error, icon, inputProps, label, placeholder, searchable, selectedFilters: controlledSelectedFilters, status, store: controlledStore, success, badgeClassName, inputClassName, wrapperClassName, onChange, register, }: FiltersMultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FiltersMultiSelect: ({ children, description, disabled, emptyNode: controlledEmptyNode, error, icon, fieldProps, inputProps, label, placeholder, searchable, selectedFilters: controlledSelectedFilters, status, store: controlledStore, success, badgeClassName, inputClassName, wrapperClassName, onChange, register, }: FiltersMultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/NestedTable/WithNestedTableRow.d.ts

@@ -1,4 +1,3 @@
-import { NestedTableRowChildren } from './types';
 export declare const WithNestedTableRow: ({ children, }: {
-    children: NestedTableRowChildren | NestedTableRowChildren[];
-}) => import("@emotion/react/jsx-runtime").JSX.Element[];
+    children: React.ReactNode | React.ReactNode[];
+}) => import("@emotion/react/jsx-runtime").JSX.Element[] | null | undefined;

package/dist/components/NestedTable/types.d.ts

@@ -1,6 +1,3 @@
-export type NestedTableRowChildren = React.ReactElement<React.PropsWithChildren<{
-    isCollapsed?: boolean;
-}>>;
 export type NestedTableRowContextType = {
     isCollapsed: boolean;
     isSubHeader: boolean;

package/dist/contexts/Translation/TranslationContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { JSONObject } from '@global-types/json';
+import { JSONObject } from '../../types/json';
 import { TranslationContextContent } from './types';
 export declare const TranslationContext: import("react").Context<TranslationContextContent>;
 export declare const TranslationProvider: ({ children, defaultTranslations, }: {

package/dist/contexts/Translation/types.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { JSONObject } from '@global-types/json';
+import { JSONObject } from '../../types/json';
 export type TranslationContextContent = {
     language: string;
     t: (translationKey: string) => string;

package/dist/index.js

@@ -4111,16 +4111,16 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
-/**
- * The structure of the component:
- *
- * Dropdown
- *   DropdownToggle
- *   DropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
@@ -5229,16 +5229,16 @@ const DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
   styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
 } : 0);
 
-/**
- * The structure of the component:
- *
- * MultipleDropdown
- *   DropdownToggle
- *   MultipleDropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * MultipleDropdown
+ *   DropdownToggle
+ *   MultipleDropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 function MultipleDropdownInner({
   selectedItems = [],
@@ -5483,8 +5483,8 @@ const NavToggle = ({
 
 
 
-/**
- * UI Component that shows the navigation bar
+/**
+ * UI Component that shows the navigation bar
  */
 const NavBar = ({
   items
@@ -6734,12 +6734,12 @@ const ProgressVertical = ({
 /* harmony default export */ const ProgressVertical_ProgressVertical = (ProgressVertical);
 ;// ./src/components/ResponsiveImage/ResponsiveImage.tsx
 
-/**
- * A simple wrapper over the `<img />` tag.
- *
- * Don't forget to adjust Device Pixel Ratio in DevTools
- * when testing srcSet, and use Hard Reload to force the
- * browser to load an image of another resolution.
+/**
+ * A simple wrapper over the `<img />` tag.
+ *
+ * Don't forget to adjust Device Pixel Ratio in DevTools
+ * when testing srcSet, and use Hard Reload to force the
+ * browser to load an image of another resolution.
  * */
 const ResponsiveImage = ({
   src,
@@ -7150,12 +7150,12 @@ const TabBarBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1hg26v10"
 } : 0)( true ? "" : 0);
 
-/**
- * This component doesn't show contents of the selected tab,
- * however it accepts a required `renderContent()` render
- * prop and stores it into the Context. This lets the parent
- * component to decide where to render the contents of the
- * selected tab.
+/**
+ * This component doesn't show contents of the selected tab,
+ * however it accepts a required `renderContent()` render
+ * prop and stores it into the Context. This lets the parent
+ * component to decide where to render the contents of the
+ * selected tab.
  * */
 const TabBar = ({
   children
@@ -7472,13 +7472,13 @@ const useTooltipContext = () => {
 
 
 
-/*
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button />
- *   </TooltipTrigger>
- *   <TooltipContent>Tooltip</TooltipContent>
- * </Tooltip>
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
  * */
 const Tooltip = ({
   children,
@@ -7952,9 +7952,9 @@ var CardList_ref =  true ? {
   name: "1fgo50s",
   styles: "list-style:none;padding:0;li{margin-bottom:15px;}"
 } : 0;
-/**
- *
- * UI Component that renders a list of items with a custom render function
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
  */
 const CardList = ({
   title,
@@ -8824,8 +8824,8 @@ const SCREEN_SIZES = {
 
 
 
-/**
- * UI Component that shows the collapsible navigation bar
+/**
+ * UI Component that shows the collapsible navigation bar
  */
 
 const CollapsibleNavBar = ({
@@ -10063,6 +10063,7 @@ const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeCont
 ;// ./src/components/Field/FieldRoot.tsx
 
 
+
 const FieldRoot = ({
   children,
   ...props
@@ -10071,10 +10072,13 @@ const FieldRoot = ({
     disabled = false,
     status = 'basic',
     forwardFocus = true,
+    asChild = false,
     ...divProps
   } = props;
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    ...divProps,
+  const Wrapper = asChild ? external_react_namespaceObject.Fragment : 'div';
+  const wrapperProps = asChild ? {} : divProps;
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper, {
+    ...wrapperProps,
     children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
       value: {
         disabled,
@@ -10540,9 +10544,10 @@ const useDrawer = ({
 
 const Drawer = ({
   children,
-  store: controlledStore
+  store: controlledStore,
+  ...drawerProps
 }) => {
-  const uncontrolledStore = useDrawer({});
+  const uncontrolledStore = useDrawer(drawerProps);
   const store = controlledStore || uncontrolledStore;
   if (!store.transition.isMounted) {
     return null;
@@ -11898,6 +11903,7 @@ const FiltersMultiSelect = ({
   emptyNode: controlledEmptyNode,
   error,
   icon,
+  fieldProps,
   inputProps,
   label,
   placeholder,
@@ -11934,6 +11940,7 @@ const FiltersMultiSelect = ({
     children: (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
       disabled: disabled,
       status: status,
+      ...fieldProps,
       children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
         htmlFor: `formElement-search-${id}`,
         children: label
@@ -12404,8 +12411,12 @@ const NestedTableRow = ({
     background: theme.colors.greyLighter60
   } : {};
   const notSubHeaderCSS = !isSubHeader && isCollapsed ? {
-    height: 0,
-    maxHeight: 0
+    maxHeight: 0,
+    padding: 0,
+    '& td': {
+      maxHeight: 0,
+      padding: 0
+    }
   } : {};
   return (0,jsx_runtime_namespaceObject.jsxs)(TableRow_TableRow, {
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
@@ -13918,29 +13929,29 @@ const BarLineComplexChartView = ({
     debouncedFn();
   };
   const handleHover = () => {
-    /**
-     * Show tooltip on hover
-     * event: Readonly<Plotly.PlotHoverEvent>
-     * - event = {}
-     * - points:
-     * Array<{
-     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
-     *   curveNumber: number;
-     *   data: Plotly.Data;
-     *   fullData: Plotly.Data;
-     *   label: number;
-     *   pointIndex: number;
-     *   pointNumber: number;
-     *   value: number;
-     *   x: number;
-     *   y: number;
-     *   xaxis: string;
-     *   yaxis: string;
-     * }>
-     * - xaxes: Array<{}>
-     * - xvals: Array<number>
-     * - yaxes: Array<{}>
-     * - yvals: Array<number>
+    /**
+     * Show tooltip on hover
+     * event: Readonly<Plotly.PlotHoverEvent>
+     * - event = {}
+     * - points:
+     * Array<{
+     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
+     *   curveNumber: number;
+     *   data: Plotly.Data;
+     *   fullData: Plotly.Data;
+     *   label: number;
+     *   pointIndex: number;
+     *   pointNumber: number;
+     *   value: number;
+     *   x: number;
+     *   y: number;
+     *   xaxis: string;
+     *   yaxis: string;
+     * }>
+     * - xaxes: Array<{}>
+     * - xvals: Array<number>
+     * - yaxes: Array<{}>
+     * - yvals: Array<number>
      */
     setIsOpen(false);
   };
@@ -15116,14 +15127,14 @@ var Typeahead_ref =  true ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : 0;
-/**
- * The structure of the component:
- * - TypeaheadTrigger
- * - TypeaheadOptions
- * - FormHelperText
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  **/
 const Typeahead = ({
   name = 'typeahead-search',