@atom-learning/components 2.67.2 → 2.68.0
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/CHANGELOG.md +3 -6
- package/dist/components/data-table/DataTableHead.d.ts +3 -0
- package/dist/components/data-table/DataTableHead.js +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableTable.d.ts +1 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/date-input/DateInput.js +1 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/components/table/TableHeader.d.ts +1 -0
- package/dist/components/table/TableHeader.js +1 -1
- package/dist/components/table/TableHeader.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# [2.68.0](https://github.com/Atom-Learning/components/compare/v2.67.2...v2.68.0) (2023-09-15)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* better test for DateInput onChange ([be1d3b2](https://github.com/Atom-Learning/components/commit/be1d3b2d19c06a0816de68d318a3f2918e544c5f))
|
|
8
|
-
* DateInput controlled input combined with form validation glitching ([f995f59](https://github.com/Atom-Learning/components/commit/f995f592606786bcd9a0cf98b535f315862808a0))
|
|
9
|
-
* get DateInput onChange to trigger only onChange as a regular handler would rather than onStateChange ([85fcd4c](https://github.com/Atom-Learning/components/commit/85fcd4c97e9b858bb5c14a1ee605d73a37509313))
|
|
6
|
+
* enable sticky header on table header SP-1779 ([63a2d6a](https://github.com/Atom-Learning/components/commit/63a2d6a2a91b057a3514f71342864c49c9a7d8ef))
|
|
10
7
|
|
|
11
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
12
9
|
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Table } from '../table';
|
|
3
|
+
import { CSS } from '../../stitches';
|
|
3
4
|
declare type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'children'> & {
|
|
4
5
|
sortable?: boolean;
|
|
6
|
+
hasStickyHeader?: boolean;
|
|
7
|
+
headerCss?: CSS;
|
|
5
8
|
};
|
|
6
9
|
export declare const DataTableHead: React.FC<DataTableHeadProps>;
|
|
7
10
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as
|
|
1
|
+
import*as e from"react";import{Table as a}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as h}from"./DataTableContext.js";import{DataTable as b}from"./DataTable.js";const E=({sortable:t=!0,theme:o="light",hasStickyHeader:s=!1,...c})=>{const{getHeaderGroups:d,setIsSortable:r,enableRowSelection:i,getCanSomeRowsExpand:n}=h();return e.useEffect(()=>{r(t)},[t,r]),e.createElement(a.Header,{theme:o,hasStickyHeader:s,...c},d().map(l=>e.createElement(a.Row,{key:l.id},n()&&e.createElement(a.HeaderCell,{css:{width:"$4"}}),i&&e.createElement(a.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),l.headers.map(m=>e.createElement(b.HeaderCell,{header:m,key:m.id})))))};export{E as DataTableHead};
|
|
2
2
|
//# sourceMappingURL=DataTableHead.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n sortable = true,\n theme = 'light',\n ...props\n}) => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n return (\n <Table.Header theme={theme} {...props}>\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row key={headerGroup.id}>\n {getCanSomeRowsExpand() && (\n <Table.HeaderCell css={{ width: '$4' }} />\n )}\n {enableRowSelection && (\n <Table.HeaderCell css={{ width: '$4' }}>\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header) => (\n <DataTable.HeaderCell header={header} key={header.id} />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\nimport { CSS } from '~/stitches'\n\ntype DataTableHeadProps = Omit<\n React.ComponentProps<typeof Table.Header>,\n 'children'\n> & {\n sortable?: boolean\n hasStickyHeader?: boolean\n headerCss?: CSS\n}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n sortable = true,\n theme = 'light',\n hasStickyHeader = false,\n ...props\n}) => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n return (\n <Table.Header theme={theme} hasStickyHeader={hasStickyHeader} {...props}>\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row key={headerGroup.id}>\n {getCanSomeRowsExpand() && (\n <Table.HeaderCell css={{ width: '$4' }} />\n )}\n {enableRowSelection && (\n <Table.HeaderCell css={{ width: '$4' }}>\n <DataTableSelectAllRowsCheckbox />\n </Table.HeaderCell>\n )}\n {headerGroup.headers.map((header) => (\n <DataTable.HeaderCell header={header} key={header.id} />\n ))}\n </Table.Row>\n )\n })}\n </Table.Header>\n )\n}\n"],"names":["DataTableHead","sortable","theme","hasStickyHeader","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAgBa,MAAAA,EAA8C,CAAC,CAC1D,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,gBAAAC,EAAkB,MACfC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,EAAa,EAEjB,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcL,CAAQ,CACxB,EAAG,CAACA,EAAUK,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOT,EAAO,gBAAiBC,EAAkB,GAAGC,CAC/DC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,EAAAA,GACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Table } from '../table';
|
|
3
3
|
import { DataTable } from './DataTable';
|
|
4
|
-
export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
|
|
4
|
+
export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable' | 'hasStickyHeader' | 'headerCss'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
|
|
5
5
|
export declare const DataTableTable: React.FC<DataTableTableProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as
|
|
1
|
+
import*as e from"react";import{Table as u}from"../table/Table.js";import{DataTable as a}from"./DataTable.js";import{AsyncDataState as y}from"./DataTable.types.js";import{useDataTable as d}from"./DataTableContext.js";import{DataTableLoading as f}from"./DataTableLoading.js";const D=({sortable:r,striped:o,theme:s,css:m,numberOfStickyColumns:n=0,hasStickyHeader:l=!1,headerCss:c,...i})=>{const{asyncDataState:p,getTotalRows:b}=d(),t=p===y.PENDING;return!t&&b()===0?null:e.createElement(e.Fragment,null,e.createElement(f,null),e.createElement(u,{...i,numberOfStickyColumns:n,css:{...m,...t&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(a.Head,{theme:s,sortable:r,hasStickyHeader:l,css:c}),e.createElement(a.Body,{striped:o})))};export{D as DataTableTable};
|
|
2
2
|
//# sourceMappingURL=DataTableTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children'\n> &\n Partial<\n Pick
|
|
1
|
+
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children'\n> &\n Partial<\n Pick<\n React.ComponentProps<typeof DataTable.Head>,\n 'theme' | 'sortable' | 'hasStickyHeader' | 'headerCss'\n >\n > &\n Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n sortable,\n striped,\n theme,\n css,\n numberOfStickyColumns = 0,\n hasStickyHeader = false,\n headerCss,\n ...props\n}) => {\n const { asyncDataState, getTotalRows } = useDataTable()\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n\n <Table\n {...props}\n numberOfStickyColumns={numberOfStickyColumns}\n css={{\n ...css,\n ...(isPending && {\n opacity: 0.5,\n pointerEvents: 'none',\n transition: 'opacity 250ms linear 150ms'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n hasStickyHeader={hasStickyHeader}\n css={headerCss}\n />\n <DataTable.Body striped={striped} />\n </Table>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","numberOfStickyColumns","hasStickyHeader","headerCss","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRAoBO,MAAMA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,sBAAAC,EAAwB,EACxB,gBAAAC,EAAkB,GAClB,UAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,MAAmB,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBH,EACvB,IAAK,CACH,GAAGD,EACH,GAAIQ,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAE,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOd,EACP,SAAUF,EACV,gBAAiBK,EACjB,IAAKC,CAAAA,CACP,EACAO,EAAA,cAACG,EAAU,KAAV,CAAe,QAASf,CAAAA,CAAS,CACpC,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{CalendarEvent as B}from"@atom-learning/icons";import*as e from"react";import{DIALOG_Z_INDEX as
|
|
1
|
+
import{CalendarEvent as B}from"@atom-learning/icons";import p from"dayjs";import M from"dayjs/plugin/customParseFormat";import*as e from"react";import{DIALOG_Z_INDEX as P}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as $}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as G}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as I}from"./constants.js";p.extend(M);const w=(n,o=I)=>n?p(n).format(o):"",y=e.forwardRef(({initialDate:n,dateFormat:o=I,firstDayOfWeek:C=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},N)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[m,S]=$();e.useImperativeHandle(N,()=>m);const F=w(s,o),L=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,w(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(G,{name:"date",disabled:f,size:d,...z,onChange:L,ref:S,defaultValue:F}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(j,{is:B}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:P},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:C,monthNames:T,weekdayNames:k,labels:b})))))});y.displayName="DateInput";export{y as DateInput};
|
|
2
2
|
//# sourceMappingURL=DateInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\
|
|
1
|
+
{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md' | 'lg'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (\n {\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...remainingProps\n },\n ref\n ) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <Box css={{ position: 'relative', height: 'max-content' }}>\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n {...remainingProps}\n onChange={handleInputChange}\n ref={setInputElRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n css={{\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n right: '0'\n }}\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </Box>\n )\n }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ export declare const TABLE_HEADER_THEMES: {
|
|
|
6
6
|
};
|
|
7
7
|
declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
|
|
8
8
|
theme?: string | number | `${number}` | undefined;
|
|
9
|
+
hasStickyHeader?: boolean | "true" | undefined;
|
|
9
10
|
}, {
|
|
10
11
|
sm: string;
|
|
11
12
|
md: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import m from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},p=l("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primaryDark"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}},hasStickyHeader:{true:{position:"sticky",top:0,zIndex:3}}}}),a=({theme:t="primaryDark",hasStickyHeader:i=!1,...o})=>m.createElement(p,{theme:t,hasStickyHeader:i,...o});a.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,a as TableHeader};
|
|
2
2
|
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n PRIMARY: 'primary',\n PRIMARY_DARK: 'primaryDark',\n LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n variants: {\n theme: {\n [TABLE_HEADER_THEMES.PRIMARY]: {\n [`${TableHeaderCell}`]: {\n bg: '$primary'\n }\n },\n [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n [`${TableHeaderCell}`]: {\n bg: '$primaryDark'\n }\n },\n [TABLE_HEADER_THEMES.LIGHT]: {\n [`${TableHeaderCell}`]: {\n bg: '$tonal50',\n color: '$tonal600'\n }\n }\n }\n }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n theme = 'primaryDark',\n ...rest\n}: TableHeaderProps) => <StyledTableHeader
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n PRIMARY: 'primary',\n PRIMARY_DARK: 'primaryDark',\n LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n variants: {\n theme: {\n [TABLE_HEADER_THEMES.PRIMARY]: {\n [`${TableHeaderCell}`]: {\n bg: '$primary'\n }\n },\n [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n [`${TableHeaderCell}`]: {\n bg: '$primaryDark'\n }\n },\n [TABLE_HEADER_THEMES.LIGHT]: {\n [`${TableHeaderCell}`]: {\n bg: '$tonal50',\n color: '$tonal600'\n }\n }\n },\n hasStickyHeader: {\n true: {\n position: 'sticky',\n top: 0,\n zIndex: 3\n }\n }\n }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n theme = 'primaryDark',\n hasStickyHeader = false,\n ...rest\n}: TableHeaderProps) => {\n return (\n <StyledTableHeader\n theme={theme}\n hasStickyHeader={hasStickyHeader}\n {...rest}\n />\n )\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","hasStickyHeader","rest","React"],"mappings":"uHAMO,MAAMA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,UACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,CACF,EACA,gBAAiB,CACf,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAA0C,CAAC,CACtD,MAAAC,EAAQ,cACR,gBAAAC,EAAkB,MACfC,CACL,IAEIC,EAAA,cAACP,EAAA,CACC,MAAOI,EACP,gBAAiBC,EAChB,GAAGC,CAAAA,CACN,EAIJH,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import{Box as
|
|
1
|
+
import e from"react";import{Box as h}from"../box/Box.js";import{useStickyColumnsCss as m}from"./useStickyColumnsCss.js";const u=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[r,p]=e.useState(!1),l=e.useRef(null),{columnsCss:a}=m(t,l);return e.createElement(h,{onScroll:n=>{const o=n.currentTarget.scrollWidth>n.currentTarget.clientWidth;o!==r&&p(o)},role:"scrollbar",ref:l,css:{maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...r&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},s)};export{u as TableStickyColumnsContainer};
|
|
2
2
|
//# sourceMappingURL=TableStickyColumnsContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\ninterface ITableStickyColumnsContainerProps {\n children: React.ReactNode\n numberOfStickyColumns?: number\n css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const scrollContainerRef = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss(\n numberOfStickyColumns,\n scrollContainerRef\n )\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll =\n event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <Box\n onScroll={handleScroll}\n role=\"scrollbar\"\n ref={scrollContainerRef}\n css={{\n
|
|
1
|
+
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\ninterface ITableStickyColumnsContainerProps {\n children: React.ReactNode\n numberOfStickyColumns?: number\n css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const scrollContainerRef = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss(\n numberOfStickyColumns,\n scrollContainerRef\n )\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll =\n event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <Box\n onScroll={handleScroll}\n role=\"scrollbar\"\n ref={scrollContainerRef}\n css={{\n maxWidth: '100%',\n ...columnsCss,\n [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n {\n ...(hasScroll && {\n boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n clipPath: 'inset(0px -10px 0px 0px)'\n })\n },\n '& td': {\n bg: 'inherit'\n },\n ...css\n }}\n {...restProps}\n >\n {children}\n </Box>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","css","restProps","hasScroll","setHasScroll","React","scrollContainerRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAYO,MAAMA,EAET,CAAC,CAAE,SAAAC,EAAU,sBAAAC,EAAwB,EAAG,IAAAC,KAAQC,CAAU,IAAM,CAClE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAqBD,EAAM,OAAO,IAAI,EACtC,CAAE,WAAAE,CAAW,EAAIC,EACrBR,EACAM,CACF,EAUA,OACED,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBP,oBAAwCA,MACzD,CACE,GAAIG,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHH,EAAAA,CACH,CAEJ"}
|