@consumidor-positivo/aurora 0.0.199 → 0.0.201
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/Alert/index.es.js +1 -1
- package/dist/components/Calendar/index.es.js +2 -2
- package/dist/components/CalendarHeader/index.es.js +2 -2
- package/dist/components/Checkbox/index.es.js +1 -1
- package/dist/components/Chip/index.d.ts +10 -0
- package/dist/components/Chip/index.es.js +31 -0
- package/dist/components/Chip/index.es.js.map +1 -0
- package/dist/components/Chip/styles.css +1 -0
- package/dist/components/Datepicker/index.es.js +3 -3
- package/dist/components/PortalHolder/index.es.js +1 -1
- package/dist/components/Segment/index.es.js +1 -1
- package/dist/components/SelectField/index.es.js +1 -1
- package/dist/components/Tabs/index.d.ts +3 -2
- package/dist/components/Tabs/index.es.js +28 -23
- package/dist/components/Tabs/index.es.js.map +1 -1
- package/dist/components/Tabs/styles.css +1 -1
- package/dist/components/Tag/index.es.js +1 -1
- package/dist/{index-C8AM9yBn.js → index-BzVR1Tq6.js} +2 -2
- package/dist/{index-C8AM9yBn.js.map → index-BzVR1Tq6.js.map} +1 -1
- package/dist/{index-C1N6rwrZ.js → index-RHj6RFlT.js} +3 -3
- package/dist/{index-C1N6rwrZ.js.map → index-RHj6RFlT.js.map} +1 -1
- package/dist/{index-CL0DrUGQ.js → index-uWXGnhjd.js} +2 -2
- package/dist/{index-CL0DrUGQ.js.map → index-uWXGnhjd.js.map} +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.es.js +3 -1
- package/dist/main.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "./index-CweZ_OcN.js";
|
|
3
|
-
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-
|
|
3
|
+
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-BzVR1Tq6.js";
|
|
4
4
|
import { Button } from "./components/Button/index.es.js";
|
|
5
5
|
import { PortalHolder } from "./components/PortalHolder/index.es.js";
|
|
6
6
|
import { useRef, useState, useEffect } from "react";
|
|
7
|
-
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
8
7
|
import { B as BREAKPOINT_MD } from "./tokens-D_iASp38.js";
|
|
8
|
+
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
9
|
import './components/index/styles2.css';const DDMMYYYY = {
|
|
10
10
|
placeholder: "DD/MM/YYYY",
|
|
11
11
|
/** Apply DD/MM/YYYY to a field text while typing */
|
|
@@ -238,4 +238,4 @@ export {
|
|
|
238
238
|
DatepickerCalendar as a,
|
|
239
239
|
getDefaultDate as g
|
|
240
240
|
};
|
|
241
|
-
//# sourceMappingURL=index-
|
|
241
|
+
//# sourceMappingURL=index-RHj6RFlT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-C1N6rwrZ.js","sources":["../lib/components/form/Datepicker/helpers.ts","../lib/components/form/Datepicker/Calendar/hook.ts","../lib/components/form/Datepicker/Calendar/index.tsx"],"sourcesContent":["import { AUCalendarDateShape, DefaultValue, FormatAdapter } from './types'\n\n/**\n * This adapter Handle the input format and convert to a more\n * universal structure, that can be used accross all subcomponents in the datepicker.\n * if we need to support another format like dd-mm-yyyy, we only need to create another adapter\n * following this model\n */\nexport const DDMMYYYY: FormatAdapter = {\n placeholder: 'DD/MM/YYYY',\n /** Apply DD/MM/YYYY to a field text while typing */\n maskDate(dateStr) {\n let fmtInputDate = dateStr\n fmtInputDate = fmtInputDate.replace(/\\D/g, '') // Remove non-numeric characters\n\n if (fmtInputDate.length > 2) {\n fmtInputDate = `${fmtInputDate.slice(0, 2)}/${fmtInputDate.slice(2)}`\n }\n if (fmtInputDate.length > 5) {\n fmtInputDate = `${fmtInputDate.slice(0, 5)}/${fmtInputDate.slice(5)}`\n }\n return fmtInputDate\n },\n /** Check if a string is on DD/MM/YYYY Format */\n validateFormat(dateStr) {\n const pattern = /^\\d{2}\\/\\d{2}\\/\\d{4}$/\n return pattern.test(dateStr)\n },\n /** Covert a DD/MM/YYYY to the datepicker date structure */\n toCalendarDate(dateStr): AUCalendarDateShape {\n const [day, month, year] = dateStr.split('/').map(Number)\n return AUCalendarDate(day, month, year)\n },\n /** Covert a Date in the datepicker structure into a DD/MM/YYYY string */\n toString(dateObj: AUCalendarDateShape): string {\n const fmtNumber = (digit: number) =>\n String(digit).length === 1 ? `0${digit}` : String(digit)\n const { day, month, year } = dateObj\n\n return `${fmtNumber(day)}/${fmtNumber(month)}/${year}`\n },\n /** Check if a DD/MM/YYYY is a valid date */\n validate(dateStr, minValue, maxValue): boolean {\n const [day, month, year] = dateStr.split('/').map(Number)\n const date = new Date(year, month - 1, day)\n const isOlderThanMinDate =\n !!minValue &&\n date < new Date(minValue.year, minValue.month - 1, minValue.day)\n\n const exceedsMaxDate =\n !!maxValue &&\n date > new Date(maxValue.year, maxValue.month - 1, maxValue.day)\n\n return (\n date.getDate() === day &&\n date.getMonth() + 1 === month &&\n date.getFullYear() === year &&\n !isOlderThanMinDate &&\n !exceedsMaxDate\n )\n },\n}\n\nexport function AUCalendarDate(\n day: number,\n month: number,\n year: number,\n): AUCalendarDateShape {\n return {\n day,\n month,\n year,\n }\n}\n\nexport function getDefaultDate(\n defaultDateProp: DefaultValue,\n): AUCalendarDateShape | null {\n if (defaultDateProp == 'empty') return null\n if (defaultDateProp === 'now') {\n const now = new Date()\n return AUCalendarDate(now.getDate(), now.getMonth() + 1, now.getFullYear())\n }\n\n return defaultDateProp\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { CalendarDate } from '@internationalized/date'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { above } from '@core/utils/screen'\nimport { AUCalendarDate } from '../helpers'\nimport { AUCalendarDateShape } from '../types'\n\ntype UseCalendarProps = {\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n isVisible: boolean\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n}\n\nexport function useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n}: UseCalendarProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const [enteredAnimation, setEnteredAnimation] = useState(false)\n const [calendarInternalState, setCalendarInternalState] =\n useState<CalendarDate>()\n\n const [delayedIsVisible, setDelayedIsVisible] = useState(false)\n\n const usedMinValue = new CalendarDate(\n minValue.year,\n minValue.month,\n minValue.day,\n )\n const usedMaxValue = new CalendarDate(\n maxValue.year,\n maxValue.month,\n maxValue.day,\n )\n\n useEffect(() => {\n if (!value) return\n const { day, month, year } = value\n setCalendarInternalState(new CalendarDate(year, month, day))\n }, [value])\n\n useEffect(() => {\n if (isVisible) {\n setDelayedIsVisible(true)\n return delayComponentMount()\n } else {\n return delayComponentUnmount()\n }\n }, [isVisible])\n\n function delayComponentMount(delayTime = 100) {\n const t = setTimeout(() => {\n setEnteredAnimation(true)\n }, delayTime)\n\n return () => {\n clearTimeout(t)\n }\n }\n\n function delayComponentUnmount(delayTime = 200) {\n setEnteredAnimation(false)\n const timoutToUnmount = setTimeout(() => {\n setDelayedIsVisible(false)\n }, delayTime)\n\n return () => {\n clearTimeout(timoutToUnmount)\n }\n }\n\n function fmtWeekday(day: string) {\n const capitalized = `${day.charAt(0).toUpperCase()}${day.slice(1)}`\n return capitalized.replace('.', '')\n }\n\n function triggerChange(date: CalendarDate) {\n const { day, month, year } = date\n onChange(AUCalendarDate(day, month, year))\n onClose()\n }\n\n function calendarChange(date: CalendarDate) {\n setCalendarInternalState(date)\n if (!above(BREAKPOINT_MD)) return\n triggerChange(date)\n }\n\n function actionChange() {\n if (calendarInternalState) {\n triggerChange(calendarInternalState)\n }\n }\n\n return {\n actionChange,\n calendarChange,\n fmtWeekday,\n usedMaxValue,\n usedMinValue,\n rootEl,\n calendarInternalState,\n enteredAnimation,\n delayedIsVisible,\n }\n}\n","import classNames from 'classnames'\nimport {\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n} from 'react-aria-components'\nimport { Button } from '@components/Button'\nimport { CalendarHeader } from '../CalendarHeader'\nimport { PortalHolder } from '../PortalHolder'\n\n\nimport { AUCalendarDateShape } from '../types'\nimport { useCalendar } from './hook'\nimport './styles.scss'\n\ntype DatepickerCalendarProps = {\n withPortal?: boolean\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n isVisible: boolean\n}\n\nexport const DatepickerCalendar = ({\n onClose,\n withPortal,\n minValue,\n maxValue,\n value,\n onChange,\n isVisible,\n}: DatepickerCalendarProps) => {\n const {\n rootEl,\n usedMaxValue,\n usedMinValue,\n calendarInternalState,\n calendarChange,\n fmtWeekday,\n actionChange,\n enteredAnimation,\n delayedIsVisible,\n } = useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n })\n\n const componentClass = classNames('au-datepicker__calendar', {\n 'au-datepicker__calendar--visible': enteredAnimation,\n })\n\n if (!delayedIsVisible) return\n\n return (\n <PortalHolder withPortal={withPortal}>\n <div className={componentClass} ref={rootEl}>\n <div className=\"au-datepicker__calendar-backdrop\" onClick={onClose} />\n <div className=\"au-datepicker__calendar-card\">\n <Calendar\n autoFocus\n className=\"au-datepicker__calendar-base\"\n minValue={usedMinValue}\n maxValue={usedMaxValue}\n value={calendarInternalState}\n onChange={calendarChange}>\n <CalendarHeader defaultFocusDate={calendarInternalState} />\n <CalendarGrid\n className=\"au-datepicker__calendar-grid\"\n weekdayStyle=\"short\">\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell className=\"au-datepicker__calendar-weekday\">\n {fmtWeekday(day)}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell\n className=\"au-datepicker__calendar-day\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n <div className=\"au-datepicker__calendar-actions-dock\">\n <Button\n type=\"outlined\"\n className=\"au-datepicker__calendar-cancel\"\n expand=\"x\"\n onClick={onClose}>\n Cancelar\n </Button>\n <Button\n disabled={!calendarInternalState}\n onClick={actionChange}\n expand=\"x\">\n Confirmar\n </Button>\n </div>\n </div>\n </div>\n </PortalHolder>\n )\n}\n"],"names":["CalendarDate","Calendar","CalendarGrid","CalendarGridHeader","CalendarHeaderCell","CalendarGridBody","CalendarCell"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index-RHj6RFlT.js","sources":["../lib/components/form/Datepicker/helpers.ts","../lib/components/form/Datepicker/Calendar/hook.ts","../lib/components/form/Datepicker/Calendar/index.tsx"],"sourcesContent":["import { AUCalendarDateShape, DefaultValue, FormatAdapter } from './types'\n\n/**\n * This adapter Handle the input format and convert to a more\n * universal structure, that can be used accross all subcomponents in the datepicker.\n * if we need to support another format like dd-mm-yyyy, we only need to create another adapter\n * following this model\n */\nexport const DDMMYYYY: FormatAdapter = {\n placeholder: 'DD/MM/YYYY',\n /** Apply DD/MM/YYYY to a field text while typing */\n maskDate(dateStr) {\n let fmtInputDate = dateStr\n fmtInputDate = fmtInputDate.replace(/\\D/g, '') // Remove non-numeric characters\n\n if (fmtInputDate.length > 2) {\n fmtInputDate = `${fmtInputDate.slice(0, 2)}/${fmtInputDate.slice(2)}`\n }\n if (fmtInputDate.length > 5) {\n fmtInputDate = `${fmtInputDate.slice(0, 5)}/${fmtInputDate.slice(5)}`\n }\n return fmtInputDate\n },\n /** Check if a string is on DD/MM/YYYY Format */\n validateFormat(dateStr) {\n const pattern = /^\\d{2}\\/\\d{2}\\/\\d{4}$/\n return pattern.test(dateStr)\n },\n /** Covert a DD/MM/YYYY to the datepicker date structure */\n toCalendarDate(dateStr): AUCalendarDateShape {\n const [day, month, year] = dateStr.split('/').map(Number)\n return AUCalendarDate(day, month, year)\n },\n /** Covert a Date in the datepicker structure into a DD/MM/YYYY string */\n toString(dateObj: AUCalendarDateShape): string {\n const fmtNumber = (digit: number) =>\n String(digit).length === 1 ? `0${digit}` : String(digit)\n const { day, month, year } = dateObj\n\n return `${fmtNumber(day)}/${fmtNumber(month)}/${year}`\n },\n /** Check if a DD/MM/YYYY is a valid date */\n validate(dateStr, minValue, maxValue): boolean {\n const [day, month, year] = dateStr.split('/').map(Number)\n const date = new Date(year, month - 1, day)\n const isOlderThanMinDate =\n !!minValue &&\n date < new Date(minValue.year, minValue.month - 1, minValue.day)\n\n const exceedsMaxDate =\n !!maxValue &&\n date > new Date(maxValue.year, maxValue.month - 1, maxValue.day)\n\n return (\n date.getDate() === day &&\n date.getMonth() + 1 === month &&\n date.getFullYear() === year &&\n !isOlderThanMinDate &&\n !exceedsMaxDate\n )\n },\n}\n\nexport function AUCalendarDate(\n day: number,\n month: number,\n year: number,\n): AUCalendarDateShape {\n return {\n day,\n month,\n year,\n }\n}\n\nexport function getDefaultDate(\n defaultDateProp: DefaultValue,\n): AUCalendarDateShape | null {\n if (defaultDateProp == 'empty') return null\n if (defaultDateProp === 'now') {\n const now = new Date()\n return AUCalendarDate(now.getDate(), now.getMonth() + 1, now.getFullYear())\n }\n\n return defaultDateProp\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { CalendarDate } from '@internationalized/date'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { above } from '@core/utils/screen'\nimport { AUCalendarDate } from '../helpers'\nimport { AUCalendarDateShape } from '../types'\n\ntype UseCalendarProps = {\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n isVisible: boolean\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n}\n\nexport function useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n}: UseCalendarProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const [enteredAnimation, setEnteredAnimation] = useState(false)\n const [calendarInternalState, setCalendarInternalState] =\n useState<CalendarDate>()\n\n const [delayedIsVisible, setDelayedIsVisible] = useState(false)\n\n const usedMinValue = new CalendarDate(\n minValue.year,\n minValue.month,\n minValue.day,\n )\n const usedMaxValue = new CalendarDate(\n maxValue.year,\n maxValue.month,\n maxValue.day,\n )\n\n useEffect(() => {\n if (!value) return\n const { day, month, year } = value\n setCalendarInternalState(new CalendarDate(year, month, day))\n }, [value])\n\n useEffect(() => {\n if (isVisible) {\n setDelayedIsVisible(true)\n return delayComponentMount()\n } else {\n return delayComponentUnmount()\n }\n }, [isVisible])\n\n function delayComponentMount(delayTime = 100) {\n const t = setTimeout(() => {\n setEnteredAnimation(true)\n }, delayTime)\n\n return () => {\n clearTimeout(t)\n }\n }\n\n function delayComponentUnmount(delayTime = 200) {\n setEnteredAnimation(false)\n const timoutToUnmount = setTimeout(() => {\n setDelayedIsVisible(false)\n }, delayTime)\n\n return () => {\n clearTimeout(timoutToUnmount)\n }\n }\n\n function fmtWeekday(day: string) {\n const capitalized = `${day.charAt(0).toUpperCase()}${day.slice(1)}`\n return capitalized.replace('.', '')\n }\n\n function triggerChange(date: CalendarDate) {\n const { day, month, year } = date\n onChange(AUCalendarDate(day, month, year))\n onClose()\n }\n\n function calendarChange(date: CalendarDate) {\n setCalendarInternalState(date)\n if (!above(BREAKPOINT_MD)) return\n triggerChange(date)\n }\n\n function actionChange() {\n if (calendarInternalState) {\n triggerChange(calendarInternalState)\n }\n }\n\n return {\n actionChange,\n calendarChange,\n fmtWeekday,\n usedMaxValue,\n usedMinValue,\n rootEl,\n calendarInternalState,\n enteredAnimation,\n delayedIsVisible,\n }\n}\n","import classNames from 'classnames'\nimport {\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n} from 'react-aria-components'\nimport { Button } from '@components/Button'\nimport { CalendarHeader } from '../CalendarHeader'\nimport { PortalHolder } from '../PortalHolder'\n\n\nimport { AUCalendarDateShape } from '../types'\nimport { useCalendar } from './hook'\nimport './styles.scss'\n\ntype DatepickerCalendarProps = {\n withPortal?: boolean\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n isVisible: boolean\n}\n\nexport const DatepickerCalendar = ({\n onClose,\n withPortal,\n minValue,\n maxValue,\n value,\n onChange,\n isVisible,\n}: DatepickerCalendarProps) => {\n const {\n rootEl,\n usedMaxValue,\n usedMinValue,\n calendarInternalState,\n calendarChange,\n fmtWeekday,\n actionChange,\n enteredAnimation,\n delayedIsVisible,\n } = useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n })\n\n const componentClass = classNames('au-datepicker__calendar', {\n 'au-datepicker__calendar--visible': enteredAnimation,\n })\n\n if (!delayedIsVisible) return\n\n return (\n <PortalHolder withPortal={withPortal}>\n <div className={componentClass} ref={rootEl}>\n <div className=\"au-datepicker__calendar-backdrop\" onClick={onClose} />\n <div className=\"au-datepicker__calendar-card\">\n <Calendar\n autoFocus\n className=\"au-datepicker__calendar-base\"\n minValue={usedMinValue}\n maxValue={usedMaxValue}\n value={calendarInternalState}\n onChange={calendarChange}>\n <CalendarHeader defaultFocusDate={calendarInternalState} />\n <CalendarGrid\n className=\"au-datepicker__calendar-grid\"\n weekdayStyle=\"short\">\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell className=\"au-datepicker__calendar-weekday\">\n {fmtWeekday(day)}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell\n className=\"au-datepicker__calendar-day\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n <div className=\"au-datepicker__calendar-actions-dock\">\n <Button\n type=\"outlined\"\n className=\"au-datepicker__calendar-cancel\"\n expand=\"x\"\n onClick={onClose}>\n Cancelar\n </Button>\n <Button\n disabled={!calendarInternalState}\n onClick={actionChange}\n expand=\"x\">\n Confirmar\n </Button>\n </div>\n </div>\n </div>\n </PortalHolder>\n )\n}\n"],"names":["CalendarDate","Calendar","CalendarGrid","CalendarGridHeader","CalendarHeaderCell","CalendarGridBody","CalendarCell"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ import { IconChevronDown } from "./components/icons/IconChevronDown/index.es.js"
|
|
|
5
5
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import { IconX } from "./components/icons/IconX/index.es.js";
|
|
7
7
|
import { useState, useRef, useEffect } from "react";
|
|
8
|
-
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
8
|
import { B as BREAKPOINT_MD } from "./tokens-D_iASp38.js";
|
|
9
|
+
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
10
10
|
import './components/index/styles3.css';function useOutsideClick({
|
|
11
11
|
rootEl,
|
|
12
12
|
breakpoint,
|
|
@@ -138,4 +138,4 @@ export {
|
|
|
138
138
|
Segment as S,
|
|
139
139
|
useOutsideClick as u
|
|
140
140
|
};
|
|
141
|
-
//# sourceMappingURL=index-
|
|
141
|
+
//# sourceMappingURL=index-uWXGnhjd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-uWXGnhjd.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
package/dist/main.d.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
export { Button } from './components/Button';
|
|
3
3
|
export { PureSwitch } from './components/Switch/Pure';
|
|
4
4
|
export { CardSwitch } from './components/Switch/Card';
|
|
5
|
+
export { Chip } from './components/Chip';
|
|
5
6
|
export { Conditional } from './components/misc/Conditional';
|
|
6
7
|
export { Drawer } from './components/Drawer';
|
|
7
8
|
export { Header } from './components/Header';
|
package/dist/main.es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Button } from "./components/Button/index.es.js";
|
|
2
2
|
import { PureSwitch } from "./components/Pure/index.es.js";
|
|
3
3
|
import { CardSwitch } from "./components/Card/index.es.js";
|
|
4
|
+
import { Chip } from "./components/Chip/index.es.js";
|
|
4
5
|
import { Conditional } from "./components/Conditional/index.es.js";
|
|
5
6
|
import { Drawer } from "./components/Drawer/index.es.js";
|
|
6
7
|
import { Header } from "./components/Header/index.es.js";
|
|
@@ -354,8 +355,8 @@ import { IconZoomIn } from "./components/icons/IconZoomIn/index.es.js";
|
|
|
354
355
|
import { IconZoomOut } from "./components/icons/IconZoomOut/index.es.js";
|
|
355
356
|
import { IconSocialGoogle } from "./components/icons/IconSocialGoogle/index.es.js";
|
|
356
357
|
import { C, D, E, W, I, S, T } from "./react-if.esm-CoCMV6iA.js";
|
|
357
|
-
import { Carousel } from "./components/Carousel/index.es.js";
|
|
358
358
|
import { k as k2, j as j2, l as l2, i as i2, a as a2, B, ai, aj, ah, x, w, v, u, t, s, r, K, J, I as I2, H, g as g2, G, F, E as E2, D as D2, A, z, y, W as W2, V, U, T as T2, S as S2, b as b2, R, a6, a5, a4, a3, a2 as a22, f as f2, a1, h as h2, q as q2, p as p2, o as o2, c as c2, n as n2, m as m2, d as d2, Q, P, O, N, M, C as C2, L as L2, a0, $, _, Z, Y, e as e2, X, ak, av, aA, aB, aC, aD, aE, aF, aG, aH, aI, aJ, au, aw, ay, az, ax, al, am, an, ao, ap, aq, ar, as, at, a7, a8, a9, aa, ab, ac, ad, ae, af, ag } from "./tokens-D_iASp38.js";
|
|
359
|
+
import { Carousel } from "./components/Carousel/index.es.js";
|
|
359
360
|
import './components/main/styles.css';const CardContainer = ({
|
|
360
361
|
direction,
|
|
361
362
|
alignItems,
|
|
@@ -531,6 +532,7 @@ export {
|
|
|
531
532
|
Carousel,
|
|
532
533
|
C as Case,
|
|
533
534
|
Checkbox,
|
|
535
|
+
Chip,
|
|
534
536
|
Conditional,
|
|
535
537
|
Container,
|
|
536
538
|
DatepickerField,
|
package/dist/main.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.es.js","sources":["../lib/components/Card/Container/index.tsx","../lib/components/Card/Image/index.tsx","../lib/components/Card/Root/index.tsx","../lib/components/Card/Tag/index.tsx","../lib/components/Card/index.tsx","../lib/components/Drawer/hooks.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardContainerProps = {\n direction?: 'column' | 'row'\n alignItems?: 'center' | 'start'\n justifyContent?: 'center' | 'space-between'\n gap?: number\n width?: number\n children: ReactNode\n}\nexport const CardContainer = ({\n direction,\n alignItems,\n justifyContent,\n gap,\n width,\n children,\n}: CardContainerProps) => {\n const containerClasses = classNames('au-card__container', {\n [`au-card__container--direction-${direction}`]: direction,\n [`au-card__container--align-items-${alignItems}`]: alignItems,\n [`au-card__container--justify-content-${justifyContent}`]: justifyContent,\n })\n\n const containerStyle: CSSProperties = {\n gap: `${gap}px`,\n width: `${width}px`\n }\n return (\n <div style={containerStyle} className={containerClasses}>\n {children}\n </div>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport type CardImageProps = {\n src: string\n alt?: string\n width?: number\n height?: number\n}\nexport const CardImage = ({ src, alt, width, height }: CardImageProps) => {\n const imageSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n }\n\n return (\n <div>\n <img style={imageSize} src={src} alt={alt} />\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { CSSProperties, ReactNode, Ref } from 'react'\n\nexport type CardRootProps = {\n border?: boolean\n color?: 'primary' | 'secondary'\n width?: number\n height?: number\n maxWidth?: number\n maxHeight?: number\n paddingLess?: boolean;\n hoverShadow?: boolean\n className?: string;\n children: ReactNode\n ref?: Ref<HTMLDivElement>\n}\nexport const CardRoot = ({\n border = true,\n color = 'primary',\n width,\n height,\n maxWidth,\n maxHeight,\n hoverShadow,\n paddingLess,\n children,\n className,\n ref\n}: CardRootProps) => {\n const rootClasses = classNames('au-card__root', {\n 'au-card__root--border-none': !border,\n 'au-card__root--color-secondary': color === 'secondary',\n 'au-card__root--with-hover-shadow': !!hoverShadow,\n 'au-card__root--paddingless': !!paddingLess,\n [String(className)]: !!className\n })\n const rootSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n maxWidth: `${maxWidth}px`,\n maxHeight: `${maxHeight}px`\n }\n\n return (\n <div\n ref={ref}\n style={rootSize}\n className={rootClasses}>\n {children}\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n color?: 'primary' | 'secondary'\n icon?: ReactNode\n children: ReactNode\n}\nexport const CardTag = ({\n color = 'primary',\n icon,\n children,\n}: CardTagProps) => {\n const tagClasses = classNames('au-card__tag', {\n 'au-card__tag--primary': color === 'primary',\n 'au-card__tag--secondary': color === 'secondary',\n })\n return (\n <div className={tagClasses}>\n <span>{icon}</span>\n <span>{children}</span>\n </div>\n )\n}\n","import { CardContainer, CardContainerProps } from './Container'\nimport { CardEmphasis, CardEmphasisProps } from './Emphasis'\nimport { CardImage, CardImageProps } from './Image'\nimport { CardRoot, CardRootProps } from './Root'\nimport { CardTag, CardTagProps } from './Tag'\nimport './styles.scss'\n\ntype Components = {\n Root: React.FC<CardRootProps>\n Container: React.FC<CardContainerProps>\n Emphasis: React.FC<CardEmphasisProps>\n Image: React.FC<CardImageProps>\n Tag: React.FC<CardTagProps>\n}\n\nconst components: Components = {\n Root: CardRoot,\n Container: CardContainer,\n Emphasis: CardEmphasis,\n Image: CardImage,\n Tag: CardTag,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Card.${key}`\n})\n\nexport { components as Card }\n","import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.es.js","sources":["../lib/components/Card/Container/index.tsx","../lib/components/Card/Image/index.tsx","../lib/components/Card/Root/index.tsx","../lib/components/Card/Tag/index.tsx","../lib/components/Card/index.tsx","../lib/components/Drawer/hooks.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardContainerProps = {\n direction?: 'column' | 'row'\n alignItems?: 'center' | 'start'\n justifyContent?: 'center' | 'space-between'\n gap?: number\n width?: number\n children: ReactNode\n}\nexport const CardContainer = ({\n direction,\n alignItems,\n justifyContent,\n gap,\n width,\n children,\n}: CardContainerProps) => {\n const containerClasses = classNames('au-card__container', {\n [`au-card__container--direction-${direction}`]: direction,\n [`au-card__container--align-items-${alignItems}`]: alignItems,\n [`au-card__container--justify-content-${justifyContent}`]: justifyContent,\n })\n\n const containerStyle: CSSProperties = {\n gap: `${gap}px`,\n width: `${width}px`\n }\n return (\n <div style={containerStyle} className={containerClasses}>\n {children}\n </div>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport type CardImageProps = {\n src: string\n alt?: string\n width?: number\n height?: number\n}\nexport const CardImage = ({ src, alt, width, height }: CardImageProps) => {\n const imageSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n }\n\n return (\n <div>\n <img style={imageSize} src={src} alt={alt} />\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { CSSProperties, ReactNode, Ref } from 'react'\n\nexport type CardRootProps = {\n border?: boolean\n color?: 'primary' | 'secondary'\n width?: number\n height?: number\n maxWidth?: number\n maxHeight?: number\n paddingLess?: boolean;\n hoverShadow?: boolean\n className?: string;\n children: ReactNode\n ref?: Ref<HTMLDivElement>\n}\nexport const CardRoot = ({\n border = true,\n color = 'primary',\n width,\n height,\n maxWidth,\n maxHeight,\n hoverShadow,\n paddingLess,\n children,\n className,\n ref\n}: CardRootProps) => {\n const rootClasses = classNames('au-card__root', {\n 'au-card__root--border-none': !border,\n 'au-card__root--color-secondary': color === 'secondary',\n 'au-card__root--with-hover-shadow': !!hoverShadow,\n 'au-card__root--paddingless': !!paddingLess,\n [String(className)]: !!className\n })\n const rootSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n maxWidth: `${maxWidth}px`,\n maxHeight: `${maxHeight}px`\n }\n\n return (\n <div\n ref={ref}\n style={rootSize}\n className={rootClasses}>\n {children}\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n color?: 'primary' | 'secondary'\n icon?: ReactNode\n children: ReactNode\n}\nexport const CardTag = ({\n color = 'primary',\n icon,\n children,\n}: CardTagProps) => {\n const tagClasses = classNames('au-card__tag', {\n 'au-card__tag--primary': color === 'primary',\n 'au-card__tag--secondary': color === 'secondary',\n })\n return (\n <div className={tagClasses}>\n <span>{icon}</span>\n <span>{children}</span>\n </div>\n )\n}\n","import { CardContainer, CardContainerProps } from './Container'\nimport { CardEmphasis, CardEmphasisProps } from './Emphasis'\nimport { CardImage, CardImageProps } from './Image'\nimport { CardRoot, CardRootProps } from './Root'\nimport { CardTag, CardTagProps } from './Tag'\nimport './styles.scss'\n\ntype Components = {\n Root: React.FC<CardRootProps>\n Container: React.FC<CardContainerProps>\n Emphasis: React.FC<CardEmphasisProps>\n Image: React.FC<CardImageProps>\n Tag: React.FC<CardTagProps>\n}\n\nconst components: Components = {\n Root: CardRoot,\n Container: CardContainer,\n Emphasis: CardEmphasis,\n Image: CardImage,\n Tag: CardTag,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Card.${key}`\n})\n\nexport { components as Card }\n","import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":"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"}
|