@economic/taco 1.1.9-alpha.1 → 1.1.9-alpha.2
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/dist/esm/components/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +14 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +1 -0
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +10 -7
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/taco.cjs.development.js +270 -311
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +4 -0
@@ -3349,19 +3349,20 @@ const getOutlineClasses = state => {
|
|
3349
3349
|
}
|
3350
3350
|
};
|
3351
3351
|
|
3352
|
-
|
3353
|
-
|
3354
|
-
|
3355
|
-
|
3356
|
-
|
3357
|
-
|
3358
|
-
|
3359
|
-
|
3360
|
-
|
3361
|
-
|
3362
|
-
|
3363
|
-
|
3364
|
-
|
3352
|
+
const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
3353
|
+
const {
|
3354
|
+
children,
|
3355
|
+
compact = false,
|
3356
|
+
outline = false,
|
3357
|
+
state,
|
3358
|
+
...otherProps
|
3359
|
+
} = props;
|
3360
|
+
const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
|
3361
|
+
[getOutlineClasses(state)]: outline,
|
3362
|
+
[`border-transparent ${getStateClasses(state)}`]: !outline,
|
3363
|
+
'h-2 w-2 min-w-0': compact,
|
3364
|
+
'h-5 py-0 px-1.5': !compact
|
3365
|
+
}, props.className);
|
3365
3366
|
return React.createElement("span", Object.assign({}, otherProps, {
|
3366
3367
|
"aria-atomic": "true",
|
3367
3368
|
"aria-live": "polite",
|
@@ -3562,10 +3563,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
|
|
3562
3563
|
}) : null);
|
3563
3564
|
});
|
3564
3565
|
|
3565
|
-
var _excluded$
|
3566
|
+
var _excluded$1 = ["fluid"];
|
3566
3567
|
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
3567
3568
|
var fluid = props.fluid,
|
3568
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
3569
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
3569
3570
|
|
3570
3571
|
var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
|
3571
3572
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -4043,37 +4044,37 @@ const Provider = props => {
|
|
4043
4044
|
const useTaco = () => React.useContext(Context);
|
4044
4045
|
const useLocalization = () => useTaco().localization;
|
4045
4046
|
|
4046
|
-
|
4047
|
-
|
4048
|
-
|
4049
|
-
return modifiers.disabled ? React.createElement("span", {
|
4050
|
-
className: "dot"
|
4051
|
-
}) : day.getDate();
|
4052
|
-
};
|
4047
|
+
const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
|
4048
|
+
className: "dot"
|
4049
|
+
}) : day.getDate();
|
4053
4050
|
|
4054
|
-
|
4055
|
-
|
4051
|
+
const thisYear = /*#__PURE__*/new Date().getFullYear();
|
4052
|
+
const years = [];
|
4056
4053
|
|
4057
|
-
for (
|
4054
|
+
for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
4058
4055
|
years.push(i);
|
4059
4056
|
}
|
4060
4057
|
|
4061
|
-
|
4062
|
-
|
4063
|
-
|
4064
|
-
|
4065
|
-
|
4066
|
-
|
4067
|
-
|
4068
|
-
|
4069
|
-
|
4070
|
-
|
4071
|
-
|
4058
|
+
const Navbar = /*#__PURE__*/React.memo(({
|
4059
|
+
onMonthChange,
|
4060
|
+
onNextClick,
|
4061
|
+
onPreviousClick,
|
4062
|
+
value = new Date()
|
4063
|
+
}) => {
|
4064
|
+
const {
|
4065
|
+
texts: {
|
4066
|
+
calendar: {
|
4067
|
+
actions,
|
4068
|
+
months
|
4069
|
+
}
|
4070
|
+
}
|
4071
|
+
} = useLocalization();
|
4072
4072
|
|
4073
|
-
|
4074
|
-
|
4075
|
-
|
4076
|
-
|
4073
|
+
const handleChange = function handleChange(event) {
|
4074
|
+
const {
|
4075
|
+
year,
|
4076
|
+
month
|
4077
|
+
} = event.target.form;
|
4077
4078
|
onMonthChange(new Date(year.value, month.value));
|
4078
4079
|
};
|
4079
4080
|
|
@@ -4086,59 +4087,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
|
|
4086
4087
|
name: "month",
|
4087
4088
|
onChange: handleChange,
|
4088
4089
|
value: value.getMonth()
|
4089
|
-
}, months.map(
|
4090
|
-
|
4091
|
-
|
4092
|
-
|
4093
|
-
}, month);
|
4094
|
-
})), React.createElement("select", {
|
4090
|
+
}, months.map((month, i) => React.createElement("option", {
|
4091
|
+
key: month,
|
4092
|
+
value: i
|
4093
|
+
}, month))), React.createElement("select", {
|
4095
4094
|
className: "h-8 px-2",
|
4096
4095
|
name: "year",
|
4097
4096
|
onChange: handleChange,
|
4098
4097
|
value: value.getFullYear()
|
4099
|
-
}, years.map(
|
4100
|
-
|
4101
|
-
|
4102
|
-
|
4103
|
-
}, String(year));
|
4104
|
-
}))), React.createElement("div", null, React.createElement(IconButton, {
|
4098
|
+
}, years.map(year => React.createElement("option", {
|
4099
|
+
key: year,
|
4100
|
+
value: year
|
4101
|
+
}, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
|
4105
4102
|
appearance: "discrete",
|
4106
4103
|
icon: "chevron-left",
|
4107
4104
|
"aria-label": actions.previousMonth,
|
4108
|
-
onClick:
|
4109
|
-
return onPreviousClick();
|
4110
|
-
},
|
4105
|
+
onClick: () => onPreviousClick(),
|
4111
4106
|
rounded: true
|
4112
4107
|
}), React.createElement(IconButton, {
|
4113
4108
|
appearance: "discrete",
|
4114
4109
|
icon: "chevron-right",
|
4115
4110
|
"aria-label": actions.nextMonth,
|
4116
|
-
onClick:
|
4117
|
-
return onNextClick();
|
4118
|
-
},
|
4111
|
+
onClick: () => onNextClick(),
|
4119
4112
|
rounded: true
|
4120
4113
|
})));
|
4121
4114
|
});
|
4122
|
-
|
4123
|
-
|
4124
|
-
|
4125
|
-
|
4126
|
-
|
4127
|
-
|
4128
|
-
|
4129
|
-
|
4130
|
-
|
4131
|
-
|
4132
|
-
|
4133
|
-
|
4134
|
-
|
4135
|
-
React.useEffect(function () {
|
4115
|
+
const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
4116
|
+
const {
|
4117
|
+
onChange: handleChange,
|
4118
|
+
value,
|
4119
|
+
...otherProps
|
4120
|
+
} = props;
|
4121
|
+
const {
|
4122
|
+
locale,
|
4123
|
+
texts
|
4124
|
+
} = useLocalization();
|
4125
|
+
const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
|
4126
|
+
React.useEffect(() => {
|
4136
4127
|
if (visibleMonth !== value) {
|
4137
4128
|
setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
|
4138
4129
|
}
|
4139
4130
|
}, [value]);
|
4140
4131
|
|
4141
|
-
|
4132
|
+
const handleDayClick = (date, modifiers, event) => {
|
4142
4133
|
if (modifiers.outside || modifiers.disabled) {
|
4143
4134
|
return;
|
4144
4135
|
}
|
@@ -4146,8 +4137,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4146
4137
|
handleChange(date, event);
|
4147
4138
|
};
|
4148
4139
|
|
4149
|
-
|
4150
|
-
|
4140
|
+
const handleCalendarClickToday = () => {
|
4141
|
+
const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
|
4151
4142
|
|
4152
4143
|
today.setHours(12);
|
4153
4144
|
today.setMinutes(0);
|
@@ -4155,7 +4146,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4155
4146
|
handleChange(today);
|
4156
4147
|
};
|
4157
4148
|
|
4158
|
-
|
4149
|
+
const className = cn('flex bg-white text-xs p-4', otherProps.className);
|
4159
4150
|
return React.createElement("div", {
|
4160
4151
|
"data-taco": "calendar"
|
4161
4152
|
}, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
|
@@ -4166,18 +4157,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4166
4157
|
firstDayOfWeek: 1,
|
4167
4158
|
months: texts.calendar.months,
|
4168
4159
|
weekdaysShort: texts.calendar.weekdaysShort,
|
4169
|
-
navbarElement:
|
4170
|
-
|
4171
|
-
|
4172
|
-
|
4173
|
-
}));
|
4174
|
-
},
|
4160
|
+
navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
|
4161
|
+
onMonthChange: setVisibleMonth,
|
4162
|
+
value: visibleMonth
|
4163
|
+
})),
|
4175
4164
|
onDayClick: handleDayClick,
|
4176
4165
|
onMonthChange: setVisibleMonth,
|
4177
4166
|
onTodayButtonClick: handleCalendarClickToday,
|
4178
|
-
captionElement:
|
4179
|
-
return null;
|
4180
|
-
},
|
4167
|
+
captionElement: () => null,
|
4181
4168
|
todayButton: texts.calendar.actions.today,
|
4182
4169
|
showOutsideDays: true,
|
4183
4170
|
renderDay: renderDay,
|
@@ -4186,32 +4173,30 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
|
|
4186
4173
|
})));
|
4187
4174
|
});
|
4188
4175
|
|
4189
|
-
|
4190
|
-
|
4191
|
-
|
4192
|
-
|
4193
|
-
|
4194
|
-
|
4195
|
-
|
4196
|
-
|
4197
|
-
|
4198
|
-
|
4199
|
-
|
4176
|
+
const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
4177
|
+
const {
|
4178
|
+
checked,
|
4179
|
+
highlighted,
|
4180
|
+
indeterminate,
|
4181
|
+
invalid,
|
4182
|
+
label,
|
4183
|
+
onChange,
|
4184
|
+
...otherProps
|
4185
|
+
} = props;
|
4186
|
+
const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
|
4200
4187
|
props.className, {
|
4201
4188
|
'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
|
4202
4189
|
'border-grey text-blue-light cursor-not-allowed': props.disabled,
|
4203
4190
|
'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
|
4204
4191
|
'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
|
4205
4192
|
});
|
4206
|
-
|
4193
|
+
let handleChange;
|
4207
4194
|
|
4208
4195
|
if (onChange) {
|
4209
|
-
handleChange =
|
4210
|
-
return onChange(checked === 'indeterminate' ? false : checked);
|
4211
|
-
};
|
4196
|
+
handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
|
4212
4197
|
}
|
4213
4198
|
|
4214
|
-
|
4199
|
+
const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
|
4215
4200
|
"data-taco": "checkbox",
|
4216
4201
|
checked: indeterminate ? 'indeterminate' : checked,
|
4217
4202
|
className: className,
|
@@ -4225,7 +4210,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
|
|
4225
4210
|
})));
|
4226
4211
|
|
4227
4212
|
if (label) {
|
4228
|
-
|
4213
|
+
const labelClassName = cn('flex items-center cursor-pointer gap-2', {
|
4229
4214
|
'cursor-not-allowed text-grey-dark': props.disabled
|
4230
4215
|
}, props.className);
|
4231
4216
|
return React.createElement("label", {
|
@@ -5106,27 +5091,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
|
|
5106
5091
|
return dimensions;
|
5107
5092
|
};
|
5108
5093
|
|
5109
|
-
|
5110
|
-
|
5111
|
-
|
5112
|
-
|
5113
|
-
|
5114
|
-
|
5115
|
-
|
5116
|
-
|
5117
|
-
|
5118
|
-
|
5119
|
-
|
5120
|
-
|
5121
|
-
|
5122
|
-
|
5123
|
-
|
5124
|
-
|
5125
|
-
|
5126
|
-
|
5127
|
-
|
5128
|
-
|
5129
|
-
var className = cn('inline-flex relative', {
|
5094
|
+
const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
5095
|
+
const {
|
5096
|
+
className: externalClassName,
|
5097
|
+
dialog,
|
5098
|
+
style,
|
5099
|
+
...otherProps
|
5100
|
+
} = props;
|
5101
|
+
const {
|
5102
|
+
combobox,
|
5103
|
+
button,
|
5104
|
+
input,
|
5105
|
+
popover,
|
5106
|
+
list
|
5107
|
+
} = useCombobox(otherProps, ref);
|
5108
|
+
const internalRef = React.useRef(null);
|
5109
|
+
const {
|
5110
|
+
texts
|
5111
|
+
} = useLocalization();
|
5112
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
5113
|
+
const className = cn('inline-flex relative', {
|
5130
5114
|
'yt-combobox--inline': props.inline
|
5131
5115
|
}, externalClassName);
|
5132
5116
|
return React.createElement("span", {
|
@@ -5145,7 +5129,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5145
5129
|
appearance: "discrete",
|
5146
5130
|
className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
|
5147
5131
|
icon: popover.open ? 'chevron-up' : 'chevron-down',
|
5148
|
-
onClick:
|
5132
|
+
onClick: () => {
|
5149
5133
|
var _input$ref$current;
|
5150
5134
|
|
5151
5135
|
popover.onOpenChange(true);
|
@@ -5156,7 +5140,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5156
5140
|
icon: "list-search",
|
5157
5141
|
disabled: props.readOnly || props.disabled,
|
5158
5142
|
dialog: dialog,
|
5159
|
-
onFocus:
|
5143
|
+
onFocus: event => {
|
5160
5144
|
var _input$ref$current2;
|
5161
5145
|
|
5162
5146
|
// Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
|
@@ -5169,7 +5153,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
|
|
5169
5153
|
}) : undefined
|
5170
5154
|
})))), React.createElement(PopoverPrimitive.Content, {
|
5171
5155
|
align: "start",
|
5172
|
-
onOpenAutoFocus:
|
5156
|
+
onOpenAutoFocus: event => {
|
5173
5157
|
event.preventDefault();
|
5174
5158
|
},
|
5175
5159
|
sideOffset: 4
|
@@ -5479,23 +5463,23 @@ Popover.Trigger = Trigger$1;
|
|
5479
5463
|
Popover.Content = Content$1;
|
5480
5464
|
Popover.Close = Close$1;
|
5481
5465
|
|
5482
|
-
|
5483
|
-
|
5484
|
-
|
5485
|
-
|
5486
|
-
|
5487
|
-
|
5488
|
-
|
5489
|
-
|
5490
|
-
|
5491
|
-
|
5492
|
-
|
5493
|
-
|
5494
|
-
|
5495
|
-
|
5496
|
-
|
5497
|
-
|
5498
|
-
|
5466
|
+
const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
5467
|
+
const {
|
5468
|
+
className: externalClassName,
|
5469
|
+
onReset: handleReset,
|
5470
|
+
style,
|
5471
|
+
shortcuts,
|
5472
|
+
shortcutsText,
|
5473
|
+
...otherProps
|
5474
|
+
} = props;
|
5475
|
+
const {
|
5476
|
+
calendar,
|
5477
|
+
input
|
5478
|
+
} = useDatepicker(otherProps, ref);
|
5479
|
+
const {
|
5480
|
+
texts
|
5481
|
+
} = useLocalization();
|
5482
|
+
const className = cn('inline-flex w-full text-black font-normal', externalClassName);
|
5499
5483
|
return React.createElement("span", {
|
5500
5484
|
className: className,
|
5501
5485
|
"data-taco": "datepicker",
|
@@ -5505,40 +5489,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
|
|
5505
5489
|
"aria-label": texts.datepicker.expand,
|
5506
5490
|
disabled: input.disabled || input.readOnly,
|
5507
5491
|
icon: "calendar"
|
5508
|
-
})), React.createElement(Popover.Content, null,
|
5509
|
-
|
5510
|
-
|
5511
|
-
|
5512
|
-
|
5513
|
-
|
5514
|
-
|
5515
|
-
|
5516
|
-
|
5517
|
-
|
5518
|
-
|
5519
|
-
|
5520
|
-
|
5521
|
-
|
5522
|
-
|
5523
|
-
|
5524
|
-
|
5525
|
-
|
5526
|
-
|
5527
|
-
|
5528
|
-
|
5529
|
-
|
5530
|
-
|
5531
|
-
|
5532
|
-
|
5533
|
-
|
5534
|
-
|
5535
|
-
|
5536
|
-
|
5537
|
-
|
5538
|
-
|
5539
|
-
}
|
5540
|
-
}, texts.datepicker.clear)));
|
5541
|
-
}))
|
5492
|
+
})), React.createElement(Popover.Content, null, ({
|
5493
|
+
close
|
5494
|
+
}) => React.createElement("div", {
|
5495
|
+
className: "-m-3 flex"
|
5496
|
+
}, React.createElement(Calendar$1, Object.assign({}, calendar, {
|
5497
|
+
onChange: (date, event) => {
|
5498
|
+
calendar.onChange(date, event);
|
5499
|
+
close();
|
5500
|
+
},
|
5501
|
+
tabIndex: -1
|
5502
|
+
})), shortcuts && React.createElement("div", {
|
5503
|
+
className: "border-grey-dark flex flex-col border-l"
|
5504
|
+
}, React.createElement("span", {
|
5505
|
+
className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
|
5506
|
+
}, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
|
5507
|
+
key: i
|
5508
|
+
}, React.createElement("button", {
|
5509
|
+
className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
|
5510
|
+
onClick: event => {
|
5511
|
+
event.persist();
|
5512
|
+
shortcut.onClick(event);
|
5513
|
+
close();
|
5514
|
+
}
|
5515
|
+
}, shortcut.text)))), handleReset && React.createElement("button", {
|
5516
|
+
className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
|
5517
|
+
onClick: event => {
|
5518
|
+
event.persist();
|
5519
|
+
handleReset(event);
|
5520
|
+
close();
|
5521
|
+
}
|
5522
|
+
}, texts.datepicker.clear)))))
|
5542
5523
|
})));
|
5543
5524
|
});
|
5544
5525
|
|
@@ -5781,14 +5762,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
|
|
5781
5762
|
});
|
5782
5763
|
Extra.displayName = 'DialogExtra';
|
5783
5764
|
|
5784
|
-
|
5785
|
-
|
5786
|
-
|
5787
|
-
|
5788
|
-
|
5789
|
-
|
5790
|
-
var extra;
|
5791
|
-
React.Children.toArray(initialChildren).forEach(function (child) {
|
5765
|
+
const useSeparatedChildren = initialChildren => {
|
5766
|
+
return React.useMemo(() => {
|
5767
|
+
const children = [];
|
5768
|
+
let drawer;
|
5769
|
+
let extra;
|
5770
|
+
React.Children.toArray(initialChildren).forEach(child => {
|
5792
5771
|
var _child$type, _child$type2;
|
5793
5772
|
|
5794
5773
|
if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
|
@@ -5803,55 +5782,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
|
|
5803
5782
|
}, [initialChildren]);
|
5804
5783
|
};
|
5805
5784
|
|
5806
|
-
|
5807
|
-
|
5808
|
-
|
5809
|
-
|
5810
|
-
|
5811
|
-
|
5812
|
-
|
5813
|
-
|
5814
|
-
|
5815
|
-
|
5816
|
-
|
5817
|
-
|
5818
|
-
|
5819
|
-
|
5820
|
-
|
5821
|
-
|
5822
|
-
|
5823
|
-
|
5824
|
-
|
5825
|
-
|
5826
|
-
|
5827
|
-
|
5828
|
-
|
5829
|
-
|
5830
|
-
|
5831
|
-
|
5832
|
-
|
5833
|
-
|
5834
|
-
|
5835
|
-
|
5836
|
-
|
5837
|
-
|
5838
|
-
|
5839
|
-
return setDrawerOpen(function (isDrawerOpen) {
|
5840
|
-
return !isDrawerOpen;
|
5841
|
-
});
|
5842
|
-
}
|
5843
|
-
},
|
5844
|
-
elements: {
|
5845
|
-
drawer: drawer,
|
5846
|
-
extra: extra
|
5847
|
-
},
|
5848
|
-
onClose: onClose,
|
5849
|
-
props: otherProps,
|
5850
|
-
showCloseButton: showCloseButton,
|
5851
|
-
size: size,
|
5852
|
-
ref: ref
|
5853
|
-
};
|
5854
|
-
}, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5785
|
+
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
|
5786
|
+
const {
|
5787
|
+
children: initialChildren,
|
5788
|
+
closeOnEscape = true,
|
5789
|
+
defaultOpen,
|
5790
|
+
draggable = false,
|
5791
|
+
onChange,
|
5792
|
+
onClose,
|
5793
|
+
open,
|
5794
|
+
showCloseButton = true,
|
5795
|
+
size = 'sm',
|
5796
|
+
trigger,
|
5797
|
+
...otherProps
|
5798
|
+
} = props;
|
5799
|
+
const [children, drawer, extra] = useSeparatedChildren(initialChildren);
|
5800
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
5801
|
+
const context = React.useMemo(() => ({
|
5802
|
+
closeOnEscape,
|
5803
|
+
draggable,
|
5804
|
+
drawer: {
|
5805
|
+
open: drawerOpen,
|
5806
|
+
toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
|
5807
|
+
},
|
5808
|
+
elements: {
|
5809
|
+
drawer,
|
5810
|
+
extra
|
5811
|
+
},
|
5812
|
+
onClose,
|
5813
|
+
props: otherProps,
|
5814
|
+
showCloseButton,
|
5815
|
+
size,
|
5816
|
+
ref
|
5817
|
+
}), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
|
5855
5818
|
return React.createElement(DialogContext.Provider, {
|
5856
5819
|
value: context
|
5857
5820
|
}, React.createElement(DialogPrimitive.Root, {
|
@@ -5868,19 +5831,18 @@ Dialog.Extra = Extra;
|
|
5868
5831
|
Dialog.Drawer = Drawer;
|
5869
5832
|
Dialog.Close = Close$2;
|
5870
5833
|
|
5871
|
-
|
5872
|
-
|
5873
|
-
|
5874
|
-
|
5875
|
-
|
5876
|
-
|
5877
|
-
|
5878
|
-
|
5879
|
-
|
5880
|
-
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5834
|
+
const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
5835
|
+
const {
|
5836
|
+
disabled,
|
5837
|
+
children,
|
5838
|
+
invalid = false,
|
5839
|
+
message,
|
5840
|
+
...otherProps
|
5841
|
+
} = props;
|
5842
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
5881
5843
|
'text-grey-dark': disabled
|
5882
5844
|
}, props.className);
|
5883
|
-
|
5845
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
5884
5846
|
'text-grey-darkest': !invalid,
|
5885
5847
|
'text-red': invalid,
|
5886
5848
|
'opacity-50': disabled
|
@@ -5895,13 +5857,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
5895
5857
|
}, message));
|
5896
5858
|
});
|
5897
5859
|
|
5898
|
-
|
5899
|
-
|
5900
|
-
|
5901
|
-
|
5902
|
-
|
5903
|
-
|
5904
|
-
var className = cn('yt-form', {
|
5860
|
+
const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
5861
|
+
const {
|
5862
|
+
horizontal = false,
|
5863
|
+
...otherProps
|
5864
|
+
} = props;
|
5865
|
+
const className = cn('yt-form', {
|
5905
5866
|
'yt-form--horizontal flex flex-wrap': horizontal
|
5906
5867
|
}, props.className);
|
5907
5868
|
return React.createElement("form", Object.assign({}, otherProps, {
|
@@ -5911,13 +5872,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
|
|
5911
5872
|
}));
|
5912
5873
|
});
|
5913
5874
|
|
5914
|
-
|
5915
|
-
|
5916
|
-
|
5917
|
-
|
5918
|
-
|
5919
|
-
|
5920
|
-
var className = cn('flex ', props.className);
|
5875
|
+
const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
5876
|
+
const {
|
5877
|
+
as: Tag = 'span',
|
5878
|
+
...otherProps
|
5879
|
+
} = props;
|
5880
|
+
const className = cn('flex ', props.className);
|
5921
5881
|
return React.createElement(Tag, Object.assign({}, otherProps, {
|
5922
5882
|
className: className,
|
5923
5883
|
"data-taco": "group",
|
@@ -5925,19 +5885,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
|
|
5925
5885
|
}));
|
5926
5886
|
});
|
5927
5887
|
|
5928
|
-
|
5929
|
-
var HangerContext = /*#__PURE__*/React.createContext({
|
5888
|
+
const HangerContext = /*#__PURE__*/React.createContext({
|
5930
5889
|
props: {},
|
5931
5890
|
ref: null
|
5932
5891
|
});
|
5933
|
-
|
5892
|
+
const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
5934
5893
|
var _props$children;
|
5935
5894
|
|
5936
|
-
|
5937
|
-
|
5895
|
+
const context = React.useContext(HangerContext);
|
5896
|
+
let children = props.children;
|
5938
5897
|
|
5939
5898
|
if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
5940
|
-
console.warn(
|
5899
|
+
console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
5941
5900
|
children = React.createElement("span", null, props.children);
|
5942
5901
|
}
|
5943
5902
|
|
@@ -5947,22 +5906,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
|
|
5947
5906
|
asChild: true
|
5948
5907
|
}));
|
5949
5908
|
});
|
5950
|
-
|
5951
|
-
|
5909
|
+
const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
|
5910
|
+
const className = cn('mb-1 text-base font-bold flex w-full', props.className);
|
5952
5911
|
return React.createElement("span", Object.assign({}, props, {
|
5953
5912
|
className: className,
|
5954
5913
|
ref: ref
|
5955
5914
|
}));
|
5956
5915
|
});
|
5957
|
-
|
5958
|
-
|
5959
|
-
|
5960
|
-
|
5961
|
-
|
5962
|
-
|
5963
|
-
var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
5916
|
+
const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
|
5917
|
+
const context = React.useContext(HangerContext);
|
5918
|
+
const {
|
5919
|
+
texts
|
5920
|
+
} = useLocalization();
|
5921
|
+
const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
5964
5922
|
|
5965
|
-
|
5923
|
+
const handleInteractOutside = event => {
|
5966
5924
|
event.preventDefault();
|
5967
5925
|
};
|
5968
5926
|
|
@@ -5984,25 +5942,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
|
|
5984
5942
|
onClick: context.props.onClose
|
5985
5943
|
})));
|
5986
5944
|
});
|
5987
|
-
|
5988
|
-
|
5989
|
-
|
5990
|
-
|
5991
|
-
|
5992
|
-
|
5993
|
-
|
5994
|
-
|
5995
|
-
|
5996
|
-
|
5997
|
-
|
5998
|
-
};
|
5999
|
-
}, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
6000
|
-
|
6001
|
-
var _React$useState = React.useState(false),
|
6002
|
-
open = _React$useState[0],
|
6003
|
-
setOpen = _React$useState[1];
|
5945
|
+
const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
|
5946
|
+
const {
|
5947
|
+
anchor,
|
5948
|
+
children,
|
5949
|
+
defaultOpen = true,
|
5950
|
+
...otherProps
|
5951
|
+
} = props;
|
5952
|
+
const context = React.useMemo(() => ({
|
5953
|
+
props: otherProps,
|
5954
|
+
ref
|
5955
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
6004
5956
|
|
6005
|
-
React.
|
5957
|
+
const [open, setOpen] = React.useState(false);
|
5958
|
+
React.useEffect(() => {
|
6006
5959
|
if (defaultOpen) {
|
6007
5960
|
setOpen(defaultOpen);
|
6008
5961
|
}
|
@@ -6914,23 +6867,26 @@ const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props,
|
|
6914
6867
|
Treeview.Group = TreeviewGroup;
|
6915
6868
|
Treeview.Item = TreeviewItem;
|
6916
6869
|
|
6917
|
-
|
6918
|
-
|
6919
|
-
|
6870
|
+
var useDropTarget = function useDropTarget(onDrop) {
|
6871
|
+
var _React$useState = React__default.useState(false),
|
6872
|
+
isDraggedOver = _React$useState[0],
|
6873
|
+
setDraggedOver = _React$useState[1];
|
6874
|
+
|
6875
|
+
var handleDragEnter = React__default.useCallback(function (event) {
|
6920
6876
|
event.preventDefault();
|
6921
6877
|
setDraggedOver(true);
|
6922
6878
|
}, []);
|
6923
|
-
|
6879
|
+
var handleDragLeave = React__default.useCallback(function (event) {
|
6924
6880
|
event.preventDefault();
|
6925
6881
|
|
6926
6882
|
if (event.target === event.currentTarget) {
|
6927
6883
|
setDraggedOver(false);
|
6928
6884
|
}
|
6929
6885
|
}, []);
|
6930
|
-
|
6886
|
+
var handleDragOver = React__default.useCallback(function (event) {
|
6931
6887
|
event.preventDefault();
|
6932
6888
|
}, []);
|
6933
|
-
|
6889
|
+
var handleDrop = React__default.useCallback(function (event) {
|
6934
6890
|
event.preventDefault();
|
6935
6891
|
event.persist();
|
6936
6892
|
setDraggedOver(false);
|
@@ -6939,7 +6895,7 @@ const useDropTarget = onDrop => {
|
|
6939
6895
|
onDrop(event);
|
6940
6896
|
}
|
6941
6897
|
}, [onDrop]);
|
6942
|
-
|
6898
|
+
var props = onDrop ? {
|
6943
6899
|
onDragEnter: handleDragEnter,
|
6944
6900
|
onDragLeave: handleDragLeave,
|
6945
6901
|
onDragOver: handleDragOver,
|
@@ -9458,12 +9414,12 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
|
|
9458
9414
|
}, [ref, callback]);
|
9459
9415
|
};
|
9460
9416
|
|
9461
|
-
|
9462
|
-
|
9463
|
-
|
9464
|
-
|
9465
|
-
|
9466
|
-
|
9417
|
+
const Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
|
9418
|
+
const {
|
9419
|
+
noPadding,
|
9420
|
+
...props
|
9421
|
+
} = externalProps;
|
9422
|
+
const className = cn('flex-grow overflow-auto', {
|
9467
9423
|
'mx-4 mb-4': !noPadding
|
9468
9424
|
}, props.className);
|
9469
9425
|
return React.createElement("div", Object.assign({}, props, {
|
@@ -9471,11 +9427,13 @@ var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps
|
|
9471
9427
|
ref: ref
|
9472
9428
|
}));
|
9473
9429
|
});
|
9474
|
-
|
9475
|
-
|
9476
|
-
|
9477
|
-
|
9478
|
-
|
9430
|
+
const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
9431
|
+
const {
|
9432
|
+
title,
|
9433
|
+
menu,
|
9434
|
+
children
|
9435
|
+
} = props;
|
9436
|
+
const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
|
9479
9437
|
return React.createElement("div", {
|
9480
9438
|
className: className,
|
9481
9439
|
"data-taco": "card",
|
@@ -9552,6 +9510,7 @@ exports.parseFromISOString = parseFromISOString;
|
|
9552
9510
|
exports.removeChildTableRow = removeChildTableRow;
|
9553
9511
|
exports.setByRowIndexPath = setByRowIndexPath;
|
9554
9512
|
exports.useBoundingClientRectListener = useBoundingClientRectListener;
|
9513
|
+
exports.useDropTarget = useDropTarget;
|
9555
9514
|
exports.useListKeyboardNavigation = useListKeyboardNavigation;
|
9556
9515
|
exports.useListScrollTo = useListScrollTo;
|
9557
9516
|
exports.useLocalization = useLocalization;
|