@atom-learning/components 2.39.0 → 2.41.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 +2 -4
- package/dist/components/checkbox-field/CheckboxField.js +1 -1
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.d.ts +7 -0
- package/dist/components/table/useStickyColumnsCss.js +2 -0
- package/dist/components/table/useStickyColumnsCss.js.map +1 -0
- 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,11 +1,9 @@
|
|
|
1
|
-
# [2.
|
|
1
|
+
# [2.41.0](https://github.com/Atom-Learning/components/compare/v2.40.0...v2.41.0) (2023-03-02)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* custom commit_messages for NetlifyCMS actions ([e4bc6bd](https://github.com/Atom-Learning/components/commit/e4bc6bde5e60bed0389cfa798842d56a77e7e752))
|
|
8
|
-
* use branch documentation-content for edits via NetlifyCMS ([17f8000](https://github.com/Atom-Learning/components/commit/17f80006924af814cc9c443489f3306b4a0b8ecd))
|
|
6
|
+
* keep onCheckedChange prop usable in CheckboxField ([73962f3](https://github.com/Atom-Learning/components/commit/73962f344045eb243b6b7b4d72933868c2c3881d))
|
|
9
7
|
|
|
10
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
11
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{useFormContext as
|
|
1
|
+
import*as t from"react";import{useFormContext as F,useController as b}from"react-hook-form";import{Checkbox as x}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=b({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(x,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
|
|
2
2
|
//# sourceMappingURL=CheckboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype CheckboxFieldProps = React.ComponentProps<typeof Checkbox> &\n FieldElementWrapperProps\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField: React.FC<CheckboxFieldProps> = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n ...remainingProps\n}) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={onChange}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox"],"mappings":"qVAaA,IAAKA,
|
|
1
|
+
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype CheckboxFieldProps = React.ComponentProps<typeof Checkbox> &\n FieldElementWrapperProps\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField: React.FC<CheckboxFieldProps> = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...remainingProps\n}) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"qVAaA,IAAKA,OACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,CAKE,CAAA,EAAA,MAAMC,EAA8C,CAAC,CAC1D,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,EACA,gBAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAW,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAO,EACA,MAAON,EACP,aAAcE,CAChB,CAAC,EAED,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOZ,EAAY,KAAaQ,EAASR,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVY,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaI,EACb,MAAOO,EACP,MAAOV,EACP,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAEtCe,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAkBa,GAAe,CAC/BP,EAASO,CAAU,EACnBd,GAAA,MAAAA,EAAkBc,EACpB,EACA,MAAON,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CAAA,CACjC,CACF,CAEJ,EAEAZ,EAAc,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"react";import{Box as u}from"../box/Box.js";import{useStickyColumnsCss as h}from"./useStickyColumnsCss.js";const m=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[o,p]=e.useState(!1),r=e.useRef(null),{columnsCss:a}=h(t,r);return e.createElement(u,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==o&&p(n)},role:"scrollbar",ref:r,css:{overflow:"auto",maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},s)};export{m 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'\
|
|
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 overflow: 'auto',\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,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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CSS } from '../../stitches';
|
|
3
|
+
interface IUseStickyColumnsCss {
|
|
4
|
+
columnsCss: CSS;
|
|
5
|
+
}
|
|
6
|
+
export declare const useStickyColumnsCss: (numberOfStickyColumns: number, wrapperRef: React.RefObject<HTMLTableSectionElement>) => IUseStickyColumnsCss;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as u from"react";const p=(t,n)=>{const[c,l]=u.useState({});return u.useLayoutEffect(()=>{var o;if(!t)return;let r=0;const e=(o=n.current)==null?void 0:o.querySelectorAll("th"),f=Array.from(e||[]).slice(0,t).reduce((d,m,s)=>{const i=s+1,h={...d,[`& td:nth-of-type(${i}), th:nth-of-type(${i})`]:{position:"sticky",left:`${r}px`,minWidth:`${m.offsetWidth}px`,zIndex:"2"}};return r+=(e==null?void 0:e.item(s).clientWidth)||0,h},{});l(f)},[t,n]),{columnsCss:c}};export{p as useStickyColumnsCss};
|
|
2
|
+
//# sourceMappingURL=useStickyColumnsCss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = (\n numberOfStickyColumns: number,\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n): IUseStickyColumnsCss => {\n const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n const elementNumber = index + 1\n const cssObject = {\n ...acc,\n [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n {\n position: 'sticky',\n left: `${accWidth}px`,\n minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n zIndex: '2'\n }\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return cssObject\n }, {} as CSS)\n\n setColumnsCss(newColumnsCss)\n }, [numberOfStickyColumns, wrapperRef])\n\n return {\n columnsCss\n }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","_a","accWidth","tableHeaderCells","newColumnsCss","acc","column","index","elementNumber","cssObject"],"mappings":"wBAQO,MAAMA,EAAsB,CACjCC,EACAC,IACyB,CACzB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,EAAE,EAE1D,OAAAA,EAAM,gBAAgB,IAAM,CAd9B,IAAAC,EAeI,GAAI,CAACL,EAAuB,OAE5B,IAAIM,EAAW,EAGf,MAAMC,GAAmBF,EAAAJ,EAAW,UAAX,KAAA,OAAAI,EAAoB,iBAAiB,MAMxDG,EALsB,MAAM,KAAKD,GAAoB,EAAE,EAGnB,MAAM,EAAGP,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGN,MACT,SAAU,GAAGI,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAJ,IAAYC,GAAA,KAAA,OAAAA,EAAkB,KAAKI,GAAO,cAAe,EAElDE,CACT,EAAG,EAAS,EAEZV,EAAcK,CAAa,CAC7B,EAAG,CAACR,EAAuBC,CAAU,CAAC,EAE/B,CACL,WAAAC,CACF,CACF"}
|