@amboss/design-system 1.11.0 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/build-tokens/_breakpoints.json.js +4 -1
- package/build/cjs/build-tokens/visualConfig.js +26 -0
- package/build/cjs/src/components/Callout/Callout.js +22 -6
- package/build/cjs/src/components/Form/RadioButton/RadioButton.js +5 -3
- package/build/cjs/src/components/Form/SegmentedControl/SegmentedControl.js +126 -0
- package/build/cjs/src/components/Form/SegmentedControl/SegmentedControlOption.js +216 -0
- package/build/cjs/src/index.js +2 -0
- package/build/cjs/src/shared/mediaQueries.js +2 -2
- package/build/esm/build-tokens/_breakpoints.json.js +2 -2
- package/build/esm/build-tokens/visualConfig.d.ts +13 -0
- package/build/esm/build-tokens/visualConfig.js +26 -0
- package/build/esm/build-tokens/visualConfig.js.map +1 -1
- package/build/esm/src/components/Badge/Badge.js.map +1 -1
- package/build/esm/src/components/Box/Box.js.map +1 -1
- package/build/esm/src/components/Button/Button.js.map +1 -1
- package/build/esm/src/components/Callout/Callout.js +22 -6
- package/build/esm/src/components/Callout/Callout.js.map +1 -1
- package/build/esm/src/components/Card/Card.js.map +1 -1
- package/build/esm/src/components/Card/CardBox.js.map +1 -1
- package/build/esm/src/components/Card/CardHeader/CardHeader.js.map +1 -1
- package/build/esm/src/components/Collapsible/Collapsible.js.map +1 -1
- package/build/esm/src/components/Column/Columns.js.map +1 -1
- package/build/esm/src/components/Container/Container.js.map +1 -1
- package/build/esm/src/components/DataTable/DataTable.js.map +1 -1
- package/build/esm/src/components/DataTable/TableBody.js.map +1 -1
- package/build/esm/src/components/DataTable/TableCell.js.map +1 -1
- package/build/esm/src/components/DataTable/TableHeader.js.map +1 -1
- package/build/esm/src/components/DataTable/useDataTableSort.js.map +1 -1
- package/build/esm/src/components/Divider/Divider.js.map +1 -1
- package/build/esm/src/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/build/esm/src/components/DropdownMenu/MenuItem.js.map +1 -1
- package/build/esm/src/components/Form/Checkbox/Checkbox.js.map +1 -1
- package/build/esm/src/components/Form/FormErrorMessages/FormErrorMessages.js.map +1 -1
- package/build/esm/src/components/Form/FormField/FormField.js.map +1 -1
- package/build/esm/src/components/Form/FormFieldGroup/FormFieldGroup.js.map +1 -1
- package/build/esm/src/components/Form/FormLabelText/FormLabelText.js.map +1 -1
- package/build/esm/src/components/Form/Input/Input.js.map +1 -1
- package/build/esm/src/components/Form/PasswordInput/PasswordInput.js.map +1 -1
- package/build/esm/src/components/Form/Radio/Radio.js.map +1 -1
- package/build/esm/src/components/Form/RadioButton/RadioButton.d.ts +1 -0
- package/build/esm/src/components/Form/RadioButton/RadioButton.js +5 -3
- package/build/esm/src/components/Form/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.d.ts +31 -0
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.js +119 -0
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.js.map +1 -0
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.d.ts +8 -0
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.js +210 -0
- package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.js.map +1 -0
- package/build/esm/src/components/Form/Select/Select.js.map +1 -1
- package/build/esm/src/components/Form/Textarea/Textarea.js.map +1 -1
- package/build/esm/src/components/Form/Toggle/Toggle.js.map +1 -1
- package/build/esm/src/components/Form/ToggleButton/ToggleButton.js.map +1 -1
- package/build/esm/src/components/Icon/Icon.js.map +1 -1
- package/build/esm/src/components/Inline/Inline.js.map +1 -1
- package/build/esm/src/components/Link/Link.js.map +1 -1
- package/build/esm/src/components/LoadingSpinner/LoadingSpinner.js.map +1 -1
- package/build/esm/src/components/Logo/Logo.js.map +1 -1
- package/build/esm/src/components/MediaItem/MediaItem.js.map +1 -1
- package/build/esm/src/components/MediaViewerBar/MediaViewerBar.js.map +1 -1
- package/build/esm/src/components/Notification/Notification.js.map +1 -1
- package/build/esm/src/components/Pagination/Pagination.js.map +1 -1
- package/build/esm/src/components/Patterns/ButtonGroup/ButtonGroup.js.map +1 -1
- package/build/esm/src/components/Patterns/Modal/Modal.js.map +1 -1
- package/build/esm/src/components/PictogramButton/PictogramButton.js.map +1 -1
- package/build/esm/src/components/Portal/Portal.js.map +1 -1
- package/build/esm/src/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/esm/src/components/RoundButton/RoundButton.js.map +1 -1
- package/build/esm/src/components/SearchResult/SearchResult.js.map +1 -1
- package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBar.js.map +1 -1
- package/build/esm/src/components/SegmentedProgressBar/SegmentedProgressBarUtil.js.map +1 -1
- package/build/esm/src/components/Stack/Stack.js.map +1 -1
- package/build/esm/src/components/SubThemeProvider/SubThemeProvider.js.map +1 -1
- package/build/esm/src/components/Tabs/Tabs.js.map +1 -1
- package/build/esm/src/components/Typography/StyledText/StyledText.js.map +1 -1
- package/build/esm/src/components/Typography/Text/Text.js.map +1 -1
- package/build/esm/src/components/Typography/TextClamped/TextClamped.js.map +1 -1
- package/build/esm/src/components/VirtualScrollList/VirtualScrollList.js.map +1 -1
- package/build/esm/src/components/VirtualScrollList/VirtualScrollListReducer.js.map +1 -1
- package/build/esm/src/index.d.ts +1 -0
- package/build/esm/src/index.js +1 -0
- package/build/esm/src/index.js.map +1 -1
- package/build/esm/src/shared/ScreenReaderText.js.map +1 -1
- package/build/esm/src/shared/flattenChildren.js.map +1 -1
- package/build/esm/src/shared/informDeprecation.js.map +1 -1
- package/build/esm/src/shared/mediaQueries.js +2 -2
- package/build/esm/src/shared/mediaQueries.js.map +1 -1
- package/build/esm/src/shared/useAutoPosition.js.map +1 -1
- package/build/esm/src/shared/useKeyboard.js.map +1 -1
- package/build/esm/src/shared/useOnEscapePress.js.map +1 -1
- package/build/esm/src/shared/useOutsideClick.js.map +1 -1
- package/package.json +7 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/DataTable/TableBody.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { DataTableColumn } from \"./types\";\nimport TableCell, { TableCellProps } from \"./TableCell\";\nimport { Text } from \"../Typography/Text/Text\";\nimport type { DataTableProps } from \"./DataTable\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { mq, mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableBodyProps = {\n className?: string;\n isTableScrolled: boolean;\n} & Pick<\n DataTableProps,\n | \"columns\"\n | \"rows\"\n | \"isLoading\"\n | \"loadingStateScreenReaderText\"\n | \"isEmpty\"\n | \"emptyTableContentHeight\"\n | \"bodyCellVerticalPadding\"\n | \"footer\"\n | \"isFirstColumnSticky\"\n | \"emptyCellContent\"\n>;\n\ntype StyledTrProps = Pick<TableBodyProps, \"footer\" | \"isTableScrolled\">;\n\nconst StyledTr = styled.tr<StyledTrProps>(\n ({ theme, footer, isTableScrolled }) => ({\n \"&:hover td\": {\n backgroundColor: theme.values.color.background.tabs.header,\n },\n\n ...(!footer && {\n \"&:last-of-type\": {\n td: {\n borderBottom: \"none\",\n },\n\n ...(!isTableScrolled && {\n \"td:first-of-type\": {\n borderBottomLeftRadius: theme.variables.size.borderRadius.card.m,\n },\n\n \"td:last-of-type\": {\n borderBottomRightRadius: theme.variables.size.borderRadius.card.m,\n },\n }),\n },\n }),\n })\n);\n\ntype StyledTextProps = {\n alignColumn?: DataTableColumn[\"align\"];\n};\n\nconst StyledText = styled(Text)<StyledTextProps>(({ alignColumn }) => ({\n ...mqValue({\n textAlign: alignColumn,\n }),\n}));\n\ntype StyledTdProps = TableCellProps &\n Pick<TableBodyProps, \"isFirstColumnSticky\" | \"bodyCellVerticalPadding\">;\n\nconst StyledTd = styled(TableCell)<StyledTdProps>(\n ({ theme, bodyCellVerticalPadding }) => ({\n ...mq({\n padding: [\n bodyCellVerticalPadding,\n {\n s: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,\n m: `${theme.variables.size.spacing.m} ${theme.variables.size.spacing.m}`,\n l: `${theme.variables.size.spacing.l} ${theme.variables.size.spacing.m}`,\n } as any,\n ],\n }),\n })\n);\n\ntype EmptyTableBodyProps = Pick<\n TableBodyProps,\n \"columns\" | \"emptyTableContentHeight\"\n> & {\n children: React.ReactElement;\n};\n\ntype StyledEmptyTdProps = Pick<EmptyTableBodyProps, \"emptyTableContentHeight\">;\n\nconst StyledEmptyTd = styled.td<StyledEmptyTdProps>(\n ({ emptyTableContentHeight }) => ({\n textAlign: \"center\",\n ...mqValue({\n height: emptyTableContentHeight,\n }),\n })\n);\n\nfunction EmptyTableBody({\n children,\n columns,\n emptyTableContentHeight,\n}: EmptyTableBodyProps): React.ReactElement {\n return (\n <tbody>\n <tr>\n <StyledEmptyTd\n colSpan={columns.length}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n {children}\n </StyledEmptyTd>\n </tr>\n </tbody>\n );\n}\n\nfunction TableBody({\n className,\n columns,\n rows = [],\n bodyCellVerticalPadding,\n isTableScrolled,\n isLoading,\n loadingStateScreenReaderText = \"Loading\",\n isEmpty,\n emptyTableContentHeight,\n footer,\n children,\n isFirstColumnSticky,\n emptyCellContent,\n}: React.PropsWithChildren<TableBodyProps>): React.ReactElement {\n if (isLoading) {\n const customLoadingContent = children && <>{children}</>;\n const bodyContent = customLoadingContent || (\n <LoadingSpinner screenReaderText={loadingStateScreenReaderText} />\n );\n\n return (\n <EmptyTableBody\n columns={columns}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n {bodyContent}\n </EmptyTableBody>\n );\n }\n\n if (isEmpty) {\n return (\n <EmptyTableBody\n columns={columns}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n <>{children}</>\n </EmptyTableBody>\n );\n }\n\n const rowElements = rows.map((row) => (\n <StyledTr key={row.id} footer={footer} isTableScrolled={isTableScrolled}>\n {columns.map(({ name, align = \"left\", renderCell }) => {\n const content = renderCell ? (\n renderCell(row)\n ) : (\n <StyledText size=\"s\" alignColumn={align}>\n {row[name] ? row[name] : emptyCellContent}\n </StyledText>\n );\n\n return (\n <StyledTd\n key={name}\n alignColumn={align}\n isFirstColumnSticky={isFirstColumnSticky}\n bodyCellVerticalPadding={bodyCellVerticalPadding}\n isTableScrolled={isTableScrolled}\n >\n {content}\n </StyledTd>\n );\n })}\n </StyledTr>\n ));\n\n return <tbody className={className}>{rowElements}</tbody>;\n}\n\nexport default React.memo(TableBody);\n"],"names":["StyledTr","_styled","process","env","NODE_ENV","target","label","_ref","theme","footer","isTableScrolled","backgroundColor","values","color","background","tabs","header","td","borderBottom","borderBottomLeftRadius","variables","size","borderRadius","card","m","borderBottomRightRadius","StyledText","Text","_ref2","alignColumn","mqValue","textAlign","StyledTd","TableCell","_ref3","bodyCellVerticalPadding","mq","padding","s","spacing","l","StyledEmptyTd","_ref4","emptyTableContentHeight","height","EmptyTableBody","_ref5","children","columns","React","createElement","colSpan","length","TableBody","_ref6","className","rows","isLoading","loadingStateScreenReaderText","isEmpty","isFirstColumnSticky","emptyCellContent","customLoadingContent","Fragment","bodyContent","LoadingSpinner","screenReaderText","rowElements","map","row","key","id","_ref7","name","align","renderCell","content","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/DataTable/TableBody.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { DataTableColumn } from \"./types\";\nimport TableCell, { TableCellProps } from \"./TableCell\";\nimport { Text } from \"../Typography/Text/Text\";\nimport type { DataTableProps } from \"./DataTable\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { mq, mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableBodyProps = {\n className?: string;\n isTableScrolled: boolean;\n} & Pick<\n DataTableProps,\n | \"columns\"\n | \"rows\"\n | \"isLoading\"\n | \"loadingStateScreenReaderText\"\n | \"isEmpty\"\n | \"emptyTableContentHeight\"\n | \"bodyCellVerticalPadding\"\n | \"footer\"\n | \"isFirstColumnSticky\"\n | \"emptyCellContent\"\n>;\n\ntype StyledTrProps = Pick<TableBodyProps, \"footer\" | \"isTableScrolled\">;\n\nconst StyledTr = styled.tr<StyledTrProps>(\n ({ theme, footer, isTableScrolled }) => ({\n \"&:hover td\": {\n backgroundColor: theme.values.color.background.tabs.header,\n },\n\n ...(!footer && {\n \"&:last-of-type\": {\n td: {\n borderBottom: \"none\",\n },\n\n ...(!isTableScrolled && {\n \"td:first-of-type\": {\n borderBottomLeftRadius: theme.variables.size.borderRadius.card.m,\n },\n\n \"td:last-of-type\": {\n borderBottomRightRadius: theme.variables.size.borderRadius.card.m,\n },\n }),\n },\n }),\n })\n);\n\ntype StyledTextProps = {\n alignColumn?: DataTableColumn[\"align\"];\n};\n\nconst StyledText = styled(Text)<StyledTextProps>(({ alignColumn }) => ({\n ...mqValue({\n textAlign: alignColumn,\n }),\n}));\n\ntype StyledTdProps = TableCellProps &\n Pick<TableBodyProps, \"isFirstColumnSticky\" | \"bodyCellVerticalPadding\">;\n\nconst StyledTd = styled(TableCell)<StyledTdProps>(\n ({ theme, bodyCellVerticalPadding }) => ({\n ...mq({\n padding: [\n bodyCellVerticalPadding,\n {\n s: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,\n m: `${theme.variables.size.spacing.m} ${theme.variables.size.spacing.m}`,\n l: `${theme.variables.size.spacing.l} ${theme.variables.size.spacing.m}`,\n } as any,\n ],\n }),\n })\n);\n\ntype EmptyTableBodyProps = Pick<\n TableBodyProps,\n \"columns\" | \"emptyTableContentHeight\"\n> & {\n children: React.ReactElement;\n};\n\ntype StyledEmptyTdProps = Pick<EmptyTableBodyProps, \"emptyTableContentHeight\">;\n\nconst StyledEmptyTd = styled.td<StyledEmptyTdProps>(\n ({ emptyTableContentHeight }) => ({\n textAlign: \"center\",\n ...mqValue({\n height: emptyTableContentHeight,\n }),\n })\n);\n\nfunction EmptyTableBody({\n children,\n columns,\n emptyTableContentHeight,\n}: EmptyTableBodyProps): React.ReactElement {\n return (\n <tbody>\n <tr>\n <StyledEmptyTd\n colSpan={columns.length}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n {children}\n </StyledEmptyTd>\n </tr>\n </tbody>\n );\n}\n\nfunction TableBody({\n className,\n columns,\n rows = [],\n bodyCellVerticalPadding,\n isTableScrolled,\n isLoading,\n loadingStateScreenReaderText = \"Loading\",\n isEmpty,\n emptyTableContentHeight,\n footer,\n children,\n isFirstColumnSticky,\n emptyCellContent,\n}: React.PropsWithChildren<TableBodyProps>): React.ReactElement {\n if (isLoading) {\n const customLoadingContent = children && <>{children}</>;\n const bodyContent = customLoadingContent || (\n <LoadingSpinner screenReaderText={loadingStateScreenReaderText} />\n );\n\n return (\n <EmptyTableBody\n columns={columns}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n {bodyContent}\n </EmptyTableBody>\n );\n }\n\n if (isEmpty) {\n return (\n <EmptyTableBody\n columns={columns}\n emptyTableContentHeight={emptyTableContentHeight}\n >\n <>{children}</>\n </EmptyTableBody>\n );\n }\n\n const rowElements = rows.map((row) => (\n <StyledTr key={row.id} footer={footer} isTableScrolled={isTableScrolled}>\n {columns.map(({ name, align = \"left\", renderCell }) => {\n const content = renderCell ? (\n renderCell(row)\n ) : (\n <StyledText size=\"s\" alignColumn={align}>\n {row[name] ? row[name] : emptyCellContent}\n </StyledText>\n );\n\n return (\n <StyledTd\n key={name}\n alignColumn={align}\n isFirstColumnSticky={isFirstColumnSticky}\n bodyCellVerticalPadding={bodyCellVerticalPadding}\n isTableScrolled={isTableScrolled}\n >\n {content}\n </StyledTd>\n );\n })}\n </StyledTr>\n ));\n\n return <tbody className={className}>{rowElements}</tbody>;\n}\n\nexport default React.memo(TableBody);\n"],"names":["StyledTr","_styled","process","env","NODE_ENV","target","label","_ref","theme","footer","isTableScrolled","backgroundColor","values","color","background","tabs","header","td","borderBottom","borderBottomLeftRadius","variables","size","borderRadius","card","m","borderBottomRightRadius","StyledText","Text","_ref2","alignColumn","mqValue","textAlign","StyledTd","TableCell","_ref3","bodyCellVerticalPadding","mq","padding","s","spacing","l","StyledEmptyTd","_ref4","emptyTableContentHeight","height","EmptyTableBody","_ref5","children","columns","React","createElement","colSpan","length","TableBody","_ref6","className","rows","isLoading","loadingStateScreenReaderText","isEmpty","isFirstColumnSticky","emptyCellContent","customLoadingContent","Fragment","bodyContent","LoadingSpinner","screenReaderText","rowElements","map","row","key","id","_ref7","name","align","renderCell","content","memo"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/DataTable/TableCell.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport type { TableBodyProps } from \"./TableBody\";\nimport type { DataTableColumn } from \"./types\";\nimport { mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableCellProps = {\n alignColumn?: DataTableColumn[\"align\"];\n columnWidth?: DataTableColumn[\"width\"];\n} & Pick<TableBodyProps, \"isFirstColumnSticky\" | \"isTableScrolled\">;\n\nconst TableCell = styled.td<TableCellProps>(\n ({\n theme,\n isFirstColumnSticky,\n isTableScrolled,\n alignColumn,\n columnWidth,\n }) => ({\n borderBottom: `1px solid ${theme.values.color.divider.primary}`,\n ...mqValue({\n textAlign: alignColumn,\n }),\n ...mqValue({\n width: columnWidth,\n }),\n ...(isFirstColumnSticky &&\n isTableScrolled && {\n \"&:first-of-type\": {\n position: \"sticky\",\n left: 0,\n borderRight: `1px solid ${theme.values.color.divider.primary}`,\n backgroundColor: theme.values.color.background.layer_2,\n },\n }),\n })\n);\n\nexport default TableCell;\n"],"names":["TableCell","_styled","process","env","NODE_ENV","target","label","_ref","theme","isFirstColumnSticky","isTableScrolled","alignColumn","columnWidth","borderBottom","values","color","divider","primary","mqValue","textAlign","width","position","left","borderRight","backgroundColor","background","layer_2"],"mappings":";;;AAUA,MAAMA,SAAS,gBAAGC,OAAA,CAAA,IAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,WAAA;AAAA,CAAA,CAAA,CAChBC,IAAA,IAAA;EAAA,IAAC;IACCC,KAAK;IACLC,mBAAmB;IACnBC,eAAe;IACfC,WAAW;AACXC,IAAAA,WAAAA;AACF,GAAC,GAAAL,IAAA,CAAA;EAAA,OAAM;IACLM,YAAY,EAAG,CAAYL,UAAAA,EAAAA,KAAK,CAACM,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAQ,CAAC,CAAA;AAC/D,IAAA,GAAGC,OAAO,CAAC;AACTC,MAAAA,SAAS,EAAER,WAAAA;AACb,KAAC,CAAC;AACF,IAAA,GAAGO,OAAO,CAAC;AACTE,MAAAA,KAAK,EAAER,WAAAA;AACT,KAAC,CAAC;IACF,IAAIH,mBAAmB,IACrBC,eAAe,IAAI;AACjB,MAAA,iBAAiB,EAAE;AACjBW,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,IAAI,EAAE,CAAC;QACPC,WAAW,EAAG,CAAYf,UAAAA,EAAAA,KAAK,CAACM,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAQ,CAAC,CAAA;QAC9DO,eAAe,EAAEhB,KAAK,CAACM,MAAM,CAACC,KAAK,CAACU,UAAU,CAACC,OAAAA;AACjD,OAAA;KACD,CAAA;GACJ,CAAA;AAAA,CAAC,EAAAxB,OAAA,CAAAC,GAAA,CAAAC,QAAA,
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/DataTable/TableCell.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport type { TableBodyProps } from \"./TableBody\";\nimport type { DataTableColumn } from \"./types\";\nimport { mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableCellProps = {\n alignColumn?: DataTableColumn[\"align\"];\n columnWidth?: DataTableColumn[\"width\"];\n} & Pick<TableBodyProps, \"isFirstColumnSticky\" | \"isTableScrolled\">;\n\nconst TableCell = styled.td<TableCellProps>(\n ({\n theme,\n isFirstColumnSticky,\n isTableScrolled,\n alignColumn,\n columnWidth,\n }) => ({\n borderBottom: `1px solid ${theme.values.color.divider.primary}`,\n ...mqValue({\n textAlign: alignColumn,\n }),\n ...mqValue({\n width: columnWidth,\n }),\n ...(isFirstColumnSticky &&\n isTableScrolled && {\n \"&:first-of-type\": {\n position: \"sticky\",\n left: 0,\n borderRight: `1px solid ${theme.values.color.divider.primary}`,\n backgroundColor: theme.values.color.background.layer_2,\n },\n }),\n })\n);\n\nexport default TableCell;\n"],"names":["TableCell","_styled","process","env","NODE_ENV","target","label","_ref","theme","isFirstColumnSticky","isTableScrolled","alignColumn","columnWidth","borderBottom","values","color","divider","primary","mqValue","textAlign","width","position","left","borderRight","backgroundColor","background","layer_2"],"mappings":";;;AAUA,MAAMA,SAAS,gBAAGC,OAAA,CAAA,IAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,WAAA;AAAA,CAAA,CAAA,CAChBC,IAAA,IAAA;EAAA,IAAC;IACCC,KAAK;IACLC,mBAAmB;IACnBC,eAAe;IACfC,WAAW;AACXC,IAAAA,WAAAA;AACF,GAAC,GAAAL,IAAA,CAAA;EAAA,OAAM;IACLM,YAAY,EAAG,CAAYL,UAAAA,EAAAA,KAAK,CAACM,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAQ,CAAC,CAAA;AAC/D,IAAA,GAAGC,OAAO,CAAC;AACTC,MAAAA,SAAS,EAAER,WAAAA;AACb,KAAC,CAAC;AACF,IAAA,GAAGO,OAAO,CAAC;AACTE,MAAAA,KAAK,EAAER,WAAAA;AACT,KAAC,CAAC;IACF,IAAIH,mBAAmB,IACrBC,eAAe,IAAI;AACjB,MAAA,iBAAiB,EAAE;AACjBW,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,IAAI,EAAE,CAAC;QACPC,WAAW,EAAG,CAAYf,UAAAA,EAAAA,KAAK,CAACM,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAQ,CAAC,CAAA;QAC9DO,eAAe,EAAEhB,KAAK,CAACM,MAAM,CAACC,KAAK,CAACU,UAAU,CAACC,OAAAA;AACjD,OAAA;KACD,CAAA;GACJ,CAAA;AAAA,CAAC,EAAAxB,OAAA,CAAAC,GAAA,CAAAC,QAAA,0qDACJ,CAAC,CAAA;AAED,kBAAeJ,SAAS;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/DataTable/TableHeader.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { DataTableColumn } from \"./types\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport TableCell from \"./TableCell\";\nimport type { DataTableProps } from \"./DataTable\";\nimport { mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableHeaderProps = {\n className?: string;\n isTableScrolled: boolean;\n} & Pick<\n DataTableProps,\n | \"columns\"\n | \"rows\"\n | \"onSort\"\n | \"currentlySortedByColumn\"\n | \"isFirstColumnSticky\"\n>;\n\nconst SORT_DIRECTION_ICON: Record<DataTableColumn[\"sortDirection\"], IconName> =\n {\n asc: \"sort-ascending\",\n desc: \"sort-descending\",\n };\n\nconst SORT_DIRECTION_TEXT = {\n asc: \"ascending\" as const,\n desc: \"descending\" as const,\n};\n\nconst SortIcon = styled.span(({ theme }) => ({\n marginLeft: theme.variables.size.spacing.xxxs,\n verticalAlign: \"middle\",\n color: theme.values.color.text.secondary,\n}));\n\ntype StyledHeaderLabelProps = {\n alignColumn?: DataTableColumn[\"align\"];\n};\n\nconst StyledHeaderLabel = styled(Text)<StyledHeaderLabelProps>(\n ({ theme, alignColumn }) => ({\n fontWeight: theme.variables.weight.bold,\n lineHeight: theme.variables.size.lineHeight.header.xxs,\n letterSpacing: theme.variables.size.letterSpacing.header.h6,\n ...mqValue({\n textAlign: alignColumn,\n }),\n })\n);\n\ntype StyledSortableHeaderProps = {\n alignColumn: DataTableColumn[\"align\"];\n};\nconst StyledSortableHeader = styled.button<StyledSortableHeaderProps>(\n ({ theme, alignColumn }) => ({\n width: \"100%\",\n height: theme.variables.size.lineHeight.header.xxs,\n padding: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n ...mqValue({\n textAlign: alignColumn,\n }),\n\n [`&:hover ${StyledHeaderLabel}`]: {\n color: theme.values.color.header.primary,\n },\n })\n);\n\ntype SortableHeaderProps = Pick<\n TableHeaderProps,\n \"onSort\" | \"currentlySortedByColumn\"\n> &\n DataTableColumn;\n\nfunction SortableHeader({\n name,\n label,\n align,\n sortDirection = \"asc\",\n currentlySortedByColumn,\n onSort,\n}: SortableHeaderProps): React.ReactElement {\n const [hovered, setHovered] = useState(false);\n const desiredSortDirection = sortDirection === \"asc\" ? \"desc\" : \"asc\";\n\n const handleClick: React.MouseEventHandler = () => {\n setHovered(false);\n if (onSort) {\n onSort(name, desiredSortDirection);\n }\n };\n\n let iconName: IconName = \"sort-neutral\";\n\n if (name === currentlySortedByColumn) {\n iconName = SORT_DIRECTION_ICON[sortDirection];\n }\n if (hovered) {\n iconName = SORT_DIRECTION_ICON[desiredSortDirection];\n }\n\n return (\n <StyledSortableHeader\n onClick={handleClick}\n type=\"button\"\n alignColumn={align}\n onPointerEnter={() => setHovered(true)}\n onPointerLeave={() => setHovered(false)}\n >\n <StyledHeaderLabel\n as=\"span\"\n size=\"xs\"\n transform=\"uppercase\"\n variant=\"tertiary\"\n >\n {label}\n </StyledHeaderLabel>\n <SortIcon aria-hidden=\"true\">\n <Icon size=\"s\" name={iconName} inline />\n </SortIcon>\n </StyledSortableHeader>\n );\n}\n\nconst StyledTh = styled(TableCell)(({ theme }) => ({\n padding: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,\n whiteSpace: \"nowrap\",\n\n \"&:first-of-type\": {\n borderTopLeftRadius: theme.variables.size.borderRadius.card.m,\n },\n}));\n\nfunction TableHeader({\n className,\n columns,\n isFirstColumnSticky,\n currentlySortedByColumn,\n isTableScrolled,\n onSort,\n}: TableHeaderProps): React.ReactElement {\n const columnElements = columns.map((column) => {\n const {\n isSortable,\n label,\n align = \"left\",\n width,\n name,\n sortDirection,\n } = column;\n const headerElm = isSortable ? (\n <SortableHeader\n onSort={onSort}\n name={name}\n label={label}\n sortDirection={sortDirection}\n align={align}\n currentlySortedByColumn={currentlySortedByColumn}\n />\n ) : (\n <StyledHeaderLabel\n size=\"xs\"\n transform=\"uppercase\"\n alignColumn={align}\n variant=\"tertiary\"\n >\n {label}\n </StyledHeaderLabel>\n );\n\n const ariaSortAttr = currentlySortedByColumn === name && {\n \"aria-sort\": SORT_DIRECTION_TEXT[sortDirection],\n };\n\n return (\n <StyledTh\n as=\"th\"\n alignColumn={align}\n columnWidth={width}\n key={name}\n isFirstColumnSticky={isFirstColumnSticky}\n isTableScrolled={isTableScrolled}\n {...ariaSortAttr}\n >\n {headerElm}\n </StyledTh>\n );\n });\n\n return (\n <thead className={className}>\n <tr>{columnElements}</tr>\n </thead>\n );\n}\n\nexport default React.memo(TableHeader);\n\n/* eslint-enable react/jsx-props-no-spreading */\n"],"names":["SORT_DIRECTION_ICON","asc","desc","SORT_DIRECTION_TEXT","SortIcon","_styled","process","env","NODE_ENV","target","label","_ref","theme","marginLeft","variables","size","spacing","xxxs","verticalAlign","color","values","text","secondary","StyledHeaderLabel","Text","_ref2","alignColumn","fontWeight","weight","bold","lineHeight","header","xxs","letterSpacing","h6","mqValue","textAlign","StyledSortableHeader","_ref3","width","height","padding","background","border","cursor","primary","SortableHeader","_ref4","name","align","sortDirection","currentlySortedByColumn","onSort","hovered","setHovered","useState","desiredSortDirection","handleClick","iconName","React","createElement","onClick","type","onPointerEnter","onPointerLeave","as","transform","variant","Icon","inline","StyledTh","TableCell","_ref5","s","m","whiteSpace","borderTopLeftRadius","borderRadius","card","TableHeader","_ref6","className","columns","isFirstColumnSticky","isTableScrolled","columnElements","map","column","isSortable","headerElm","ariaSortAttr","_extends","columnWidth","key","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/DataTable/TableHeader.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport type { DataTableColumn } from \"./types\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport TableCell from \"./TableCell\";\nimport type { DataTableProps } from \"./DataTable\";\nimport { mqValue } from \"../../shared/mediaQueries\";\n\nexport type TableHeaderProps = {\n className?: string;\n isTableScrolled: boolean;\n} & Pick<\n DataTableProps,\n | \"columns\"\n | \"rows\"\n | \"onSort\"\n | \"currentlySortedByColumn\"\n | \"isFirstColumnSticky\"\n>;\n\nconst SORT_DIRECTION_ICON: Record<DataTableColumn[\"sortDirection\"], IconName> =\n {\n asc: \"sort-ascending\",\n desc: \"sort-descending\",\n };\n\nconst SORT_DIRECTION_TEXT = {\n asc: \"ascending\" as const,\n desc: \"descending\" as const,\n};\n\nconst SortIcon = styled.span(({ theme }) => ({\n marginLeft: theme.variables.size.spacing.xxxs,\n verticalAlign: \"middle\",\n color: theme.values.color.text.secondary,\n}));\n\ntype StyledHeaderLabelProps = {\n alignColumn?: DataTableColumn[\"align\"];\n};\n\nconst StyledHeaderLabel = styled(Text)<StyledHeaderLabelProps>(\n ({ theme, alignColumn }) => ({\n fontWeight: theme.variables.weight.bold,\n lineHeight: theme.variables.size.lineHeight.header.xxs,\n letterSpacing: theme.variables.size.letterSpacing.header.h6,\n ...mqValue({\n textAlign: alignColumn,\n }),\n })\n);\n\ntype StyledSortableHeaderProps = {\n alignColumn: DataTableColumn[\"align\"];\n};\nconst StyledSortableHeader = styled.button<StyledSortableHeaderProps>(\n ({ theme, alignColumn }) => ({\n width: \"100%\",\n height: theme.variables.size.lineHeight.header.xxs,\n padding: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n ...mqValue({\n textAlign: alignColumn,\n }),\n\n [`&:hover ${StyledHeaderLabel}`]: {\n color: theme.values.color.header.primary,\n },\n })\n);\n\ntype SortableHeaderProps = Pick<\n TableHeaderProps,\n \"onSort\" | \"currentlySortedByColumn\"\n> &\n DataTableColumn;\n\nfunction SortableHeader({\n name,\n label,\n align,\n sortDirection = \"asc\",\n currentlySortedByColumn,\n onSort,\n}: SortableHeaderProps): React.ReactElement {\n const [hovered, setHovered] = useState(false);\n const desiredSortDirection = sortDirection === \"asc\" ? \"desc\" : \"asc\";\n\n const handleClick: React.MouseEventHandler = () => {\n setHovered(false);\n if (onSort) {\n onSort(name, desiredSortDirection);\n }\n };\n\n let iconName: IconName = \"sort-neutral\";\n\n if (name === currentlySortedByColumn) {\n iconName = SORT_DIRECTION_ICON[sortDirection];\n }\n if (hovered) {\n iconName = SORT_DIRECTION_ICON[desiredSortDirection];\n }\n\n return (\n <StyledSortableHeader\n onClick={handleClick}\n type=\"button\"\n alignColumn={align}\n onPointerEnter={() => setHovered(true)}\n onPointerLeave={() => setHovered(false)}\n >\n <StyledHeaderLabel\n as=\"span\"\n size=\"xs\"\n transform=\"uppercase\"\n variant=\"tertiary\"\n >\n {label}\n </StyledHeaderLabel>\n <SortIcon aria-hidden=\"true\">\n <Icon size=\"s\" name={iconName} inline />\n </SortIcon>\n </StyledSortableHeader>\n );\n}\n\nconst StyledTh = styled(TableCell)(({ theme }) => ({\n padding: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,\n whiteSpace: \"nowrap\",\n\n \"&:first-of-type\": {\n borderTopLeftRadius: theme.variables.size.borderRadius.card.m,\n },\n}));\n\nfunction TableHeader({\n className,\n columns,\n isFirstColumnSticky,\n currentlySortedByColumn,\n isTableScrolled,\n onSort,\n}: TableHeaderProps): React.ReactElement {\n const columnElements = columns.map((column) => {\n const {\n isSortable,\n label,\n align = \"left\",\n width,\n name,\n sortDirection,\n } = column;\n const headerElm = isSortable ? (\n <SortableHeader\n onSort={onSort}\n name={name}\n label={label}\n sortDirection={sortDirection}\n align={align}\n currentlySortedByColumn={currentlySortedByColumn}\n />\n ) : (\n <StyledHeaderLabel\n size=\"xs\"\n transform=\"uppercase\"\n alignColumn={align}\n variant=\"tertiary\"\n >\n {label}\n </StyledHeaderLabel>\n );\n\n const ariaSortAttr = currentlySortedByColumn === name && {\n \"aria-sort\": SORT_DIRECTION_TEXT[sortDirection],\n };\n\n return (\n <StyledTh\n as=\"th\"\n alignColumn={align}\n columnWidth={width}\n key={name}\n isFirstColumnSticky={isFirstColumnSticky}\n isTableScrolled={isTableScrolled}\n {...ariaSortAttr}\n >\n {headerElm}\n </StyledTh>\n );\n });\n\n return (\n <thead className={className}>\n <tr>{columnElements}</tr>\n </thead>\n );\n}\n\nexport default React.memo(TableHeader);\n\n/* eslint-enable react/jsx-props-no-spreading */\n"],"names":["SORT_DIRECTION_ICON","asc","desc","SORT_DIRECTION_TEXT","SortIcon","_styled","process","env","NODE_ENV","target","label","_ref","theme","marginLeft","variables","size","spacing","xxxs","verticalAlign","color","values","text","secondary","StyledHeaderLabel","Text","_ref2","alignColumn","fontWeight","weight","bold","lineHeight","header","xxs","letterSpacing","h6","mqValue","textAlign","StyledSortableHeader","_ref3","width","height","padding","background","border","cursor","primary","SortableHeader","_ref4","name","align","sortDirection","currentlySortedByColumn","onSort","hovered","setHovered","useState","desiredSortDirection","handleClick","iconName","React","createElement","onClick","type","onPointerEnter","onPointerLeave","as","transform","variant","Icon","inline","StyledTh","TableCell","_ref5","s","m","whiteSpace","borderTopLeftRadius","borderRadius","card","TableHeader","_ref6","className","columns","isFirstColumnSticky","isTableScrolled","columnElements","map","column","isSortable","headerElm","ariaSortAttr","_extends","columnWidth","key","memo"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataTableSort.js","sources":["../../../../../src/components/DataTable/useDataTableSort.ts"],"sourcesContent":["import { useState, Dispatch, SetStateAction } from \"react\";\n\nimport type { DataTableColumn, DataTableRow } from \"./types\";\nimport type { DataTableProps } from \"./DataTable\";\n\ntype SortCompareFn = (\n a: DataTableRow,\n b: DataTableRow,\n columnName: DataTableColumn[\"name\"],\n desiredSortDirection: DataTableColumn[\"sortDirection\"]\n) => number;\n\nconst defaultSortCompareFn = (\n a: DataTableRow,\n b: DataTableRow,\n columnName: DataTableColumn[\"name\"],\n desiredSortDirection: DataTableColumn[\"sortDirection\"]\n) => {\n if (a[columnName] < b[columnName]) {\n return desiredSortDirection === \"asc\" ? -1 : 1;\n }\n if (a[columnName] > b[columnName]) {\n return desiredSortDirection === \"asc\" ? 1 : -1;\n }\n\n return 0;\n};\n\nexport function useDataTableSort(\n initialColumns: DataTableColumn[],\n initialRows: DataTableRow[],\n initialSortedByColumn?: DataTableColumn[\"name\"],\n sortCompareFn: SortCompareFn = defaultSortCompareFn\n): {\n columns: DataTableColumn[];\n rows: DataTableRow[];\n currentlySortedByColumn: DataTableColumn[\"name\"];\n handleSort: DataTableProps[\"onSort\"];\n setColumns: Dispatch<SetStateAction<DataTableColumn[]>>;\n setRows: Dispatch<SetStateAction<DataTableRow[]>>;\n setCurrentlySortedByColumn: Dispatch<SetStateAction<DataTableColumn[\"name\"]>>;\n} {\n const [columns, setColumns] = useState(initialColumns);\n const [currentlySortedByColumn, setCurrentlySortedByColumn] = useState(\n initialSortedByColumn\n );\n const [rows, setRows] = useState(initialRows);\n\n const handleSort: DataTableProps[\"onSort\"] = (\n columnName,\n desiredSortDirection\n ) => {\n const newColumns = [...columns];\n const newRows = [...rows];\n const column = newColumns.find((item) => item.name === columnName);\n\n if (column) {\n column.sortDirection = desiredSortDirection;\n }\n\n newRows.sort((a, b) =>\n sortCompareFn(a, b, columnName, desiredSortDirection)\n );\n\n setRows(newRows);\n setColumns(newColumns);\n setCurrentlySortedByColumn(columnName);\n };\n\n return {\n columns,\n rows,\n currentlySortedByColumn,\n handleSort,\n setColumns,\n setRows,\n setCurrentlySortedByColumn,\n };\n}\n"],"names":["defaultSortCompareFn","a","b","columnName","desiredSortDirection","useDataTableSort","initialColumns","initialRows","initialSortedByColumn","sortCompareFn","arguments","length","undefined","columns","setColumns","useState","currentlySortedByColumn","setCurrentlySortedByColumn","rows","setRows","handleSort","newColumns","newRows","column","find","item","name","sortDirection","sort"],"mappings":";;AAYA,MAAMA,oBAAoB,GAAGA,CAC3BC,CAAe,EACfC,CAAe,EACfC,UAAmC,EACnCC,oBAAsD,KACnD;EACH,IAAIH,CAAC,CAACE,UAAU,CAAC,GAAGD,CAAC,CAACC,UAAU,CAAC,EAAE;AACjC,IAAA,OAAOC,oBAAoB,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;AAChD,GAAA;EACA,IAAIH,CAAC,CAACE,UAAU,CAAC,GAAGD,CAAC,CAACC,UAAU,CAAC,EAAE;AACjC,IAAA,OAAOC,oBAAoB,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAChD,GAAA;AAEA,EAAA,OAAO,CAAC,CAAA;AACV,CAAC,CAAA;AAEM,SAASC,gBAAgBA,CAC9BC,cAAiC,EACjCC,WAA2B,EAC3BC,qBAA+C,EAU/C;AAAA,EAAA,IATAC,aAA4B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAGV,oBAAoB,CAAA;EAUnD,MAAM,CAACa,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACT,cAAc,CAAC,CAAA;EACtD,MAAM,CAACU,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGF,QAAQ,CACpEP,
|
|
1
|
+
{"version":3,"file":"useDataTableSort.js","sources":["../../../../../src/components/DataTable/useDataTableSort.ts"],"sourcesContent":["import { useState, Dispatch, SetStateAction } from \"react\";\n\nimport type { DataTableColumn, DataTableRow } from \"./types\";\nimport type { DataTableProps } from \"./DataTable\";\n\ntype SortCompareFn = (\n a: DataTableRow,\n b: DataTableRow,\n columnName: DataTableColumn[\"name\"],\n desiredSortDirection: DataTableColumn[\"sortDirection\"]\n) => number;\n\nconst defaultSortCompareFn = (\n a: DataTableRow,\n b: DataTableRow,\n columnName: DataTableColumn[\"name\"],\n desiredSortDirection: DataTableColumn[\"sortDirection\"]\n) => {\n if (a[columnName] < b[columnName]) {\n return desiredSortDirection === \"asc\" ? -1 : 1;\n }\n if (a[columnName] > b[columnName]) {\n return desiredSortDirection === \"asc\" ? 1 : -1;\n }\n\n return 0;\n};\n\nexport function useDataTableSort(\n initialColumns: DataTableColumn[],\n initialRows: DataTableRow[],\n initialSortedByColumn?: DataTableColumn[\"name\"],\n sortCompareFn: SortCompareFn = defaultSortCompareFn\n): {\n columns: DataTableColumn[];\n rows: DataTableRow[];\n currentlySortedByColumn: DataTableColumn[\"name\"];\n handleSort: DataTableProps[\"onSort\"];\n setColumns: Dispatch<SetStateAction<DataTableColumn[]>>;\n setRows: Dispatch<SetStateAction<DataTableRow[]>>;\n setCurrentlySortedByColumn: Dispatch<SetStateAction<DataTableColumn[\"name\"]>>;\n} {\n const [columns, setColumns] = useState(initialColumns);\n const [currentlySortedByColumn, setCurrentlySortedByColumn] = useState(\n initialSortedByColumn\n );\n const [rows, setRows] = useState(initialRows);\n\n const handleSort: DataTableProps[\"onSort\"] = (\n columnName,\n desiredSortDirection\n ) => {\n const newColumns = [...columns];\n const newRows = [...rows];\n const column = newColumns.find((item) => item.name === columnName);\n\n if (column) {\n column.sortDirection = desiredSortDirection;\n }\n\n newRows.sort((a, b) =>\n sortCompareFn(a, b, columnName, desiredSortDirection)\n );\n\n setRows(newRows);\n setColumns(newColumns);\n setCurrentlySortedByColumn(columnName);\n };\n\n return {\n columns,\n rows,\n currentlySortedByColumn,\n handleSort,\n setColumns,\n setRows,\n setCurrentlySortedByColumn,\n };\n}\n"],"names":["defaultSortCompareFn","a","b","columnName","desiredSortDirection","useDataTableSort","initialColumns","initialRows","initialSortedByColumn","sortCompareFn","arguments","length","undefined","columns","setColumns","useState","currentlySortedByColumn","setCurrentlySortedByColumn","rows","setRows","handleSort","newColumns","newRows","column","find","item","name","sortDirection","sort"],"mappings":";;AAYA,MAAMA,oBAAoB,GAAGA,CAC3BC,CAAe,EACfC,CAAe,EACfC,UAAmC,EACnCC,oBAAsD,KACnD;EACH,IAAIH,CAAC,CAACE,UAAU,CAAC,GAAGD,CAAC,CAACC,UAAU,CAAC,EAAE;AACjC,IAAA,OAAOC,oBAAoB,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;AAChD,GAAA;EACA,IAAIH,CAAC,CAACE,UAAU,CAAC,GAAGD,CAAC,CAACC,UAAU,CAAC,EAAE;AACjC,IAAA,OAAOC,oBAAoB,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAChD,GAAA;AAEA,EAAA,OAAO,CAAC,CAAA;AACV,CAAC,CAAA;AAEM,SAASC,gBAAgBA,CAC9BC,cAAiC,EACjCC,WAA2B,EAC3BC,qBAA+C,EAU/C;AAAA,EAAA,IATAC,aAA4B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAGV,oBAAoB,CAAA;EAUnD,MAAM,CAACa,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACT,cAAc,CAAC,CAAA;EACtD,MAAM,CAACU,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGF,QAAQ,CACpEP,qBACF,CAAC,CAAA;EACD,MAAM,CAACU,IAAI,EAAEC,OAAO,CAAC,GAAGJ,QAAQ,CAACR,WAAW,CAAC,CAAA;AAE7C,EAAA,MAAMa,UAAoC,GAAGA,CAC3CjB,UAAU,EACVC,oBAAoB,KACjB;AACH,IAAA,MAAMiB,UAAU,GAAG,CAAC,GAAGR,OAAO,CAAC,CAAA;AAC/B,IAAA,MAAMS,OAAO,GAAG,CAAC,GAAGJ,IAAI,CAAC,CAAA;AACzB,IAAA,MAAMK,MAAM,GAAGF,UAAU,CAACG,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAKvB,UAAU,CAAC,CAAA;AAElE,IAAA,IAAIoB,MAAM,EAAE;MACVA,MAAM,CAACI,aAAa,GAAGvB,oBAAoB,CAAA;AAC7C,KAAA;AAEAkB,IAAAA,OAAO,CAACM,IAAI,CAAC,CAAC3B,CAAC,EAAEC,CAAC,KAChBO,aAAa,CAACR,CAAC,EAAEC,CAAC,EAAEC,UAAU,EAAEC,oBAAoB,CACtD,CAAC,CAAA;IAEDe,OAAO,CAACG,OAAO,CAAC,CAAA;IAChBR,UAAU,CAACO,UAAU,CAAC,CAAA;IACtBJ,0BAA0B,CAACd,UAAU,CAAC,CAAA;GACvC,CAAA;EAED,OAAO;IACLU,OAAO;IACPK,IAAI;IACJF,uBAAuB;IACvBI,UAAU;IACVN,UAAU;IACVK,OAAO;AACPF,IAAAA,0BAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","sources":["../../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Box } from \"../Box/Box\";\n\nexport type DividerProps = {\n \"data-e2e-test-id\"?: string;\n text?: string;\n};\n\nconst StyledContainer = styled.div<Partial<DividerProps>>(() => ({\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n}));\n\nconst StyledDivider = styled.div(({ theme }) => ({\n borderBottomColor: theme.values.color.divider.primary,\n borderBottomWidth: \"1px\",\n borderBottomStyle: \"solid\",\n flex: \"1\",\n}));\n\nconst StyledContent = styled.div(() => ({\n maxWidth: \"50%\",\n}));\n\nexport function Divider({\n text,\n \"data-e2e-test-id\": dataE2eTestId,\n}: DividerProps): React.ReactElement {\n if (text) {\n return (\n <StyledContainer data-e2e-test-id={dataE2eTestId}>\n <StyledDivider />\n {text && (\n <StyledContent>\n <Box space=\"xxl\" vSpace=\"zero\">\n <Text variant=\"tertiary\">{text}</Text>\n </Box>\n </StyledContent>\n )}\n <StyledDivider />\n </StyledContainer>\n );\n }\n return (\n <StyledDivider data-e2e-test-id={dataE2eTestId} data-ds-id=\"Divider\" />\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","display","justifyContent","alignItems","StyledDivider","_ref","theme","borderBottomColor","values","color","divider","primary","borderBottomWidth","borderBottomStyle","flex","StyledContent","maxWidth","Divider","_ref2","text","dataE2eTestId","React","createElement","Box","space","vSpace","Text","variant"],"mappings":";;;;;AAUA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAAkC,OAAO;AAC/DC,EAAAA,OAAO,EAAE,MAAM;AACfC,EAAAA,cAAc,EAAE,QAAQ;AACxBC,EAAAA,UAAU,EAAE,QAAA;AACd,CAAC,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEH,MAAMM,aAAa,gBAAGT,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,eAAA;AAAA,CAAA,CAAA,CAAWK,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM;IAC/CE,iBAAiB,EAAED,KAAK,CAACE,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAO;AACrDC,IAAAA,iBAAiB,EAAE,KAAK;AACxBC,IAAAA,iBAAiB,EAAE,OAAO;AAC1BC,IAAAA,IAAI,EAAE,GAAA;GACP,CAAA;AAAA,CAAC,EAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEH,MAAMiB,aAAa,gBAAGpB,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,eAAA;AAAA,CAAA,CAAA,CAAW,OAAO;AACtCgB,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC,CAAC,EAAApB,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEI,SAASmB,OAAOA,CAAAC,KAAA,EAGc;EAAA,IAHb;IACtBC,IAAI;AACJ,IAAA,kBAAkB,EAAEC,aAAAA;AACR,GAAC,GAAAF,KAAA,CAAA;AACb,EAAA,IAAIC,IAAI,EAAE;AACR,IAAA,oBACEE,KAAA,CAAAC,aAAA,CAAC5B,eAAe,EAAA;MAAC,kBAAkB0B,EAAAA,aAAAA;
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["../../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Box } from \"../Box/Box\";\n\nexport type DividerProps = {\n \"data-e2e-test-id\"?: string;\n text?: string;\n};\n\nconst StyledContainer = styled.div<Partial<DividerProps>>(() => ({\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n}));\n\nconst StyledDivider = styled.div(({ theme }) => ({\n borderBottomColor: theme.values.color.divider.primary,\n borderBottomWidth: \"1px\",\n borderBottomStyle: \"solid\",\n flex: \"1\",\n}));\n\nconst StyledContent = styled.div(() => ({\n maxWidth: \"50%\",\n}));\n\nexport function Divider({\n text,\n \"data-e2e-test-id\": dataE2eTestId,\n}: DividerProps): React.ReactElement {\n if (text) {\n return (\n <StyledContainer data-e2e-test-id={dataE2eTestId}>\n <StyledDivider />\n {text && (\n <StyledContent>\n <Box space=\"xxl\" vSpace=\"zero\">\n <Text variant=\"tertiary\">{text}</Text>\n </Box>\n </StyledContent>\n )}\n <StyledDivider />\n </StyledContainer>\n );\n }\n return (\n <StyledDivider data-e2e-test-id={dataE2eTestId} data-ds-id=\"Divider\" />\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","display","justifyContent","alignItems","StyledDivider","_ref","theme","borderBottomColor","values","color","divider","primary","borderBottomWidth","borderBottomStyle","flex","StyledContent","maxWidth","Divider","_ref2","text","dataE2eTestId","React","createElement","Box","space","vSpace","Text","variant"],"mappings":";;;;;AAUA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAAkC,OAAO;AAC/DC,EAAAA,OAAO,EAAE,MAAM;AACfC,EAAAA,cAAc,EAAE,QAAQ;AACxBC,EAAAA,UAAU,EAAE,QAAA;AACd,CAAC,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEH,MAAMM,aAAa,gBAAGT,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,eAAA;AAAA,CAAA,CAAA,CAAWK,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM;IAC/CE,iBAAiB,EAAED,KAAK,CAACE,MAAM,CAACC,KAAK,CAACC,OAAO,CAACC,OAAO;AACrDC,IAAAA,iBAAiB,EAAE,KAAK;AACxBC,IAAAA,iBAAiB,EAAE,OAAO;AAC1BC,IAAAA,IAAI,EAAE,GAAA;GACP,CAAA;AAAA,CAAC,EAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEH,MAAMiB,aAAa,gBAAGpB,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,eAAA;AAAA,CAAA,CAAA,CAAW,OAAO;AACtCgB,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC,CAAC,EAAApB,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,64DAAA,CAAA,CAAA;AAEI,SAASmB,OAAOA,CAAAC,KAAA,EAGc;EAAA,IAHb;IACtBC,IAAI;AACJ,IAAA,kBAAkB,EAAEC,aAAAA;AACR,GAAC,GAAAF,KAAA,CAAA;AACb,EAAA,IAAIC,IAAI,EAAE;AACR,IAAA,oBACEE,KAAA,CAAAC,aAAA,CAAC5B,eAAe,EAAA;MAAC,kBAAkB0B,EAAAA,aAAAA;KACjCC,eAAAA,KAAA,CAAAC,aAAA,CAAClB,aAAa,EAAE,IAAA,CAAC,EAChBe,IAAI,iBACHE,KAAA,CAAAC,aAAA,CAACP,aAAa,EAAA,IAAA,eACZM,KAAA,CAAAC,aAAA,CAACC,GAAG,EAAA;AAACC,MAAAA,KAAK,EAAC,KAAK;AAACC,MAAAA,MAAM,EAAC,MAAA;AAAM,KAAA,eAC5BJ,KAAA,CAAAC,aAAA,CAACI,IAAI,EAAA;AAACC,MAAAA,OAAO,EAAC,UAAA;AAAU,KAAA,EAAER,IAAW,CAClC,CACQ,CAChB,eACDE,KAAA,CAAAC,aAAA,CAAClB,aAAa,EAAE,IAAA,CACD,CAAC,CAAA;AAEtB,GAAA;AACA,EAAA,oBACEiB,KAAA,CAAAC,aAAA,CAAClB,aAAa,EAAA;AAAC,IAAA,kBAAA,EAAkBgB,aAAc;IAAC,YAAW,EAAA,SAAA;AAAS,GAAE,CAAC,CAAA;AAE3E;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { useOutsideClick } from \"../../shared/useOutsideClick\";\nimport {\n useAutoPosition,\n VerticalPosition,\n HorizontalPosition,\n} from \"../../shared/useAutoPosition\";\nimport { useKeyboard } from \"../../shared/useKeyboard\";\n\nimport { MenuItem, MenuItemProps } from \"./MenuItem\";\nimport { Button } from \"../Button/Button\";\nimport { IconName } from \"../Icon/Icon\";\nimport { Divider } from \"../Divider/Divider\";\nimport { ButtonSize } from \"../../types\";\n\ntype Separator = \"separator\";\n\nexport type DropdownItem = MenuItemProps | Separator;\nconst isSeperator = (item: DropdownItem) => item === \"separator\";\n\nexport type DropdownPrivateProps = {\n dropdownSquareCorners?:\n | boolean\n | (\"TopLeft\" | \"TopRight\" | \"BottomLeft\" | \"BottomRight\")[];\n};\n\nexport type DropdownMenuProps = {\n /** an array of menu items, contains \"label\" and \"onSelect\" */\n menuItems: DropdownItem[];\n /** the text variant of menu items */\n menuItemTextVariant?: \"uppercase\" | \"capitalize\" | \"lowercase\" | \"none\";\n /* Label */\n label?: string;\n /* Icon name */\n iconName?: IconName;\n /* Size of a trigger button */\n size?: ButtonSize;\n /* Dropdown button disabled state */\n disabled?: boolean;\n /** Dropdown menu open state callback */\n onMenuOpen?: (e: React.MouseEvent) => void;\n /** Dropdown menu close state callback */\n onMenuClose?: (e: React.MouseEvent) => void;\n privateProps?: DropdownPrivateProps;\n \"data-e2e-test-id\"?: string;\n};\n\nexport type MenuPositionProps = {\n verticalPosition: VerticalPosition;\n horizontalPosition: HorizontalPosition;\n};\n\nconst StyledContainer = styled.div<Partial<DropdownMenuProps>>(() => ({\n position: \"relative\",\n display: \"inline-block\",\n}));\n\nconst StyledMenu = styled.div<MenuPositionProps>(\n ({ theme, verticalPosition, horizontalPosition }) => ({\n position: \"absolute\",\n display: \"inline-block\",\n width: \"fit-content\",\n minWidth: theme.variables.size.dimension.dropdownMenu.width,\n right: 0,\n zIndex: 1,\n borderRadius: theme.variables.size.borderRadius.dropdown.m,\n boxShadow: theme.variables.shadow.card.c,\n backgroundColor: theme.values.color.background.layer_2,\n overflow: \"hidden\",\n paddingTop: theme.variables.size.spacing.xs,\n paddingBottom: theme.variables.size.spacing.xs,\n ...(verticalPosition === \"up\"\n ? { bottom: \"100%\", marginBottom: theme.variables.size.spacing.xs }\n : { top: \"100%\", marginTop: theme.variables.size.spacing.xs }),\n ...(horizontalPosition === \"right\"\n ? { right: \"100%\", transform: \"translateX(100%)\" }\n : {\n left: \"100%\",\n transform: \"translateX(-100%)\",\n }),\n })\n);\n\nconst StyledUl = styled.ul(() => ({\n margin: 0,\n padding: 0,\n}));\n\nconst StyledLi = styled.li(() => ({\n margin: 0,\n padding: 0,\n width: \"100%\",\n listStyleType: \"none\",\n whiteSpace: \"nowrap\",\n}));\n\nexport function DropdownMenu({\n menuItems,\n menuItemTextVariant,\n label,\n iconName,\n size,\n disabled,\n onMenuOpen,\n onMenuClose,\n privateProps: { dropdownSquareCorners },\n \"data-e2e-test-id\": dataE2eTestId,\n}: DropdownMenuProps): React.ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n const [focusIndex, setFocusIndex] = useState(-1);\n const containerRef = useRef(null);\n const buttonRef = useRef(null);\n const menuRef = useRef(null);\n\n // ---- Update menu open state\n const openMenu = useCallback(\n (e) => {\n setIsOpen(true);\n onMenuOpen(e);\n },\n [setIsOpen, onMenuOpen]\n );\n\n const closeMenu = useCallback(\n (e) => {\n setIsOpen(false);\n onMenuClose(e);\n },\n [setIsOpen, onMenuClose]\n );\n\n const toggleMenu = useCallback(\n (e) => {\n if (!isOpen) {\n openMenu(e);\n } else {\n closeMenu(e);\n }\n },\n [isOpen, openMenu, closeMenu]\n );\n\n // ---- Close menu on outside click\n useOutsideClick(containerRef, closeMenu, isOpen);\n\n // ---- Close menu when the menu is not on focus\n const blurEvent = useCallback(\n (e: React.FocusEvent) => {\n if (!e.relatedTarget || !menuRef.current.contains(e.relatedTarget)) {\n closeMenu(e);\n }\n },\n [closeMenu]\n );\n\n // ---- Close menu on item select\n const items: DropdownItem[] = menuItems.map((item) => {\n if (isSeperator(item)) return item;\n\n const menuItem = item as MenuItemProps;\n\n return {\n ...menuItem,\n onSelect: (e) => {\n menuItem.onSelect(e);\n closeMenu(e);\n },\n };\n });\n\n // ---- Menu position\n const [verticalPosition, horizontalPosition] = useAutoPosition(\n buttonRef,\n menuRef,\n isOpen\n );\n\n // ---- Keyboard shortcuts\n useKeyboard(\n {\n \"ArrowUp ArrowDown\": openMenu,\n },\n buttonRef,\n !isOpen\n );\n\n useKeyboard(\n {\n Escape: closeMenu,\n ArrowUp: () => {\n setFocusIndex(focusIndex - 1);\n },\n ArrowDown: () => {\n setFocusIndex(focusIndex + 1);\n },\n },\n containerRef,\n isOpen\n );\n\n useEffect(() => {\n if (menuRef && menuRef.current) {\n const buttons = menuRef.current.querySelectorAll(\"button\");\n\n buttons[Math.abs(focusIndex) % buttons.length].focus();\n }\n }, [menuRef, focusIndex]);\n\n return (\n <StyledContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"DropdownMenu\"\n ref={containerRef}\n >\n <div ref={buttonRef}>\n <Button\n size={size}\n rightIcon={iconName}\n variant=\"tertiary\"\n onClick={toggleMenu}\n disabled={disabled}\n privateProps={{\n squareCorners: dropdownSquareCorners,\n }}\n >\n {label}\n </Button>\n </div>\n\n {isOpen && (\n <StyledMenu\n verticalPosition={verticalPosition}\n horizontalPosition={horizontalPosition}\n ref={menuRef}\n >\n <StyledUl role=\"menu\">\n {items.map((item, index) => {\n if (isSeperator(item))\n return (\n <StyledLi\n role=\"separator\"\n // eslint-disable-next-line react/no-array-index-key\n key={`menuitem-separator-${index}`}\n >\n <Divider />\n </StyledLi>\n );\n\n const menuItem = item as MenuItemProps;\n\n return (\n <StyledLi role=\"menuitem\" key={`menuitem-${menuItem.label}`}>\n <MenuItem\n onSelect={menuItem.onSelect}\n onBlur={blurEvent}\n icon={menuItem.icon}\n label={menuItem.label}\n emphasized={menuItem.emphasized}\n textVariant={menuItemTextVariant}\n />\n </StyledLi>\n );\n })}\n </StyledUl>\n </StyledMenu>\n )}\n </StyledContainer>\n );\n}\n\nconst defaultProps: Partial<DropdownMenuProps> = {\n iconName: \"more-horizontal\",\n menuItems: [],\n menuItemTextVariant: \"uppercase\",\n size: \"m\",\n disabled: false,\n onMenuOpen: () => undefined,\n onMenuClose: () => undefined,\n privateProps: {\n dropdownSquareCorners: false,\n },\n};\n\nDropdownMenu.defaultProps = defaultProps;\n"],"names":["isSeperator","item","StyledContainer","_styled","process","env","NODE_ENV","target","label","position","display","StyledMenu","_ref","theme","verticalPosition","horizontalPosition","width","minWidth","variables","size","dimension","dropdownMenu","right","zIndex","borderRadius","dropdown","m","boxShadow","shadow","card","c","backgroundColor","values","color","background","layer_2","overflow","paddingTop","spacing","xs","paddingBottom","bottom","marginBottom","top","marginTop","transform","left","StyledUl","margin","padding","StyledLi","listStyleType","whiteSpace","DropdownMenu","_ref2","menuItems","menuItemTextVariant","iconName","disabled","onMenuOpen","onMenuClose","privateProps","dropdownSquareCorners","dataE2eTestId","isOpen","setIsOpen","useState","focusIndex","setFocusIndex","containerRef","useRef","buttonRef","menuRef","openMenu","useCallback","e","closeMenu","toggleMenu","useOutsideClick","blurEvent","relatedTarget","current","contains","items","map","menuItem","onSelect","useAutoPosition","useKeyboard","Escape","ArrowUp","ArrowDown","useEffect","buttons","querySelectorAll","Math","abs","length","focus","React","createElement","ref","Button","rightIcon","variant","onClick","squareCorners","role","index","key","Divider","MenuItem","onBlur","icon","emphasized","textVariant","defaultProps","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { useOutsideClick } from \"../../shared/useOutsideClick\";\nimport {\n useAutoPosition,\n VerticalPosition,\n HorizontalPosition,\n} from \"../../shared/useAutoPosition\";\nimport { useKeyboard } from \"../../shared/useKeyboard\";\n\nimport { MenuItem, MenuItemProps } from \"./MenuItem\";\nimport { Button } from \"../Button/Button\";\nimport { IconName } from \"../Icon/Icon\";\nimport { Divider } from \"../Divider/Divider\";\nimport { ButtonSize } from \"../../types\";\n\ntype Separator = \"separator\";\n\nexport type DropdownItem = MenuItemProps | Separator;\nconst isSeperator = (item: DropdownItem) => item === \"separator\";\n\nexport type DropdownPrivateProps = {\n dropdownSquareCorners?:\n | boolean\n | (\"TopLeft\" | \"TopRight\" | \"BottomLeft\" | \"BottomRight\")[];\n};\n\nexport type DropdownMenuProps = {\n /** an array of menu items, contains \"label\" and \"onSelect\" */\n menuItems: DropdownItem[];\n /** the text variant of menu items */\n menuItemTextVariant?: \"uppercase\" | \"capitalize\" | \"lowercase\" | \"none\";\n /* Label */\n label?: string;\n /* Icon name */\n iconName?: IconName;\n /* Size of a trigger button */\n size?: ButtonSize;\n /* Dropdown button disabled state */\n disabled?: boolean;\n /** Dropdown menu open state callback */\n onMenuOpen?: (e: React.MouseEvent) => void;\n /** Dropdown menu close state callback */\n onMenuClose?: (e: React.MouseEvent) => void;\n privateProps?: DropdownPrivateProps;\n \"data-e2e-test-id\"?: string;\n};\n\nexport type MenuPositionProps = {\n verticalPosition: VerticalPosition;\n horizontalPosition: HorizontalPosition;\n};\n\nconst StyledContainer = styled.div<Partial<DropdownMenuProps>>(() => ({\n position: \"relative\",\n display: \"inline-block\",\n}));\n\nconst StyledMenu = styled.div<MenuPositionProps>(\n ({ theme, verticalPosition, horizontalPosition }) => ({\n position: \"absolute\",\n display: \"inline-block\",\n width: \"fit-content\",\n minWidth: theme.variables.size.dimension.dropdownMenu.width,\n right: 0,\n zIndex: 1,\n borderRadius: theme.variables.size.borderRadius.dropdown.m,\n boxShadow: theme.variables.shadow.card.c,\n backgroundColor: theme.values.color.background.layer_2,\n overflow: \"hidden\",\n paddingTop: theme.variables.size.spacing.xs,\n paddingBottom: theme.variables.size.spacing.xs,\n ...(verticalPosition === \"up\"\n ? { bottom: \"100%\", marginBottom: theme.variables.size.spacing.xs }\n : { top: \"100%\", marginTop: theme.variables.size.spacing.xs }),\n ...(horizontalPosition === \"right\"\n ? { right: \"100%\", transform: \"translateX(100%)\" }\n : {\n left: \"100%\",\n transform: \"translateX(-100%)\",\n }),\n })\n);\n\nconst StyledUl = styled.ul(() => ({\n margin: 0,\n padding: 0,\n}));\n\nconst StyledLi = styled.li(() => ({\n margin: 0,\n padding: 0,\n width: \"100%\",\n listStyleType: \"none\",\n whiteSpace: \"nowrap\",\n}));\n\nexport function DropdownMenu({\n menuItems,\n menuItemTextVariant,\n label,\n iconName,\n size,\n disabled,\n onMenuOpen,\n onMenuClose,\n privateProps: { dropdownSquareCorners },\n \"data-e2e-test-id\": dataE2eTestId,\n}: DropdownMenuProps): React.ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n const [focusIndex, setFocusIndex] = useState(-1);\n const containerRef = useRef(null);\n const buttonRef = useRef(null);\n const menuRef = useRef(null);\n\n // ---- Update menu open state\n const openMenu = useCallback(\n (e) => {\n setIsOpen(true);\n onMenuOpen(e);\n },\n [setIsOpen, onMenuOpen]\n );\n\n const closeMenu = useCallback(\n (e) => {\n setIsOpen(false);\n onMenuClose(e);\n },\n [setIsOpen, onMenuClose]\n );\n\n const toggleMenu = useCallback(\n (e) => {\n if (!isOpen) {\n openMenu(e);\n } else {\n closeMenu(e);\n }\n },\n [isOpen, openMenu, closeMenu]\n );\n\n // ---- Close menu on outside click\n useOutsideClick(containerRef, closeMenu, isOpen);\n\n // ---- Close menu when the menu is not on focus\n const blurEvent = useCallback(\n (e: React.FocusEvent) => {\n if (!e.relatedTarget || !menuRef.current.contains(e.relatedTarget)) {\n closeMenu(e);\n }\n },\n [closeMenu]\n );\n\n // ---- Close menu on item select\n const items: DropdownItem[] = menuItems.map((item) => {\n if (isSeperator(item)) return item;\n\n const menuItem = item as MenuItemProps;\n\n return {\n ...menuItem,\n onSelect: (e) => {\n menuItem.onSelect(e);\n closeMenu(e);\n },\n };\n });\n\n // ---- Menu position\n const [verticalPosition, horizontalPosition] = useAutoPosition(\n buttonRef,\n menuRef,\n isOpen\n );\n\n // ---- Keyboard shortcuts\n useKeyboard(\n {\n \"ArrowUp ArrowDown\": openMenu,\n },\n buttonRef,\n !isOpen\n );\n\n useKeyboard(\n {\n Escape: closeMenu,\n ArrowUp: () => {\n setFocusIndex(focusIndex - 1);\n },\n ArrowDown: () => {\n setFocusIndex(focusIndex + 1);\n },\n },\n containerRef,\n isOpen\n );\n\n useEffect(() => {\n if (menuRef && menuRef.current) {\n const buttons = menuRef.current.querySelectorAll(\"button\");\n\n buttons[Math.abs(focusIndex) % buttons.length].focus();\n }\n }, [menuRef, focusIndex]);\n\n return (\n <StyledContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"DropdownMenu\"\n ref={containerRef}\n >\n <div ref={buttonRef}>\n <Button\n size={size}\n rightIcon={iconName}\n variant=\"tertiary\"\n onClick={toggleMenu}\n disabled={disabled}\n privateProps={{\n squareCorners: dropdownSquareCorners,\n }}\n >\n {label}\n </Button>\n </div>\n\n {isOpen && (\n <StyledMenu\n verticalPosition={verticalPosition}\n horizontalPosition={horizontalPosition}\n ref={menuRef}\n >\n <StyledUl role=\"menu\">\n {items.map((item, index) => {\n if (isSeperator(item))\n return (\n <StyledLi\n role=\"separator\"\n // eslint-disable-next-line react/no-array-index-key\n key={`menuitem-separator-${index}`}\n >\n <Divider />\n </StyledLi>\n );\n\n const menuItem = item as MenuItemProps;\n\n return (\n <StyledLi role=\"menuitem\" key={`menuitem-${menuItem.label}`}>\n <MenuItem\n onSelect={menuItem.onSelect}\n onBlur={blurEvent}\n icon={menuItem.icon}\n label={menuItem.label}\n emphasized={menuItem.emphasized}\n textVariant={menuItemTextVariant}\n />\n </StyledLi>\n );\n })}\n </StyledUl>\n </StyledMenu>\n )}\n </StyledContainer>\n );\n}\n\nconst defaultProps: Partial<DropdownMenuProps> = {\n iconName: \"more-horizontal\",\n menuItems: [],\n menuItemTextVariant: \"uppercase\",\n size: \"m\",\n disabled: false,\n onMenuOpen: () => undefined,\n onMenuClose: () => undefined,\n privateProps: {\n dropdownSquareCorners: false,\n },\n};\n\nDropdownMenu.defaultProps = defaultProps;\n"],"names":["isSeperator","item","StyledContainer","_styled","process","env","NODE_ENV","target","label","position","display","StyledMenu","_ref","theme","verticalPosition","horizontalPosition","width","minWidth","variables","size","dimension","dropdownMenu","right","zIndex","borderRadius","dropdown","m","boxShadow","shadow","card","c","backgroundColor","values","color","background","layer_2","overflow","paddingTop","spacing","xs","paddingBottom","bottom","marginBottom","top","marginTop","transform","left","StyledUl","margin","padding","StyledLi","listStyleType","whiteSpace","DropdownMenu","_ref2","menuItems","menuItemTextVariant","iconName","disabled","onMenuOpen","onMenuClose","privateProps","dropdownSquareCorners","dataE2eTestId","isOpen","setIsOpen","useState","focusIndex","setFocusIndex","containerRef","useRef","buttonRef","menuRef","openMenu","useCallback","e","closeMenu","toggleMenu","useOutsideClick","blurEvent","relatedTarget","current","contains","items","map","menuItem","onSelect","useAutoPosition","useKeyboard","Escape","ArrowUp","ArrowDown","useEffect","buttons","querySelectorAll","Math","abs","length","focus","React","createElement","ref","Button","rightIcon","variant","onClick","squareCorners","role","index","key","Divider","MenuItem","onBlur","icon","emphasized","textVariant","defaultProps","undefined"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/DropdownMenu/MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ButtonSize } from \"../../types\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\n\nexport type MenuItemProps = {\n children?: React.ReactNode;\n /** The text for the menu item */\n label: string;\n /** The size of the menu item */\n size?: ButtonSize;\n /** Menu item disabled state */\n disabled?: boolean;\n /** On select menu item callback */\n onSelect: (e: React.MouseEvent) => void;\n /* Icon name */\n icon?: IconName;\n /* Emphasized by \"filled-dot\" right icon */\n emphasized?: boolean;\n /* Text transform (uppercase as default) */\n textVariant?: \"uppercase\" | \"capitalize\" | \"lowercase\" | \"none\";\n onBlur?: (e: React.FocusEvent) => void;\n};\n\nconst StyledMenuItem = styled.button<Partial<MenuItemProps>>(\n ({ theme, size, textVariant }) => ({\n \"&[type='button']\": {\n appearance: \"none\",\n MozAppearance: \"none\",\n WebkitAppearance: \"none\",\n },\n display: \"inline-block\",\n width: \"100%\",\n border: 0,\n color: theme.values.color.text.button.tertiary.base,\n backgroundColor: theme.values.color.background.button.tertiary.base,\n textTransform: textVariant || \"uppercase\",\n textDecoration: \"none\",\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.header.xxs,\n lineHeight: theme.variables.size.lineHeight.header.xxs,\n letterSpacing: 0.5,\n fontWeight: theme.variables.weight.bold,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.values.color.background.button.tertiary.hover,\n color: theme.values.color.text.button.tertiary.hover,\n },\n \"&:active\": {\n backgroundColor: theme.values.color.background.button.tertiary.active,\n color: theme.values.color.text.button.tertiary.active,\n },\n \"&:disabled\": {\n backgroundColor: theme.values.color.background.button.tertiary.disabled,\n color: theme.values.color.text.button.tertiary.disabled,\n },\n ...(size === \"s\" && {\n padding: theme.variables.size.spacing.xs,\n }),\n ...(size === \"m\" && {\n padding: theme.variables.size.spacing.s,\n }),\n ...(size === \"l\" && {\n padding: theme.variables.size.spacing.m,\n }),\n \"&[disabled], &:disabled\": {\n pointerEvents: \"none\",\n },\n })\n);\n\nexport function MenuItem({\n label,\n size = \"m\",\n disabled = false,\n onSelect,\n icon,\n emphasized = false,\n textVariant = \"uppercase\",\n onBlur,\n}: MenuItemProps): React.ReactElement {\n return (\n <StyledMenuItem\n size={size}\n disabled={disabled}\n onClick={onSelect}\n textVariant={textVariant}\n onBlur={onBlur}\n >\n <Inline vAlignItems=\"center\" alignItems=\"left\" space=\"xxs\" noWrap>\n {icon && (\n <Icon\n size=\"s\"\n name={icon}\n data-testid={`menuItem-${icon}`}\n data-e2e-test-id={`menuItem-${icon}`}\n />\n )}\n {label}\n {emphasized && (\n <Icon\n size=\"s\"\n name=\"filled-dot\"\n data-testid=\"menuItem-emphasized\"\n data-e2e-test-id=\"menuItem-emphasized\"\n />\n )}\n </Inline>\n </StyledMenuItem>\n );\n}\n"],"names":["StyledMenuItem","_styled","process","env","NODE_ENV","target","label","_ref","theme","size","textVariant","appearance","MozAppearance","WebkitAppearance","display","width","border","color","values","text","button","tertiary","base","backgroundColor","background","textTransform","textDecoration","fontFamily","variables","lato","fontSize","font","header","xxs","lineHeight","letterSpacing","fontWeight","weight","bold","cursor","hover","active","disabled","padding","spacing","xs","s","m","pointerEvents","MenuItem","_ref2","onSelect","icon","emphasized","onBlur","React","createElement","onClick","Inline","vAlignItems","alignItems","space","noWrap","Icon","name"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/DropdownMenu/MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ButtonSize } from \"../../types\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\n\nexport type MenuItemProps = {\n children?: React.ReactNode;\n /** The text for the menu item */\n label: string;\n /** The size of the menu item */\n size?: ButtonSize;\n /** Menu item disabled state */\n disabled?: boolean;\n /** On select menu item callback */\n onSelect: (e: React.MouseEvent) => void;\n /* Icon name */\n icon?: IconName;\n /* Emphasized by \"filled-dot\" right icon */\n emphasized?: boolean;\n /* Text transform (uppercase as default) */\n textVariant?: \"uppercase\" | \"capitalize\" | \"lowercase\" | \"none\";\n onBlur?: (e: React.FocusEvent) => void;\n};\n\nconst StyledMenuItem = styled.button<Partial<MenuItemProps>>(\n ({ theme, size, textVariant }) => ({\n \"&[type='button']\": {\n appearance: \"none\",\n MozAppearance: \"none\",\n WebkitAppearance: \"none\",\n },\n display: \"inline-block\",\n width: \"100%\",\n border: 0,\n color: theme.values.color.text.button.tertiary.base,\n backgroundColor: theme.values.color.background.button.tertiary.base,\n textTransform: textVariant || \"uppercase\",\n textDecoration: \"none\",\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.header.xxs,\n lineHeight: theme.variables.size.lineHeight.header.xxs,\n letterSpacing: 0.5,\n fontWeight: theme.variables.weight.bold,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.values.color.background.button.tertiary.hover,\n color: theme.values.color.text.button.tertiary.hover,\n },\n \"&:active\": {\n backgroundColor: theme.values.color.background.button.tertiary.active,\n color: theme.values.color.text.button.tertiary.active,\n },\n \"&:disabled\": {\n backgroundColor: theme.values.color.background.button.tertiary.disabled,\n color: theme.values.color.text.button.tertiary.disabled,\n },\n ...(size === \"s\" && {\n padding: theme.variables.size.spacing.xs,\n }),\n ...(size === \"m\" && {\n padding: theme.variables.size.spacing.s,\n }),\n ...(size === \"l\" && {\n padding: theme.variables.size.spacing.m,\n }),\n \"&[disabled], &:disabled\": {\n pointerEvents: \"none\",\n },\n })\n);\n\nexport function MenuItem({\n label,\n size = \"m\",\n disabled = false,\n onSelect,\n icon,\n emphasized = false,\n textVariant = \"uppercase\",\n onBlur,\n}: MenuItemProps): React.ReactElement {\n return (\n <StyledMenuItem\n size={size}\n disabled={disabled}\n onClick={onSelect}\n textVariant={textVariant}\n onBlur={onBlur}\n >\n <Inline vAlignItems=\"center\" alignItems=\"left\" space=\"xxs\" noWrap>\n {icon && (\n <Icon\n size=\"s\"\n name={icon}\n data-testid={`menuItem-${icon}`}\n data-e2e-test-id={`menuItem-${icon}`}\n />\n )}\n {label}\n {emphasized && (\n <Icon\n size=\"s\"\n name=\"filled-dot\"\n data-testid=\"menuItem-emphasized\"\n data-e2e-test-id=\"menuItem-emphasized\"\n />\n )}\n </Inline>\n </StyledMenuItem>\n );\n}\n"],"names":["StyledMenuItem","_styled","process","env","NODE_ENV","target","label","_ref","theme","size","textVariant","appearance","MozAppearance","WebkitAppearance","display","width","border","color","values","text","button","tertiary","base","backgroundColor","background","textTransform","textDecoration","fontFamily","variables","lato","fontSize","font","header","xxs","lineHeight","letterSpacing","fontWeight","weight","bold","cursor","hover","active","disabled","padding","spacing","xs","s","m","pointerEvents","MenuItem","_ref2","onSelect","icon","emphasized","onBlur","React","createElement","onClick","Inline","vAlignItems","alignItems","space","noWrap","Icon","name"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/Form/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { Inline } from \"../../Inline/Inline\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { Icon } from \"../../Icon/Icon\";\n\nexport type CheckboxProps = {\n name: string;\n value?: string;\n checked?: boolean | undefined;\n label?: string | React.ComponentType;\n labelHint?: string;\n disabled?: boolean;\n onChange?: (e: React.FormEvent<HTMLInputElement>) => void;\n onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n} & Omit<FormFieldProps, \"labelHint\">;\n\nconst StyledContainer = styled.div(({ theme }) => ({\n userSelect: \"none\",\n display: \"block\",\n position: \"relative\",\n width: theme.variables.size.dimension.checkbox.m,\n height: theme.variables.size.dimension.checkbox.m,\n boxSizing: \"border-box\",\n}));\n\nconst StyledRealInput = styled.input(() => ({\n opacity: 0,\n cursor: \"pointer\",\n height: 0,\n width: 0,\n position: \"absolute\",\n}));\n\nconst StyledFakeInput = styled.span(({ theme }) => ({\n boxSizing: \"border-box\",\n width: theme.variables.size.dimension.checkbox.m,\n height: theme.variables.size.dimension.checkbox.m,\n borderRadius: theme.variables.size.borderRadius.checkbox.m,\n border: \"2px solid\",\n position: \"absolute\",\n top: 0,\n left: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n\n background: theme.values.color.background.checkbox.default,\n color: theme.values.color.icon.checkbox.default,\n borderColor: theme.values.color.border.checkbox.default,\n \"& svg\": {\n opacity: 0,\n },\n \"&: hover\": {\n borderColor: theme.values.color.border.checkbox.defaultHover,\n },\n\n \"input: focus-visible + &\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: \"Highlight\",\n },\n\n \"@media (-webkit-min-device-pixel-ratio:0)\": {\n \"input: focus-visible + &\": {\n outlineColor: \"-webkit-focus-ring-color\",\n outlineStyle: \"auto\",\n },\n },\n\n \"input:checked + & \": {\n border: 0,\n background: theme.values.color.background.checkbox.checked,\n\n \"&:hover\": {\n background: theme.values.color.background.checkbox.checkedHover,\n },\n\n svg: {\n opacity: 1,\n },\n },\n\n \"input:disabled + &\": {\n pointerEvents: \"none\",\n },\n}));\n\nexport function Checkbox({\n name,\n value = \"\",\n checked = undefined,\n label = \"\",\n labelHint = \"\",\n disabled = false,\n onChange,\n onClick,\n onBlur,\n onFocus,\n \"data-e2e-test-id\": dataE2eTestId,\n ...rest\n}: CheckboxProps): React.ReactElement {\n return (\n <FormField\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Checkbox\"\n {...rest}\n disabled={disabled}\n >\n <Inline space=\"m\" vAlignItems=\"top\" noWrap>\n <StyledContainer>\n <StyledRealInput\n type=\"checkbox\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n onClick={onClick}\n onBlur={onBlur}\n onFocus={onFocus}\n />\n <StyledFakeInput>\n <Icon size=\"s\" name=\"check\" />\n </StyledFakeInput>\n </StyledContainer>\n {label && (\n <div>\n {typeof label === \"string\" ? <Text>{label}</Text> : label}\n {labelHint && (\n <Text variant=\"secondary\" size=\"s\">\n {labelHint}\n </Text>\n )}\n </div>\n )}\n </Inline>\n </FormField>\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","userSelect","display","position","width","variables","size","dimension","checkbox","m","height","boxSizing","StyledRealInput","opacity","cursor","StyledFakeInput","_ref2","borderRadius","border","top","left","alignItems","justifyContent","background","values","color","default","icon","borderColor","defaultHover","outlineWidth","outlineStyle","outlineColor","checked","checkedHover","svg","pointerEvents","Checkbox","_ref3","name","value","undefined","labelHint","disabled","onChange","onClick","onBlur","onFocus","dataE2eTestId","rest","React","createElement","FormField","_extends","Inline","space","vAlignItems","noWrap","type","Icon","Text","variant"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/Form/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { Inline } from \"../../Inline/Inline\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { Icon } from \"../../Icon/Icon\";\n\nexport type CheckboxProps = {\n name: string;\n value?: string;\n checked?: boolean | undefined;\n label?: string | React.ComponentType;\n labelHint?: string;\n disabled?: boolean;\n onChange?: (e: React.FormEvent<HTMLInputElement>) => void;\n onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n} & Omit<FormFieldProps, \"labelHint\">;\n\nconst StyledContainer = styled.div(({ theme }) => ({\n userSelect: \"none\",\n display: \"block\",\n position: \"relative\",\n width: theme.variables.size.dimension.checkbox.m,\n height: theme.variables.size.dimension.checkbox.m,\n boxSizing: \"border-box\",\n}));\n\nconst StyledRealInput = styled.input(() => ({\n opacity: 0,\n cursor: \"pointer\",\n height: 0,\n width: 0,\n position: \"absolute\",\n}));\n\nconst StyledFakeInput = styled.span(({ theme }) => ({\n boxSizing: \"border-box\",\n width: theme.variables.size.dimension.checkbox.m,\n height: theme.variables.size.dimension.checkbox.m,\n borderRadius: theme.variables.size.borderRadius.checkbox.m,\n border: \"2px solid\",\n position: \"absolute\",\n top: 0,\n left: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n\n background: theme.values.color.background.checkbox.default,\n color: theme.values.color.icon.checkbox.default,\n borderColor: theme.values.color.border.checkbox.default,\n \"& svg\": {\n opacity: 0,\n },\n \"&: hover\": {\n borderColor: theme.values.color.border.checkbox.defaultHover,\n },\n\n \"input: focus-visible + &\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: \"Highlight\",\n },\n\n \"@media (-webkit-min-device-pixel-ratio:0)\": {\n \"input: focus-visible + &\": {\n outlineColor: \"-webkit-focus-ring-color\",\n outlineStyle: \"auto\",\n },\n },\n\n \"input:checked + & \": {\n border: 0,\n background: theme.values.color.background.checkbox.checked,\n\n \"&:hover\": {\n background: theme.values.color.background.checkbox.checkedHover,\n },\n\n svg: {\n opacity: 1,\n },\n },\n\n \"input:disabled + &\": {\n pointerEvents: \"none\",\n },\n}));\n\nexport function Checkbox({\n name,\n value = \"\",\n checked = undefined,\n label = \"\",\n labelHint = \"\",\n disabled = false,\n onChange,\n onClick,\n onBlur,\n onFocus,\n \"data-e2e-test-id\": dataE2eTestId,\n ...rest\n}: CheckboxProps): React.ReactElement {\n return (\n <FormField\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Checkbox\"\n {...rest}\n disabled={disabled}\n >\n <Inline space=\"m\" vAlignItems=\"top\" noWrap>\n <StyledContainer>\n <StyledRealInput\n type=\"checkbox\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n onClick={onClick}\n onBlur={onBlur}\n onFocus={onFocus}\n />\n <StyledFakeInput>\n <Icon size=\"s\" name=\"check\" />\n </StyledFakeInput>\n </StyledContainer>\n {label && (\n <div>\n {typeof label === \"string\" ? <Text>{label}</Text> : label}\n {labelHint && (\n <Text variant=\"secondary\" size=\"s\">\n {labelHint}\n </Text>\n )}\n </div>\n )}\n </Inline>\n </FormField>\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","userSelect","display","position","width","variables","size","dimension","checkbox","m","height","boxSizing","StyledRealInput","opacity","cursor","StyledFakeInput","_ref2","borderRadius","border","top","left","alignItems","justifyContent","background","values","color","default","icon","borderColor","defaultHover","outlineWidth","outlineStyle","outlineColor","checked","checkedHover","svg","pointerEvents","Checkbox","_ref3","name","value","undefined","labelHint","disabled","onChange","onClick","onBlur","onFocus","dataE2eTestId","rest","React","createElement","FormField","_extends","Inline","space","vAlignItems","noWrap","type","Icon","Text","variant"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormErrorMessages.js","sources":["../../../../../../src/components/Form/FormErrorMessages/FormErrorMessages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\n\nexport type FormErrorMessagesProps = {\n messages: string[];\n \"data-e2e-test-id\"?: string;\n};\n\nexport function FormErrorMessages({\n messages = [],\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormErrorMessagesProps): React.ReactElement {\n return (\n <Stack\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormErrorMessages\"\n space=\"zero\"\n >\n {messages.map((message) => (\n <Text size=\"xs\" key={message} variant=\"error\">\n {message}\n </Text>\n ))}\n </Stack>\n );\n}\n"],"names":["FormErrorMessages","_ref","messages","dataE2eTestId","React","createElement","Stack","space","map","message","Text","size","key","variant"],"mappings":";;;;AASO,SAASA,iBAAiBA,CAAAC,IAAA,EAGc;EAAA,IAHb;AAChCC,IAAAA,QAAQ,GAAG,EAAE;AACb,IAAA,kBAAkB,EAAEC,aAAAA;AACE,GAAC,GAAAF,IAAA,CAAA;AACvB,EAAA,oBACEG,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJ,IAAA,kBAAA,EAAkBH,aAAc;AAChC,IAAA,YAAA,EAAW,mBAAmB;AAC9BI,IAAAA,KAAK,EAAC,MAAA;GAELL,EAAAA,QAAQ,CAACM,GAAG,CAAEC,OAAO,iBACpBL,KAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,GAAG,EAAEH,OAAQ;AAACI,IAAAA,OAAO,EAAC,OAAA;GACnCJ,EAAAA,
|
|
1
|
+
{"version":3,"file":"FormErrorMessages.js","sources":["../../../../../../src/components/Form/FormErrorMessages/FormErrorMessages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\n\nexport type FormErrorMessagesProps = {\n messages: string[];\n \"data-e2e-test-id\"?: string;\n};\n\nexport function FormErrorMessages({\n messages = [],\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormErrorMessagesProps): React.ReactElement {\n return (\n <Stack\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormErrorMessages\"\n space=\"zero\"\n >\n {messages.map((message) => (\n <Text size=\"xs\" key={message} variant=\"error\">\n {message}\n </Text>\n ))}\n </Stack>\n );\n}\n"],"names":["FormErrorMessages","_ref","messages","dataE2eTestId","React","createElement","Stack","space","map","message","Text","size","key","variant"],"mappings":";;;;AASO,SAASA,iBAAiBA,CAAAC,IAAA,EAGc;EAAA,IAHb;AAChCC,IAAAA,QAAQ,GAAG,EAAE;AACb,IAAA,kBAAkB,EAAEC,aAAAA;AACE,GAAC,GAAAF,IAAA,CAAA;AACvB,EAAA,oBACEG,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJ,IAAA,kBAAA,EAAkBH,aAAc;AAChC,IAAA,YAAA,EAAW,mBAAmB;AAC9BI,IAAAA,KAAK,EAAC,MAAA;GAELL,EAAAA,QAAQ,CAACM,GAAG,CAAEC,OAAO,iBACpBL,KAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,GAAG,EAAEH,OAAQ;AAACI,IAAAA,OAAO,EAAC,OAAA;GACnCJ,EAAAA,OACG,CACP,CACI,CAAC,CAAA;AAEZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sources":["../../../../../../src/components/Form/FormField/FormField.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control */\n\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { FormErrorMessages } from \"../FormErrorMessages/FormErrorMessages\";\nimport { FormLabelText } from \"../FormLabelText/FormLabelText\";\n\nexport type FormFieldProps = {\n label?: string;\n labelHint?: string;\n errorMessages?: string[];\n hint?: string;\n disabled?: boolean;\n \"data-e2e-test-id\"?: string;\n /** @ignore */\n \"data-ds-id\"?: string;\n};\n\nexport type FormFieldComponentProps = {\n children: React.ReactNode[] | React.ReactElement;\n} & FormFieldProps;\n\nconst StyledFormField = styled.div<Partial<FormFieldProps>>(\n ({ theme, disabled }) =>\n disabled &&\n `\n opacity: ${theme.variables.opacity.form.disabled}\n`\n);\n\nexport function FormField({\n label = \"\",\n labelHint = \"\",\n hint = \"\",\n errorMessages = [],\n disabled = false,\n children,\n \"data-e2e-test-id\": dataE2eTestId,\n \"data-ds-id\": dataDsId = \"FormField\",\n}: FormFieldComponentProps): React.ReactElement {\n const validErrorMessages = errorMessages.filter((message) => message);\n return (\n <StyledFormField\n data-e2e-test-id={dataE2eTestId}\n data-ds-id={dataDsId}\n disabled={disabled}\n >\n <Stack space=\"xxs\">\n <label>\n <Stack space=\"xs\">\n {label && (\n <FormLabelText labelHint={labelHint}>{label}</FormLabelText>\n )}\n\n {children}\n </Stack>\n </label>\n {hint && !validErrorMessages.length && <Text size=\"xs\">{hint}</Text>}\n {!!validErrorMessages.length && (\n <FormErrorMessages messages={validErrorMessages} />\n )}\n </Stack>\n </StyledFormField>\n );\n}\n"],"names":["StyledFormField","_styled","process","env","NODE_ENV","target","label","_ref","theme","disabled","variables","opacity","form","FormField","_ref2","labelHint","hint","errorMessages","children","dataE2eTestId","dataDsId","validErrorMessages","filter","message","React","createElement","Stack","space","FormLabelText","length","Text","size","FormErrorMessages","messages"],"mappings":";;;;;;;AAyBA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CACtBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAClBE,QAAQ,IACP,CAAA;AACL,aAAeD,EAAAA,KAAK,CAACE,SAAS,CAACC,OAAO,CAACC,IAAI,CAACH,QAAS,CAAA;AACrD,CAAC,CAAA;AAAA,CAAA,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,
|
|
1
|
+
{"version":3,"file":"FormField.js","sources":["../../../../../../src/components/Form/FormField/FormField.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control */\n\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { FormErrorMessages } from \"../FormErrorMessages/FormErrorMessages\";\nimport { FormLabelText } from \"../FormLabelText/FormLabelText\";\n\nexport type FormFieldProps = {\n label?: string;\n labelHint?: string;\n errorMessages?: string[];\n hint?: string;\n disabled?: boolean;\n \"data-e2e-test-id\"?: string;\n /** @ignore */\n \"data-ds-id\"?: string;\n};\n\nexport type FormFieldComponentProps = {\n children: React.ReactNode[] | React.ReactElement;\n} & FormFieldProps;\n\nconst StyledFormField = styled.div<Partial<FormFieldProps>>(\n ({ theme, disabled }) =>\n disabled &&\n `\n opacity: ${theme.variables.opacity.form.disabled}\n`\n);\n\nexport function FormField({\n label = \"\",\n labelHint = \"\",\n hint = \"\",\n errorMessages = [],\n disabled = false,\n children,\n \"data-e2e-test-id\": dataE2eTestId,\n \"data-ds-id\": dataDsId = \"FormField\",\n}: FormFieldComponentProps): React.ReactElement {\n const validErrorMessages = errorMessages.filter((message) => message);\n return (\n <StyledFormField\n data-e2e-test-id={dataE2eTestId}\n data-ds-id={dataDsId}\n disabled={disabled}\n >\n <Stack space=\"xxs\">\n <label>\n <Stack space=\"xs\">\n {label && (\n <FormLabelText labelHint={labelHint}>{label}</FormLabelText>\n )}\n\n {children}\n </Stack>\n </label>\n {hint && !validErrorMessages.length && <Text size=\"xs\">{hint}</Text>}\n {!!validErrorMessages.length && (\n <FormErrorMessages messages={validErrorMessages} />\n )}\n </Stack>\n </StyledFormField>\n );\n}\n"],"names":["StyledFormField","_styled","process","env","NODE_ENV","target","label","_ref","theme","disabled","variables","opacity","form","FormField","_ref2","labelHint","hint","errorMessages","children","dataE2eTestId","dataDsId","validErrorMessages","filter","message","React","createElement","Stack","space","FormLabelText","length","Text","size","FormErrorMessages","messages"],"mappings":";;;;;;;AAyBA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,WAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,WAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CACtBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAClBE,QAAQ,IACP,CAAA;AACL,aAAeD,EAAAA,KAAK,CAACE,SAAS,CAACC,OAAO,CAACC,IAAI,CAACH,QAAS,CAAA;AACrD,CAAC,CAAA;AAAA,CAAA,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,kuFACD,CAAC,CAAA;AAEM,SAASS,SAASA,CAAAC,KAAA,EASuB;EAAA,IATtB;AACxBR,IAAAA,KAAK,GAAG,EAAE;AACVS,IAAAA,SAAS,GAAG,EAAE;AACdC,IAAAA,IAAI,GAAG,EAAE;AACTC,IAAAA,aAAa,GAAG,EAAE;AAClBR,IAAAA,QAAQ,GAAG,KAAK;IAChBS,QAAQ;AACR,IAAA,kBAAkB,EAAEC,aAAa;IACjC,YAAY,EAAEC,QAAQ,GAAG,WAAA;AACF,GAAC,GAAAN,KAAA,CAAA;EACxB,MAAMO,kBAAkB,GAAGJ,aAAa,CAACK,MAAM,CAAEC,OAAO,IAAKA,OAAO,CAAC,CAAA;AACrE,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACzB,eAAe,EAAA;AACd,IAAA,kBAAA,EAAkBmB,aAAc;AAChC,IAAA,YAAA,EAAYC,QAAS;AACrBX,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,eAEnBe,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAACC,IAAAA,KAAK,EAAC,KAAA;GACXH,eAAAA,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA,IAAA,eACED,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAA;AAAI,GAAA,EACdrB,KAAK,iBACJkB,KAAA,CAAAC,aAAA,CAACG,aAAa,EAAA;AAACb,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAAET,KAAqB,CAC5D,EAEAY,QACI,CACF,CAAC,EACPF,IAAI,IAAI,CAACK,kBAAkB,CAACQ,MAAM,iBAAIL,KAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAAEf,IAAW,CAAC,EACnE,CAAC,CAACK,kBAAkB,CAACQ,MAAM,iBAC1BL,KAAA,CAAAC,aAAA,CAACO,iBAAiB,EAAA;AAACC,IAAAA,QAAQ,EAAEZ,kBAAAA;GAAqB,CAE/C,CACQ,CAAC,CAAA;AAEtB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldGroup.js","sources":["../../../../../../src/components/Form/FormFieldGroup/FormFieldGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { FormErrorMessages } from \"../FormErrorMessages/FormErrorMessages\";\nimport { FormLabelText } from \"../FormLabelText/FormLabelText\";\n\nexport type FormFieldGroupProps = {\n label?: string;\n labelHint?: string;\n children: React.ReactNode[] | React.ReactElement;\n errorMessages?: string[];\n hint?: string;\n disabled?: boolean;\n \"data-e2e-test-id\"?: string;\n};\n\nconst StyledDiv = styled.div<Partial<FormFieldGroupProps>>(\n ({ theme, disabled }) => ({\n opacity: disabled ? theme.variables.opacity.form.disabled : \"\",\n })\n);\n\nexport function FormFieldGroup({\n children,\n label = \"\",\n labelHint = \"\",\n errorMessages = [],\n hint = \"\",\n disabled = false,\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormFieldGroupProps): React.ReactElement {\n const validErrorMessages = errorMessages.filter((message) => message);\n return (\n <StyledDiv\n disabled={disabled}\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormFieldGroup\"\n >\n <Stack space=\"m\">\n {label && <FormLabelText labelHint={labelHint}>{label}</FormLabelText>}\n {children}\n {hint && !validErrorMessages.length && <Text size=\"xs\">{hint}</Text>}\n {!!validErrorMessages.length && (\n <FormErrorMessages messages={validErrorMessages} />\n )}\n </Stack>\n </StyledDiv>\n );\n}\n"],"names":["StyledDiv","_styled","process","env","NODE_ENV","target","label","_ref","theme","disabled","opacity","variables","form","FormFieldGroup","_ref2","children","labelHint","errorMessages","hint","dataE2eTestId","validErrorMessages","filter","message","React","createElement","Stack","space","FormLabelText","length","Text","size","FormErrorMessages","messages"],"mappings":";;;;;;;AAkBA,MAAMA,SAAS,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,WAAA;AAAA,CAAA,CAAA,CAChBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAF,IAAA,CAAA;EAAA,OAAM;AACxBG,IAAAA,OAAO,EAAED,QAAQ,GAAGD,KAAK,CAACG,SAAS,CAACD,OAAO,CAACE,IAAI,CAACH,QAAQ,GAAG,EAAA;GAC7D,CAAA;AAAA,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,
|
|
1
|
+
{"version":3,"file":"FormFieldGroup.js","sources":["../../../../../../src/components/Form/FormFieldGroup/FormFieldGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Stack } from \"../../Stack/Stack\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { FormErrorMessages } from \"../FormErrorMessages/FormErrorMessages\";\nimport { FormLabelText } from \"../FormLabelText/FormLabelText\";\n\nexport type FormFieldGroupProps = {\n label?: string;\n labelHint?: string;\n children: React.ReactNode[] | React.ReactElement;\n errorMessages?: string[];\n hint?: string;\n disabled?: boolean;\n \"data-e2e-test-id\"?: string;\n};\n\nconst StyledDiv = styled.div<Partial<FormFieldGroupProps>>(\n ({ theme, disabled }) => ({\n opacity: disabled ? theme.variables.opacity.form.disabled : \"\",\n })\n);\n\nexport function FormFieldGroup({\n children,\n label = \"\",\n labelHint = \"\",\n errorMessages = [],\n hint = \"\",\n disabled = false,\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormFieldGroupProps): React.ReactElement {\n const validErrorMessages = errorMessages.filter((message) => message);\n return (\n <StyledDiv\n disabled={disabled}\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormFieldGroup\"\n >\n <Stack space=\"m\">\n {label && <FormLabelText labelHint={labelHint}>{label}</FormLabelText>}\n {children}\n {hint && !validErrorMessages.length && <Text size=\"xs\">{hint}</Text>}\n {!!validErrorMessages.length && (\n <FormErrorMessages messages={validErrorMessages} />\n )}\n </Stack>\n </StyledDiv>\n );\n}\n"],"names":["StyledDiv","_styled","process","env","NODE_ENV","target","label","_ref","theme","disabled","opacity","variables","form","FormFieldGroup","_ref2","children","labelHint","errorMessages","hint","dataE2eTestId","validErrorMessages","filter","message","React","createElement","Stack","space","FormLabelText","length","Text","size","FormErrorMessages","messages"],"mappings":";;;;;;;AAkBA,MAAMA,SAAS,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,WAAA;AAAA,CAAA,CAAA,CAChBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAF,IAAA,CAAA;EAAA,OAAM;AACxBG,IAAAA,OAAO,EAAED,QAAQ,GAAGD,KAAK,CAACG,SAAS,CAACD,OAAO,CAACE,IAAI,CAACH,QAAQ,GAAG,EAAA;GAC7D,CAAA;AAAA,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,8xEACJ,CAAC,CAAA;AAEM,SAASS,cAAcA,CAAAC,KAAA,EAQc;EAAA,IARb;IAC7BC,QAAQ;AACRT,IAAAA,KAAK,GAAG,EAAE;AACVU,IAAAA,SAAS,GAAG,EAAE;AACdC,IAAAA,aAAa,GAAG,EAAE;AAClBC,IAAAA,IAAI,GAAG,EAAE;AACTT,IAAAA,QAAQ,GAAG,KAAK;AAChB,IAAA,kBAAkB,EAAEU,aAAAA;AACD,GAAC,GAAAL,KAAA,CAAA;EACpB,MAAMM,kBAAkB,GAAGH,aAAa,CAACI,MAAM,CAAEC,OAAO,IAAKA,OAAO,CAAC,CAAA;AACrE,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACxB,SAAS,EAAA;AACRS,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,kBAAA,EAAkBU,aAAc;IAChC,YAAW,EAAA,gBAAA;AAAgB,GAAA,eAE3BI,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAACC,IAAAA,KAAK,EAAC,GAAA;AAAG,GAAA,EACbpB,KAAK,iBAAIiB,KAAA,CAAAC,aAAA,CAACG,aAAa,EAAA;AAACX,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAAEV,KAAqB,CAAC,EACrES,QAAQ,EACRG,IAAI,IAAI,CAACE,kBAAkB,CAACQ,MAAM,iBAAIL,KAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAAEZ,IAAW,CAAC,EACnE,CAAC,CAACE,kBAAkB,CAACQ,MAAM,iBAC1BL,KAAA,CAAAC,aAAA,CAACO,iBAAiB,EAAA;AAACC,IAAAA,QAAQ,EAAEZ,kBAAAA;GAAqB,CAE/C,CACE,CAAC,CAAA;AAEhB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabelText.js","sources":["../../../../../../src/components/Form/FormLabelText/FormLabelText.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { Inline } from \"../../Inline/Inline\";\nimport { H6 } from \"../../Typography/Header/Header\";\n\nconst StyledLabelHint = styled.span(({ theme }) => ({\n color: theme.values.color.text.secondary,\n textTransform: \"uppercase\",\n fontWeight: theme.variables.weight.normal,\n}));\n\nexport type FormLabelTextProps = {\n children: string;\n labelHint?: string;\n \"data-e2e-test-id\"?: string;\n};\n\nexport function FormLabelText({\n children,\n labelHint = \"\",\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormLabelTextProps): React.ReactElement {\n return (\n <Inline\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormLabelText\"\n space=\"xxs\"\n vAlignItems=\"bottom\"\n >\n {children && <H6>{children}</H6>}\n {children && labelHint && (\n <H6>\n <StyledLabelHint>({labelHint})</StyledLabelHint>\n </H6>\n )}\n </Inline>\n );\n}\n"],"names":["StyledLabelHint","_styled","process","env","NODE_ENV","target","label","_ref","theme","color","values","text","secondary","textTransform","fontWeight","variables","weight","normal","FormLabelText","_ref2","children","labelHint","dataE2eTestId","React","createElement","Inline","space","vAlignItems","H6"],"mappings":";;;;;AAKA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,MAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAAYC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM;IAClDE,KAAK,EAAED,KAAK,CAACE,MAAM,CAACD,KAAK,CAACE,IAAI,CAACC,SAAS;AACxCC,IAAAA,aAAa,EAAE,WAAW;AAC1BC,IAAAA,UAAU,EAAEN,KAAK,CAACO,SAAS,CAACC,MAAM,CAACC,MAAAA;GACpC,CAAA;AAAA,CAAC,EAAAf,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,6hDAAA,CAAA,CAAA;AAQI,SAASc,aAAaA,CAAAC,KAAA,EAIc;EAAA,IAJb;IAC5BC,QAAQ;AACRC,IAAAA,SAAS,GAAG,EAAE;AACd,IAAA,kBAAkB,EAAEC,aAAAA;AACF,GAAC,GAAAH,KAAA,CAAA;AACnB,EAAA,oBACEI,KAAA,CAAAC,aAAA,CAACC,MAAM,EAAA;AACL,IAAA,kBAAA,EAAkBH,aAAc;AAChC,IAAA,YAAA,EAAW,eAAe;AAC1BI,IAAAA,KAAK,EAAC,KAAK;AACXC,IAAAA,WAAW,EAAC,QAAA;AAAQ,GAAA,EAEnBP,QAAQ,iBAAIG,KAAA,CAAAC,aAAA,CAACI,EAAE,EAAER,IAAAA,EAAAA,
|
|
1
|
+
{"version":3,"file":"FormLabelText.js","sources":["../../../../../../src/components/Form/FormLabelText/FormLabelText.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { Inline } from \"../../Inline/Inline\";\nimport { H6 } from \"../../Typography/Header/Header\";\n\nconst StyledLabelHint = styled.span(({ theme }) => ({\n color: theme.values.color.text.secondary,\n textTransform: \"uppercase\",\n fontWeight: theme.variables.weight.normal,\n}));\n\nexport type FormLabelTextProps = {\n children: string;\n labelHint?: string;\n \"data-e2e-test-id\"?: string;\n};\n\nexport function FormLabelText({\n children,\n labelHint = \"\",\n \"data-e2e-test-id\": dataE2eTestId,\n}: FormLabelTextProps): React.ReactElement {\n return (\n <Inline\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"FormLabelText\"\n space=\"xxs\"\n vAlignItems=\"bottom\"\n >\n {children && <H6>{children}</H6>}\n {children && labelHint && (\n <H6>\n <StyledLabelHint>({labelHint})</StyledLabelHint>\n </H6>\n )}\n </Inline>\n );\n}\n"],"names":["StyledLabelHint","_styled","process","env","NODE_ENV","target","label","_ref","theme","color","values","text","secondary","textTransform","fontWeight","variables","weight","normal","FormLabelText","_ref2","children","labelHint","dataE2eTestId","React","createElement","Inline","space","vAlignItems","H6"],"mappings":";;;;;AAKA,MAAMA,eAAe,gBAAGC,OAAA,CAAA,MAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAAYC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM;IAClDE,KAAK,EAAED,KAAK,CAACE,MAAM,CAACD,KAAK,CAACE,IAAI,CAACC,SAAS;AACxCC,IAAAA,aAAa,EAAE,WAAW;AAC1BC,IAAAA,UAAU,EAAEN,KAAK,CAACO,SAAS,CAACC,MAAM,CAACC,MAAAA;GACpC,CAAA;AAAA,CAAC,EAAAf,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,6hDAAA,CAAA,CAAA;AAQI,SAASc,aAAaA,CAAAC,KAAA,EAIc;EAAA,IAJb;IAC5BC,QAAQ;AACRC,IAAAA,SAAS,GAAG,EAAE;AACd,IAAA,kBAAkB,EAAEC,aAAAA;AACF,GAAC,GAAAH,KAAA,CAAA;AACnB,EAAA,oBACEI,KAAA,CAAAC,aAAA,CAACC,MAAM,EAAA;AACL,IAAA,kBAAA,EAAkBH,aAAc;AAChC,IAAA,YAAA,EAAW,eAAe;AAC1BI,IAAAA,KAAK,EAAC,KAAK;AACXC,IAAAA,WAAW,EAAC,QAAA;AAAQ,GAAA,EAEnBP,QAAQ,iBAAIG,KAAA,CAAAC,aAAA,CAACI,EAAE,EAAER,IAAAA,EAAAA,QAAa,CAAC,EAC/BA,QAAQ,IAAIC,SAAS,iBACpBE,KAAA,CAAAC,aAAA,CAACI,EAAE,EAAA,IAAA,eACDL,KAAA,CAAAC,aAAA,CAACxB,eAAe,EAAC,IAAA,EAAA,GAAC,EAACqB,SAAS,EAAC,GAAkB,CAC7C,CAEA,CAAC,CAAA;AAEb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../../../src/components/Form/Input/Input.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React, { forwardRef, RefObject } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Theme } from \"@emotion/react\";\nimport { Icon, IconName } from \"../../Icon/Icon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { Text } from \"../../Typography/Text/Text\";\n\nexport type InputProps = {\n name: string;\n value: string;\n icon?: IconName;\n placeholder?: string;\n /**\n * Set to true to toggle error state\n */\n hasError?: boolean;\n /**\n * Set to true to disabled input\n */\n disabled?: boolean;\n type?: \"text\" | \"password\" | \"number\";\n onChange?: (e: React.FormEvent<HTMLInputElement>) => void;\n onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n areaLabel?: string;\n tabIndex?: number;\n autoComplete?: string;\n privateProps?: { isTransparent?: boolean };\n} & FormFieldProps;\n\nconst StyledContainer = styled.div(() => ({\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"row\",\n position: \"relative\",\n zIndex: 1,\n}));\n\nconst StyledIconContainer = styled.div(({ theme }) => ({\n position: \"absolute\",\n right: theme.variables.size.spacing.xs,\n}));\n\nconst handleBorderColor = (\n theme: Theme,\n isTransparent: boolean,\n hasError: boolean\n) => {\n if (isTransparent) return \"transparent\";\n if (hasError) return theme.values.color.border.input.error;\n return theme.values.color.border.input.default;\n};\n\nconst handleBackgroundColor = (theme: Theme, isTransparent: boolean) => {\n if (isTransparent) return \"transparent\";\n return theme.values.color.background.input.default;\n};\n\nconst handleRightPadding = (theme: Theme, icon: string) => {\n if (icon) {\n return `calc(${theme.variables.size.spacing.s} + ${theme.variables.size.font.icon.m})`;\n }\n\n return \"\";\n};\n\nconst StyledInput = styled.input<InputProps>(\n ({ theme, privateProps, hasError, icon }) => ({\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.text.m,\n lineHeight: theme.variables.size.lineHeight.text.m,\n borderRadius: theme.variables.size.borderRadius.input.s,\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n width: \"100%\",\n padding: theme.variables.size.spacing.xs,\n boxSizing: \"border-box\",\n color: theme.values.color.text.secondary,\n borderColor: handleBorderColor(\n theme,\n privateProps?.isTransparent,\n hasError\n ),\n backgroundColor: handleBackgroundColor(theme, privateProps?.isTransparent),\n \"&.error\": {\n borderColor: theme.values.color.border.input.error,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n },\n \"&::placeholder\": {\n color: theme.values.color.text.placeholder,\n opacity: 1,\n },\n \"&:-ms-input-placeholder\": {\n color: theme.values.color.text.placeholder,\n },\n \"&::-ms-input-placeholder\": {\n color: theme.values.color.text.placeholder,\n },\n paddingRight: handleRightPadding(theme, icon),\n })\n);\n\nexport const InputRaw = forwardRef(\n (\n {\n name,\n value,\n placeholder,\n hasError = false,\n disabled,\n onChange,\n onClick,\n onBlur,\n onFocus,\n type = \"text\",\n icon,\n areaLabel,\n tabIndex,\n autoComplete = \"on\",\n privateProps = {},\n }: InputProps,\n ref: RefObject<HTMLInputElement>\n ): React.ReactElement => (\n <StyledContainer>\n <StyledInput\n type={type}\n value={value}\n placeholder={placeholder}\n name={name}\n disabled={disabled}\n onClick={onClick}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n aria-label={areaLabel}\n ref={ref}\n tabIndex={tabIndex}\n autoComplete={autoComplete}\n hasError={hasError}\n privateProps={privateProps}\n icon={icon}\n />\n {icon && (\n <StyledIconContainer>\n <Text as=\"span\" variant=\"tertiary\">\n <Icon name={icon} size=\"m\" />\n </Text>\n </StyledIconContainer>\n )}\n </StyledContainer>\n )\n);\n\nexport function Input({\n name,\n value,\n placeholder,\n hasError = false,\n onChange,\n onClick,\n onBlur,\n onFocus,\n type = \"text\",\n icon,\n tabIndex,\n areaLabel,\n autoComplete = \"on\",\n privateProps = {},\n ...rest\n}: InputProps): React.ReactElement {\n return (\n <FormField data-ds-id=\"Input\" {...(rest as FormFieldProps)}>\n <InputRaw\n name={name}\n value={value}\n type={type}\n icon={icon}\n placeholder={placeholder}\n hasError={hasError}\n disabled={rest.disabled}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onClick={onClick}\n tabIndex={tabIndex}\n areaLabel={areaLabel}\n autoComplete={autoComplete}\n privateProps={privateProps}\n />\n </FormField>\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","width","display","alignItems","flexDirection","position","zIndex","StyledIconContainer","_ref","theme","right","variables","size","spacing","xs","handleBorderColor","isTransparent","hasError","values","color","border","input","error","default","handleBackgroundColor","background","handleRightPadding","icon","s","font","m","StyledInput","_ref2","privateProps","fontFamily","lato","fontSize","text","lineHeight","borderRadius","borderWidth","borderStyle","padding","boxSizing","secondary","borderColor","backgroundColor","pointerEvents","placeholder","opacity","paddingRight","InputRaw","forwardRef","_ref3","ref","name","value","disabled","onChange","onClick","onBlur","onFocus","type","areaLabel","tabIndex","autoComplete","React","createElement","Text","as","variant","Icon","Input","_ref4","rest","FormField","_extends"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../../../src/components/Form/Input/Input.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React, { forwardRef, RefObject } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Theme } from \"@emotion/react\";\nimport { Icon, IconName } from \"../../Icon/Icon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { Text } from \"../../Typography/Text/Text\";\n\nexport type InputProps = {\n name: string;\n value: string;\n icon?: IconName;\n placeholder?: string;\n /**\n * Set to true to toggle error state\n */\n hasError?: boolean;\n /**\n * Set to true to disabled input\n */\n disabled?: boolean;\n type?: \"text\" | \"password\" | \"number\";\n onChange?: (e: React.FormEvent<HTMLInputElement>) => void;\n onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n areaLabel?: string;\n tabIndex?: number;\n autoComplete?: string;\n privateProps?: { isTransparent?: boolean };\n} & FormFieldProps;\n\nconst StyledContainer = styled.div(() => ({\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"row\",\n position: \"relative\",\n zIndex: 1,\n}));\n\nconst StyledIconContainer = styled.div(({ theme }) => ({\n position: \"absolute\",\n right: theme.variables.size.spacing.xs,\n}));\n\nconst handleBorderColor = (\n theme: Theme,\n isTransparent: boolean,\n hasError: boolean\n) => {\n if (isTransparent) return \"transparent\";\n if (hasError) return theme.values.color.border.input.error;\n return theme.values.color.border.input.default;\n};\n\nconst handleBackgroundColor = (theme: Theme, isTransparent: boolean) => {\n if (isTransparent) return \"transparent\";\n return theme.values.color.background.input.default;\n};\n\nconst handleRightPadding = (theme: Theme, icon: string) => {\n if (icon) {\n return `calc(${theme.variables.size.spacing.s} + ${theme.variables.size.font.icon.m})`;\n }\n\n return \"\";\n};\n\nconst StyledInput = styled.input<InputProps>(\n ({ theme, privateProps, hasError, icon }) => ({\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.text.m,\n lineHeight: theme.variables.size.lineHeight.text.m,\n borderRadius: theme.variables.size.borderRadius.input.s,\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n width: \"100%\",\n padding: theme.variables.size.spacing.xs,\n boxSizing: \"border-box\",\n color: theme.values.color.text.secondary,\n borderColor: handleBorderColor(\n theme,\n privateProps?.isTransparent,\n hasError\n ),\n backgroundColor: handleBackgroundColor(theme, privateProps?.isTransparent),\n \"&.error\": {\n borderColor: theme.values.color.border.input.error,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n },\n \"&::placeholder\": {\n color: theme.values.color.text.placeholder,\n opacity: 1,\n },\n \"&:-ms-input-placeholder\": {\n color: theme.values.color.text.placeholder,\n },\n \"&::-ms-input-placeholder\": {\n color: theme.values.color.text.placeholder,\n },\n paddingRight: handleRightPadding(theme, icon),\n })\n);\n\nexport const InputRaw = forwardRef(\n (\n {\n name,\n value,\n placeholder,\n hasError = false,\n disabled,\n onChange,\n onClick,\n onBlur,\n onFocus,\n type = \"text\",\n icon,\n areaLabel,\n tabIndex,\n autoComplete = \"on\",\n privateProps = {},\n }: InputProps,\n ref: RefObject<HTMLInputElement>\n ): React.ReactElement => (\n <StyledContainer>\n <StyledInput\n type={type}\n value={value}\n placeholder={placeholder}\n name={name}\n disabled={disabled}\n onClick={onClick}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n aria-label={areaLabel}\n ref={ref}\n tabIndex={tabIndex}\n autoComplete={autoComplete}\n hasError={hasError}\n privateProps={privateProps}\n icon={icon}\n />\n {icon && (\n <StyledIconContainer>\n <Text as=\"span\" variant=\"tertiary\">\n <Icon name={icon} size=\"m\" />\n </Text>\n </StyledIconContainer>\n )}\n </StyledContainer>\n )\n);\n\nexport function Input({\n name,\n value,\n placeholder,\n hasError = false,\n onChange,\n onClick,\n onBlur,\n onFocus,\n type = \"text\",\n icon,\n tabIndex,\n areaLabel,\n autoComplete = \"on\",\n privateProps = {},\n ...rest\n}: InputProps): React.ReactElement {\n return (\n <FormField data-ds-id=\"Input\" {...(rest as FormFieldProps)}>\n <InputRaw\n name={name}\n value={value}\n type={type}\n icon={icon}\n placeholder={placeholder}\n hasError={hasError}\n disabled={rest.disabled}\n onChange={onChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onClick={onClick}\n tabIndex={tabIndex}\n areaLabel={areaLabel}\n autoComplete={autoComplete}\n privateProps={privateProps}\n />\n </FormField>\n );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","width","display","alignItems","flexDirection","position","zIndex","StyledIconContainer","_ref","theme","right","variables","size","spacing","xs","handleBorderColor","isTransparent","hasError","values","color","border","input","error","default","handleBackgroundColor","background","handleRightPadding","icon","s","font","m","StyledInput","_ref2","privateProps","fontFamily","lato","fontSize","text","lineHeight","borderRadius","borderWidth","borderStyle","padding","boxSizing","secondary","borderColor","backgroundColor","pointerEvents","placeholder","opacity","paddingRight","InputRaw","forwardRef","_ref3","ref","name","value","disabled","onChange","onClick","onBlur","onFocus","type","areaLabel","tabIndex","autoComplete","React","createElement","Text","as","variant","Icon","Input","_ref4","rest","FormField","_extends"],"mappings":"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"}
|