pixel-react 1.7.9 → 1.8.0
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/AllProjectsDropdown/types.d.ts +2 -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/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 +2 -0
- package/lib/index.esm.js +15 -18
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +15 -18
- package/lib/index.js.map +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/package.json +2 -2
- 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/AllProjectsDropdown/types.ts +2 -0
- package/src/components/AppHeader/AppHeader.scss +6 -2
- /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
package/lib/index.js
CHANGED
|
@@ -8041,7 +8041,7 @@ function createFormControl(props = {}) {
|
|
|
8041
8041
|
timer = setTimeout(callback, wait);
|
|
8042
8042
|
};
|
|
8043
8043
|
const _updateValid = async (shouldUpdateValid) => {
|
|
8044
|
-
if (!
|
|
8044
|
+
if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
|
8045
8045
|
const isValid = _options.resolver
|
|
8046
8046
|
? isEmptyObject((await _executeSchema()).errors)
|
|
8047
8047
|
: await executeBuiltInValidation(_fields, true);
|
|
@@ -8053,7 +8053,7 @@ function createFormControl(props = {}) {
|
|
|
8053
8053
|
}
|
|
8054
8054
|
};
|
|
8055
8055
|
const _updateIsValidating = (names, isValidating) => {
|
|
8056
|
-
if (!
|
|
8056
|
+
if (!props.disabled &&
|
|
8057
8057
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
|
8058
8058
|
(names || Array.from(_names.mount)).forEach((name) => {
|
|
8059
8059
|
if (name) {
|
|
@@ -8069,7 +8069,7 @@ function createFormControl(props = {}) {
|
|
|
8069
8069
|
}
|
|
8070
8070
|
};
|
|
8071
8071
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
8072
|
-
if (args && method && !
|
|
8072
|
+
if (args && method && !props.disabled) {
|
|
8073
8073
|
_state.action = true;
|
|
8074
8074
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
|
8075
8075
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
|
@@ -8133,7 +8133,7 @@ function createFormControl(props = {}) {
|
|
|
8133
8133
|
const output = {
|
|
8134
8134
|
name,
|
|
8135
8135
|
};
|
|
8136
|
-
if (!
|
|
8136
|
+
if (!props.disabled) {
|
|
8137
8137
|
const disabledField = !!(get$1(_fields, name) &&
|
|
8138
8138
|
get$1(_fields, name)._f &&
|
|
8139
8139
|
get$1(_fields, name)._f.disabled);
|
|
@@ -8269,7 +8269,7 @@ function createFormControl(props = {}) {
|
|
|
8269
8269
|
}
|
|
8270
8270
|
_names.unMount = new Set();
|
|
8271
8271
|
};
|
|
8272
|
-
const _getDirty = (name, data) => !
|
|
8272
|
+
const _getDirty = (name, data) => !props.disabled &&
|
|
8273
8273
|
(name && data && set$1(_formValues, name, data),
|
|
8274
8274
|
!deepEqual(getValues(), _defaultValues));
|
|
8275
8275
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
@@ -8585,7 +8585,7 @@ function createFormControl(props = {}) {
|
|
|
8585
8585
|
};
|
|
8586
8586
|
const register = (name, options = {}) => {
|
|
8587
8587
|
let field = get$1(_fields, name);
|
|
8588
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
|
8588
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
|
|
8589
8589
|
set$1(_fields, name, {
|
|
8590
8590
|
...(field || {}),
|
|
8591
8591
|
_f: {
|
|
@@ -8601,7 +8601,7 @@ function createFormControl(props = {}) {
|
|
|
8601
8601
|
field,
|
|
8602
8602
|
disabled: isBoolean(options.disabled)
|
|
8603
8603
|
? options.disabled
|
|
8604
|
-
:
|
|
8604
|
+
: props.disabled,
|
|
8605
8605
|
name,
|
|
8606
8606
|
value: options.value,
|
|
8607
8607
|
});
|
|
@@ -8611,7 +8611,7 @@ function createFormControl(props = {}) {
|
|
|
8611
8611
|
}
|
|
8612
8612
|
return {
|
|
8613
8613
|
...(disabledIsDefined
|
|
8614
|
-
? { disabled: options.disabled ||
|
|
8614
|
+
? { disabled: options.disabled || props.disabled }
|
|
8615
8615
|
: {}),
|
|
8616
8616
|
...(_options.progressive
|
|
8617
8617
|
? {
|
|
@@ -8695,12 +8695,6 @@ function createFormControl(props = {}) {
|
|
|
8695
8695
|
e.preventDefault && e.preventDefault();
|
|
8696
8696
|
e.persist && e.persist();
|
|
8697
8697
|
}
|
|
8698
|
-
if (_options.disabled) {
|
|
8699
|
-
if (onInvalid) {
|
|
8700
|
-
await onInvalid({ ..._formState.errors }, e);
|
|
8701
|
-
}
|
|
8702
|
-
return;
|
|
8703
|
-
}
|
|
8704
8698
|
let fieldValues = cloneObject(_formValues);
|
|
8705
8699
|
_subjects.state.next({
|
|
8706
8700
|
isSubmitting: true,
|
|
@@ -8879,9 +8873,7 @@ function createFormControl(props = {}) {
|
|
|
8879
8873
|
: fieldReference.ref;
|
|
8880
8874
|
if (fieldRef.focus) {
|
|
8881
8875
|
fieldRef.focus();
|
|
8882
|
-
options.shouldSelect &&
|
|
8883
|
-
isFunction$1(fieldRef.select) &&
|
|
8884
|
-
fieldRef.select();
|
|
8876
|
+
options.shouldSelect && fieldRef.select();
|
|
8885
8877
|
}
|
|
8886
8878
|
}
|
|
8887
8879
|
};
|
|
@@ -9082,6 +9074,11 @@ function useForm(props = {}) {
|
|
|
9082
9074
|
values: control._getWatch(),
|
|
9083
9075
|
});
|
|
9084
9076
|
}, [props.shouldUnregister, control]);
|
|
9077
|
+
React.useEffect(() => {
|
|
9078
|
+
if (_formControl.current) {
|
|
9079
|
+
_formControl.current.watch = _formControl.current.watch.bind({});
|
|
9080
|
+
}
|
|
9081
|
+
}, [formState]);
|
|
9085
9082
|
_formControl.current.formState = getProxyFormState(formState, control);
|
|
9086
9083
|
return _formControl.current;
|
|
9087
9084
|
}
|
|
@@ -23710,7 +23707,7 @@ const PieChart = ({
|
|
|
23710
23707
|
});
|
|
23711
23708
|
};
|
|
23712
23709
|
|
|
23713
|
-
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:
|
|
23710
|
+
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: 4px;\n padding-bottom: 16px;\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: 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-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\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}";
|
|
23714
23711
|
styleInject(css_248z$D);
|
|
23715
23712
|
|
|
23716
23713
|
const AppHeader = ({
|