pixel-react 1.7.2 → 1.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.esm.js +22 -23
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +22 -23
- package/lib/index.js.map +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/AppHeader/AppHeader.scss +2 -2
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +16 -17
- package/src/components/Drawer/Drawer.scss +2 -2
- package/src/components/Drawer/Drawer.stories.tsx +1 -0
- package/src/components/Drawer/Drawer.tsx +2 -1
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/VariableDropdown.scss +1 -0
- package/src/components/Icon/iconList.ts +0 -2
- /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './AddButton';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './AddVariables';
|
@@ -0,0 +1,35 @@
|
|
1
|
+
export type dynamicObject = {
|
2
|
+
[key: string]: any;
|
3
|
+
};
|
4
|
+
export interface AddVariableProps {
|
5
|
+
/**
|
6
|
+
* Label for the field
|
7
|
+
*/
|
8
|
+
label?: string;
|
9
|
+
/**
|
10
|
+
* List of variables
|
11
|
+
*/
|
12
|
+
variableList?: dynamicObject[];
|
13
|
+
/**
|
14
|
+
* Place holder for the input field
|
15
|
+
*/
|
16
|
+
placeholder?: string;
|
17
|
+
/**
|
18
|
+
* Function to handle input change
|
19
|
+
* @param value
|
20
|
+
* @returns
|
21
|
+
*/
|
22
|
+
onChange: (value: string) => void;
|
23
|
+
/**
|
24
|
+
* Function to handle create variable icon click
|
25
|
+
*/
|
26
|
+
onCreateVariableClick?: () => void;
|
27
|
+
/**
|
28
|
+
* Value of the input field
|
29
|
+
*/
|
30
|
+
value: string;
|
31
|
+
/**
|
32
|
+
* Width of the dropdown
|
33
|
+
*/
|
34
|
+
dropdownWidth?: string;
|
35
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import AttachImage from './AttachImage';
|
3
|
+
import { AttachImageProps } from './types';
|
4
|
+
declare const meta: Meta<typeof AttachImage>;
|
5
|
+
export default meta;
|
6
|
+
type Story = StoryObj<AttachImageProps>;
|
7
|
+
export declare const Default: Story;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import IconRadialChart from './IconRadialChart';
|
3
|
+
declare const meta: Meta<typeof IconRadialChart>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof IconRadialChart>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const Mobile: Story;
|
8
|
+
export declare const WithoutIcon: Story;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import LineChart from './LineChart';
|
3
|
+
import { LineChartProps } from './types';
|
4
|
+
declare const meta: Meta<typeof LineChart>;
|
5
|
+
export default meta;
|
6
|
+
export declare const DefaultLineChart: StoryObj<LineChartProps>;
|
7
|
+
export declare const StatusLineChart: StoryObj<LineChartProps>;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import MultiRadialChart from './MultiRadialChart';
|
3
|
+
declare const meta: Meta<typeof MultiRadialChart>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof MultiRadialChart>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const numberLegend: Story;
|
8
|
+
export declare const PillLegend: Story;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import ConnectingBranch from './ConnectingBranch';
|
3
|
+
declare const meta: Meta<typeof ConnectingBranch>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof ConnectingBranch>;
|
6
|
+
export declare const Default: Story;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import EditTextField from './EditTextField';
|
3
|
+
import '../../assets/styles/_colors.scss';
|
4
|
+
import './EditTextField.scss';
|
5
|
+
declare const meta: Meta<typeof EditTextField>;
|
6
|
+
type Story = StoryObj<typeof EditTextField>;
|
7
|
+
export declare const textFieldWithLabel: Story;
|
8
|
+
export declare const textFieldWithOutLabel: Story;
|
9
|
+
export declare const openTextField: Story;
|
10
|
+
export default meta;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { CellBase } from "./ExcelFile/Excel";
|
2
|
+
interface ChangeExcelStylesOptions {
|
3
|
+
sheetName: string;
|
4
|
+
styleType: string;
|
5
|
+
value: string;
|
6
|
+
selectedCell: {
|
7
|
+
row: number;
|
8
|
+
column: number;
|
9
|
+
}[];
|
10
|
+
}
|
11
|
+
export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
|
12
|
+
[key: string]: Matrix<CellBase>;
|
13
|
+
}>>, options: ChangeExcelStylesOptions): void;
|
14
|
+
export {};
|
@@ -0,0 +1,24 @@
|
|
1
|
+
interface CellStyle {
|
2
|
+
color?: string;
|
3
|
+
backgroundColor?: string;
|
4
|
+
bold?: boolean;
|
5
|
+
italic?: boolean;
|
6
|
+
name?: string;
|
7
|
+
border: {
|
8
|
+
top: string;
|
9
|
+
bottom: string;
|
10
|
+
left: string;
|
11
|
+
right: string;
|
12
|
+
};
|
13
|
+
alignment: {
|
14
|
+
horizontal?: string;
|
15
|
+
vertical?: string;
|
16
|
+
wrapText?: boolean;
|
17
|
+
};
|
18
|
+
}
|
19
|
+
interface CellData {
|
20
|
+
style?: CellStyle;
|
21
|
+
}
|
22
|
+
type ImportExcelStylesData = Array<Array<CellData>>;
|
23
|
+
export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
|
24
|
+
export {};
|
@@ -6,6 +6,8 @@ declare const meta: Meta<typeof LabelEditTextField>;
|
|
6
6
|
type Story = StoryObj<typeof LabelEditTextField>;
|
7
7
|
export declare const textField: Story;
|
8
8
|
export declare const textFieldWithOutLabel: Story;
|
9
|
+
export declare const openTextFieldWithOutLabel: Story;
|
9
10
|
export declare const textFieldWithDropdown: Story;
|
10
11
|
export declare const textFieldWithHighlight: Story;
|
12
|
+
export declare const openLabelEditTextField: Story;
|
11
13
|
export default meta;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import Card from './StatusCard';
|
3
|
+
import { CardProps } from './types';
|
4
|
+
declare const meta: Meta<typeof Card>;
|
5
|
+
export default meta;
|
6
|
+
type Story = StoryObj<CardProps>;
|
7
|
+
export declare const Passed: Story;
|
8
|
+
export declare const Failed: Story;
|
9
|
+
export declare const Warning: Story;
|
10
|
+
export declare const Skipped: Story;
|
11
|
+
export declare const Flaky: Story;
|
package/lib/index.d.ts
CHANGED
package/lib/index.esm.js
CHANGED
@@ -1024,7 +1024,7 @@ const Button$1 = /*#__PURE__*/forwardRef(({
|
|
1024
1024
|
});
|
1025
1025
|
});
|
1026
1026
|
|
1027
|
-
var css_248z$1e = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n
|
1027
|
+
var css_248z$1e = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n border-radius: 0 0 8px 8px;\n}";
|
1028
1028
|
styleInject(css_248z$1e);
|
1029
1029
|
|
1030
1030
|
function useEscapeKey(key) {
|
@@ -1099,7 +1099,8 @@ const Drawer = ({
|
|
1099
1099
|
top,
|
1100
1100
|
height,
|
1101
1101
|
width,
|
1102
|
-
right = 0
|
1102
|
+
right = 0,
|
1103
|
+
overflow
|
1103
1104
|
}) => {
|
1104
1105
|
const [isExpanded, setIsExpanded] = useState(false);
|
1105
1106
|
const handleEsc = useEscapeKey('Escape');
|
@@ -1140,7 +1141,8 @@ const Drawer = ({
|
|
1140
1141
|
top,
|
1141
1142
|
height,
|
1142
1143
|
width,
|
1143
|
-
right
|
1144
|
+
right,
|
1145
|
+
overflow
|
1144
1146
|
},
|
1145
1147
|
children: [showHeader && jsx("div", {
|
1146
1148
|
className: classNames('ff-drawer-header', {
|
@@ -7980,7 +7982,7 @@ function createFormControl(props = {}) {
|
|
7980
7982
|
timer = setTimeout(callback, wait);
|
7981
7983
|
};
|
7982
7984
|
const _updateValid = async (shouldUpdateValid) => {
|
7983
|
-
if (!
|
7985
|
+
if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
7984
7986
|
const isValid = _options.resolver
|
7985
7987
|
? isEmptyObject((await _executeSchema()).errors)
|
7986
7988
|
: await executeBuiltInValidation(_fields, true);
|
@@ -7992,7 +7994,7 @@ function createFormControl(props = {}) {
|
|
7992
7994
|
}
|
7993
7995
|
};
|
7994
7996
|
const _updateIsValidating = (names, isValidating) => {
|
7995
|
-
if (!
|
7997
|
+
if (!props.disabled &&
|
7996
7998
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
7997
7999
|
(names || Array.from(_names.mount)).forEach((name) => {
|
7998
8000
|
if (name) {
|
@@ -8008,7 +8010,7 @@ function createFormControl(props = {}) {
|
|
8008
8010
|
}
|
8009
8011
|
};
|
8010
8012
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
8011
|
-
if (args && method && !
|
8013
|
+
if (args && method && !props.disabled) {
|
8012
8014
|
_state.action = true;
|
8013
8015
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
8014
8016
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -8072,7 +8074,7 @@ function createFormControl(props = {}) {
|
|
8072
8074
|
const output = {
|
8073
8075
|
name,
|
8074
8076
|
};
|
8075
|
-
if (!
|
8077
|
+
if (!props.disabled) {
|
8076
8078
|
const disabledField = !!(get$1(_fields, name) &&
|
8077
8079
|
get$1(_fields, name)._f &&
|
8078
8080
|
get$1(_fields, name)._f.disabled);
|
@@ -8208,7 +8210,7 @@ function createFormControl(props = {}) {
|
|
8208
8210
|
}
|
8209
8211
|
_names.unMount = new Set();
|
8210
8212
|
};
|
8211
|
-
const _getDirty = (name, data) => !
|
8213
|
+
const _getDirty = (name, data) => !props.disabled &&
|
8212
8214
|
(name && data && set$1(_formValues, name, data),
|
8213
8215
|
!deepEqual(getValues(), _defaultValues));
|
8214
8216
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8524,7 +8526,7 @@ function createFormControl(props = {}) {
|
|
8524
8526
|
};
|
8525
8527
|
const register = (name, options = {}) => {
|
8526
8528
|
let field = get$1(_fields, name);
|
8527
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8529
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
|
8528
8530
|
set$1(_fields, name, {
|
8529
8531
|
...(field || {}),
|
8530
8532
|
_f: {
|
@@ -8540,7 +8542,7 @@ function createFormControl(props = {}) {
|
|
8540
8542
|
field,
|
8541
8543
|
disabled: isBoolean(options.disabled)
|
8542
8544
|
? options.disabled
|
8543
|
-
:
|
8545
|
+
: props.disabled,
|
8544
8546
|
name,
|
8545
8547
|
value: options.value,
|
8546
8548
|
});
|
@@ -8550,7 +8552,7 @@ function createFormControl(props = {}) {
|
|
8550
8552
|
}
|
8551
8553
|
return {
|
8552
8554
|
...(disabledIsDefined
|
8553
|
-
? { disabled: options.disabled ||
|
8555
|
+
? { disabled: options.disabled || props.disabled }
|
8554
8556
|
: {}),
|
8555
8557
|
...(_options.progressive
|
8556
8558
|
? {
|
@@ -8634,12 +8636,6 @@ function createFormControl(props = {}) {
|
|
8634
8636
|
e.preventDefault && e.preventDefault();
|
8635
8637
|
e.persist && e.persist();
|
8636
8638
|
}
|
8637
|
-
if (_options.disabled) {
|
8638
|
-
if (onInvalid) {
|
8639
|
-
await onInvalid({ ..._formState.errors }, e);
|
8640
|
-
}
|
8641
|
-
return;
|
8642
|
-
}
|
8643
8639
|
let fieldValues = cloneObject(_formValues);
|
8644
8640
|
_subjects.state.next({
|
8645
8641
|
isSubmitting: true,
|
@@ -8818,9 +8814,7 @@ function createFormControl(props = {}) {
|
|
8818
8814
|
: fieldReference.ref;
|
8819
8815
|
if (fieldRef.focus) {
|
8820
8816
|
fieldRef.focus();
|
8821
|
-
options.shouldSelect &&
|
8822
|
-
isFunction$1(fieldRef.select) &&
|
8823
|
-
fieldRef.select();
|
8817
|
+
options.shouldSelect && fieldRef.select();
|
8824
8818
|
}
|
8825
8819
|
}
|
8826
8820
|
};
|
@@ -9021,6 +9015,11 @@ function useForm(props = {}) {
|
|
9021
9015
|
values: control._getWatch(),
|
9022
9016
|
});
|
9023
9017
|
}, [props.shouldUnregister, control]);
|
9018
|
+
React__default.useEffect(() => {
|
9019
|
+
if (_formControl.current) {
|
9020
|
+
_formControl.current.watch = _formControl.current.watch.bind({});
|
9021
|
+
}
|
9022
|
+
}, [formState]);
|
9024
9023
|
_formControl.current.formState = getProxyFormState(formState, control);
|
9025
9024
|
return _formControl.current;
|
9026
9025
|
}
|
@@ -23630,7 +23629,7 @@ const PieChart = ({
|
|
23630
23629
|
});
|
23631
23630
|
};
|
23632
23631
|
|
23633
|
-
var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width:
|
23632
|
+
var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
|
23634
23633
|
styleInject(css_248z$D);
|
23635
23634
|
|
23636
23635
|
const AppHeader = ({
|
@@ -33562,7 +33561,7 @@ const StatusCard = ({
|
|
33562
33561
|
});
|
33563
33562
|
};
|
33564
33563
|
|
33565
|
-
var css_248z$e = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
|
33564
|
+
var css_248z$e = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n top: 34px;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
|
33566
33565
|
styleInject(css_248z$e);
|
33567
33566
|
|
33568
33567
|
const VariableDropdown = ({
|
@@ -47748,7 +47747,7 @@ const ConditionalDropdown = ({
|
|
47748
47747
|
filteredOptions: filteredOptions,
|
47749
47748
|
onSelectVariable: handleDropdownClick
|
47750
47749
|
}) : jsx(VariableDropdown, {
|
47751
|
-
position: "
|
47750
|
+
position: "absolute",
|
47752
47751
|
width: dropdownWidth,
|
47753
47752
|
optionsList: variableList,
|
47754
47753
|
onSelectVariable: handleDropdownClick
|