@mage-ui/components 0.0.73 → 0.0.75
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/components/controls/date-picker/DatePicker.d.ts +2 -0
- package/dist/components/controls/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/controls/date-picker/DatePicker.js.map +1 -1
- package/dist/components/controls/dropdown/Select.d.ts +1 -0
- package/dist/components/controls/dropdown/Select.d.ts.map +1 -1
- package/dist/components/controls/dropdown/Select.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAkCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;aAKZ,CAAA,EAAA,MAAA;MAEA,CAAA,EAFN,KAAA,CAAM,SAEA;OACL,CAAA,EAAA,MAAA;YAEE,CAAA,EAHG,oBAGH;OACA,CAAA,EAHF,eAGE;
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAkCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;aAKZ,CAAA,EAAA,MAAA;MAEA,CAAA,EAFN,KAAA,CAAM,SAEA;OACL,CAAA,EAAA,MAAA;YAEE,CAAA,EAHG,oBAGH;OACA,CAAA,EAHF,eAGE;QAGQ,CAAA,EAAA,MAAA;EAAI,OAAA,CAAA,EAJZ,IAIY;EAGX,OAAA,CAAA,EAND,IA2BX;EAAA,MAAA,CAAA,EAAA,MAAA;UArB0B,CAAA,EAAA,OAAA;UAAA,CAAA,EAAA,CAAA,IAAA,EAHP,IAGO,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAOxB,eAPwB,EAAA,GAON,SAPM;KAuBtB,oBAAA,GAAuB,mBAvBD,GAwBzB,4BAxByB,GAyBzB,2BAzByB,GA0BzB,gCA1ByB,GA2BzB,+BA3ByB,GA4BzB,qBA5ByB;KA8BtB,mBAAA,GAvBF;MAAkB,CAAA,EAAA,MAAA;EAcpB,OAAA,CAAA,EAAA,MAAA;EAEI,KAAA,CAAA,EAAA,MAAA;EAAoB,KAAA,CAAA,EAAA,MAAA;OAAG,CAAA,EAAA,MAAA;aAC1B,CAAA,EAAA,MAAA;aACA,CAAA,EAAA,MAAA;SACA,CAAA,EAAA,MAAA;;KA4BG,4BAAA,GA1BH;EAAqB,kBAAA,CAAA,EAAA,MAAA;EAElB,qBAAA,CAAmB,EAAA,MAAA;EAwBnB,cAAA,CAAA,EAAA,MAAA;EAsBA,mBAAA,CAAA,EAAA,MAAA;EAmBA,yBAAA,CAAA,EAAA,MAAA;AAAgC,CAAA;AAoBD,KAvC/B,2BAAA,GA0DqB;;;;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","names":["icon"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n calendarControl,\n calendarDay,\n calendarHeader,\n calendarHeaderControlIcon,\n calendarHeaderLevel,\n calendarMonth,\n calendarMonthRow,\n calendarMonthsList,\n calendarMonthsListCell,\n calendarMonthsListControl,\n calendarMonthsListRow,\n calendarWeekDay,\n calendarWeekDaysRow,\n calendarYearsList,\n calendarYearsListCell,\n calendarYearsListControl,\n calendarYearsListRow,\n datepickerDropdown,\n datepickerInput,\n input,\n inputDescription,\n inputError,\n inputLabel,\n inputPlaceholder,\n inputRoot,\n inputSection,\n inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\n\nexport type DatePickerProps = {\n name?: string;\n label?: string;\n placeholder?: string;\n description?: string;\n icon?: React.ReactNode;\n error?: string;\n classNames?: DatePickerClassNames;\n value?: DatePickerValue;\n locale?: string;\n maxDate?: Date;\n minDate?: Date;\n onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n classNames,\n label,\n placeholder,\n description,\n icon,\n ...props\n}: DatePickerProps): ReactNode => {\n return (\n <DatePickerInput\n label={label ?? 'Pick date'}\n placeholder={placeholder ?? 'Pick date'}\n description={description ?? 'Select a date'}\n classNames={datePickerClassNames(classNames)}\n popoverProps={{\n classNames: popoverClassNames(classNames),\n }}\n rightSection={icon}\n {...props}\n />\n );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n CalenderHeaderClassNamesType &\n CalendarMonthClassNamesType &\n CalendarMonthsListClassNamesType &\n CalendarYearsListClassNamesType &\n PopoverClassNamesType;\n\ntype InputClassNamesType = {\n root?: string;\n wrapper?: string;\n input?: string;\n label?: string;\n error?: string;\n description?: string;\n placeholder?: string;\n section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n return {\n root: classNames?.root ?? inputRoot(),\n wrapper: classNames?.wrapper ?? inputWrapper(),\n input: classNames?.input ?? cx(input(), datepickerInput()),\n label: classNames?.label ?? inputLabel(),\n error: classNames?.error ?? inputError(),\n description: classNames?.description ?? inputDescription(),\n placeholder: classNames?.placeholder ?? inputPlaceholder(),\n section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n };\n};\n\ntype CalenderHeaderClassNamesType = {\n datepickerDropdown?: string;\n calendarHeaderControl?: string;\n calendarHeader?: string;\n calendarHeaderLevel?: string;\n calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n classNames?: CalenderHeaderClassNamesType,\n) => {\n return {\n calendarHeaderControl:\n classNames?.calendarHeaderControl ?? calendarControl(),\n calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n calendarHeaderLevel:\n classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n calendarHeaderControlIcon:\n classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n };\n};\n\ntype CalendarMonthClassNamesType = {\n calendarMonth?: string;\n calendarWeekDaysRow?: string;\n calendarWeekDay?: string;\n calendarMonthRow?: string;\n calendarMonthCell?: string;\n calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n return {\n month: classNames?.calendarMonth ?? calendarMonth(),\n weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n day: classNames?.calendarDay ?? calendarDay(),\n };\n};\n\ntype CalendarMonthsListClassNamesType = {\n calendarMonthsList?: string;\n calendarMonthsListRow?: string;\n calendarMonthsListCell?: string;\n calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n classNames?: CalendarMonthsListClassNamesType,\n) => {\n return {\n monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n monthsListCell:\n classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n monthsListControl:\n classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n };\n};\n\ntype CalendarYearsListClassNamesType = {\n calendarYearsList?: string;\n calendarYearsListRow?: string;\n calendarYearsListCell?: string;\n calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n classNames?: CalendarYearsListClassNamesType,\n) => {\n return {\n yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n yearsListControl:\n classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n };\n};\n\ntype PopoverClassNamesType = {\n datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n return {\n dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n return {\n ...inputClassNames(classNames),\n ...calendarHeaderClassNames(classNames),\n ...calendarMonthClassNames(classNames),\n ...calendarMonthsListClassNames(classNames),\n ...calendarYearsListClassNames(classNames),\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.js","names":["icon"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n calendarControl,\n calendarDay,\n calendarHeader,\n calendarHeaderControlIcon,\n calendarHeaderLevel,\n calendarMonth,\n calendarMonthRow,\n calendarMonthsList,\n calendarMonthsListCell,\n calendarMonthsListControl,\n calendarMonthsListRow,\n calendarWeekDay,\n calendarWeekDaysRow,\n calendarYearsList,\n calendarYearsListCell,\n calendarYearsListControl,\n calendarYearsListRow,\n datepickerDropdown,\n datepickerInput,\n input,\n inputDescription,\n inputError,\n inputLabel,\n inputPlaceholder,\n inputRoot,\n inputSection,\n inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\n\nexport type DatePickerProps = {\n name?: string;\n label?: string;\n placeholder?: string;\n description?: string;\n icon?: React.ReactNode;\n error?: string;\n classNames?: DatePickerClassNames;\n value?: DatePickerValue;\n locale?: string;\n maxDate?: Date;\n minDate?: Date;\n format?: string;\n required?: boolean;\n onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n classNames,\n label,\n placeholder,\n description,\n icon,\n ...props\n}: DatePickerProps): ReactNode => {\n return (\n <DatePickerInput\n label={label ?? 'Pick date'}\n placeholder={placeholder ?? 'Pick date'}\n description={description ?? 'Select a date'}\n classNames={datePickerClassNames(classNames)}\n popoverProps={{\n classNames: popoverClassNames(classNames),\n }}\n rightSection={icon}\n {...props}\n />\n );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n CalenderHeaderClassNamesType &\n CalendarMonthClassNamesType &\n CalendarMonthsListClassNamesType &\n CalendarYearsListClassNamesType &\n PopoverClassNamesType;\n\ntype InputClassNamesType = {\n root?: string;\n wrapper?: string;\n input?: string;\n label?: string;\n error?: string;\n description?: string;\n placeholder?: string;\n section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n return {\n root: classNames?.root ?? inputRoot(),\n wrapper: classNames?.wrapper ?? inputWrapper(),\n input: classNames?.input ?? cx(input(), datepickerInput()),\n label: classNames?.label ?? inputLabel(),\n error: classNames?.error ?? inputError(),\n description: classNames?.description ?? inputDescription(),\n placeholder: classNames?.placeholder ?? inputPlaceholder(),\n section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n };\n};\n\ntype CalenderHeaderClassNamesType = {\n datepickerDropdown?: string;\n calendarHeaderControl?: string;\n calendarHeader?: string;\n calendarHeaderLevel?: string;\n calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n classNames?: CalenderHeaderClassNamesType,\n) => {\n return {\n calendarHeaderControl:\n classNames?.calendarHeaderControl ?? calendarControl(),\n calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n calendarHeaderLevel:\n classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n calendarHeaderControlIcon:\n classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n };\n};\n\ntype CalendarMonthClassNamesType = {\n calendarMonth?: string;\n calendarWeekDaysRow?: string;\n calendarWeekDay?: string;\n calendarMonthRow?: string;\n calendarMonthCell?: string;\n calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n return {\n month: classNames?.calendarMonth ?? calendarMonth(),\n weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n day: classNames?.calendarDay ?? calendarDay(),\n };\n};\n\ntype CalendarMonthsListClassNamesType = {\n calendarMonthsList?: string;\n calendarMonthsListRow?: string;\n calendarMonthsListCell?: string;\n calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n classNames?: CalendarMonthsListClassNamesType,\n) => {\n return {\n monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n monthsListCell:\n classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n monthsListControl:\n classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n };\n};\n\ntype CalendarYearsListClassNamesType = {\n calendarYearsList?: string;\n calendarYearsListRow?: string;\n calendarYearsListCell?: string;\n calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n classNames?: CalendarYearsListClassNamesType,\n) => {\n return {\n yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n yearsListControl:\n classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n };\n};\n\ntype PopoverClassNamesType = {\n datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n return {\n dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n return {\n ...inputClassNames(classNames),\n ...calendarHeaderClassNames(classNames),\n ...calendarMonthClassNames(classNames),\n ...calendarMonthsListClassNames(classNames),\n ...calendarYearsListClassNames(classNames),\n };\n};\n"],"mappings":"6wBAmDA,MAAa,GAAc,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,GAAG,KAGD,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,CAC1C,CACD,aAAcA,EACd,GAAI,GACJ,CAsBA,EAAmB,IAChB,CACL,KAAM,GAAY,MAAQ,GAAW,CACrC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAiB,CAAC,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,YAAa,GAAY,aAAe,GAAkB,CAC1D,QAAS,GAAY,SAAW,EAAa,CAAE,cAAe,OAAQ,CAAC,CACxE,EAWG,EACJ,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,CACvE,EAYG,EAA2B,IACxB,CACL,MAAO,GAAY,eAAiB,GAAe,CACnD,YAAa,GAAY,qBAAuB,GAAqB,CACrE,QAAS,GAAY,iBAAmB,GAAiB,CACzD,SAAU,GAAY,kBAAoB,GAAkB,CAC5D,IAAK,GAAY,aAAe,GAAa,CAC9C,EAUG,EACJ,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,CACvE,EAUG,EACJ,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,CACrE,EAOG,EAAqB,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,CACjE,EAGG,EAAwB,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,CAC3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAYH,WA0DZ,CAAA,EAAA,OAAA;EAAA,aAAA,CAAA,EAAA,MAAA;YA1DsB,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAQpB,WARoB,EAAA,GAQT,mBAAA,CAAA,GAAA,CAAA,OARS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n clearSection,\n comboboxOption,\n input,\n inputLabel,\n inputRoot,\n inputSection,\n selectButton,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n DropdownBaseProps,\n 'children' | 'onClick' | 'setQuery' | 'target'\n> &\n InputTextProps & {\n setSelectedOption: (\n option: { id: string | number; value: string } | undefined,\n ) => void;\n options: { id: string | number; value: string }[];\n isClearable?: boolean;\n classNames?: {\n option?: string;\n };\n };\n\nexport const Select = ({\n defaultOpened = false,\n setSelectedOption,\n selectedOption,\n options,\n classNames,\n isClearable,\n ...props\n}: SelectProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const dropdownOptions = options.map((option) => (\n <DropdownBase.Option\n value={option.value}\n key={option.id}\n active={selectedOption?.id === option.id}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {option.value}\n </DropdownBase.Option>\n ));\n\n const onChange = (value: string | undefined) => {\n const selected = options.find((item) => item.value === value);\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={true}\n target={\n <InputText\n readOnly\n classNames={{\n root: classNames?.root ?? inputRoot(),\n label: classNames?.label ?? inputLabel(),\n input: classNames?.input ?? cx(input(), selectButton()),\n section:\n classNames?.section ??\n cx(\n inputSection(),\n isClearable && query ? clearSection() : selectSection(),\n ),\n }}\n value={query}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n width='target'\n isClearable={isClearable}\n {...props}\n >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n clearSection,\n comboboxOption,\n input,\n inputLabel,\n inputRoot,\n inputSection,\n selectButton,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n DropdownBaseProps,\n 'children' | 'onClick' | 'setQuery' | 'target'\n> &\n InputTextProps & {\n setSelectedOption: (\n option: { id: string | number; value: string } | undefined,\n ) => void;\n options: { id: string | number; value: string }[];\n isClearable?: boolean;\n clearableIcon?: string;\n classNames?: {\n option?: string;\n };\n };\n\nexport const Select = ({\n defaultOpened = false,\n setSelectedOption,\n selectedOption,\n options,\n classNames,\n isClearable,\n ...props\n}: SelectProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const dropdownOptions = options.map((option) => (\n <DropdownBase.Option\n value={option.value}\n key={option.id}\n active={selectedOption?.id === option.id}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {option.value}\n </DropdownBase.Option>\n ));\n\n const onChange = (value: string | undefined) => {\n const selected = options.find((item) => item.value === value);\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={true}\n target={\n <InputText\n readOnly\n classNames={{\n root: classNames?.root ?? inputRoot(),\n label: classNames?.label ?? inputLabel(),\n input: classNames?.input ?? cx(input(), selectButton()),\n section:\n classNames?.section ??\n cx(\n inputSection(),\n isClearable && query ? clearSection() : selectSection(),\n ),\n }}\n value={query}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n width='target'\n isClearable={isClearable}\n {...props}\n >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"oZAiCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,GAAG,KACc,CACjB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAK,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAY,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,SAAA,GACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QACE,GAAY,SACZ,EACE,GAAc,CACd,GAAe,EAAQ,GAAc,CAAG,GAAe,CACxD,CACJ,CACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CAC/C,MAAM,SACO,cACb,GAAI,WAEH,GACY"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.75",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"rimraf": "^6.0.1",
|
|
27
27
|
"tsdown": "^0.15.6",
|
|
28
28
|
"typescript": "^5.9.3",
|
|
29
|
-
"@mage-ui/preset": "0.0.
|
|
30
|
-
"@mage-ui/styled-system": "0.0.
|
|
29
|
+
"@mage-ui/preset": "0.0.75",
|
|
30
|
+
"@mage-ui/styled-system": "0.0.75"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@hookform/resolvers": "^5.2.2",
|