@raystack/apsara 0.43.0 → 0.44.1
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/style.css +1 -1
- package/dist/v1/components/calendar/calendar.module.css.cjs +1 -1
- package/dist/v1/components/calendar/calendar.module.css.js +1 -1
- package/dist/v1/components/calendar/range-picker.cjs +3 -3
- package/dist/v1/components/calendar/range-picker.cjs.map +1 -1
- package/dist/v1/components/calendar/range-picker.d.ts +5 -9
- package/dist/v1/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/v1/components/calendar/range-picker.js +3 -3
- package/dist/v1/components/calendar/range-picker.js.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.cjs +2 -1
- package/dist/v1/components/filter-chip/filter-chip.cjs.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.js +2 -1
- package/dist/v1/components/filter-chip/filter-chip.js.map +1 -1
- package/dist/v1/components/select/select-content.cjs +15 -0
- package/dist/v1/components/select/select-content.cjs.map +1 -0
- package/dist/v1/components/select/select-content.d.ts +3 -0
- package/dist/v1/components/select/select-content.d.ts.map +1 -0
- package/dist/v1/components/select/select-content.js +13 -0
- package/dist/v1/components/select/select-content.js.map +1 -0
- package/dist/v1/components/select/select-item.cjs +26 -0
- package/dist/v1/components/select/select-item.cjs.map +1 -0
- package/dist/v1/components/select/select-item.d.ts +7 -0
- package/dist/v1/components/select/select-item.d.ts.map +1 -0
- package/dist/v1/components/select/select-item.js +24 -0
- package/dist/v1/components/select/select-item.js.map +1 -0
- package/dist/v1/components/select/select-root.cjs +44 -0
- package/dist/v1/components/select/select-root.cjs.map +1 -0
- package/dist/v1/components/select/select-root.d.ts +15 -0
- package/dist/v1/components/select/select-root.d.ts.map +1 -0
- package/dist/v1/components/select/select-root.js +41 -0
- package/dist/v1/components/select/select-root.js.map +1 -0
- package/dist/v1/components/select/select-trigger.cjs +38 -0
- package/dist/v1/components/select/select-trigger.cjs.map +1 -0
- package/dist/v1/components/select/select-trigger.d.ts +26 -0
- package/dist/v1/components/select/select-trigger.d.ts.map +1 -0
- package/dist/v1/components/select/select-trigger.js +36 -0
- package/dist/v1/components/select/select-trigger.js.map +1 -0
- package/dist/v1/components/select/select-value.cjs +18 -0
- package/dist/v1/components/select/select-value.cjs.map +1 -0
- package/dist/v1/components/select/select-value.d.ts +3 -0
- package/dist/v1/components/select/select-value.d.ts.map +1 -0
- package/dist/v1/components/select/select-value.js +16 -0
- package/dist/v1/components/select/select-value.js.map +1 -0
- package/dist/v1/components/select/select.cjs +11 -81
- package/dist/v1/components/select/select.cjs.map +1 -1
- package/dist/v1/components/select/select.d.ts +16 -43
- package/dist/v1/components/select/select.d.ts.map +1 -1
- package/dist/v1/components/select/select.js +7 -58
- package/dist/v1/components/select/select.js.map +1 -1
- package/dist/v1/style.css +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","
|
|
5
|
+
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","calendarFooter":"calendar-module_calendarFooter__kJw5W"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=calendar.module.css.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","
|
|
1
|
+
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","calendarFooter":"calendar-module_calendarFooter__kJw5W"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=calendar.module.css.js.map
|
|
@@ -6,11 +6,11 @@ var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/day
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var flex = require('../flex/flex.cjs');
|
|
8
8
|
var popover = require('../popover/popover.cjs');
|
|
9
|
-
var textfield = require('../textfield/textfield.cjs');
|
|
10
9
|
var calendar = require('./calendar.cjs');
|
|
11
10
|
var calendar_module = require('./calendar.module.css.cjs');
|
|
11
|
+
var inputField = require('../input-field/input-field.cjs');
|
|
12
12
|
|
|
13
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
13
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
|
|
14
14
|
to: new Date(),
|
|
15
15
|
from: new Date(),
|
|
16
16
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -59,7 +59,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
59
59
|
function onOpenChange(open) {
|
|
60
60
|
setShowCalendar(Boolean(open));
|
|
61
61
|
}
|
|
62
|
-
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(
|
|
62
|
+
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true })] }));
|
|
63
63
|
const trigger = typeof children === 'function'
|
|
64
64
|
? children({ startDate, endDate })
|
|
65
65
|
: children || defaultTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport {
|
|
1
|
+
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps, endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n inputFieldsProps = {},\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function'\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","dayjs","_jsxs","Flex","_jsx","InputField","CalendarIcon","Popover","styles","Calendar"],"mappings":";;;;;;;;;;;;AA2BM,SAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,YAAY,EACzB,gBAAgB,GAAG,EAAE,EACrB,aAAa,EACb,QAAQ,GAAG,MAAO,GAAC,EACnB,KAAK,GAAG;IACN,EAAE,EAAE,IAAI,IAAI,EAAE;IACd,IAAI,EAAE,IAAI,IAAI,EAAE;CACjB,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,MAAM,GACW,EAAA;IACjB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAc,MAAM,CAAC,CAAC;IAChF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,GAAGC,iBAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;IACzF,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE,GAAGA,iBAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;;;;AAKnF,IAAA,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,WAAiB,KAAI;QAC3D,MAAM,IAAI,GAAG,aAAa,EAAE,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC;AAChD,QAAA,IAAI,QAAmB,CAAC;AACxB,QAAA,IAAI,iBAAiB,KAAK,IAAI,EAAE;AAC9B,YAAA,IAAIA,iBAAK,CAAC,WAAW,CAAC,CAAC,MAAM,CAACA,iBAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE;;AAEjD,gBAAA,QAAQ,GAAG;oBACT,IAAI;AACJ,oBAAA,EAAE,EAAE,WAAW;iBAChB,CAAC;aACH;AAAM,iBAAA,IAAIA,iBAAK,CAAC,WAAW,CAAC,CAAC,OAAO,CAACA,iBAAK,CAAC,IAAI,CAAC,CAAC,EAAE;;gBAElD,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC;aACtC;iBAAM;;AAEL,gBAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;aAClC;YACD,oBAAoB,CAAC,MAAM,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;YACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;QACD,gBAAgB,CAAC,QAAQ,CAAC,CAAC;;AAE3B,QAAA,MAAM,aAAa,GAAG;YACpB,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAGA,iBAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,SAAS;SACxE,CAAC;QACF,QAAQ,CAAC,aAAa,CAAC,CAAC;AAC1B,KAAC,CAAC;IAEF,SAAS,YAAY,CAAC,IAAc,EAAA;AAClC,QAAA,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;KAChC;AAED,IAAA,MAAM,cAAc,IAClBC,kCAACC,SAAI,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAClDC,iCAACC,qBAAU,EAAA,EACb,IAAI,EAAC,OAAO,EACJ,IAAC,gBAAgB,CAAC,SAAS,IAAI,EAAE,CAAC,EACtC,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,gBAAgB,GAAGD,gCAAA,CAACE,2BAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EAC7D,QAAQ,SACR,EAEFF,gCAAA,CAACC,qBAAU,EACb,EAAA,IAAI,EAAC,OAAO,EAAA,IACH,gBAAgB,CAAC,OAAO,IAAI,EAAE,CAAC,EACpC,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,gBAAgB,GAAGD,gCAAC,CAAAE,2BAAY,KAAG,GAAG,SAAS,EAC7D,QAAQ,EACR,IAAA,EAAA,CAAA,CAAA,EAAA,CACG,CACR,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU;UAC1C,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAClC,UAAE,QAAQ,IAAI,cAAc,CAAC;IAE/B,QACEJ,kCAACK,eAAO,EAAA,EAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EACrD,QAAA,EAAA,CAAAH,gCAAA,CAACG,eAAO,CAAC,OAAO,IAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EACrB,OAAO,EAAA,CACQ,EAClBL,iCAAA,CAACK,eAAO,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAEC,uBAAM,CAAC,eAAe,aAC5DJ,gCAAC,CAAAK,iBAAQ,IACP,eAAe,EAAE,KAAK,EACtB,cAAc,EAAE,CAAC,EACjB,YAAY,EAAE,aAAa,CAAC,IAAI,EAChC,QAAQ,EAAE,IAAI,EAAA,GACV,aAAa,EACjB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,CAAA,EACD,MAAM,KACLL,gCAAC,CAAAD,SAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAEK,uBAAM,CAAC,cAAc,EACnE,QAAA,EAAA,MAAM,GACF,CACR,CAAA,EAAA,CACe,CACV,EAAA,CAAA,EACV;AACJ;;;;"}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { DateRange, PropsBase, PropsRangeRequired } from "react-day-picker";
|
|
2
|
-
import {
|
|
2
|
+
import { InputFieldProps } from "../input-field/input-field";
|
|
3
3
|
interface RangePickerProps {
|
|
4
4
|
side?: "top" | "right" | "bottom" | "left";
|
|
5
5
|
dateFormat?: string;
|
|
6
|
-
|
|
7
|
-
startDate?:
|
|
8
|
-
endDate?:
|
|
9
|
-
};
|
|
10
|
-
placeholders?: {
|
|
11
|
-
startDate?: string;
|
|
12
|
-
endDate?: string;
|
|
6
|
+
inputFieldsProps?: {
|
|
7
|
+
startDate?: InputFieldProps;
|
|
8
|
+
endDate?: InputFieldProps;
|
|
13
9
|
};
|
|
14
10
|
calendarProps?: PropsRangeRequired & PropsBase;
|
|
15
11
|
onSelect?: (date: DateRange) => void;
|
|
@@ -22,6 +18,6 @@ interface RangePickerProps {
|
|
|
22
18
|
showCalendarIcon?: boolean;
|
|
23
19
|
footer?: React.ReactNode;
|
|
24
20
|
}
|
|
25
|
-
export declare function RangePicker({ side, dateFormat,
|
|
21
|
+
export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
export {};
|
|
27
23
|
//# sourceMappingURL=range-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CA+FlB"}
|
|
@@ -4,11 +4,11 @@ import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/day
|
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { Flex } from '../flex/flex.js';
|
|
6
6
|
import { Popover } from '../popover/popover.js';
|
|
7
|
-
import { TextField } from '../textfield/textfield.js';
|
|
8
7
|
import { Calendar } from './calendar.js';
|
|
9
8
|
import styles from './calendar.module.css.js';
|
|
9
|
+
import { InputField } from '../input-field/input-field.js';
|
|
10
10
|
|
|
11
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
11
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
|
|
12
12
|
to: new Date(),
|
|
13
13
|
from: new Date(),
|
|
14
14
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -57,7 +57,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
57
57
|
function onOpenChange(open) {
|
|
58
58
|
setShowCalendar(Boolean(open));
|
|
59
59
|
}
|
|
60
|
-
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(
|
|
60
|
+
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true })] }));
|
|
61
61
|
const trigger = typeof children === 'function'
|
|
62
62
|
? children({ startDate, endDate })
|
|
63
63
|
: children || defaultTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport {
|
|
1
|
+
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps, endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n inputFieldsProps = {},\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function'\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -12,8 +12,9 @@ require('../tooltip/tooltip.cjs');
|
|
|
12
12
|
var datePicker = require('../calendar/date-picker.cjs');
|
|
13
13
|
require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
|
|
14
14
|
require('../popover/popover.cjs');
|
|
15
|
-
|
|
15
|
+
require('../input-field/input-field.cjs');
|
|
16
16
|
var text = require('../text/text.cjs');
|
|
17
|
+
var textfield = require('../textfield/textfield.cjs');
|
|
17
18
|
var filterChip_module = require('./filter-chip.module.css.cjs');
|
|
18
19
|
var filters = require('../../types/filters.cjs');
|
|
19
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find((o) => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant=\"filter\"\n className={styles.operation}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map((opt) => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}\n >\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove = () => null,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map((opt) => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={(date) => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={[styles.chip, className].filter(Boolean).join(\" \")}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n <div\n className={styles.removeIconContainer}\n role=\"button\"\n tabIndex={0}\n aria-label={`Remove ${label} filter`}\n >\n <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n </div>\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find((o) => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant=\"filter\"\n className={styles.operation}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map((opt) => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}\n >\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove = () => null,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map((opt) => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={(date) => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={[styles.chip, className].filter(Boolean).join(\" \")}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n <div\n className={styles.removeIconContainer}\n role=\"button\"\n tabIndex={0}\n aria-label={`Remove ${label} filter`}\n >\n <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n </div>\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
|
|
@@ -10,8 +10,9 @@ import '../tooltip/tooltip.js';
|
|
|
10
10
|
import { DatePicker } from '../calendar/date-picker.js';
|
|
11
11
|
import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
|
|
12
12
|
import '../popover/popover.js';
|
|
13
|
-
import
|
|
13
|
+
import '../input-field/input-field.js';
|
|
14
14
|
import { Text } from '../text/text.js';
|
|
15
|
+
import { TextField } from '../textfield/textfield.js';
|
|
15
16
|
import styles from './filter-chip.module.css.js';
|
|
16
17
|
import { FilterType, filterOperators } from '../../types/filters.js';
|
|
17
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.js","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find((o) => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant=\"filter\"\n className={styles.operation}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map((opt) => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}\n >\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove = () => null,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map((opt) => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={(date) => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={[styles.chip, className].filter(Boolean).join(\" \")}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n <div\n className={styles.removeIconContainer}\n role=\"button\"\n tabIndex={0}\n aria-label={`Remove ${label} filter`}\n >\n <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n </div>\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"filter-chip.js","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find((o) => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant=\"filter\"\n className={styles.operation}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map((opt) => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}\n >\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove = () => null,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map((opt) => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={(date) => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={[styles.chip, className].filter(Boolean).join(\" \")}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n <div\n className={styles.removeIconContainer}\n role=\"button\"\n tabIndex={0}\n aria-label={`Remove ${label} filter`}\n >\n <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n </div>\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.1.1_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
|
|
6
|
+
var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
7
|
+
var select_module = require('./select.module.css.cjs');
|
|
8
|
+
|
|
9
|
+
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(index.Portal, { children: jsxRuntime.jsxRuntimeExports.jsx(index.Content, { ref: ref, className: index$1.cx(select_module.default.content, className), position: position, onPointerDownOutside: e => {
|
|
10
|
+
e.stopPropagation();
|
|
11
|
+
}, ...props, children: jsxRuntime.jsxRuntimeExports.jsx(index.Viewport, { children: children }) }) })));
|
|
12
|
+
SelectContent.displayName = index.Content.displayName;
|
|
13
|
+
|
|
14
|
+
exports.SelectContent = SelectContent;
|
|
15
|
+
//# sourceMappingURL=select-content.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-content.cjs","sources":["../../../../v1/components/select/select-content.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cx(styles.content, className)}\n position={position}\n onPointerDownOutside={e => {\n e.stopPropagation();\n }}\n {...props}>\n <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n"],"names":["forwardRef","_jsx","SelectPrimitive.Portal","SelectPrimitive.Content","cx","styles","SelectPrimitive.Viewport"],"mappings":";;;;;;;;AAKa,MAAA,aAAa,GAAGA,gBAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC5DC,gCAAC,CAAAC,YAAsB,cACrBD,gCAAC,CAAAE,aAAuB,EACtB,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAE,CAACC,qBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,CAAC,IAAG;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;AACtB,SAAC,EACG,GAAA,KAAK,EACT,QAAA,EAAAJ,gCAAA,CAACK,cAAwB,EAAE,EAAA,QAAA,EAAA,QAAQ,EAA4B,CAAA,EAAA,CACvC,EACH,CAAA,CAC1B,EAAE;AACH,aAAa,CAAC,WAAW,GAAGH,aAAuB,CAAC,WAAW;;;;"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
2
|
+
export declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
3
|
+
//# sourceMappingURL=select-content.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,eAAO,MAAM,aAAa,4LAgBxB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { Portal, Content as Content2, Viewport } from '../../node_modules/.pnpm/@radix-ui_react-select@2.1.1_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
|
|
4
|
+
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
5
|
+
import styles from './select.module.css.js';
|
|
6
|
+
|
|
7
|
+
const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => (jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsx(Content2, { ref: ref, className: cx(styles.content, className), position: position, onPointerDownOutside: e => {
|
|
8
|
+
e.stopPropagation();
|
|
9
|
+
}, ...props, children: jsxRuntimeExports.jsx(Viewport, { children: children }) }) })));
|
|
10
|
+
SelectContent.displayName = Content2.displayName;
|
|
11
|
+
|
|
12
|
+
export { SelectContent };
|
|
13
|
+
//# sourceMappingURL=select-content.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-content.js","sources":["../../../../v1/components/select/select-content.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cx(styles.content, className)}\n position={position}\n onPointerDownOutside={e => {\n e.stopPropagation();\n }}\n {...props}>\n <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n"],"names":["_jsx","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.Viewport"],"mappings":";;;;;;AAKa,MAAA,aAAa,GAAG,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC5DA,qBAAC,CAAAC,MAAsB,cACrBD,qBAAC,CAAAE,QAAuB,EACtB,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,CAAC,IAAG;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;AACtB,SAAC,EACG,GAAA,KAAK,EACT,QAAA,EAAAF,qBAAA,CAACG,QAAwB,EAAE,EAAA,QAAA,EAAA,QAAQ,EAA4B,CAAA,EAAA,CACvC,EACH,CAAA,CAC1B,EAAE;AACH,aAAa,CAAC,WAAW,GAAGD,QAAuB,CAAC,WAAW;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.1.1_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
|
|
6
|
+
var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
7
|
+
var select_module = require('./select.module.css.cjs');
|
|
8
|
+
var text = require('../text/text.cjs');
|
|
9
|
+
var selectRoot = require('./select-root.cjs');
|
|
10
|
+
|
|
11
|
+
const SelectItem = React.forwardRef(({ className, textProps = {}, children, value, leadingIcon, ...props }, ref) => {
|
|
12
|
+
const { registerIcon, unregisterIcon } = selectRoot.useSelectContext();
|
|
13
|
+
React.useEffect(() => {
|
|
14
|
+
if (!leadingIcon)
|
|
15
|
+
return;
|
|
16
|
+
registerIcon(value, leadingIcon);
|
|
17
|
+
return () => {
|
|
18
|
+
unregisterIcon(value);
|
|
19
|
+
};
|
|
20
|
+
}, [value, leadingIcon]);
|
|
21
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(index.Item, { ref: ref, value: value, className: index$1.cx(select_module.default.menuitem, className), ...props, children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: select_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsxRuntimeExports.jsx(index.ItemText, { children: jsxRuntime.jsxRuntimeExports.jsx(text.Text, { ...textProps, children: children }) })] }));
|
|
22
|
+
});
|
|
23
|
+
SelectItem.displayName = index.Item.displayName;
|
|
24
|
+
|
|
25
|
+
exports.SelectItem = SelectItem;
|
|
26
|
+
//# sourceMappingURL=select-item.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-item.cjs","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n useEffect,\n} from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\nimport { Text, TextBaseProps } from \"../text\";\nimport { useSelectContext } from \"./select-root\";\n\nexport const SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n textProps?: TextBaseProps;\n leadingIcon?: React.ReactNode;\n }\n>(\n (\n { className, textProps = {}, children, value, leadingIcon, ...props },\n ref,\n ) => {\n const { registerIcon, unregisterIcon } = useSelectContext();\n\n useEffect(() => {\n if (!leadingIcon) return;\n\n registerIcon(value, leadingIcon);\n return () => {\n unregisterIcon(value);\n };\n }, [value, leadingIcon]);\n\n return (\n <SelectPrimitive.Item\n ref={ref}\n value={value}\n className={cx(styles.menuitem, className)}\n {...props}>\n {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n <SelectPrimitive.ItemText>\n <Text {...textProps}>{children}</Text>\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n );\n },\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["forwardRef","useSelectContext","useEffect","_jsxs","SelectPrimitive.Item","cx","styles","_jsx","SelectPrimitive.ItemText","Text"],"mappings":";;;;;;;;;;AAYa,MAAA,UAAU,GAAGA,gBAAU,CAOlC,CACE,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EACrE,GAAG,KACD;IACF,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAGC,2BAAgB,EAAE,CAAC;IAE5DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW;YAAE,OAAO;AAEzB,QAAA,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACjC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,QACEC,iCAAC,CAAAC,UAAoB,IACnB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,UAAE,CAACC,qBAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAA,GACrC,KAAK,EAAA,QAAA,EAAA,CACR,WAAW,IAAIC,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,qBAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,WAAW,EAAO,CAAA,EACpEC,gCAAC,CAAAC,cAAwB,EAAA,EAAA,QAAA,EACvBD,gCAAC,CAAAE,SAAI,EAAK,EAAA,GAAA,SAAS,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EAAA,CACb,CACN,EAAA,CAAA,EACvB;AACJ,CAAC,EACD;AACF,UAAU,CAAC,WAAW,GAAGL,UAAoB,CAAC,WAAW;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
2
|
+
import { TextBaseProps } from "../text";
|
|
3
|
+
export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
4
|
+
textProps?: TextBaseProps | undefined;
|
|
5
|
+
leadingIcon?: React.ReactNode;
|
|
6
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
//# sourceMappingURL=select-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-item.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,OAAO,EAAQ,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,UAAU;;kBAIL,MAAM,SAAS;kDA+BhC,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { forwardRef, useEffect } from 'react';
|
|
3
|
+
import { Item, ItemText } from '../../node_modules/.pnpm/@radix-ui_react-select@2.1.1_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
|
|
4
|
+
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
5
|
+
import styles from './select.module.css.js';
|
|
6
|
+
import { Text } from '../text/text.js';
|
|
7
|
+
import { useSelectContext } from './select-root.js';
|
|
8
|
+
|
|
9
|
+
const SelectItem = forwardRef(({ className, textProps = {}, children, value, leadingIcon, ...props }, ref) => {
|
|
10
|
+
const { registerIcon, unregisterIcon } = useSelectContext();
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!leadingIcon)
|
|
13
|
+
return;
|
|
14
|
+
registerIcon(value, leadingIcon);
|
|
15
|
+
return () => {
|
|
16
|
+
unregisterIcon(value);
|
|
17
|
+
};
|
|
18
|
+
}, [value, leadingIcon]);
|
|
19
|
+
return (jsxRuntimeExports.jsxs(Item, { ref: ref, value: value, className: cx(styles.menuitem, className), ...props, children: [leadingIcon && jsxRuntimeExports.jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsxRuntimeExports.jsx(ItemText, { children: jsxRuntimeExports.jsx(Text, { ...textProps, children: children }) })] }));
|
|
20
|
+
});
|
|
21
|
+
SelectItem.displayName = Item.displayName;
|
|
22
|
+
|
|
23
|
+
export { SelectItem };
|
|
24
|
+
//# sourceMappingURL=select-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-item.js","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n useEffect,\n} from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\nimport { Text, TextBaseProps } from \"../text\";\nimport { useSelectContext } from \"./select-root\";\n\nexport const SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n textProps?: TextBaseProps;\n leadingIcon?: React.ReactNode;\n }\n>(\n (\n { className, textProps = {}, children, value, leadingIcon, ...props },\n ref,\n ) => {\n const { registerIcon, unregisterIcon } = useSelectContext();\n\n useEffect(() => {\n if (!leadingIcon) return;\n\n registerIcon(value, leadingIcon);\n return () => {\n unregisterIcon(value);\n };\n }, [value, leadingIcon]);\n\n return (\n <SelectPrimitive.Item\n ref={ref}\n value={value}\n className={cx(styles.menuitem, className)}\n {...props}>\n {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n <SelectPrimitive.ItemText>\n <Text {...textProps}>{children}</Text>\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n );\n },\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["_jsxs","SelectPrimitive.Item","_jsx","SelectPrimitive.ItemText"],"mappings":";;;;;;;;AAYa,MAAA,UAAU,GAAG,UAAU,CAOlC,CACE,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EACrE,GAAG,KACD;IACF,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW;YAAE,OAAO;AAEzB,QAAA,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACjC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,QACEA,sBAAC,CAAAC,IAAoB,IACnB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAA,GACrC,KAAK,EAAA,QAAA,EAAA,CACR,WAAW,IAAIC,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,WAAW,EAAO,CAAA,EACpEA,qBAAC,CAAAC,QAAwB,EAAA,EAAA,QAAA,EACvBD,qBAAC,CAAA,IAAI,EAAK,EAAA,GAAA,SAAS,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EAAA,CACb,CACN,EAAA,CAAA,EACvB;AACJ,CAAC,EACD;AACF,UAAU,CAAC,WAAW,GAAGD,IAAoB,CAAC,WAAW;;;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.1.1_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
Root context to manage the Select control
|
|
9
|
+
@remarks Only for internal usage.
|
|
10
|
+
*/
|
|
11
|
+
const SelectContext = React.createContext(undefined);
|
|
12
|
+
const useSelectContext = () => {
|
|
13
|
+
const context = React.useContext(SelectContext);
|
|
14
|
+
if (!context) {
|
|
15
|
+
throw new Error("useSelectContext must be used within a SelectProvider");
|
|
16
|
+
}
|
|
17
|
+
return context;
|
|
18
|
+
};
|
|
19
|
+
const SelectRoot = ({ children, value, onValueChange, defaultValue, ...props }) => {
|
|
20
|
+
const [internalValue, setInternalValue] = React.useState(defaultValue);
|
|
21
|
+
const icons = React.useRef({});
|
|
22
|
+
const computedValue = value ?? internalValue;
|
|
23
|
+
const icon = computedValue && icons.current?.[computedValue];
|
|
24
|
+
const setValue = (_value) => {
|
|
25
|
+
onValueChange?.(_value);
|
|
26
|
+
setInternalValue(_value);
|
|
27
|
+
};
|
|
28
|
+
const registerIcon = React.useCallback((value, icon) => {
|
|
29
|
+
icons.current = { ...icons.current, [value]: icon };
|
|
30
|
+
}, []);
|
|
31
|
+
const unregisterIcon = React.useCallback(value => {
|
|
32
|
+
const { [value]: _, ...rest } = icons.current;
|
|
33
|
+
icons.current = rest;
|
|
34
|
+
}, []);
|
|
35
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(SelectContext.Provider, { value: {
|
|
36
|
+
registerIcon,
|
|
37
|
+
unregisterIcon,
|
|
38
|
+
value: { value: computedValue, icon },
|
|
39
|
+
}, children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { value: computedValue, onValueChange: setValue, ...props, children: children }) }));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
exports.SelectRoot = SelectRoot;
|
|
43
|
+
exports.useSelectContext = useSelectContext;
|
|
44
|
+
//# sourceMappingURL=select-root.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-root.cjs","sources":["../../../../v1/components/select/select-root.tsx"],"sourcesContent":["import {\n createContext,\n ReactNode,\n useCallback,\n useContext,\n useRef,\n useState,\n} from \"react\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\n\ntype IconType = Record<string, ReactNode>;\ntype ValueType = {\n value?: string;\n icon?: ReactNode;\n};\ntype SelectContextValue = {\n value: ValueType;\n registerIcon: (value: string, icon: ReactNode) => void;\n unregisterIcon: (value: string) => void;\n};\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = () => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error(\"useSelectContext must be used within a SelectProvider\");\n }\n return context;\n};\n\nexport const SelectRoot = ({\n children,\n value,\n onValueChange,\n defaultValue,\n ...props\n}: SelectPrimitive.SelectProps) => {\n const [internalValue, setInternalValue] = useState<string | undefined>(\n defaultValue,\n );\n const icons = useRef<IconType>({});\n\n const computedValue = value ?? internalValue;\n const icon = computedValue && icons.current?.[computedValue];\n\n const setValue = (_value: string) => {\n onValueChange?.(_value);\n setInternalValue(_value);\n };\n\n const registerIcon = useCallback<SelectContextValue[\"registerIcon\"]>(\n (value, icon) => {\n icons.current = { ...icons.current, [value]: icon };\n },\n [],\n );\n const unregisterIcon = useCallback<SelectContextValue[\"unregisterIcon\"]>(\n value => {\n const { [value]: _, ...rest } = icons.current;\n icons.current = rest;\n },\n [],\n );\n\n return (\n <SelectContext.Provider\n value={{\n registerIcon,\n unregisterIcon,\n value: { value: computedValue, icon },\n }}>\n <SelectPrimitive.Root\n value={computedValue}\n onValueChange={setValue}\n {...props}>\n {children}\n </SelectPrimitive.Root>\n </SelectContext.Provider>\n );\n};\n"],"names":["createContext","useContext","useState","useRef","useCallback","_jsx","SelectPrimitive.Root"],"mappings":";;;;;;AAsBA;;;AAGE;AACF,MAAM,aAAa,GAAGA,mBAAa,CAAiC,SAAS,CAAC,CAAC;AAExE,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;KAC1E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAEW,MAAA,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAa,EACb,YAAY,EACZ,GAAG,KAAK,EACoB,KAAI;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAChD,YAAY,CACb,CAAC;AACF,IAAA,MAAM,KAAK,GAAGC,YAAM,CAAW,EAAE,CAAC,CAAC;AAEnC,IAAA,MAAM,aAAa,GAAG,KAAK,IAAI,aAAa,CAAC;IAC7C,MAAM,IAAI,GAAG,aAAa,IAAI,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC,CAAC;AAE7D,IAAA,MAAM,QAAQ,GAAG,CAAC,MAAc,KAAI;AAClC,QAAA,aAAa,GAAG,MAAM,CAAC,CAAC;QACxB,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAC3B,KAAC,CAAC;IAEF,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,KAAK,EAAE,IAAI,KAAI;AACd,QAAA,KAAK,CAAC,OAAO,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC;KACrD,EACD,EAAE,CACH,CAAC;AACF,IAAA,MAAM,cAAc,GAAGA,iBAAW,CAChC,KAAK,IAAG;AACN,QAAA,MAAM,EAAE,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9C,QAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;KACtB,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEC,gCAAC,CAAA,aAAa,CAAC,QAAQ,EAAA,EACrB,KAAK,EAAE;YACL,YAAY;YACZ,cAAc;AACd,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE;AACtC,SAAA,EAAA,QAAA,EACDA,iCAACC,UAAoB,EACnB,EAAA,KAAK,EAAE,aAAa,EACpB,aAAa,EAAE,QAAQ,KACnB,KAAK,EAAA,QAAA,EACR,QAAQ,EACY,CAAA,EAAA,CACA,EACzB;AACJ;;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3
|
+
type ValueType = {
|
|
4
|
+
value?: string;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
type SelectContextValue = {
|
|
8
|
+
value: ValueType;
|
|
9
|
+
registerIcon: (value: string, icon: ReactNode) => void;
|
|
10
|
+
unregisterIcon: (value: string) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare const useSelectContext: () => SelectContextValue;
|
|
13
|
+
export declare const SelectRoot: ({ children, value, onValueChange, defaultValue, ...props }: SelectPrimitive.SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=select-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAQF,eAAO,MAAM,gBAAgB,0BAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,+DAMpB,gBAAgB,WAAW,4CA2C7B,CAAC"}
|