@emeraldemperaur/vector-sigma 1.4.6 → 1.4.8
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/README.md +18 -5
- package/lib/index.cjs +67 -43
- package/lib/index.esm.js +67 -43
- package/lib/types/components/dropdown/dropdown.d.ts +4 -4
- package/lib/types/components/select/select.d.ts +13 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -99,7 +99,8 @@ const App = () => {
|
|
|
99
99
|
<p><em>Container, Row, Column, Theme, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, UUIDInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle</em></p>
|
|
100
100
|
|
|
101
101
|
```javascript
|
|
102
|
-
import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider }
|
|
102
|
+
import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider }
|
|
103
|
+
from '@emeraldemperaur/vector-sigma';
|
|
103
104
|
import { Theme } from '@emeraldemperaur/vector-sigma';
|
|
104
105
|
import { Form, Formik } from 'formik'
|
|
105
106
|
import * as Yup from 'yup'
|
|
@@ -130,10 +131,22 @@ const App = () => {
|
|
|
130
131
|
<Dropdown alias="dropdownInput" width={8} inputLabel="Dropdown Element" inputtype="dropdown-outline" value="Zaibatsu"
|
|
131
132
|
inputoptions={
|
|
132
133
|
[
|
|
133
|
-
{optionid: 1,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
{optionid: 1,
|
|
135
|
+
optionvalue: "Kaiju",
|
|
136
|
+
optionurl:"https://github.com/emeraldemperaur",
|
|
137
|
+
text: "Kaiju"},
|
|
138
|
+
{optionid: 2,
|
|
139
|
+
optionvalue: "Meka",
|
|
140
|
+
optionurl:"https://www.mekaegwim.ca",
|
|
141
|
+
text: "Meka"},
|
|
142
|
+
{optionid: 3,
|
|
143
|
+
optionvalue: "Godzilla",
|
|
144
|
+
optionurl:"https://www.me.ca",
|
|
145
|
+
text: "Godzilla"},
|
|
146
|
+
{optionid: 4,
|
|
147
|
+
optionvalue: "Zaibatsu",
|
|
148
|
+
optionurl:"https://www.npmjs.com/package/@emeraldemperaur/vector-sigma",
|
|
149
|
+
text: "Zaibatsu"},
|
|
137
150
|
]}/>
|
|
138
151
|
</Theme>
|
|
139
152
|
<button type="submit" style={{ marginTop: 20 }}>Submit</button>
|
package/lib/index.cjs
CHANGED
|
@@ -21501,7 +21501,7 @@ const DateTimePicker = (_a) => {
|
|
|
21501
21501
|
};
|
|
21502
21502
|
|
|
21503
21503
|
const Dropdown = (_a) => {
|
|
21504
|
-
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
|
|
21504
|
+
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
|
|
21505
21505
|
const triggerRef = React.useRef(null);
|
|
21506
21506
|
const [neuVars, setNeuVars] = React.useState({});
|
|
21507
21507
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
@@ -21575,7 +21575,7 @@ const Dropdown = (_a) => {
|
|
|
21575
21575
|
inputtype === 'dropdown-material' ? materialContent :
|
|
21576
21576
|
inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
|
|
21577
21577
|
return (React.createElement(React.Fragment, null,
|
|
21578
|
-
React.createElement(Column, { span: width, newLine:
|
|
21578
|
+
React.createElement(Column, { span: width, newLine: newRow },
|
|
21579
21579
|
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
21580
21580
|
inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
21581
21581
|
.neu-select-trigger[data-state='open'] {
|
|
@@ -21587,19 +21587,20 @@ const Dropdown = (_a) => {
|
|
|
21587
21587
|
cursor: pointer;
|
|
21588
21588
|
}
|
|
21589
21589
|
` } })),
|
|
21590
|
-
React.createElement(C$1, { name: alias, disabled: readonly,
|
|
21591
|
-
|
|
21590
|
+
React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
|
|
21591
|
+
const finalVal = val === "__RESET__" ? "" : val;
|
|
21592
|
+
setFieldValue(alias, finalVal);
|
|
21592
21593
|
setTimeout(() => setFieldTouched(alias, true), 0);
|
|
21593
21594
|
if (props.onValueChange)
|
|
21594
|
-
props.onValueChange(
|
|
21595
|
+
props.onValueChange(finalVal);
|
|
21595
21596
|
}, onOpenChange: (isOpen) => {
|
|
21596
21597
|
if (!isOpen) {
|
|
21597
21598
|
setFieldTouched(alias, true);
|
|
21598
21599
|
}
|
|
21599
21600
|
} },
|
|
21600
|
-
React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
|
|
21601
|
+
React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
|
|
21601
21602
|
React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
21602
|
-
React.createElement(v, { value: "", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
21603
|
+
React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
21603
21604
|
React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
21604
21605
|
inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
|
|
21605
21606
|
React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
@@ -21609,14 +21610,14 @@ const Dropdown = (_a) => {
|
|
|
21609
21610
|
React.createElement("div", null,
|
|
21610
21611
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
|
|
21611
21612
|
"\u00A0",
|
|
21612
|
-
|
|
21613
|
+
isHinted ?
|
|
21613
21614
|
React.createElement(React.Fragment, null,
|
|
21614
|
-
React.createElement(e, { content:
|
|
21615
|
-
React.createElement("a", { href:
|
|
21615
|
+
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
21616
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
21616
21617
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
21617
21618
|
hasError ?
|
|
21618
21619
|
React.createElement(React.Fragment, null,
|
|
21619
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
21620
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
|
|
21620
21621
|
};
|
|
21621
21622
|
|
|
21622
21623
|
const getFileIcon$1 = (type, name) => {
|
|
@@ -36852,7 +36853,7 @@ const PhoneInput = (_a) => {
|
|
|
36852
36853
|
"(+",
|
|
36853
36854
|
getCountryCallingCode(c),
|
|
36854
36855
|
")")))))))),
|
|
36855
|
-
React.createElement(Input, { country: country, international:
|
|
36856
|
+
React.createElement(Input, { country: country, defaultCountry: "US", international: true, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
|
|
36856
36857
|
flex: 1,
|
|
36857
36858
|
border: 'none',
|
|
36858
36859
|
outline: 'none',
|
|
@@ -42318,7 +42319,7 @@ const CurrencyInput = (_a) => {
|
|
|
42318
42319
|
React.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
|
|
42319
42320
|
mask: Number,
|
|
42320
42321
|
scale: activeCurrency.scale,
|
|
42321
|
-
signed: false,
|
|
42322
|
+
signed: String(false),
|
|
42322
42323
|
thousandsSeparator: ",",
|
|
42323
42324
|
padFractionalZeros: true,
|
|
42324
42325
|
normalizeZeros: true,
|
|
@@ -42503,7 +42504,7 @@ const RadioGroupInput = (_a) => {
|
|
|
42503
42504
|
};
|
|
42504
42505
|
|
|
42505
42506
|
const OptionSelect = (_a) => {
|
|
42506
|
-
var { inputtype = '
|
|
42507
|
+
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
|
|
42507
42508
|
const triggerRef = React.useRef(null);
|
|
42508
42509
|
const [neuVars, setNeuVars] = React.useState({});
|
|
42509
42510
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
@@ -42511,7 +42512,7 @@ const OptionSelect = (_a) => {
|
|
|
42511
42512
|
const hasError = Boolean(meta.touched && meta.error);
|
|
42512
42513
|
const errorId = `${alias}-error`;
|
|
42513
42514
|
React.useEffect(() => {
|
|
42514
|
-
if (inputtype === '
|
|
42515
|
+
if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
|
|
42515
42516
|
const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
|
|
42516
42517
|
const shadowDark = adjustColor(parentBg, -30);
|
|
42517
42518
|
const shadowLight = adjustColor(parentBg, 30);
|
|
@@ -42523,25 +42524,37 @@ const OptionSelect = (_a) => {
|
|
|
42523
42524
|
});
|
|
42524
42525
|
}
|
|
42525
42526
|
}, [inputtype]);
|
|
42527
|
+
const openLink = (inputUrl) => {
|
|
42528
|
+
window.open(inputUrl, '_blank', 'noopener,noreferrer');
|
|
42529
|
+
};
|
|
42526
42530
|
// --- STYLES ---
|
|
42527
42531
|
const materialTrigger = {
|
|
42528
42532
|
backgroundColor: 'var(--color-surface)',
|
|
42529
|
-
border:
|
|
42533
|
+
border: 'none',
|
|
42530
42534
|
boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
|
|
42531
42535
|
borderRadius: '4px',
|
|
42532
42536
|
height: '32px',
|
|
42533
42537
|
fontWeight: 500,
|
|
42534
42538
|
};
|
|
42539
|
+
const materialContent = {
|
|
42540
|
+
borderRadius: '4px',
|
|
42541
|
+
boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
|
|
42542
|
+
};
|
|
42535
42543
|
const outlineTrigger = {
|
|
42536
42544
|
backgroundColor: 'transparent',
|
|
42537
|
-
border:
|
|
42545
|
+
border: '2px solid var(--gray-7)',
|
|
42538
42546
|
borderRadius: '4px',
|
|
42539
42547
|
height: '32px',
|
|
42540
42548
|
fontWeight: 600,
|
|
42541
42549
|
};
|
|
42550
|
+
const outlineContent = {
|
|
42551
|
+
border: '2px solid var(--gray-7)',
|
|
42552
|
+
borderRadius: '4px',
|
|
42553
|
+
boxShadow: 'none',
|
|
42554
|
+
};
|
|
42542
42555
|
const neumorphicTrigger = {
|
|
42543
42556
|
backgroundColor: 'var(--neu-bg)',
|
|
42544
|
-
color:
|
|
42557
|
+
color: 'var(--neu-text)',
|
|
42545
42558
|
border: 'none',
|
|
42546
42559
|
borderRadius: '12px',
|
|
42547
42560
|
height: '40px',
|
|
@@ -42550,47 +42563,58 @@ const OptionSelect = (_a) => {
|
|
|
42550
42563
|
boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
|
|
42551
42564
|
transition: 'all 0.2s ease',
|
|
42552
42565
|
};
|
|
42553
|
-
const
|
|
42554
|
-
|
|
42555
|
-
|
|
42556
|
-
|
|
42566
|
+
const neumorphicContent = {
|
|
42567
|
+
backgroundColor: 'var(--neu-bg)',
|
|
42568
|
+
borderRadius: '12px',
|
|
42569
|
+
border: 'none',
|
|
42570
|
+
boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
|
|
42571
|
+
};
|
|
42572
|
+
const activeTriggerStyle = inputtype === 'dropdown' ? materialTrigger :
|
|
42573
|
+
inputtype === 'dropdown-material' ? materialTrigger :
|
|
42574
|
+
inputtype === 'dropdown-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
|
|
42575
|
+
const activeContentStyle = inputtype === 'dropdown' ? materialContent :
|
|
42576
|
+
inputtype === 'dropdown-material' ? materialContent :
|
|
42577
|
+
inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
|
|
42578
|
+
return (React.createElement(Column, { span: width, newLine: newRow },
|
|
42557
42579
|
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
42558
|
-
inputtype === '
|
|
42559
|
-
|
|
42560
|
-
|
|
42561
|
-
|
|
42562
|
-
|
|
42563
|
-
|
|
42564
|
-
|
|
42565
|
-
|
|
42566
|
-
|
|
42567
|
-
|
|
42568
|
-
React.createElement(C$1, { name: alias, disabled:
|
|
42569
|
-
|
|
42580
|
+
inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
42581
|
+
.neu-select-trigger[data-state='open'] {
|
|
42582
|
+
box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
|
|
42583
|
+
inset -6px -6px 12px var(--neu-shadow-light) !important;
|
|
42584
|
+
}
|
|
42585
|
+
.neu-select-item:hover {
|
|
42586
|
+
background-color: rgba(0,0,0,0.05) !important;
|
|
42587
|
+
cursor: pointer;
|
|
42588
|
+
}
|
|
42589
|
+
` } })),
|
|
42590
|
+
React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
|
|
42591
|
+
const finalVal = val === "__RESET__" ? "" : val;
|
|
42592
|
+
setFieldValue(alias, finalVal);
|
|
42570
42593
|
setTimeout(() => setFieldTouched(alias, true), 0);
|
|
42571
42594
|
if (props.onValueChange)
|
|
42572
|
-
props.onValueChange(
|
|
42595
|
+
props.onValueChange(finalVal);
|
|
42573
42596
|
}, onOpenChange: (isOpen) => {
|
|
42574
42597
|
if (!isOpen) {
|
|
42575
42598
|
setFieldTouched(alias, true);
|
|
42576
42599
|
}
|
|
42577
42600
|
} },
|
|
42578
|
-
React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === '
|
|
42579
|
-
React.createElement(g, { position: "popper", sideOffset: 5 },
|
|
42580
|
-
React.createElement(v, { value: "", className: inputtype === '
|
|
42601
|
+
React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
|
|
42602
|
+
React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
42603
|
+
React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
42581
42604
|
React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
42582
|
-
inputoptions.map((
|
|
42605
|
+
inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
42606
|
+
React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
|
|
42583
42607
|
React.createElement("div", null,
|
|
42584
42608
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
|
|
42585
42609
|
"\u00A0",
|
|
42586
|
-
|
|
42610
|
+
isHinted ?
|
|
42587
42611
|
React.createElement(React.Fragment, null,
|
|
42588
|
-
React.createElement(e, { content:
|
|
42589
|
-
React.createElement("a", { href:
|
|
42612
|
+
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
42613
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
42590
42614
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
42591
42615
|
hasError ?
|
|
42592
42616
|
React.createElement(React.Fragment, null,
|
|
42593
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
42617
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null))));
|
|
42594
42618
|
};
|
|
42595
42619
|
|
|
42596
42620
|
const MultipleSelect = (_a) => {
|
package/lib/index.esm.js
CHANGED
|
@@ -21481,7 +21481,7 @@ const DateTimePicker = (_a) => {
|
|
|
21481
21481
|
};
|
|
21482
21482
|
|
|
21483
21483
|
const Dropdown = (_a) => {
|
|
21484
|
-
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
|
|
21484
|
+
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
|
|
21485
21485
|
const triggerRef = useRef(null);
|
|
21486
21486
|
const [neuVars, setNeuVars] = useState({});
|
|
21487
21487
|
const { setFieldValue, setFieldTouched } = useFormikContext();
|
|
@@ -21555,7 +21555,7 @@ const Dropdown = (_a) => {
|
|
|
21555
21555
|
inputtype === 'dropdown-material' ? materialContent :
|
|
21556
21556
|
inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
|
|
21557
21557
|
return (React__default.createElement(React__default.Fragment, null,
|
|
21558
|
-
React__default.createElement(Column, { span: width, newLine:
|
|
21558
|
+
React__default.createElement(Column, { span: width, newLine: newRow },
|
|
21559
21559
|
React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
21560
21560
|
inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
21561
21561
|
.neu-select-trigger[data-state='open'] {
|
|
@@ -21567,19 +21567,20 @@ const Dropdown = (_a) => {
|
|
|
21567
21567
|
cursor: pointer;
|
|
21568
21568
|
}
|
|
21569
21569
|
` } })),
|
|
21570
|
-
React__default.createElement(C$1, { name: alias, disabled: readonly,
|
|
21571
|
-
|
|
21570
|
+
React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
|
|
21571
|
+
const finalVal = val === "__RESET__" ? "" : val;
|
|
21572
|
+
setFieldValue(alias, finalVal);
|
|
21572
21573
|
setTimeout(() => setFieldTouched(alias, true), 0);
|
|
21573
21574
|
if (props.onValueChange)
|
|
21574
|
-
props.onValueChange(
|
|
21575
|
+
props.onValueChange(finalVal);
|
|
21575
21576
|
}, onOpenChange: (isOpen) => {
|
|
21576
21577
|
if (!isOpen) {
|
|
21577
21578
|
setFieldTouched(alias, true);
|
|
21578
21579
|
}
|
|
21579
21580
|
} },
|
|
21580
|
-
React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
|
|
21581
|
+
React__default.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
|
|
21581
21582
|
React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
21582
|
-
React__default.createElement(v, { value: "", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
21583
|
+
React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
21583
21584
|
React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
21584
21585
|
inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
|
|
21585
21586
|
React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
@@ -21589,14 +21590,14 @@ const Dropdown = (_a) => {
|
|
|
21589
21590
|
React__default.createElement("div", null,
|
|
21590
21591
|
React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
|
|
21591
21592
|
"\u00A0",
|
|
21592
|
-
|
|
21593
|
+
isHinted ?
|
|
21593
21594
|
React__default.createElement(React__default.Fragment, null,
|
|
21594
|
-
React__default.createElement(e, { content:
|
|
21595
|
-
React__default.createElement("a", { href:
|
|
21595
|
+
React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
21596
|
+
React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
21596
21597
|
React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
21597
21598
|
hasError ?
|
|
21598
21599
|
React__default.createElement(React__default.Fragment, null,
|
|
21599
|
-
React__default.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
21600
|
+
React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
|
|
21600
21601
|
};
|
|
21601
21602
|
|
|
21602
21603
|
const getFileIcon$1 = (type, name) => {
|
|
@@ -36832,7 +36833,7 @@ const PhoneInput = (_a) => {
|
|
|
36832
36833
|
"(+",
|
|
36833
36834
|
getCountryCallingCode(c),
|
|
36834
36835
|
")")))))))),
|
|
36835
|
-
React__default.createElement(Input, { country: country, international:
|
|
36836
|
+
React__default.createElement(Input, { country: country, defaultCountry: "US", international: true, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
|
|
36836
36837
|
flex: 1,
|
|
36837
36838
|
border: 'none',
|
|
36838
36839
|
outline: 'none',
|
|
@@ -42298,7 +42299,7 @@ const CurrencyInput = (_a) => {
|
|
|
42298
42299
|
React__default.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
|
|
42299
42300
|
mask: Number,
|
|
42300
42301
|
scale: activeCurrency.scale,
|
|
42301
|
-
signed: false,
|
|
42302
|
+
signed: String(false),
|
|
42302
42303
|
thousandsSeparator: ",",
|
|
42303
42304
|
padFractionalZeros: true,
|
|
42304
42305
|
normalizeZeros: true,
|
|
@@ -42483,7 +42484,7 @@ const RadioGroupInput = (_a) => {
|
|
|
42483
42484
|
};
|
|
42484
42485
|
|
|
42485
42486
|
const OptionSelect = (_a) => {
|
|
42486
|
-
var { inputtype = '
|
|
42487
|
+
var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
|
|
42487
42488
|
const triggerRef = useRef(null);
|
|
42488
42489
|
const [neuVars, setNeuVars] = useState({});
|
|
42489
42490
|
const { setFieldValue, setFieldTouched } = useFormikContext();
|
|
@@ -42491,7 +42492,7 @@ const OptionSelect = (_a) => {
|
|
|
42491
42492
|
const hasError = Boolean(meta.touched && meta.error);
|
|
42492
42493
|
const errorId = `${alias}-error`;
|
|
42493
42494
|
useEffect(() => {
|
|
42494
|
-
if (inputtype === '
|
|
42495
|
+
if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
|
|
42495
42496
|
const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
|
|
42496
42497
|
const shadowDark = adjustColor(parentBg, -30);
|
|
42497
42498
|
const shadowLight = adjustColor(parentBg, 30);
|
|
@@ -42503,25 +42504,37 @@ const OptionSelect = (_a) => {
|
|
|
42503
42504
|
});
|
|
42504
42505
|
}
|
|
42505
42506
|
}, [inputtype]);
|
|
42507
|
+
const openLink = (inputUrl) => {
|
|
42508
|
+
window.open(inputUrl, '_blank', 'noopener,noreferrer');
|
|
42509
|
+
};
|
|
42506
42510
|
// --- STYLES ---
|
|
42507
42511
|
const materialTrigger = {
|
|
42508
42512
|
backgroundColor: 'var(--color-surface)',
|
|
42509
|
-
border:
|
|
42513
|
+
border: 'none',
|
|
42510
42514
|
boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
|
|
42511
42515
|
borderRadius: '4px',
|
|
42512
42516
|
height: '32px',
|
|
42513
42517
|
fontWeight: 500,
|
|
42514
42518
|
};
|
|
42519
|
+
const materialContent = {
|
|
42520
|
+
borderRadius: '4px',
|
|
42521
|
+
boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
|
|
42522
|
+
};
|
|
42515
42523
|
const outlineTrigger = {
|
|
42516
42524
|
backgroundColor: 'transparent',
|
|
42517
|
-
border:
|
|
42525
|
+
border: '2px solid var(--gray-7)',
|
|
42518
42526
|
borderRadius: '4px',
|
|
42519
42527
|
height: '32px',
|
|
42520
42528
|
fontWeight: 600,
|
|
42521
42529
|
};
|
|
42530
|
+
const outlineContent = {
|
|
42531
|
+
border: '2px solid var(--gray-7)',
|
|
42532
|
+
borderRadius: '4px',
|
|
42533
|
+
boxShadow: 'none',
|
|
42534
|
+
};
|
|
42522
42535
|
const neumorphicTrigger = {
|
|
42523
42536
|
backgroundColor: 'var(--neu-bg)',
|
|
42524
|
-
color:
|
|
42537
|
+
color: 'var(--neu-text)',
|
|
42525
42538
|
border: 'none',
|
|
42526
42539
|
borderRadius: '12px',
|
|
42527
42540
|
height: '40px',
|
|
@@ -42530,47 +42543,58 @@ const OptionSelect = (_a) => {
|
|
|
42530
42543
|
boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
|
|
42531
42544
|
transition: 'all 0.2s ease',
|
|
42532
42545
|
};
|
|
42533
|
-
const
|
|
42534
|
-
|
|
42535
|
-
|
|
42536
|
-
|
|
42546
|
+
const neumorphicContent = {
|
|
42547
|
+
backgroundColor: 'var(--neu-bg)',
|
|
42548
|
+
borderRadius: '12px',
|
|
42549
|
+
border: 'none',
|
|
42550
|
+
boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
|
|
42551
|
+
};
|
|
42552
|
+
const activeTriggerStyle = inputtype === 'dropdown' ? materialTrigger :
|
|
42553
|
+
inputtype === 'dropdown-material' ? materialTrigger :
|
|
42554
|
+
inputtype === 'dropdown-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
|
|
42555
|
+
const activeContentStyle = inputtype === 'dropdown' ? materialContent :
|
|
42556
|
+
inputtype === 'dropdown-material' ? materialContent :
|
|
42557
|
+
inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
|
|
42558
|
+
return (React__default.createElement(Column, { span: width, newLine: newRow },
|
|
42537
42559
|
React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
42538
|
-
inputtype === '
|
|
42539
|
-
|
|
42540
|
-
|
|
42541
|
-
|
|
42542
|
-
|
|
42543
|
-
|
|
42544
|
-
|
|
42545
|
-
|
|
42546
|
-
|
|
42547
|
-
|
|
42548
|
-
React__default.createElement(C$1, { name: alias, disabled:
|
|
42549
|
-
|
|
42560
|
+
inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
42561
|
+
.neu-select-trigger[data-state='open'] {
|
|
42562
|
+
box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
|
|
42563
|
+
inset -6px -6px 12px var(--neu-shadow-light) !important;
|
|
42564
|
+
}
|
|
42565
|
+
.neu-select-item:hover {
|
|
42566
|
+
background-color: rgba(0,0,0,0.05) !important;
|
|
42567
|
+
cursor: pointer;
|
|
42568
|
+
}
|
|
42569
|
+
` } })),
|
|
42570
|
+
React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
|
|
42571
|
+
const finalVal = val === "__RESET__" ? "" : val;
|
|
42572
|
+
setFieldValue(alias, finalVal);
|
|
42550
42573
|
setTimeout(() => setFieldTouched(alias, true), 0);
|
|
42551
42574
|
if (props.onValueChange)
|
|
42552
|
-
props.onValueChange(
|
|
42575
|
+
props.onValueChange(finalVal);
|
|
42553
42576
|
}, onOpenChange: (isOpen) => {
|
|
42554
42577
|
if (!isOpen) {
|
|
42555
42578
|
setFieldTouched(alias, true);
|
|
42556
42579
|
}
|
|
42557
42580
|
} },
|
|
42558
|
-
React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === '
|
|
42559
|
-
React__default.createElement(g, { position: "popper", sideOffset: 5 },
|
|
42560
|
-
React__default.createElement(v, { value: "", className: inputtype === '
|
|
42581
|
+
React__default.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
|
|
42582
|
+
React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
42583
|
+
React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
42561
42584
|
React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
42562
|
-
inputoptions.map((
|
|
42585
|
+
inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
42586
|
+
React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
|
|
42563
42587
|
React__default.createElement("div", null,
|
|
42564
42588
|
React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
|
|
42565
42589
|
"\u00A0",
|
|
42566
|
-
|
|
42590
|
+
isHinted ?
|
|
42567
42591
|
React__default.createElement(React__default.Fragment, null,
|
|
42568
|
-
React__default.createElement(e, { content:
|
|
42569
|
-
React__default.createElement("a", { href:
|
|
42592
|
+
React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
42593
|
+
React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
42570
42594
|
React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
42571
42595
|
hasError ?
|
|
42572
42596
|
React__default.createElement(React__default.Fragment, null,
|
|
42573
|
-
React__default.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
42597
|
+
React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null))));
|
|
42574
42598
|
};
|
|
42575
42599
|
|
|
42576
42600
|
const MultipleSelect = (_a) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import '../../styles/main.scss';
|
|
3
|
-
export type
|
|
4
|
-
export interface
|
|
5
|
-
inputtype?:
|
|
3
|
+
export type xDropDownDesign = 'dropdown' | 'dropdown-material' | 'dropdown-outline' | 'dropdown-neumorphic';
|
|
4
|
+
export interface xDropDownProps {
|
|
5
|
+
inputtype?: xDropDownDesign & {};
|
|
6
6
|
alias: string;
|
|
7
7
|
inputlabel?: string;
|
|
8
8
|
icon?: React.ReactNode;
|
|
@@ -29,4 +29,4 @@ export interface DropDownProps {
|
|
|
29
29
|
className?: string;
|
|
30
30
|
style?: React.CSSProperties;
|
|
31
31
|
}
|
|
32
|
-
export declare const Dropdown: ({ inputtype, alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, ...props }:
|
|
32
|
+
export declare const Dropdown: ({ inputtype, alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText, ...props }: xDropDownProps) => React.JSX.Element;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import { InputOption } from "utils/vinci";
|
|
3
2
|
import '../../styles/main.scss';
|
|
4
|
-
export type OptionSelectDesign = '
|
|
5
|
-
interface
|
|
3
|
+
export type OptionSelectDesign = 'dropdown' | 'dropdown-material' | 'dropdown-outline' | 'dropdown-neumorphic';
|
|
4
|
+
export interface SelectProps {
|
|
6
5
|
inputtype?: OptionSelectDesign & {};
|
|
7
6
|
alias: string;
|
|
8
7
|
inputlabel?: string;
|
|
@@ -12,15 +11,22 @@ interface OptionSelectProps {
|
|
|
12
11
|
value?: string;
|
|
13
12
|
newRow?: boolean;
|
|
14
13
|
placeholder?: string;
|
|
15
|
-
|
|
14
|
+
readonly?: boolean;
|
|
16
15
|
isHinted?: boolean;
|
|
17
16
|
hintText?: string;
|
|
18
17
|
hintUrl?: string;
|
|
19
18
|
onValueChange?: (value: string) => void;
|
|
20
|
-
inputoptions: InputOption[];
|
|
21
19
|
errorText?: ReactNode | string | null;
|
|
20
|
+
inputoptions: {
|
|
21
|
+
optionid: number | string;
|
|
22
|
+
text: string;
|
|
23
|
+
optionvalue: string;
|
|
24
|
+
tag?: string;
|
|
25
|
+
score?: number | string;
|
|
26
|
+
note?: string;
|
|
27
|
+
optionurl?: string;
|
|
28
|
+
}[];
|
|
22
29
|
className?: string;
|
|
23
30
|
style?: React.CSSProperties;
|
|
24
31
|
}
|
|
25
|
-
export declare const OptionSelect: ({ inputtype, alias,
|
|
26
|
-
export {};
|
|
32
|
+
export declare const OptionSelect: ({ inputtype, alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText, ...props }: SelectProps) => React.JSX.Element;
|